Frontend: update login modal error display

frontend/composables/user.ts

@@ -15,10 +15,15 @@ const userLogin = async (email: String, password: String) => {
 
 	const user = userSchema.safeParse({ email, password })
 
-	if (!user.success) return user.error.format()
+	if (!user.success) return user.error.flatten().fieldErrors
 
 	await useCustomFetch('/sanctum/csrf-cookie')
-	await useCustomFetch('/login', { method: 'POST', body: user.data })
+	const { error } = await useCustomFetch('/login', {
+		method: 'POST',
+		body: user.data,
+	})
+
+	if (error) return { user: 'Invalid User' }
 
 	await getUser()
 }
@@ -35,7 +40,12 @@ const userSignup = async (data: unknown) => {
 
 	if (!newUser.success) return newUser.error.format()
 
-	await useCustomFetch('/register', { method: 'POST', body: newUser.data })
+	const { error } = await useCustomFetch('/register', {
+		method: 'POST',
+		body: newUser.data,
+	})
+
+	if (error) return error
 
 	await getUser()
 }

frontend/pages/login/index.vue

@@ -1,101 +1,140 @@
 <script setup lang="ts">
 definePageMeta({
-    middleware: ['auth'],
+	middleware: ['auth'],
 })
 
 const user = useUser()
 
 const userCredential = reactive({
-    name: '',
+	name: '',
-    email: '',
+	email: '',
-    password: '',
+	password: '',
-    password_confirmation: '',
+	password_confirmation: '',
 })
 
 const isSigningIn = ref<Boolean>(false)
 const isSignUp = ref<Boolean>(false)
 
 const errors = reactive({
-    email: '',
+	email: '',
-    password: '',
+	password: '',
-    user: '',
+	user: '',
 })
 
+const resetErrors = () => {
+	errors.email = ''
+	errors.password = ''
+	errors.user = ''
+}
+
 const login = async () => {
-    isSigningIn.value = true
+	resetErrors()
-    const error = await userLogin(userCredential.email, userCredential.password)
+
+	isSigningIn.value = true
+	const error = await userLogin(userCredential.email, userCredential.password)
 
-    if (error) {
+	setTimeout(() => (isSigningIn.value = false), 500)
-        errors.email = error.email ? error.email._errors.join(',') : ''
+	if (!error) return
-        errors.password = error.password ? error.password._errors.join(',') : ''
-        // errors.user = error.user ? error.user._errors.join(',') : ''
-    }
 
-    setTimeout(() => (isSigningIn.value = false), 500)
+	for (const [key, value] of Object.entries(error)) {
+		if (key === 'email' || key === 'password') {
+			errors[key] = value.join('')
+		} else if (key === 'user') errors[key] = value
+	}
 }
 
 const toggleSignup = () => {
-    isSignUp.value = !isSignUp.value
+	isSignUp.value = !isSignUp.value
 }
 
 const signup = async () => {
-    isSigningIn.value = true
+	isSigningIn.value = true
-    const error = await userSignup(userCredential)
+	const error = await userSignup(userCredential)
-    setTimeout(() => (isSigningIn.value = false), 500)
+	setTimeout(() => (isSigningIn.value = false), 500)
 }
 
 watch(
-    () => user.value,
+	() => user.value,
-    () => {
+	() => {
-        if (user.value) useRouter().push('/')
+		if (user.value) useRouter().push('/')
-    }
+	}
 )
 </script>
 
 <template>
-    <div class="absolute flex h-screen w-screen items-center justify-center p-4">
+	<div
-        <div
+		class="absolute flex h-screen w-screen items-center justify-center p-4">
-            class="flex w-96 flex-col items-center justify-center gap-2 rounded-xl border border-lightgray bg-secondary p-6">
+		<div
-            <label v-if="isSignUp" class="mt-2 w-full">
+			@keyup.enter="isSignUp ? signup() : login()"
-                Name
+			class="flex w-96 flex-col items-center justify-center gap-2 rounded-xl border border-lightgray bg-secondary p-6">
-            </label>
+			<label
-            <input v-if="isSignUp" type="text" v-model="userCredential.name" class="w-full rounded-md" />
+				v-if="isSignUp"
-
+				class="mt-2 w-full">
-            <label class="mt-2 w-full"> Email </label>
+				Name
-            <input type="text" v-model="userCredential.email" class="w-full rounded-md" />
+			</label>
-            <span v-if="errors.email" class="w-full text-red-400">
+			<input
-                {{ errors.email }}
+				v-if="isSignUp"
-            </span>
+				type="text"
-
+				v-model="userCredential.name"
-            <label class="mt-2 w-full"> Password </label>
+				class="w-full rounded-md" />
-            <input type="password" v-model="userCredential.password" class="w-full rounded-md" />
+
-            <span v-if="errors.password" class="w-full text-red-400">
+			<label class="mt-2 w-full"> Email </label>
-                {{ errors.password }}
+			<input
-            </span>
+				type="text"
-
+				v-model="userCredential.email"
-            <label v-if="isSignUp" class="mt-2 w-full">
+				class="w-full rounded-md" />
-                Password Confirmation
+			<span
-            </label>
+				v-if="errors.email"
-            <input v-if="isSignUp" type="password" v-model="userCredential.password_confirmation"
+				class="w-full text-red-400">
-                class="w-full rounded-md" />
+				{{ errors.email }}
-
+			</span>
-            <div v-if="errors.user" class="mt-4 text-red-400">
+
-                {{ errors.user }}
+			<label class="mt-2 w-full"> Password </label>
-            </div>
+			<input
-
+				type="password"
-            <button @click="isSignUp ? signup() : login()"
+				v-model="userCredential.password"
-                class="mt-6 flex gap-2 rounded-full border border-lightgray bg-blue-500 px-6 py-2">
+				class="w-full rounded-md" />
-                <Icon v-if="isSigningIn" name="loading" />
+			<span
-                <div> {{ isSignUp ? 'Sign up' : 'Sign in' }} </div>
+				v-if="errors.password"
-            </button>
+				class="w-full text-red-400">
-
+				{{ errors.password }}
-            <div @click="toggleSignup()" class="mt-4 text-blue-500 underline">
+			</span>
-                {{
+
-                    isSignUp
+			<label
-                    ? 'Already have an account? Sign in'
+				v-if="isSignUp"
-                    : 'No account? Sign up'
+				class="mt-2 w-full">
-                }}
+				Password Confirmation
-            </div>
+			</label>
-        </div>
+			<input
-    </div>
+				v-if="isSignUp"
+				type="password"
+				v-model="userCredential.password_confirmation"
+				class="w-full rounded-md" />
+
+			<div
+				v-if="errors.user"
+				class="mt-4 text-red-400">
+				{{ errors.user }}
+			</div>
+
+			<button
+				@click="isSignUp ? signup() : login()"
+				class="mt-6 flex gap-2 rounded-full border border-lightgray bg-blue-500 px-6 py-2">
+				<Icon
+					v-if="isSigningIn"
+					name="loading" />
+				<div> {{ isSignUp ? 'Sign up' : 'Sign in' }} </div>
+			</button>
+
+			<div
+				@click="toggleSignup()"
+				class="mt-4 text-blue-500 underline">
+				{{
+					isSignUp
+						? 'Already have an account? Sign in'
+						: 'No account? Sign up'
+				}}
+			</div>
+		</div>
+	</div>
 </template>