feature(validation) refactor login validation

Author: rohrig

composables/useAuth.ts

@@ -1,6 +1,7 @@
 import { useRouter, useState } from "#app";
 import { ISession } from "~~/types/ISession";
 import { IUser } from "~/types/IUser";
+import useErrorMapper from "./useErrorMapper";
 
 export const useAuthCookie = () => useCookie('auth_token')
 
@@ -62,9 +63,7 @@ export async function registerWithEmail(
 
     return { hasErrors: false, loggedIn: true }
   } catch (error: any) {
-    const parsedErrors = JSON.parse(error.data.data)
-    const errorMap = new Map<string, { message: InputValidation; }>(Object.entries(parsedErrors))
-    return { hasErrors: true, errors: errorMap }
+    return useErrorMapper(error.data.data)
   }
 }
 
@@ -73,16 +72,13 @@ export async function loginWithEmail(usernameOrEmail: string, password: string):
     const result = await $fetch('/api/auth/login', { method: 'POST', body: { usernameOrEmail: usernameOrEmail, password: password } })
 
     if (!result?.id) {
-      debugger
       throw Error('something went wrong')
     }
     useState('user').value = result
     await useRouter().push('/topics')
 
     return { hasErrors: false, loggedIn: true }
   } catch (error: any) {
-    const parsedErrors = JSON.parse(error.data.data)
-    const errorMap = new Map<string, { message: InputValidation; }>(Object.entries(parsedErrors))
-    return { hasErrors: true, errors: errorMap }
+    return useErrorMapper(error.data.data)
   }
 }

composables/useErrorMapper.ts

@@ -0,0 +1,5 @@
+export default (errorData: string) => {
+    const parsedErrors = JSON.parse(errorData)
+    const errorMap = new Map<string, { message: InputValidation; }>(Object.entries(parsedErrors))
+    return { hasErrors: true, errors: errorMap }
+}

pages/login.vue

@@ -5,22 +5,19 @@ import type { Ref } from "vue"
 
 const usernameOrEmail = ref('')
 const password = ref('')
-const hasError: Ref<boolean | null> = ref(null)
-const errorMessage: Ref<string | null> = ref(null)
-const errors: Ref<Map<string, { message: InputValidation }> | undefined> = ref(new Map<string, { message: InputValidation }>())
-
-// definePageMeta({
-//   middleware: 'guest'
-// })
 
+const errors: Ref<Map<string, { message: InputValidation; }> | undefined> = ref(new Map<string, { message: InputValidation }>())
 let response: FormValidation
 
+definePageMeta({
+  middleware: 'guest'
+})
+
+
+
 async function postLoginForm() {
   response = await loginWithEmail(usernameOrEmail.value, password.value)
   errors.value = response.errors
-  const test = errors.value
-  debugger
-  console.log('errors', errors.value)
 }
 </script>
 
@@ -50,18 +47,6 @@ async function postLoginForm() {
           </ul>
         </div>
 
-        <div v-if="hasError" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
-          role="alert">
-          <strong class="font-bold">Oops, try again! </strong>
-          <span class="block sm:inline">{{ errorMessage }}</span>
-          <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
-            <svg class="fill-current h-6 w-6 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-              <title>Close</title>
-              <path
-                d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
-            </svg>
-          </span>
-        </div>
         <form v-if="true" v-on:submit.prevent class="mt-8 space-y-6" action="#" method="POST">
           <input type="hidden" name="remember" value="true">
           <div class="rounded-md shadow-sm -space-y-px mb-1">

pages/register.vue

@@ -7,14 +7,14 @@ const email: Ref<string> = ref('');
 const password: Ref<string> = ref('');
 const username: Ref<string> = ref('');
 const name: Ref<string> = ref('');
+
+  
 const errors: Ref<Map<string, { message: InputValidation; }> | undefined> = ref(new Map<string, { message: InputValidation }>())
 let response: FormValidation
 
 async function postRegisterForm() {
   response = await registerWithEmail(username.value, name.value, email.value, password.value);
   errors.value = response.errors
-  const test = errors.value
-  debugger
 };
 
 </script>