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/api/mock/mock-client.ts

@@ -8,6 +8,8 @@ import type {
   Violation,
 } from '../schema';
 import { ACTIVE_ASSIGNMENT_STATUSES } from '../schema';
+import type { AccountRead, TokenResponse } from '../schema';
+import { getAuthToken } from '../session';
 import { ApiError, type PlanningApi } from '../types';
 import { buildMockState, type MockState } from './dataset';
 
@@ -16,12 +18,42 @@ import { buildMockState, type MockState } from './dataset';
 
 const LATENCY_MS = 120;
 const EIGHT_HOURS_MIN = 8 * 60;
+const MAGIC_LINK_TTL_MS = 15 * 60 * 1000;
 
 let state: MockState = buildMockState();
 
+/** token de session -> id de compte. */
+const sessions = new Map<string, string>();
+/** token magique brut -> compte + expiration. */
+const magicTokens = new Map<string, { accountId: string; expiresAt: number; used: boolean }>();
+/** email (minuscule) -> dernier token magique émis (démo : l'email est stubé). */
+const lastMagicLink = new Map<string, string>();
+
 /** Réinitialise le jeu de démonstration (utile en test). */
 export function resetMockState(): void {
   state = buildMockState();
+  sessions.clear();
+  magicTokens.clear();
+  lastMagicLink.clear();
+}
+
+/**
+ * Mode mock uniquement : récupère le dernier lien magique émis pour un email.
+ * En mode HTTP le back-end l'envoie par mail (ici stubé dans ses logs).
+ */
+export function peekMockMagicToken(email: string): string | undefined {
+  return lastMagicLink.get(email.trim().toLowerCase());
+}
+
+function accountByEmail(email: string): AccountRead | undefined {
+  const target = email.trim().toLowerCase();
+  return state.accounts.find((a) => a.email.toLowerCase() === target);
+}
+
+function issue(account: AccountRead): TokenResponse {
+  const token = `mock.${account.id}.${Math.random().toString(36).slice(2, 10)}`;
+  sessions.set(token, account.id);
+  return { access_token: token, token_type: 'bearer', account };
 }
 
 const delay = <T>(value: T): Promise<T> =>
@@ -411,6 +443,47 @@ export function createMockApi(): PlanningApi {
     matrix: {
       get: () => delay(buildMatrix()),
     },
+
+    auth: {
+      login: (_edition, { email, password }) => {
+        const account = accountByEmail(email);
+        if (!account || account.auth_method !== 'password' || state.passwords.get(account.id) !== password) {
+          throw new ApiError(401, 'auth.invalid_credentials');
+        }
+        return delay(issue(account));
+      },
+      requestMagicLink: (_edition, { email }) => {
+        const account = accountByEmail(email);
+        if (account && account.auth_method === 'magic_link') {
+          const raw = `mlt.${Math.random().toString(36).slice(2)}${Math.random().toString(36).slice(2)}`;
+          magicTokens.set(raw, {
+            accountId: account.id,
+            expiresAt: Date.now() + MAGIC_LINK_TTL_MS,
+            used: false,
+          });
+          lastMagicLink.set(account.email.toLowerCase(), raw);
+        }
+        // Réponse identique dans tous les cas (pas de divulgation).
+        return delay(undefined);
+      },
+      verifyMagicLink: (_edition, { token }) => {
+        const entry = magicTokens.get(token.trim());
+        if (!entry || entry.used || entry.expiresAt < Date.now()) {
+          throw new ApiError(401, 'auth.invalid_token');
+        }
+        entry.used = true;
+        const account = state.accounts.find((a) => a.id === entry.accountId);
+        if (!account) throw new ApiError(401, 'auth.invalid_token');
+        return delay(issue(account));
+      },
+      me: () => {
+        const token = getAuthToken();
+        const accountId = token ? sessions.get(token) : undefined;
+        const account = accountId ? state.accounts.find((a) => a.id === accountId) : undefined;
+        if (!account) throw new ApiError(401, 'error.unauthorized');
+        return delay(account);
+      },
+    },
   };
 }