From 346890c088c45de503e1e7097547630b1b62f498 Mon Sep 17 00:00:00 2001
From: Pascal Martineau <pascal@lewebsimple.ca>
Date: Wed, 17 Sep 2025 08:41:42 -0400
Subject: [PATCH] refactor: better project structure

---
 .../ccat/app/components/auth/LoginForm.vue    |  2 +-
 .../ccat/app/components/auth/LogoutForm.vue   |  2 +-
 .../ccat/app/components/auth/SignUpButton.vue | 12 ----
 .../app/components/auth/UserSwitchButton.vue  | 13 -----
 .../app/components/site/SiteHeaderTopAuth.vue |  5 +-
 .../components/site/SiteHeaderTopMember.vue   | 12 ++--
 .../themes/ccat/app/composables/useAuth.ts    | 57 +++++++++++++++++++
 .../themes/ccat/app/composables/useLogin.ts   | 48 ----------------
 .../themes/ccat/app/composables/useLogout.ts  | 23 --------
 .../ccat/app/composables/useMemberArea.ts     |  3 +
 .../ccat/app/composables/useMemberSignup.ts   |  3 +
 .../ccat/app/composables/useNodeByUri.ts      | 20 +------
 .../menuItems.gql}                            |  0
 .../nodeByUri.gql}                            |  0
 .../siteOptions.gql}                          |  0
 wp-content/themes/ccat/nuxt.config.ts         |  6 +-
 .../ccat/server/{graphql => }/schema.graphql  |  0
 .../themes/ccat/shared/{ => types}/auth.d.ts  |  0
 .../themes/ccat/shared/utils/login-schema.ts  |  8 +++
 19 files changed, 90 insertions(+), 124 deletions(-)
 delete mode 100644 wp-content/themes/ccat/app/components/auth/SignUpButton.vue
 delete mode 100644 wp-content/themes/ccat/app/components/auth/UserSwitchButton.vue
 create mode 100644 wp-content/themes/ccat/app/composables/useAuth.ts
 delete mode 100644 wp-content/themes/ccat/app/composables/useLogin.ts
 delete mode 100644 wp-content/themes/ccat/app/composables/useLogout.ts
 create mode 100644 wp-content/themes/ccat/app/composables/useMemberArea.ts
 create mode 100644 wp-content/themes/ccat/app/composables/useMemberSignup.ts
 rename wp-content/themes/ccat/app/{composables/useMenuItems.gql => graphql/menuItems.gql} (100%)
 rename wp-content/themes/ccat/app/{composables/useNodeByUri.gql => graphql/nodeByUri.gql} (100%)
 rename wp-content/themes/ccat/app/{composables/useSiteOptions.gql => graphql/siteOptions.gql} (100%)
 rename wp-content/themes/ccat/server/{graphql => }/schema.graphql (100%)
 rename wp-content/themes/ccat/shared/{ => types}/auth.d.ts (100%)
 create mode 100644 wp-content/themes/ccat/shared/utils/login-schema.ts

diff --git a/wp-content/themes/ccat/app/components/auth/LoginForm.vue b/wp-content/themes/ccat/app/components/auth/LoginForm.vue
index 8c1a5ad..d9bf6a1 100644
--- a/wp-content/themes/ccat/app/components/auth/LoginForm.vue
+++ b/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>
diff --git a/wp-content/themes/ccat/app/components/auth/LogoutForm.vue b/wp-content/themes/ccat/app/components/auth/LogoutForm.vue
index 51dee25..1e571d4 100644
--- a/wp-content/themes/ccat/app/components/auth/LogoutForm.vue
+++ b/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>
diff --git a/wp-content/themes/ccat/app/components/auth/SignUpButton.vue b/wp-content/themes/ccat/app/components/auth/SignUpButton.vue
deleted file mode 100644
index 65ace36..0000000
--- a/wp-content/themes/ccat/app/components/auth/SignUpButton.vue
+++ /dev/null
@@ -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>
diff --git a/wp-content/themes/ccat/app/components/auth/UserSwitchButton.vue b/wp-content/themes/ccat/app/components/auth/UserSwitchButton.vue
deleted file mode 100644
index 9bab27b..0000000
--- a/wp-content/themes/ccat/app/components/auth/UserSwitchButton.vue
+++ /dev/null
@@ -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>
diff --git a/wp-content/themes/ccat/app/components/site/SiteHeaderTopAuth.vue b/wp-content/themes/ccat/app/components/site/SiteHeaderTopAuth.vue
index 4b61288..b6af890 100644
--- a/wp-content/themes/ccat/app/components/site/SiteHeaderTopAuth.vue
+++ b/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>
diff --git a/wp-content/themes/ccat/app/components/site/SiteHeaderTopMember.vue b/wp-content/themes/ccat/app/components/site/SiteHeaderTopMember.vue
index 3907fcd..74627a9 100644
--- a/wp-content/themes/ccat/app/components/site/SiteHeaderTopMember.vue
+++ b/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>
diff --git a/wp-content/themes/ccat/app/composables/useAuth.ts b/wp-content/themes/ccat/app/composables/useAuth.ts
new file mode 100644
index 0000000..8ee0159
--- /dev/null
+++ b/wp-content/themes/ccat/app/composables/useAuth.ts
@@ -0,0 +1,57 @@
+import type { FormSubmitEvent } from "@nuxt/ui";
+
+export function useAuth() {
+  const toast = useToast();
+  const redirect = useRoute().query.redirect as string || "/";
+  const router = useRouter();
+  const { fetch: refreshUserSession } = useUserSession();
+
+  // Login form
+  const loginFields = [
+    {
+      name: "email",
+      type: "text" as const,
+      label: "Courriel",
+      placeholder: "Entrez votre courriel",
+      required: true,
+    }, {
+      name: "password",
+      label: "Mot de passe",
+      type: "password" as const,
+      placeholder: "Entrez votre mot de passe",
+      required: true,
+    },
+  ];
+  async function onLoginSubmit({ data }: FormSubmitEvent<LoginOutput>) {
+    try {
+      const result = await $fetch<{ success: boolean; message?: string }>("/api/login", { method: "POST", body: data });
+      if (!result.success) {
+        throw new Error(result.message || "Une erreur est survenue.");
+      }
+      await router.push(redirect);
+      await refreshUserSession();
+    }
+    catch (error) {
+      const message = error instanceof Error ? error.message : "Une erreur est survenue.";
+      toast.add({ title: "Échec de la connexion", description: message, color: "error" });
+    }
+  }
+
+  // Logout action
+  async function onLogoutClick() {
+    try {
+      const result = await $fetch("/api/logout", { method: "POST" });
+      if (!result.success) {
+        throw new Error("Une erreur est survenue.");
+      }
+      await router.push(redirect);
+      await refreshUserSession();
+    }
+    catch (error) {
+      const message = error instanceof Error ? error.message : "Une erreur est survenue.";
+      toast.add({ title: "Échec de la déconnexion", description: message, color: "error" });
+    }
+  }
+
+  return { loginFields, onLoginSubmit, onLogoutClick };
+}
diff --git a/wp-content/themes/ccat/app/composables/useLogin.ts b/wp-content/themes/ccat/app/composables/useLogin.ts
deleted file mode 100644
index cbe14a4..0000000
--- a/wp-content/themes/ccat/app/composables/useLogin.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { FormSubmitEvent } from "@nuxt/ui";
-import * as z from "zod";
-
-const loginSchema = z.object({
-  email: z.email("Courriel invalide"),
-  password: z.string("Veuillez saisir votre mot de passe"),
-});
-type LoginSchema = z.infer<typeof loginSchema>;
-
-const loginFields = [
-  {
-    name: "email",
-    type: "text" as const,
-    label: "Courriel",
-    placeholder: "Entrez votre courriel",
-    required: true,
-  }, {
-    name: "password",
-    label: "Mot de passe",
-    type: "password" as const,
-    placeholder: "Entrez votre mot de passe",
-    required: true,
-  },
-];
-
-export function useLogin() {
-  const toast = useToast();
-  const redirect = useRoute().query.redirect as string || "/";
-  const router = useRouter();
-  const { fetch: refreshUserSession } = useUserSession();
-
-  async function onLoginSubmit({ data }: FormSubmitEvent<LoginSchema>) {
-    try {
-      const result = await $fetch<{ success: boolean; message?: string }>("/api/login", { method: "POST", body: data });
-      if (!result.success) {
-        throw new Error(result.message || "Une erreur est survenue.");
-      }
-      await router.push(redirect);
-      await refreshUserSession();
-    }
-    catch (error) {
-      const message = error instanceof Error ? error.message : "Une erreur est survenue.";
-      toast.add({ title: "Échec de la connexion", description: message, color: "error" });
-    }
-  }
-
-  return { loginSchema, loginFields, onLoginSubmit };
-}
diff --git a/wp-content/themes/ccat/app/composables/useLogout.ts b/wp-content/themes/ccat/app/composables/useLogout.ts
deleted file mode 100644
index d554d77..0000000
--- a/wp-content/themes/ccat/app/composables/useLogout.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export function useLogout() {
-  const toast = useToast();
-  const redirect = useRoute().query.redirect as string || "/";
-  const router = useRouter();
-  const { fetch: refreshUserSession } = useUserSession();
-
-  async function onLogoutClick() {
-    try {
-      const result = await $fetch("/api/logout", { method: "POST" });
-      if (!result.success) {
-        throw new Error("Une erreur est survenue.");
-      }
-      await router.push(redirect);
-      await refreshUserSession();
-    }
-    catch (error) {
-      const message = error instanceof Error ? error.message : "Une erreur est survenue.";
-      toast.add({ title: "Échec de la déconnexion", description: message, color: "error" });
-    }
-  }
-
-  return { onLogoutClick };
-}
diff --git a/wp-content/themes/ccat/app/composables/useMemberArea.ts b/wp-content/themes/ccat/app/composables/useMemberArea.ts
new file mode 100644
index 0000000..d3d49cc
--- /dev/null
+++ b/wp-content/themes/ccat/app/composables/useMemberArea.ts
@@ -0,0 +1,3 @@
+export function useMemberArea() {
+  return {};
+}
diff --git a/wp-content/themes/ccat/app/composables/useMemberSignup.ts b/wp-content/themes/ccat/app/composables/useMemberSignup.ts
new file mode 100644
index 0000000..7b34d9d
--- /dev/null
+++ b/wp-content/themes/ccat/app/composables/useMemberSignup.ts
@@ -0,0 +1,3 @@
+export function useMemberSignup() {
+  return {};
+}
diff --git a/wp-content/themes/ccat/app/composables/useNodeByUri.ts b/wp-content/themes/ccat/app/composables/useNodeByUri.ts
index b44abc7..cb26ff2 100644
--- a/wp-content/themes/ccat/app/composables/useNodeByUri.ts
+++ b/wp-content/themes/ccat/app/composables/useNodeByUri.ts
@@ -1,21 +1,5 @@
-import type {
-  ThePageFragment,
-  TheArticleFragment,
-  TheEventFragment,
-  TheLocationFragment,
-  TheMembershipFragment,
-  TheProjectFragment,
-  TheResourceFragment,
-} from "#graphql-operations";
-import {
-  ThePage,
-  TheArticle,
-  TheEvent,
-  TheLocation,
-  TheMembership,
-  TheProject,
-  TheResource,
-} from "#components";
+import type { ThePageFragment, TheArticleFragment, TheEventFragment, TheLocationFragment, TheMembershipFragment, TheProjectFragment, TheResourceFragment } from "#graphql-operations";
+import { ThePage, TheArticle, TheEvent, TheLocation, TheMembership, TheProject, TheResource } from "#components";
 
 export async function useNodeByUri() {
   const route = useRoute();
diff --git a/wp-content/themes/ccat/app/composables/useMenuItems.gql b/wp-content/themes/ccat/app/graphql/menuItems.gql
similarity index 100%
rename from wp-content/themes/ccat/app/composables/useMenuItems.gql
rename to wp-content/themes/ccat/app/graphql/menuItems.gql
diff --git a/wp-content/themes/ccat/app/composables/useNodeByUri.gql b/wp-content/themes/ccat/app/graphql/nodeByUri.gql
similarity index 100%
rename from wp-content/themes/ccat/app/composables/useNodeByUri.gql
rename to wp-content/themes/ccat/app/graphql/nodeByUri.gql
diff --git a/wp-content/themes/ccat/app/composables/useSiteOptions.gql b/wp-content/themes/ccat/app/graphql/siteOptions.gql
similarity index 100%
rename from wp-content/themes/ccat/app/composables/useSiteOptions.gql
rename to wp-content/themes/ccat/app/graphql/siteOptions.gql
diff --git a/wp-content/themes/ccat/nuxt.config.ts b/wp-content/themes/ccat/nuxt.config.ts
index 751b126..ec9f430 100644
--- a/wp-content/themes/ccat/nuxt.config.ts
+++ b/wp-content/themes/ccat/nuxt.config.ts
@@ -20,6 +20,10 @@ export default defineNuxtConfig({
     ],
   },
 
+  imports: {
+    dirs: ["~~/shared/schemas"],
+  },
+
   devtools: { enabled: true },
   css: ["~/assets/css/main.css"],
 
@@ -64,7 +68,7 @@ export default defineNuxtConfig({
   graphqlMiddleware: {
     graphqlEndpoint: process.env.NUXT_GRAPHQL_ENDPOINT || "https://wp.cultureat.ca/graphql",
     downloadSchema: isDev,
-    schemaPath: "server/graphql/schema.graphql",
+    schemaPath: "server/schema.graphql",
   },
 
   robots: {
diff --git a/wp-content/themes/ccat/server/graphql/schema.graphql b/wp-content/themes/ccat/server/schema.graphql
similarity index 100%
rename from wp-content/themes/ccat/server/graphql/schema.graphql
rename to wp-content/themes/ccat/server/schema.graphql
diff --git a/wp-content/themes/ccat/shared/auth.d.ts b/wp-content/themes/ccat/shared/types/auth.d.ts
similarity index 100%
rename from wp-content/themes/ccat/shared/auth.d.ts
rename to wp-content/themes/ccat/shared/types/auth.d.ts
diff --git a/wp-content/themes/ccat/shared/utils/login-schema.ts b/wp-content/themes/ccat/shared/utils/login-schema.ts
new file mode 100644
index 0000000..0e22c6a
--- /dev/null
+++ b/wp-content/themes/ccat/shared/utils/login-schema.ts
@@ -0,0 +1,8 @@
+import * as z from "zod";
+
+export const loginSchema = z.object({
+  email: z.email("Courriel invalide"),
+  password: z.string("Veuillez saisir votre mot de passe"),
+});
+export type LoginInput = z.input<typeof loginSchema>;
+export type LoginOutput = z.output<typeof loginSchema>;