feat: connexion button in SiteFooterBottom

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>

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 };
 }