From a863da3e4011fffe4a8c407752202f990c16aa64 Mon Sep 17 00:00:00 2001
From: Pascal Martineau <pascal@lewebsimple.ca>
Date: Thu, 18 Sep 2025 14:39:47 -0400
Subject: [PATCH] feat: isRedirecting auth

---
 .../auth/{LoginForm.vue => AuthLoginForm.vue} |  4 ---
 .../{LogoutForm.vue => AuthLogoutForm.vue}    |  4 ---
 .../app/components/auth/AuthRedirecting.vue   | 15 ++++++++
 .../themes/ccat/app/composables/useAuth.ts    | 35 +++++++++----------
 .../themes/ccat/app/pages/connexion.vue       |  9 +++--
 wp-content/themes/ccat/shared/utils/delay.ts  |  3 ++
 6 files changed, 41 insertions(+), 29 deletions(-)
 rename wp-content/themes/ccat/app/components/auth/{LoginForm.vue => AuthLoginForm.vue} (56%)
 rename wp-content/themes/ccat/app/components/auth/{LogoutForm.vue => AuthLogoutForm.vue} (69%)
 create mode 100644 wp-content/themes/ccat/app/components/auth/AuthRedirecting.vue
 create mode 100644 wp-content/themes/ccat/shared/utils/delay.ts

diff --git a/wp-content/themes/ccat/app/components/auth/LoginForm.vue b/wp-content/themes/ccat/app/components/auth/AuthLoginForm.vue
similarity index 56%
rename from wp-content/themes/ccat/app/components/auth/LoginForm.vue
rename to wp-content/themes/ccat/app/components/auth/AuthLoginForm.vue
index d9dcb57..8a54043 100644
--- a/wp-content/themes/ccat/app/components/auth/LoginForm.vue
+++ b/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>
diff --git a/wp-content/themes/ccat/app/components/auth/LogoutForm.vue b/wp-content/themes/ccat/app/components/auth/AuthLogoutForm.vue
similarity index 69%
rename from wp-content/themes/ccat/app/components/auth/LogoutForm.vue
rename to wp-content/themes/ccat/app/components/auth/AuthLogoutForm.vue
index 7c453f0..15a2ba0 100644
--- a/wp-content/themes/ccat/app/components/auth/LogoutForm.vue
+++ b/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>
diff --git a/wp-content/themes/ccat/app/components/auth/AuthRedirecting.vue b/wp-content/themes/ccat/app/components/auth/AuthRedirecting.vue
new file mode 100644
index 0000000..26bebe2
--- /dev/null
+++ b/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>
diff --git a/wp-content/themes/ccat/app/composables/useAuth.ts b/wp-content/themes/ccat/app/composables/useAuth.ts
index e6760f5..9a97a70 100644
--- a/wp-content/themes/ccat/app/composables/useAuth.ts
+++ b/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 };
 }
diff --git a/wp-content/themes/ccat/app/pages/connexion.vue b/wp-content/themes/ccat/app/pages/connexion.vue
index bc8ef85..6b0ca01 100644
--- a/wp-content/themes/ccat/app/pages/connexion.vue
+++ b/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>
diff --git a/wp-content/themes/ccat/shared/utils/delay.ts b/wp-content/themes/ccat/shared/utils/delay.ts
new file mode 100644
index 0000000..4493928
--- /dev/null
+++ b/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));
+}