feat(core) : footer sidebar — compte connecté + déconnexion inline + version

Déconnexion déplacée du menu vers le footer (compte connecté au survol + version). useLogout() appelle clearSession() (reset des stores singletons via onAuthSessionCleared) puis redirige vers /login, sans page /logout intermédiaire.
2026-06-29 10:24:57 +02:00
parent d5bbe8afd9
commit d6a40e4843
10 changed files with 120 additions and 62 deletions
@@ -184,6 +184,9 @@ return [
    // Section "Mon compte" : espace personnel. Accessible a tout user authentifie
    // (aucune permission RBAC requise, tous les items restent dans `core` pour
    // rester toujours presents meme quand les modules metier sont desactives).
+    // La deconnexion a quitte cette section : elle vit desormais dans le footer
+    // de la sidebar (compte connecte + lien deconnexion + version, cf.
+    // frontend/app/layouts/default.vue + useLogout).
    [
        'label' => 'sidebar.account.section',
        'icon'  => 'mdi:account-circle-outline',
@@ -194,12 +197,6 @@ return [
                'icon'   => 'mdi:view-dashboard-outline',
                'module' => 'core',
            ],
-            [
-                'label'  => 'sidebar.account.logout',
-                'to'     => '/logout',
-                'icon'   => 'mdi:logout',
-                'module' => 'core',
-            ],
        ],
    ],
 ];
@@ -21,6 +21,45 @@
                <template #logo-collapsed>
                    <img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio"/>
                </template>
+
+                <!-- Footer deplie : compte connecte (survol -> deconnexion) + version. -->
+                <template #footer>
+                    <div class="flex flex-col gap-2">
+                        <!-- Bloc compte : au survol, un menu de deconnexion s'ouvre vers
+                             le haut (le footer etant colle en bas de la sidebar). -->
+                        <div class="group relative" data-test="sidebar-account">
+                            <button
+                                type="button"
+                                data-test="sidebar-logout"
+                                class="invisible absolute bottom-full left-0 right-0 mb-2 flex items-center gap-2 rounded-md bg-white px-3 py-2 text-[14px] font-semibold text-m-danger opacity-0 shadow-lg ring-1 ring-m-border transition-all duration-150 hover:bg-m-danger hover:text-white group-hover:visible group-hover:opacity-100"
+                                @click="onLogout"
+                            >
+                                <Icon name="mdi:logout" class="size-[18px] shrink-0"/>
+                                <span>{{ t('sidebar.account.logout') }}</span>
+                            </button>
+                            <div class="flex items-center gap-2 rounded-md p-1.5 text-black transition-colors group-hover:bg-m-primary/10 group-hover:font-semibold group-hover:text-m-primary">
+                                <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-m-primary text-[13px] font-bold uppercase text-white">{{ initials }}</span>
+                                <span class="min-w-0 flex-1 truncate text-[14px] font-semibold">{{ username }}</span>
+                                <Icon name="mdi:chevron-up" class="size-[18px] shrink-0"/>
+                            </div>
+                        </div>
+                        <p v-if="version" class="text-center text-[12px] font-bold text-m-muted">v {{ version }}</p>
+                    </div>
+                </template>
+
+                <!-- Footer replie : pastille initiale, survol -> icone deconnexion. -->
+                <template #footer-collapsed>
+                    <button
+                        type="button"
+                        data-test="sidebar-logout"
+                        :title="`${username} — ${t('sidebar.account.logout')}`"
+                        class="group mx-auto flex size-9 items-center justify-center rounded-full bg-m-primary text-[13px] font-bold uppercase text-white transition-colors hover:bg-m-danger"
+                        @click="onLogout"
+                    >
+                        <span class="group-hover:hidden">{{ initials }}</span>
+                        <Icon name="mdi:logout" class="hidden size-[18px] group-hover:block"/>
+                    </button>
+                </template>
            </MalioSidebar>

            <div class="h-full flex-1 flex flex-col min-h-0 min-w-0">
@@ -42,6 +81,18 @@ const {isModuleActive} = useModules()
 const auth = useAuthStore()
 const route = useRoute()

+// Footer de la sidebar : compte connecte + deconnexion inline + version.
+const {logout: onLogout} = useLogout()
+const {version, load: loadAppVersion} = useAppVersion()
+
+const username = computed(() => auth.user?.username ?? '')
+// Pastille avatar : 1re lettre du compte (meme convention que la maquette Malio).
+const initials = computed(() => username.value.charAt(0).toUpperCase() || '?')
+
+onMounted(() => {
+    void loadAppVersion()
+})
+
 // Le SiteSelector est rendu si :
 //  - le module Sites est actif dans config/modules.php (sinon la feature
 //    n'a pas de sens, cf. ticket 3 spec criteres d'acceptation) ;
@@ -11,8 +11,9 @@
 * la recharger a chaque ouverture du drawer.
 *
 * State singleton au niveau module : reset automatique au logout via
- * `onAuthSessionCleared` (cf. CLAUDE.md regle frontend.md), et reset
- * explicite via `resetCategoriesAdmin()` appele depuis logout.vue.
+ * `onAuthSessionCleared` (cf. CLAUDE.md regle frontend.md), declenche par
+ * `clearSession()` (logout volontaire `useLogout` ou intercepteur 401).
+ * `resetCategoriesAdmin()` reste expose pour un reset manuel/tests.
 */
 import { ref } from 'vue'
 import type { CategoryType } from '~/modules/catalog/types/category'
@@ -38,10 +39,9 @@ function resetCategoriesAdminState(): void {
    error.value = null
 }

-// Auto-enregistrement singleton : purge le state sur 401/clearSession
-// pour eviter qu'un user suivant (connecte sur le meme onglet) voie le
-// referentiel de l'ancien tenant. Le logout volontaire (page logout.vue)
-// appelle directement `resetCategoriesAdmin()` ci-dessous.
+// Auto-enregistrement singleton : purge le state sur clearSession() (logout
+// volontaire via useLogout, ou intercepteur 401) pour eviter qu'un user suivant
+// (connecte sur le meme onglet) voie le referentiel de l'ancien tenant.
 onAuthSessionCleared(resetCategoriesAdminState)

 export function useCategoriesAdmin() {
@@ -73,9 +73,9 @@ export function useCategoriesAdmin() {
    }

    /**
-     * Reset explicite — appele depuis `logout.vue` apres `auth.logout()`
-     * pour garantir que la prochaine session reparte sur un state propre
-     * meme si `clearSession()` n'a pas ete declenche (cas logout volontaire).
+     * Reset explicite expose pour un reset manuel (tests, ou appel cible).
+     * Au logout, le reset est deja garanti par `onAuthSessionCleared`
+     * (declenche par `clearSession()` dans `auth.logout()`).
     */
    function resetCategoriesAdmin(): void {
        resetCategoriesAdminState()
@@ -1,35 +0,0 @@
-<template>
-    <div class="flex h-full items-center justify-center">
-        <p class="text-neutral-500">{{ $t('auth.logout') }}...</p>
-    </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({ layout: 'auth' })
-
-const auth = useAuthStore()
-const { resetSidebar } = useSidebar()
-const { resetModules } = useModules()
-const { resetCurrentSite } = useCurrentSite()
-const { resetAuditLog } = useAuditLog()
-const { resetCategoriesAdmin } = useCategoriesAdmin()
-
-onMounted(async () => {
-    try {
-        await auth.logout()
-    } finally {
-        // Les resets sont garantis meme si auth.logout() rejette : eviter
-        // qu'un user suivant (connecte sur le meme onglet) voie l'etat de
-        // l'ancien. Toutes les fonctions reset sont synchrones et ne
-        // peuvent pas throw (juste des assignations reactives).
-        // navigateTo est dans le finally pour garantir la redirection
-        // meme si auth.logout() lance une exception (ex: reseau coupé).
-        resetSidebar()
-        resetModules()
-        resetCurrentSite()
-        resetAuditLog()
-        resetCategoriesAdmin()
-        await navigateTo('/login')
-    }
-})
-</script>
@@ -6,8 +6,8 @@
 * rollback si la requete PATCH `/api/me/current-site` echoue.
 *
 * Garantie d'unicite : le flag `switching` bloque les double-clicks
- * concurrents. Le reset explicite est appele au logout
- * (voir `modules/core/pages/logout.vue`).
+ * concurrents. Le state est purge au logout via `onAuthSessionCleared`
+ * (declenche par `clearSession()`, cf. `useLogout` et l'intercepteur 401).
 *
 * Auto-select : aucun. Le backend (`UserRbacProcessor::ensureCurrentSiteConsistency`)
 * garantit deja l'invariant "user avec sites non vide => currentSite non null"
@@ -30,8 +30,8 @@ const availableSites = ref<Site[]>([])
 const switching = ref(false)

 // Enregistrement unique au niveau module (singleton) : quand clearSession()
-// est appelee par l'intercepteur 401 de useApi, le state local est purgé
-// de la meme facon qu'au logout explicite (logout.vue).
+// est appelee (logout volontaire via useLogout, ou intercepteur 401 de useApi),
+// le state local est purgé.
 onAuthSessionCleared(() => {
    currentSite.value = null
    availableSites.value = []
@@ -0,0 +1,21 @@
+/**
+ * Déconnexion centralisée — déclenchée directement par un handler (ex: lien du
+ * footer de la sidebar), sans passer par une page de redirection dédiée.
+ *
+ * `authStore.logout()` invalide la session serveur (POST /api/logout), vide
+ * l'état auth, et appelle `clearSession()` qui notifie tous les composables
+ * singletons (sidebar, modules, currentSite, auditLog, categoriesAdmin) via
+ * `onAuthSessionCleared` — leurs états sont donc réinitialisés ici sans aucun
+ * reset manuel. La redirection vers `/login` (inévitable : un utilisateur
+ * déconnecté ne peut pas rester sur une page protégée) est la seule navigation.
+ */
+export function useLogout() {
+    const auth = useAuthStore()
+
+    async function logout(): Promise<void> {
+        await auth.logout()
+        await navigateTo('/login')
+    }
+
+    return { logout }
+}
@@ -77,9 +77,11 @@ export const useAuthStore = defineStore('auth', {
            } catch {
                // Ignore logout errors so we can still clear local auth state.
            } finally {
-                this.user = null
-                this.checked = true
-                this.isLoading = false
+                // clearSession() vide l'etat auth ET notifie les composables
+                // singletons (sidebar, modules, currentSite, auditLog,
+                // categoriesAdmin) via onAuthSessionCleared : plus besoin de
+                // resets manuels au logout — meme chemin que l'intercepteur 401.
+                this.clearSession()
            }
        },
        async refreshUser() {
@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test'
 import { LoginPage } from '../helpers/pages/LoginPage'
+import { SidebarComponent } from '../helpers/pages/SidebarComponent'
 import { getPersona } from '../_fixtures/personas'

 /**
@@ -53,8 +54,12 @@ test.describe('Login', () => {
        await loginPage.fillAndSubmit(superAdmin.username, superAdmin.password)
        await page.waitForURL('/')

-        // 2. Navigation vers /logout (il y a un lien "Deconnexion" dans la sidebar)
-        await page.goto('/logout')
+        // 2. Deconnexion via le footer de la sidebar : survol du bloc compte
+        // (revele le bouton) puis clic. Le handler appelle useLogout() qui POST
+        // /api/logout, reset les stores, et redirige vers /login (sans page /logout).
+        const sidebar = new SidebarComponent(page)
+        await sidebar.accountBlock().hover()
+        await sidebar.logoutButton().click()
        await page.waitForURL(/\/login$/)

        // 3. Le cookie BEARER doit avoir ete supprime par le firewall de logout
@@ -27,7 +27,21 @@ export class SidebarComponent {
        return this.page.locator('a[href="/"]').first()
    }

-    logoutLink(): Locator {
-        return this.page.locator('a[href="/logout"]')
+    /**
+     * Bloc « compte connecte » du footer de la sidebar. Cible de survol qui
+     * revele le bouton de deconnexion (la deconnexion n'est plus un item de nav
+     * `/logout` mais un lien du footer, cf. default.vue + useLogout).
+     */
+    accountBlock(): Locator {
+        return this.page.locator('[data-test="sidebar-account"]')
+    }
+
+    /**
+     * Bouton de deconnexion du footer (revele au survol du bloc compte en mode
+     * deplie, ou directement la pastille en mode replie). Selecteur par
+     * `data-test` : stable au renommage/retraduction du label.
+     */
+    logoutButton(): Locator {
+        return this.page.locator('[data-test="sidebar-logout"]')
    }
 }
@@ -72,7 +72,10 @@ test.describe('Sidebar visibility', () => {
        // Meme strategie que ci-dessus : ancrage semantique plutot que
        // `networkidle` pour eviter les faux timeouts en CI.
        await expect(sidebar.accountDashboardLink()).toBeVisible({ timeout: 10000 })
-        await expect(sidebar.logoutLink()).toBeVisible()
+        // La deconnexion vit dans le footer (rendu sans condition de permission).
+        // Le bouton est revele au survol du bloc compte.
+        await sidebar.accountBlock().hover()
+        await expect(sidebar.logoutButton()).toBeVisible()
    })

    test('la liste des personas dans personas.ts couvre toutes les combinaisons admin attendues', () => {