feat: isRedirecting auth

wp-content/themes/ccat/app/components/auth/AuthLoginForm.vue

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-const { isLoggedIn } = useAuth();
 const { loginFields, login } = useAuthActions();
-if (isLoggedIn.value) {
-  throw createError({ statusCode: 500, statusMessage: "Erreur serveur", message: "Le formulaire de connexion ne peut pas être affiché pour un utilisateur déjà connecté." });
-}
 </script>
 
 <template>

wp-content/themes/ccat/app/components/auth/AuthLogoutForm.vue

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-const { isLoggedIn } = useAuth();
 const { logout } = useAuthActions();
-if (!isLoggedIn.value) {
-  throw createError({ statusCode: 500, statusMessage: "Erreur serveur", message: "Le formulaire de déconnexion ne peut pas être affiché pour un utilisateur déjà déconnecté." });
-}
 </script>
 
 <template>

wp-content/themes/ccat/app/components/auth/AuthRedirecting.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="w-full space-y-6">
+    <div class="flex flex-col text-center">
+      <div class="text-xl text-pretty font-semibold text-highlighted">
+        Redirection en cours
+      </div>
+      <div class="mt-1 text-base text-pretty text-muted">
+        Veuillez patienter...
+      </div>
+    </div>
+  </div>
+</template>

wp-content/themes/ccat/app/composables/useAuth.ts

@@ -11,12 +11,22 @@ export function useAuth() {
   return { isLoggedIn, isSwitchedTo, hasRole, isAdmin };
 }
 
+const isRedirecting = ref(false);
+
 export function useAuthActions() {
   const { fetch: refreshUserSession } = useUserSession();
   const routeRedirect = useRoute().query.redirect as string || undefined;
-  const router = useRouter();
   const toast = useToast();
 
+  async function redirectTo(to: string | undefined) {
+    isRedirecting.value = true;
+    await delay(1000);
+    await refreshUserSession();
+    await navigateTo(to || routeRedirect || "/");
+    await nextTick();
+    isRedirecting.value = false;
+  }
+
   // Login
   const loginFields = [
     {
@@ -35,14 +45,12 @@ export function useAuthActions() {
   ];
   async function login({ data: args }: FormSubmitEvent<LoginOutput>, redirect?: string) {
     try {
-      const redirectTo = redirect || routeRedirect || "/";
       const { data, errors } = await useGraphqlMutation("login", args);
       if (errors.length || !data.login) {
         console.error(errors);
         throw new Error("Une erreur est survenue.");
       }
-      await refreshUserSession();
-      await router.push(redirectTo);
+      await redirectTo(redirect);
     }
     catch (error) {
       const message = error instanceof Error ? error.message : "Une erreur est survenue.";
@@ -53,14 +61,11 @@ export function useAuthActions() {
   // Logout
   async function logout(redirect?: string) {
     try {
-      const redirectTo = redirect || routeRedirect || "/";
-      console.log(redirectTo);
       const result = await $fetch("/api/logout", { method: "POST" });
       if (!result.success) {
         throw new Error("Une erreur est survenue.");
       }
-      await refreshUserSession();
-      await router.push(redirectTo);
+      await redirectTo(redirect);
     }
     catch (error) {
       const message = error instanceof Error ? error.message : "Une erreur est survenue.";
@@ -71,15 +76,11 @@ export function useAuthActions() {
   // Switch to
   async function switchTo(userId: number, redirect?: string) {
     try {
-      const redirectTo = redirect || routeRedirect;
       const { data, errors } = await useGraphqlMutation("switchTo", { userId });
       if (errors.length || !data.switchTo) {
         throw new Error("Une erreur est survenue");
       }
-      await refreshUserSession();
-      if (redirectTo) {
-        await router.push(redirectTo);
-      }
+      await redirectTo(redirect);
     }
     catch (error) {
       const message = error instanceof Error ? error.message : "Une erreur est survenue";
@@ -90,15 +91,11 @@ export function useAuthActions() {
   // Switch back
   async function switchBack(redirect?: string) {
     try {
-      const redirectTo = redirect || routeRedirect;
       const result = await $fetch("/api/switch-back", { method: "POST" });
       if (!result.success) {
         throw new Error("Une erreur est survenue.");
       }
-      await refreshUserSession();
-      if (redirectTo) {
-        await router.push(redirectTo);
-      }
+      await redirectTo(redirect);
     }
     catch (error) {
       const message = error instanceof Error ? error.message : "Une erreur est survenue";
@@ -106,5 +103,5 @@ export function useAuthActions() {
     }
   }
 
-  return { loginFields, login, logout, switchTo, switchBack };
+  return { isRedirecting, loginFields, login, logout, switchTo, switchBack };
 }

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

@@ -2,12 +2,17 @@
 definePageMeta({ layout: "auth" });
 
 const { isLoggedIn } = useAuth();
+const { isRedirecting } = useAuthActions();
+
 useSeoMeta({ title: isLoggedIn.value ? "Déconnexion" : "Connexion" });
 </script>
 
 <template>
   <AuthState>
-    <LogoutForm v-if="isLoggedIn" />
-    <LoginForm v-else />
+    <AuthRedirecting v-if="isRedirecting" />
+    <template v-else>
+      <AuthLogoutForm v-if="isLoggedIn" />
+      <AuthLoginForm v-else />
+    </template>
   </AuthState>
 </template>

wp-content/themes/ccat/shared/utils/delay.ts

@@ -0,0 +1,3 @@
+export async function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}