Markdown editor in progress + Login and session process completed

pages/user/register.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
+import { ZodError } from 'zod';
 import { schema, type Registration } from '~/schemas/registration';
 
 definePageMeta({
-    auth: {
-        disconnectedOnly: true,
-        connectedRedirect: '/user/profile'
-    }
+    usersGoesTo: '/user/profile'
 });
 
 const state = reactive<Registration>({
@@ -16,8 +14,6 @@ const state = reactive<Registration>({
 
 const confirmPassword = ref("");
 
-const { status, register } = useAuth();
-
 const checkedLength = computed(() => state.password.length >= 8 && state.password.length <= 128);
 const checkedLowerUpper = computed(() => state.password.toLowerCase() !== state.password && state.password.toUpperCase() !== state.password);
 const checkedDigit = computed(() => /[0-9]/.test(state.password));
@@ -25,30 +21,61 @@ const checkedSymbol = computed(() => " !\"#$%&'()*+,-./:;<=>?@[]^_`{|}~".split("
 
 const usernameError = ref("");
 const emailError = ref("");
+const generalError = ref("");
+
+const { data: result, status, error, execute } = await useFetch('/api/auth/register', {
+    body: state,
+    immediate: false,
+    method: 'POST',
+    watch: false,
+    ignoreResponseError: true,
+})
 
 async function submit()
 {
+    if(state.password === "" || state.password !== confirmPassword.value)
+        return;
+
     const data = schema.safeParse(state);
 
-    if(data.success && state.password !== "" && confirmPassword.value === state.password)
+    if(data.success)
     {
-        let errors = await register(data.data.username, data.data.email, data.data.password, {});
+        await execute()
 
-        if(status.value === AuthStatus.connected)
+        const login = result.value;
+        if(!login || !login.success)
         {
-            await navigateTo('/');
+            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 ?? "";
-            emailError.value = errors?.find((e: any) => e.path.includes("email"))?.message ?? "";
+            console.log(await navigateTo('/user/profile'));
         }
     }
     else
     {
-        usernameError.value = data.error?.issues.find(e => e.path.includes("username"))?.message ?? "";
-        emailError.value = data.error?.issues.find(e => e.path.includes("email"))?.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('email'))
+            {
+                emailError.value = err.message;
+            }
+        }
+    }
+    else
+    {
+        generalError.value = error?.message ?? 'Erreur inconnue.';
     }
 }
 </script>
@@ -60,7 +87,7 @@ 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>Inscription</h1>
                 <Input type="text" autocomplete="username" v-model="state.username"
                     placeholder="Entrez un nom d'utiliateur" title="Nom d'utilisateur" :error="usernameError" />
@@ -85,14 +112,12 @@ async function submit()
                 </div>
                 <Input type="password" v-model="confirmPassword" placeholder="Confirmer le mot de passe"
                     title="Confirmer le mot de passe"
+                    autocomplete="new-password"
                     :error="confirmPassword === '' || confirmPassword === state.password ? '' : 'Les mots de passe saisies ne sont pas identique'" />
-                <button>S'inscrire</button>
+                <span v-if="generalError" class="input-error">{{ generalError }}</span>
+                <button><div v-if="status === 'pending'" class="loading"></div><template v-else>S'inscrire</template></button>
                 <NuxtLink :to="{ path: `/user/login`, force: true }">Se connecter</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>