feat: connexionButton

wp-content/themes/moonshine/app/components/site/SiteFooterBottom.vue

@@ -1,8 +1,12 @@
+<script setup lang="ts">
+const { connexionButton } = useAuthConnexion();
+</script>
+
 <template>
   <div class="bg-inverted text-inverted py-1.5">
     <div class="container flex flex-col sm:flex-row items-center gap-3">
       <SiteFooterCopyright class="sm:mr-auto" />
-      <AuthConnexionButton color="neutral" variant="link" />
+      <UButton v-bind="connexionButton" color="neutral" variant="link" />
       <SiteFooterCredits />
     </div>
   </div>

wp-content/themes/moonshine/app/components/site/SiteHeader.vue

@@ -8,8 +8,5 @@
         <SvgSiteLogo class="h-12 w-auto" />
       </NuxtLink>
     </template>
-    <template #right>
-      <AuthConnexionButton />
-    </template>
   </UHeader>
 </template>

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

@@ -2,5 +2,6 @@ export function useAuth() {
   const { loggedIn: isLoggedIn, session } = useUserSession();
   const hasRole = (role: string) => session.value?.user?.roles?.includes(role) || false;
   const isAdmin = computed(() => hasRole("administrator"));
+
   return { isLoggedIn, hasRole, isAdmin };
 }

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

@@ -3,6 +3,7 @@ import type { FormSubmitEvent } from "@nuxt/ui";
 const isRedirecting = ref(false);
 
 export function useAuthConnexion() {
+  const { isLoggedIn } = useAuth();
   const toast = useToast();
   const { fetch: refreshUserSession } = useUserSession();
   const routeRedirect = useRoute().query.redirect as string || undefined;
@@ -67,5 +68,12 @@ export function useAuthConnexion() {
     }
   }
 
-  return { isRedirecting, login, logout };
+  // Dynamic connexion link
+  const connexionButton = computed(() => ({
+    label: isLoggedIn.value ? "Déconnexion" : "Connexion",
+    icon: isLoggedIn.value ? "i-lucide-log-out" : "i-lucide-log-in",
+    to: "/connexion",
+  }));
+
+  return { isRedirecting, login, logout, connexionButton };
 }