Frontend : connexion (mot de passe + lien magique) et onglets par rôle

Authentification alignée sur le back-end (Étapes 7/8) :
- src/api : schema auth (AccountRead, TokenResponse…), session.ts (jeton
  Bearer partagé + callback 401), méthodes auth du client HTTP
  (POST .../auth/login, .../auth/magic-link, .../auth/verify, GET /auth/me)
  et du mock (comptes coordination + référents + bénévoles, tokens magiques,
  sessions).
- src/auth : AuthProvider/useAuth (jeton en localStorage, réhydratation via
  /auth/me, déconnexion sur 401), RequireAuth (garde + contrôle de rôle),
  HomeRedirect, table ROUTE_ROLES.
- Pages : /connexion (lien magique, avec lien de démo affiché en mode mock),
  /connexion/coordination (email + mot de passe).
- Router : toutes les routes métier passées derrière <RequireAuth> ;
  redirection vers l'accueil du rôle.
- AppShell : onglets filtrés par rôle (01/02/03/06 coordination, 04 bénévole,
  05 référent), email + rôle + bouton Déconnexion.
- Mobile bénévole : cible le bénévole du compte connecté ; dégradation
  propre quand l'API refuse le détail des créneaux à un bénévole.
- Mobile référent : cible le poste dont le compte est référent.
- i18n : clés auth / rôles.
- Vérifs : build tsc + vite, eslint (0 problème), npm run smoke (flux
  login / lien magique + rendu des 6 écrans par rôle et des pages publiques).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AwswqSChc3Rwtu61pRXiY2

frontend/src/app/AppShell.tsx

@@ -2,23 +2,23 @@ import { NavLink, Outlet } from 'react-router-dom';
 
 import { API_MODE } from '@/api';
 import { useAssignments, useVolunteers } from '@/api/hooks';
+import { useAuth } from '@/auth/auth-context';
+import { NAV_TABS, canAccess, roleLabelKey } from '@/auth/roles';
 import { t } from '@/i18n';
 import { cx } from '@/lib/cx';
 
-const TABS = [
-  { to: '/grille', num: '01', labelKey: 'tab.grille' },
-  { to: '/benevoles', num: '02', labelKey: 'tab.volunteers' },
-  { to: '/publication', num: '03', labelKey: 'tab.publication' },
-  { to: '/mobile-benevole', num: '04', labelKey: 'tab.mobileVolunteer' },
-  { to: '/mobile-referent', num: '05', labelKey: 'tab.mobileLead' },
-  { to: '/configuration', num: '06', labelKey: 'tab.config' },
-] as const;
-
 export function AppShell() {
-  const volunteers = useVolunteers();
-  const assignments = useAssignments();
+  const { account, logout } = useAuth();
+  const isCoordinator = account?.role === 'COORDINATOR';
+
+  const volunteers = useVolunteers({ enabled: isCoordinator });
+  const assignments = useAssignments(undefined, { enabled: isCoordinator });
 
   const proposedCount = (assignments.data ?? []).filter((a) => a.status === 'PROPOSED').length;
+  const tabs = account ? NAV_TABS.filter((tab) => canAccess(tab.to, account.role)) : [];
+  const initials = account
+    ? account.email.slice(0, 2).toUpperCase()
+    : '··';
 
   return (
     <div className="flex min-h-screen flex-col">
@@ -27,13 +27,19 @@ export function AppShell() {
           <div className="font-display text-[14px] font-black tracking-tight">
             {t('header.title')}
           </div>
-          <div className="font-mono text-[9.5px] font-medium opacity-70">
-            {t('header.meta', { count: volunteers.data?.length ?? 0 })}
-          </div>
+          {isCoordinator ? (
+            <div className="font-mono text-[9.5px] font-medium opacity-70">
+              {t('header.meta', { count: volunteers.data?.length ?? 0 })}
+            </div>
+          ) : (
+            <div className="font-mono text-[9.5px] font-medium opacity-70">
+              {account ? t(roleLabelKey(account.role)) : ''}
+            </div>
+          )}
         </div>
 
         <nav className="flex overflow-x-auto">
-          {TABS.map((tab) => (
+          {tabs.map((tab) => (
             <NavLink
               key={tab.to}
               to={tab.to}
@@ -60,18 +66,28 @@ export function AppShell() {
 
         <div className="ml-auto flex items-center gap-[10px] border-l-[3px] border-ink px-[14px]">
           {API_MODE === 'mock' ? (
-            <div className="border-2 border-ink bg-blue px-[10px] py-[6px] font-display text-[10.5px] font-extrabold uppercase tracking-wider">
+            <div className="hidden border-2 border-ink bg-blue px-[10px] py-[6px] font-display text-[10.5px] font-extrabold uppercase tracking-wider sm:block">
               {t('header.mockMode')}
             </div>
           ) : null}
-          {proposedCount > 0 ? (
-            <div className="flex items-center gap-2 border-2 border-ink bg-hatch-ink px-[10px] py-[6px] font-display text-[10.5px] font-extrabold uppercase tracking-wider text-yellow">
+          {isCoordinator && proposedCount > 0 ? (
+            <div className="hidden items-center gap-2 border-2 border-ink bg-hatch-ink px-[10px] py-[6px] font-display text-[10.5px] font-extrabold uppercase tracking-wider text-yellow md:flex">
               {t('header.proposed', { count: proposedCount })}
             </div>
           ) : null}
-          <div className="flex h-[30px] w-[30px] items-center justify-center border-2 border-ink bg-orange font-display text-[11px] font-extrabold">
-            MB
+          <div
+            className="flex h-[30px] w-[30px] items-center justify-center border-2 border-ink bg-orange font-display text-[11px] font-extrabold"
+            title={account?.email}
+          >
+            {initials}
           </div>
+          <button
+            type="button"
+            onClick={logout}
+            className="cursor-pointer border-2 border-ink bg-cream px-[10px] py-[6px] font-display text-[10px] font-extrabold uppercase tracking-wider hover:bg-orange"
+          >
+            {t('auth.logout')}
+          </button>
         </div>
       </header>
 

frontend/src/app/router.tsx

@@ -1,6 +1,9 @@
 import { Navigate, type RouteObject } from 'react-router-dom';
 
+import { HomeRedirect, RequireAuth } from '@/auth/RequireAuth';
 import { AppShell } from './AppShell';
+import { AdminLoginPage } from '@/pages/auth/AdminLoginPage';
+import { ConnexionPage } from '@/pages/auth/ConnexionPage';
 import { ConfigPage } from '@/pages/ConfigPage';
 import { GrillePage } from '@/pages/GrillePage';
 import { MobileLeadPage } from '@/pages/MobileLeadPage';
@@ -9,18 +12,25 @@ import { PublicationPage } from '@/pages/PublicationPage';
 import { VolunteerViewPage } from '@/pages/VolunteerViewPage';
 
 export const routes: RouteObject[] = [
+  { path: '/connexion', element: <ConnexionPage /> },
+  { path: '/connexion/coordination', element: <AdminLoginPage /> },
   {
-    path: '/',
-    element: <AppShell />,
+    element: <RequireAuth />,
     children: [
-      { index: true, element: <Navigate to="/grille" replace /> },
-      { path: 'grille', element: <GrillePage /> },
-      { path: 'benevoles', element: <VolunteerViewPage /> },
-      { path: 'publication', element: <PublicationPage /> },
-      { path: 'mobile-benevole', element: <MobileVolunteerPage /> },
-      { path: 'mobile-referent', element: <MobileLeadPage /> },
-      { path: 'configuration', element: <ConfigPage /> },
-      { path: '*', element: <Navigate to="/grille" replace /> },
+      {
+        path: '/',
+        element: <AppShell />,
+        children: [
+          { index: true, element: <HomeRedirect /> },
+          { path: 'grille', element: <GrillePage /> },
+          { path: 'benevoles', element: <VolunteerViewPage /> },
+          { path: 'publication', element: <PublicationPage /> },
+          { path: 'mobile-benevole', element: <MobileVolunteerPage /> },
+          { path: 'mobile-referent', element: <MobileLeadPage /> },
+          { path: 'configuration', element: <ConfigPage /> },
+        ],
+      },
     ],
   },
+  { path: '*', element: <Navigate to="/" replace /> },
 ];