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

@@ -21,17 +21,26 @@ const errors = reactive({
 	user: '',
 })
 
+const resetErrors = () => {
+	errors.email = ''
+	errors.password = ''
+	errors.user = ''
+}
+
 const login = async () => {
+	resetErrors()
+
 	isSigningIn.value = true
 	const error = await userLogin(userCredential.email, userCredential.password)
 
-    if (error) {
-        errors.email = error.email ? error.email._errors.join(',') : ''
-        errors.password = error.password ? error.password._errors.join(',') : ''
-        // errors.user = error.user ? error.user._errors.join(',') : ''
-    }
-
 	setTimeout(() => (isSigningIn.value = false), 500)
+	if (!error) return
+
+	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 = () => {
@@ -53,43 +62,73 @@ watch(
 </script>
 
 <template>
-    <div class="absolute flex h-screen w-screen items-center justify-center p-4">
 	<div
+		class="absolute flex h-screen w-screen items-center justify-center p-4">
+		<div
+			@keyup.enter="isSignUp ? signup() : login()"
 			class="flex w-96 flex-col items-center justify-center gap-2 rounded-xl border border-lightgray bg-secondary p-6">
-            <label v-if="isSignUp" class="mt-2 w-full">
+			<label
+				v-if="isSignUp"
+				class="mt-2 w-full">
 				Name
 			</label>
-            <input v-if="isSignUp" type="text" v-model="userCredential.name" class="w-full rounded-md" />
+			<input
+				v-if="isSignUp"
+				type="text"
+				v-model="userCredential.name"
+				class="w-full rounded-md" />
 
 			<label class="mt-2 w-full"> Email </label>
-            <input type="text" v-model="userCredential.email" class="w-full rounded-md" />
+			<input
-            <span v-if="errors.email" class="w-full text-red-400">
+				type="text"
+				v-model="userCredential.email"
+				class="w-full rounded-md" />
+			<span
+				v-if="errors.email"
+				class="w-full text-red-400">
 				{{ errors.email }}
 			</span>
 
 			<label class="mt-2 w-full"> Password </label>
-            <input type="password" v-model="userCredential.password" class="w-full rounded-md" />
+			<input
-            <span v-if="errors.password" class="w-full text-red-400">
+				type="password"
+				v-model="userCredential.password"
+				class="w-full rounded-md" />
+			<span
+				v-if="errors.password"
+				class="w-full text-red-400">
 				{{ errors.password }}
 			</span>
 
-            <label v-if="isSignUp" class="mt-2 w-full">
+			<label
+				v-if="isSignUp"
+				class="mt-2 w-full">
 				Password Confirmation
 			</label>
-            <input v-if="isSignUp" type="password" v-model="userCredential.password_confirmation"
+			<input
+				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">
+			<div
+				v-if="errors.user"
+				class="mt-4 text-red-400">
 				{{ errors.user }}
 			</div>
 
-            <button @click="isSignUp ? signup() : login()"
+			<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" />
+				<Icon
+					v-if="isSigningIn"
+					name="loading" />
 				<div> {{ isSignUp ? 'Sign up' : 'Sign in' }} </div>
 			</button>
 
-            <div @click="toggleSignup()" class="mt-4 text-blue-500 underline">
+			<div
+				@click="toggleSignup()"
+				class="mt-4 text-blue-500 underline">
 				{{
 					isSignUp
 						? 'Already have an account? Sign in'