From 45ffe71dc6da38c2a8efd7f82711ce84dfc6b18a Mon Sep 17 00:00:00 2001
From: Pascal Martineau <pascal@lewebsimple.ca>
Date: Thu, 26 Mar 2026 14:45:32 -0400
Subject: [PATCH] feat: connexion button in SiteFooterBottom

---
 .../app/components/site/SiteFooterBottom.vue         |  7 ++++++-
 .../headless/app/composables/useAuthConnexion.ts     | 12 +++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/wp-content/themes/headless/app/components/site/SiteFooterBottom.vue b/wp-content/themes/headless/app/components/site/SiteFooterBottom.vue
index 3b8cb10..154902f 100644
--- a/wp-content/themes/headless/app/components/site/SiteFooterBottom.vue
+++ b/wp-content/themes/headless/app/components/site/SiteFooterBottom.vue
@@ -1,9 +1,14 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const { connexionButton } = useAuthConnexion();
+</script>
 
 <template>
   <div class="bg-inverted py-1.5 text-inverted">
     <div class="container flex flex-col items-center gap-3 sm:flex-row">
       <SiteFooterCopyright class="sm:mr-auto" />
+      <AuthState>
+        <UButton v-bind="connexionButton" color="neutral" variant="link"></UButton>
+      </AuthState>
       <SiteFooterCredits />
     </div>
   </div>
diff --git a/wp-content/themes/headless/app/composables/useAuthConnexion.ts b/wp-content/themes/headless/app/composables/useAuthConnexion.ts
index 0283274..5d01615 100644
--- a/wp-content/themes/headless/app/composables/useAuthConnexion.ts
+++ b/wp-content/themes/headless/app/composables/useAuthConnexion.ts
@@ -1,8 +1,10 @@
 import { delay } from "es-toolkit/promise";
 
+import type { ButtonProps } from "@nuxt/ui";
 import type { FormSubmitEvent } from "@nuxt/ui";
 
 export function useAuthConnexion() {
+  const { isLoggedIn } = useAuth();
   const toast = useToast();
 
   const defaultRedirect = (useRoute().query.redirect as string) || undefined;
@@ -76,5 +78,13 @@ export function useAuthConnexion() {
     }
   }
 
-  return { isRedirecting, login, logout };
+  // Computed property for the connexion button.
+  const connexionButton = computed<ButtonProps>(() => ({
+    to: "/connexion",
+    ...(isLoggedIn.value
+      ? { label: "Déconnexion", icon: "i-lucide-log-out" }
+      : { label: "Connexion", icon: "i-lucide-log-in" }),
+  }));
+
+  return { isRedirecting, login, logout, connexionButton };
 }