feat : numéro de version et config CI/CD

frontend/app.vue

@@ -3,3 +3,11 @@
         <NuxtPage />
     </NuxtLayout>
 </template>
+
+<script setup lang="ts">
+const { load } = useAppVersion()
+
+onMounted(() => {
+    load()
+})
+</script>

frontend/composables/useAppVersion.ts

@@ -0,0 +1,17 @@
+export const useAppVersion = () => {
+    const api = useApi()
+    const version = useState<string | null>('app-version', () => null)
+
+    const load = async () => {
+        if (version.value) {
+            return version.value
+        }
+        const response = await api.get<{ version: string }>('version', {}, {
+            toast: false
+        })
+        version.value = response.version
+        return version.value
+    }
+
+    return { version, load }
+}

frontend/layouts/auth.vue

@@ -5,3 +5,7 @@
     </main>
   </div>
 </template>
+
+<script setup lang="ts">
+const { version } = useAppVersion()
+</script>

frontend/layouts/default.vue

@@ -43,7 +43,7 @@
                     </NuxtLink>
                 </nav>
 
-                <div class="p-4">
+                <div class="flex flex-col gap-2 items-center p-4">
                     <button
                         type="button"
                         class="w-full rounded-lg px-4 py-2 text-md font-semibold text-white bg-primary-500"
@@ -51,6 +51,7 @@
                     >
                         Déconnexion
                     </button>
+                    <p class="font-bold">v{{ version }}</p>
                 </div>
             </aside>
 
@@ -63,6 +64,7 @@
 
 <script setup lang="ts">
 const auth = useAuthStore()
+const { version } = useAppVersion()
 
 const handleLogout = async () => {
     await auth.logout()

frontend/pages/calendar.vue

@@ -175,7 +175,7 @@ const monthStartDate = computed(() => new Date(selectedYear.value, selectedMonth
 const monthEndDate = computed(() => new Date(selectedYear.value, selectedMonth.value + 1, 0))
 
 const gridStyle = computed(() => ({
-    gridTemplateColumns: `220px repeat(${daysInMonth.value.length}, minmax(44px, 1fr))`
+    gridTemplateColumns: `160px repeat(${daysInMonth.value.length}, minmax(44px, 1fr))`
 }))
 
 const form = reactive({

frontend/pages/login.vue

@@ -1,72 +1,74 @@
 <template>
-  <div class="mx-auto w-full max-w-lg">
+    <div class="mx-auto w-full max-w-lg">
     <span
-      class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4"
+        class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4"
     >
         <img src="/malio.png" alt="Logo" class="w-[150px]"/>
     </span>
-    <form
-      class="mt-8 space-y-6 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
-      @submit.prevent="handleSubmit"
-    >
-      <div>
-        <label class="text-sm font-semibold text-neutral-700" for="username">
-          Nom d'utilisateur
-        </label>
-        <input
-          id="username"
-          v-model="username"
-          type="text"
-          autocomplete="username"
-          class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200"
-        />
-      </div>
+        <form
+            class="mt-8 space-y-6 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
+            @submit.prevent="handleSubmit"
+        >
+            <div>
+                <label class="text-sm font-semibold text-neutral-700" for="username">
+                    Nom d'utilisateur
+                </label>
+                <input
+                    id="username"
+                    v-model="username"
+                    type="text"
+                    autocomplete="username"
+                    class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200"
+                />
+            </div>
 
-      <div>
-        <label class="text-sm font-semibold text-neutral-700" for="password">
-          Mot de passe
-        </label>
-        <input
-          id="password"
-          v-model="password"
-          type="password"
-          autocomplete="current-password"
-          class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200"
-        />
-      </div>
+            <div>
+                <label class="text-sm font-semibold text-neutral-700" for="password">
+                    Mot de passe
+                </label>
+                <input
+                    id="password"
+                    v-model="password"
+                    type="password"
+                    autocomplete="current-password"
+                    class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200"
+                />
+            </div>
 
-      <button
-        type="submit"
-        class="w-full rounded-md bg-primary-500 px-4 py-2 text-base font-semibold text-white transition hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-60"
-        :disabled="isSubmitting"
-      >
-        Se connecter
-      </button>
-    </form>
-  </div>
+            <button
+                type="submit"
+                class="w-full rounded-md bg-primary-500 px-4 py-2 text-base font-semibold text-white transition hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-60"
+                :disabled="isSubmitting"
+            >
+                Se connecter
+            </button>
+            <p class="font-bold">v{{ version }}</p>
+        </form>
+    </div>
 </template>
 
 <script setup lang="ts">
-definePageMeta({ layout: 'auth' })
+definePageMeta({layout: 'auth'})
 
 const router = useRouter()
 const auth = useAuthStore()
+const { version } = useAppVersion()
 
 const username = ref('')
 const password = ref('')
 const isSubmitting = ref(false)
 
 const handleSubmit = async () => {
-  if (isSubmitting.value) return
+    if (isSubmitting.value) return
 
-  isSubmitting.value = true
-  try {
-      console.log(useRuntimeConfig().public.apiBase)
-    await auth.login(username.value, password.value)
+    isSubmitting.value = true
+    try {
+        console.log(useRuntimeConfig().public.apiBase)
+        await auth.login(username.value, password.value)
 
-    await router.push('/')
-  } finally {
-    isSubmitting.value = false
-  }
+        await router.push('/')
+    } finally {
+        isSubmitting.value = false
+    }
 }
 </script>