refactor: better project structure

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { loginSchema, loginFields, onLoginSubmit } = useLogin();
+const { loginFields, onLoginSubmit } = useAuth();
 </script>
 
 <template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { onLogoutClick } = useLogout();
+const { onLogoutClick } = useAuth();
 </script>
 
 <template>

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

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-defineProps<{ showLabels: boolean }>();
-</script>
-
-<template>
-  <UButton
-    icon="i-lucide-user"
-    color="primary"
-    to="#"
-    :label="showLabels ? 'Devenir membre' : undefined"
-  />
-</template>

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

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-defineProps<{ userId: number }>();
-const { isUserSwitched, userSwitchBack, userSwitchTo } = useUserSwitching();
-</script>
-
-<template>
-  <UButton v-if="isUserSwitched" variant="outline" @click="userSwitchBack()">
-    Switch back
-  </UButton>
-  <UButton v-else @click="userSwitchTo(userId)">
-    Switch to
-  </UButton>
-</template>

wp-content/themes/ccat/app/components/site/SiteHeaderTopAuth.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-defineProps<{ showLabels: boolean }>();
+const props = defineProps<{ showLabels: boolean }>();
 const { loggedIn } = useUserSession();
+const label = computed(() => props.showLabels ? (loggedIn ? "Déconnexion" : "Connexion") : undefined);
 </script>
 
 <template>
@@ -9,7 +10,7 @@ const { loggedIn } = useUserSession();
       :icon="loggedIn ? 'i-lucide-log-out' : 'i-lucide-log-in'"
       color="neutral"
       to="/connexion"
-      :label="showLabels ? (loggedIn ? 'Déconnexion' : 'Connexion') : undefined"
+      :label="label"
     />
   </AuthState>
 </template>

wp-content/themes/ccat/app/components/site/SiteHeaderTopMember.vue

@@ -5,9 +5,11 @@ const link = computed(() => (loggedIn.value ? { label: "Espace membre", to: "/es
 </script>
 
 <template>
-  <UButton
-    icon="i-lucide-user"
-    color="primary"
-    v-bind="link"
-  />
+  <AuthState>
+    <UButton
+      icon="i-lucide-user"
+      color="primary"
+      v-bind="link"
+    />
+  </AuthState>
 </template>