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
This commit is contained in:
AdamThomas
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
464635656a
commit
6e16db4b7e
@@ -0,0 +1,96 @@
|
||||
import { useState, type FormEvent } from 'react';
|
||||
import { Link, Navigate, useLocation, useNavigate } from 'react-router-dom';
|
||||
|
||||
import { API_MODE, ApiError, DEMO_COORDINATOR_EMAIL, DEMO_COORDINATOR_PASSWORD } from '@/api';
|
||||
import { useAuth } from '@/auth/auth-context';
|
||||
import { homePath } from '@/auth/roles';
|
||||
import { FieldLabel } from '@/components/ui';
|
||||
import { AuthLayout } from './AuthLayout';
|
||||
import { t } from '@/i18n';
|
||||
|
||||
export function AdminLoginPage() {
|
||||
const { status, account, loginWithPassword } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation() as { state?: { from?: string } };
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
if (status === 'authed' && account) {
|
||||
return <Navigate to={location.state?.from ?? homePath(account.role)} replace />;
|
||||
}
|
||||
|
||||
async function submit(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
const me = await loginWithPassword(email.trim(), password);
|
||||
navigate(location.state?.from ?? homePath(me.role), { replace: true });
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.code : 'error.generic');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout title={t('auth.admin.title')}>
|
||||
<form onSubmit={submit} className="flex flex-col gap-3">
|
||||
<label className="block">
|
||||
<FieldLabel>{t('auth.email')}</FieldLabel>
|
||||
<input
|
||||
type="email"
|
||||
autoComplete="username"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
className="w-full border-2 border-ink bg-cream p-[10px] font-mono text-[13px]"
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<FieldLabel>{t('auth.password')}</FieldLabel>
|
||||
<input
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
className="w-full border-2 border-ink bg-cream p-[10px] font-mono text-[13px]"
|
||||
/>
|
||||
</label>
|
||||
|
||||
{error ? (
|
||||
<div className="border-2 border-ink bg-orange px-3 py-2 font-display text-[11px] font-bold">
|
||||
{t(error)}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
className="mt-1 cursor-pointer border-[3px] border-ink bg-yellow p-3 font-display text-[13px] font-black uppercase tracking-wide shadow-brutal-md hover:bg-green hover:text-white disabled:opacity-60"
|
||||
>
|
||||
{busy ? t('auth.signingIn') : t('auth.signIn')}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{API_MODE === 'mock' ? (
|
||||
<div className="mt-4 border-2 border-dashed border-ink bg-yellow-soft p-3 font-mono text-[10px] leading-relaxed">
|
||||
{t('auth.demoCredentials', {
|
||||
email: DEMO_COORDINATOR_EMAIL,
|
||||
password: DEMO_COORDINATOR_PASSWORD,
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="mt-4 border-t-2 border-ink pt-3 font-display text-[11px]">
|
||||
{t('auth.notAdmin')}{' '}
|
||||
<Link to="/connexion" className="font-extrabold underline">
|
||||
{t('auth.magicLinkLink')}
|
||||
</Link>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
import { API_MODE } from '@/api';
|
||||
import { t } from '@/i18n';
|
||||
|
||||
export function AuthLayout({ title, children }: { title: string; children: ReactNode }) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-cream p-6">
|
||||
<div className="w-full max-w-[420px]">
|
||||
<div className="mb-4 flex items-baseline gap-2">
|
||||
<div className="border-[3px] border-ink bg-yellow px-3 py-2 font-display text-[15px] font-black tracking-tight shadow-brutal-md">
|
||||
{t('header.title')}
|
||||
</div>
|
||||
{API_MODE === 'mock' ? (
|
||||
<span className="border-2 border-ink bg-blue px-2 py-1 font-display text-[9px] font-extrabold uppercase">
|
||||
{t('header.mockMode')}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="border-[3px] border-ink bg-paper shadow-brutal-lg">
|
||||
<div className="bg-ink px-4 py-3 font-display text-[13px] font-black uppercase tracking-widest text-cream">
|
||||
{title}
|
||||
</div>
|
||||
<div className="p-5">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
import { useEffect, useRef, useState, type FormEvent } from 'react';
|
||||
import { Link, Navigate, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
|
||||
import { ApiError, devMagicToken } from '@/api';
|
||||
import { useAuth } from '@/auth/auth-context';
|
||||
import { homePath } from '@/auth/roles';
|
||||
import { FieldLabel } from '@/components/ui';
|
||||
import { AuthLayout } from './AuthLayout';
|
||||
import { t } from '@/i18n';
|
||||
|
||||
export function ConnexionPage() {
|
||||
const { status, account, requestMagicLink, verifyMagicLink } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [params] = useSearchParams();
|
||||
const tokenParam = params.get('token');
|
||||
|
||||
const [email, setEmail] = useState('');
|
||||
const [sent, setSent] = useState(false);
|
||||
const [devLink, setDevLink] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const verifyStartedRef = useRef(false);
|
||||
|
||||
// Consommation d'un lien magique (?token=…).
|
||||
useEffect(() => {
|
||||
if (!tokenParam || verifyStartedRef.current) return;
|
||||
verifyStartedRef.current = true;
|
||||
setBusy(true);
|
||||
verifyMagicLink(tokenParam)
|
||||
.then((me) => navigate(homePath(me.role), { replace: true }))
|
||||
.catch((err) => {
|
||||
setError(err instanceof ApiError ? err.code : 'auth.invalid_token');
|
||||
setBusy(false);
|
||||
});
|
||||
}, [tokenParam, verifyMagicLink, navigate]);
|
||||
|
||||
if (status === 'authed' && account && !tokenParam) {
|
||||
return <Navigate to={homePath(account.role)} replace />;
|
||||
}
|
||||
|
||||
if (tokenParam) {
|
||||
return (
|
||||
<AuthLayout title={t('auth.magic.verifyTitle')}>
|
||||
{error ? (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="border-2 border-ink bg-orange px-3 py-2 font-display text-[12px] font-bold">
|
||||
{t(error)}
|
||||
</div>
|
||||
<Link
|
||||
to="/connexion"
|
||||
className="cursor-pointer border-[3px] border-ink bg-yellow p-3 text-center font-display text-[12px] font-black uppercase tracking-wide shadow-brutal-md hover:bg-green hover:text-white"
|
||||
>
|
||||
{t('auth.magic.retry')}
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-3 font-mono text-[12px] uppercase tracking-widest opacity-70">
|
||||
<span className="h-4 w-4 animate-spin border-2 border-ink border-t-transparent" />
|
||||
{t('auth.magic.verifying')}
|
||||
</div>
|
||||
)}
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
|
||||
async function submit(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
await requestMagicLink(email.trim());
|
||||
setSent(true);
|
||||
const raw = devMagicToken(email.trim());
|
||||
setDevLink(raw ? `/connexion?token=${encodeURIComponent(raw)}` : null);
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.code : 'error.generic');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout title={t('auth.magic.title')}>
|
||||
{sent ? (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="border-2 border-ink bg-green px-3 py-3 font-display text-[12px] font-bold text-white">
|
||||
{t('auth.magic.sent')}
|
||||
</div>
|
||||
{devLink ? (
|
||||
<div className="border-2 border-dashed border-ink bg-yellow-soft p-3 font-mono text-[10px] leading-relaxed">
|
||||
{t('auth.magic.devHint')}
|
||||
<Link to={devLink} className="mt-2 block break-all font-bold underline">
|
||||
{devLink}
|
||||
</Link>
|
||||
</div>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSent(false);
|
||||
setDevLink(null);
|
||||
}}
|
||||
className="cursor-pointer border-2 border-ink bg-cream p-2 font-display text-[11px] font-extrabold uppercase hover:bg-yellow"
|
||||
>
|
||||
{t('auth.magic.another')}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={submit} className="flex flex-col gap-3">
|
||||
<p className="font-display text-[12px] leading-relaxed">{t('auth.magic.lead')}</p>
|
||||
<label className="block">
|
||||
<FieldLabel>{t('auth.email')}</FieldLabel>
|
||||
<input
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
className="w-full border-2 border-ink bg-cream p-[10px] font-mono text-[13px]"
|
||||
/>
|
||||
</label>
|
||||
{error ? (
|
||||
<div className="border-2 border-ink bg-orange px-3 py-2 font-display text-[11px] font-bold">
|
||||
{t(error)}
|
||||
</div>
|
||||
) : null}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
className="mt-1 cursor-pointer border-[3px] border-ink bg-yellow p-3 font-display text-[13px] font-black uppercase tracking-wide shadow-brutal-md hover:bg-green hover:text-white disabled:opacity-60"
|
||||
>
|
||||
{busy ? t('auth.magic.sending') : t('auth.magic.send')}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<div className="mt-4 border-t-2 border-ink pt-3 font-display text-[11px]">
|
||||
{t('auth.isAdmin')}{' '}
|
||||
<Link to="/connexion/coordination" className="font-extrabold underline">
|
||||
{t('auth.adminLink')}
|
||||
</Link>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user