Markdown editor in progress + Login and session process completed

pages/user/login.vue

@@ -1,46 +1,74 @@
 <script setup lang="ts">
+import { hydrate } from 'vue';
+import { ZodError } from 'zod';
 import { schema, type Login } from '~/schemas/login';
 
 definePageMeta({
-    auth: {
-        disconnectedOnly: true,
-        connectedRedirect: '/user/profile'
-    }
+    usersGoesTo: '/user/profile'
 });
 
 const state = reactive<Login>({
-    username: '',
+    usernameOrEmail: '',
     password: ''
 });
 
-const { status, login } = useAuth();
+const { data: result, status, error, refresh } = await useFetch('/api/auth/login', {
+    body: state,
+    immediate: false,
+    method: 'POST',
+    watch: false,
+    ignoreResponseError: true,
+})
 
 const usernameError = ref("");
 const passwordError = ref("");
+const generalError = ref("");
 
 async function submit()
 {
+    if(state.password === "")
+        return;
+
     const data = schema.safeParse(state);
 
-    if(data.success && state.password !== "")
+    if(data.success)
     {
-        let errors = await login(data.data.username, data.data.password);
+        await refresh()
 
-        if(status.value === AuthStatus.connected)
+        const login = result.value;
+        if(!login || !login.success)
         {
-            await navigateTo('/user/profile', { replace: true });
+            handleErrors(login?.error ?? error.value!);
         }
-        else
+        else if(status.value === 'success' && login.success)
         {
-            errors = errors?.issues ?? errors;
-            usernameError.value = errors?.find((e: any) => e.path.includes("username"))?.message ?? "";
-            passwordError.value = errors?.find((e: any) => e.path.includes("password"))?.message ?? "";
+            console.log(await navigateTo('/user/profile'));
         }
     }
     else
     {
-        usernameError.value = data.error?.issues.find(e => e.path.includes("username"))?.message ?? "";
-        passwordError.value = data.error?.issues.find(e => e.path.includes("password"))?.message ?? "";
+        handleErrors(data.error);
+    }
+}
+function handleErrors(error: Error | ZodError)
+{
+    if(error.hasOwnProperty('issues'))
+    {
+        for(const err of (error as ZodError).issues)
+        {
+            if(err.path.includes('username'))
+            {
+                usernameError.value = err.message;
+            }
+            if(err.path.includes('password'))
+            {
+                passwordError.value = err.message;
+            }
+        }
+    }
+    else
+    {
+        generalError.value = error?.message ?? 'Erreur inconnue.';
     }
 }
 </script>
@@ -51,20 +79,20 @@ async function submit()
     </Head>
     <div class="site-body-center-column">
         <div class="render-container flex align-center justify-center">
-            <form v-if="status === AuthStatus.disconnected" @submit.prevent="submit" class="input-form input-form-wide">
+            <form @submit.prevent="submit" class="input-form input-form-wide">
                 <h1>Connexion</h1>
-                <Input type="text" autocomplete="username" v-model="state.username"
+                <Input type="text" autocomplete="username" v-model="state.usernameOrEmail"
                     placeholder="" title="Nom d'utilisateur ou adresse mail" :error="usernameError" />
                 <Input type="password" autocomplete="current-password" v-model="state.password"
                     placeholder="" title="Mot de passe"
                     :error="passwordError" />
-                <button>Se connecter</button>
+                <span v-if="generalError" class="input-error">{{ generalError }}</span>
+                <button>
+                    <div class="loading" v-if="status === 'pending'"></div>
+                    <template v-else>Se connecter</template>
+                </button>
                 <NuxtLink :to="{ path: `/user/register`, force: true }">Pas de compte ?</NuxtLink>
             </form>
-            <div v-else-if="status === AuthStatus.loading" class="input-form"><div class="loading"></div></div>
-            <div v-else class="not-found-container">
-                <div class="not-found-title">👀 Vous n'avez rien à faire ici. 👀</div>
-            </div>
         </div>
     </div>
 </template>