refactor: /api/login route

wp-content/themes/moonshine/app/composables/useAuthConnexion.ts

@@ -1,13 +1,5 @@
-import z from "zod";
 import type { FormSubmitEvent } from "@nuxt/ui";
 
-export const authLoginFormSchema = z.object({
-  username: z.email("Courriel invalide"),
-  password: z.string("Veuillez saisir votre mot de passe"),
-});
-
-export type AuthLoginForm = z.infer<typeof authLoginFormSchema>;
-
 const isRedirecting = ref(false);
 
 export function useAuthConnexion() {
@@ -20,16 +12,14 @@ export function useAuthConnexion() {
     await delay(1000);
     await refreshUserSession();
     await navigateTo(to || routeRedirect || "/");
-    isRedirecting.value = false;
   }
 
   // Login
-  const { mutate: loginMutate } = useGraphQLMutation("AuthLogin");
-  async function login({ data: variables }: FormSubmitEvent<AuthLoginForm>, redirect?: string) {
+  async function login({ data: body }: FormSubmitEvent<AuthLoginForm>, redirect?: string) {
     try {
-      const { data } = await loginMutate(variables);
-      if (!data?.login) {
-        throw new Error(`Échec de la connexion par mot de passe.`);
+      const { success, message } = await $fetch("/api/login", { method: "POST", body });
+      if (!success) {
+        throw new Error(message);
       }
       await redirectTo(redirect);
     }

wp-content/themes/moonshine/app/pages/connexion.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-
+const { isRedirecting } = useAuthConnexion();
+onBeforeMount(() => {
+  isRedirecting.value = false;
+});
 </script>
 
 <template>

wp-content/themes/moonshine/server/api/login.post.ts

@@ -0,0 +1,17 @@
+export default defineEventHandler(async (event) => {
+  try {
+    const variables = await readBody<AuthLoginForm>(event);
+    const { data, error } = await useServerGraphQLMutation(event, "AuthLogin", variables);
+    if (!data?.login) {
+      throw new Error(error?.message || "Une erreur est survenue lors de la connexion.");
+    }
+    if (!await handleLogin(event, data)) {
+      throw new Error("Échec de la connexion.");
+    }
+    return { success: true, message: "Connexion réussie" };
+  }
+  catch (error) {
+    const message = error instanceof Error ? error.message : "Une erreur est survenue lors de la déconnexion.";
+    return { success: false, message };
+  }
+});

wp-content/themes/moonshine/server/utils/auth.ts

@@ -8,11 +8,11 @@ import { AuthRefreshTokenDocument, type AuthLoginResult } from "#graphql/operati
 // Handle login result and store user session
 export async function handleLogin(event: H3Event, loginData: AuthLoginResult) {
   if (!loginData?.login) {
-    return;
+    return false;
   }
   const { user, authToken, refreshToken } = loginData.login;
   if (!user || !authToken || !refreshToken) {
-    return;
+    return false;
   }
   await setUserSession(event, {
     user: getAuthUser(user),
@@ -22,11 +22,13 @@ export async function handleLogin(event: H3Event, loginData: AuthLoginResult) {
     },
     loggedInAt: new Date().toISOString(),
   });
+  return true;
 }
 
 // Handle user logout by clearing session
 export async function handleLogout(event: H3Event) {
   await clearUserSession(event);
+  return true;
 }
 
 // Convert AuthUserFragment to nuxt-auth-utils User

wp-content/themes/moonshine/shared/utils/auth-login-form.ts

@@ -0,0 +1,8 @@
+import z from "zod";
+
+export const authLoginFormSchema = z.object({
+  username: z.email("Courriel invalide"),
+  password: z.string("Veuillez saisir votre mot de passe"),
+});
+
+export type AuthLoginForm = z.infer<typeof authLoginFormSchema>;