feat: Gestion des utilisateurs (invitation, blocage, déblocage)

Permet aux administrateurs d'un établissement de gérer le cycle de vie
des comptes utilisateurs : inviter de nouveaux membres, bloquer/débloquer
des comptes actifs, et renvoyer des invitations en attente.

Chaque mutation vérifie l'appartenance au tenant courant pour empêcher
les accès cross-tenant. Le blocage est restreint aux comptes actifs
uniquement et un administrateur ne peut pas bloquer son propre compte.

Les comptes suspendus reçoivent une erreur 403 spécifique au login
(sans déclencher l'escalade du rate limiting) et les tentatives sont
tracées dans les métriques Prometheus.

frontend/e2e/user-blocking.spec.ts

@@ -0,0 +1,146 @@
+import { test, expect } from '@playwright/test';
+import { execSync } from 'child_process';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const baseUrl = process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:4173';
+const urlMatch = baseUrl.match(/:(\d+)$/);
+const PORT = urlMatch ? urlMatch[1] : '4173';
+const ALPHA_URL = `http://ecole-alpha.classeo.local:${PORT}`;
+
+const ADMIN_EMAIL = 'e2e-blocking-admin@example.com';
+const ADMIN_PASSWORD = 'BlockingTest123';
+const TARGET_EMAIL = 'e2e-blocking-target@example.com';
+const TARGET_PASSWORD = 'TargetUser123';
+
+test.describe('User Blocking', () => {
+	test.describe.configure({ mode: 'serial' });
+
+	test.beforeAll(async () => {
+		const projectRoot = join(__dirname, '../..');
+		const composeFile = join(projectRoot, 'compose.yaml');
+
+		// Create admin user
+		execSync(
+			`docker compose -f "${composeFile}" exec -T php php bin/console app:dev:create-test-user --tenant=ecole-alpha --email=${ADMIN_EMAIL} --password=${ADMIN_PASSWORD} --role=ROLE_ADMIN 2>&1`,
+			{ encoding: 'utf-8' }
+		);
+
+		// Create target user to be blocked
+		execSync(
+			`docker compose -f "${composeFile}" exec -T php php bin/console app:dev:create-test-user --tenant=ecole-alpha --email=${TARGET_EMAIL} --password=${TARGET_PASSWORD} --role=ROLE_PROF 2>&1`,
+			{ encoding: 'utf-8' }
+		);
+	});
+
+	async function loginAsAdmin(page: import('@playwright/test').Page) {
+		await page.goto(`${ALPHA_URL}/login`);
+		await page.locator('#email').fill(ADMIN_EMAIL);
+		await page.locator('#password').fill(ADMIN_PASSWORD);
+		await page.getByRole('button', { name: /se connecter/i }).click();
+		await expect(page).toHaveURL(/\/dashboard/, { timeout: 10000 });
+	}
+
+	test('admin can block a user and sees blocked status', async ({ page }) => {
+		await loginAsAdmin(page);
+		await page.goto(`${ALPHA_URL}/admin/users`);
+
+		// Wait for users table to load
+		await expect(page.locator('.users-table')).toBeVisible({ timeout: 10000 });
+
+		// Find the target user row
+		const targetRow = page.locator('tr', { has: page.locator(`text=${TARGET_EMAIL}`) });
+		await expect(targetRow).toBeVisible();
+
+		// Click "Bloquer" button
+		await targetRow.getByRole('button', { name: /bloquer/i }).click();
+
+		// Block modal should appear
+		await expect(page.locator('#block-modal-title')).toBeVisible();
+
+		// Fill in the reason
+		await page.locator('#block-reason').fill('Comportement inapproprié en E2E');
+
+		// Confirm the block
+		await page.getByRole('button', { name: /confirmer le blocage/i }).click();
+
+		// Wait for the success message
+		await expect(page.locator('.alert-success')).toBeVisible({ timeout: 5000 });
+
+		// Verify the user status changed to "Suspendu"
+		const updatedRow = page.locator('tr', { has: page.locator(`text=${TARGET_EMAIL}`) });
+		await expect(updatedRow.locator('.status-blocked')).toContainText('Suspendu');
+
+		// Verify the reason is displayed
+		await expect(updatedRow.locator('.blocked-reason')).toContainText('Comportement inapproprié en E2E');
+	});
+
+	test('admin can unblock a suspended user', async ({ page }) => {
+		await loginAsAdmin(page);
+		await page.goto(`${ALPHA_URL}/admin/users`);
+
+		await expect(page.locator('.users-table')).toBeVisible({ timeout: 10000 });
+
+		// Find the suspended target user row
+		const targetRow = page.locator('tr', { has: page.locator(`text=${TARGET_EMAIL}`) });
+		await expect(targetRow).toBeVisible();
+
+		// "Débloquer" button should be visible for suspended user
+		const unblockButton = targetRow.getByRole('button', { name: /débloquer/i });
+		await expect(unblockButton).toBeVisible();
+
+		// Click unblock
+		await unblockButton.click();
+
+		// Wait for the success message
+		await expect(page.locator('.alert-success')).toBeVisible({ timeout: 5000 });
+
+		// Verify the user status changed back to "Actif"
+		const updatedRow = page.locator('tr', { has: page.locator(`text=${TARGET_EMAIL}`) });
+		await expect(updatedRow.locator('.status-active')).toContainText('Actif');
+	});
+
+	test('blocked user sees specific error on login', async ({ page }) => {
+		// First, block the user again
+		await loginAsAdmin(page);
+		await page.goto(`${ALPHA_URL}/admin/users`);
+		await expect(page.locator('.users-table')).toBeVisible({ timeout: 10000 });
+
+		const targetRow = page.locator('tr', { has: page.locator(`text=${TARGET_EMAIL}`) });
+		await targetRow.getByRole('button', { name: /bloquer/i }).click();
+		await page.locator('#block-reason').fill('Bloqué pour test login');
+		await page.getByRole('button', { name: /confirmer le blocage/i }).click();
+		await expect(page.locator('.alert-success')).toBeVisible({ timeout: 5000 });
+
+		// Logout
+		await page.getByRole('button', { name: /déconnexion/i }).click();
+
+		// Try to log in as the blocked user
+		await page.goto(`${ALPHA_URL}/login`);
+		await page.locator('#email').fill(TARGET_EMAIL);
+		await page.locator('#password').fill(TARGET_PASSWORD);
+		await page.getByRole('button', { name: /se connecter/i }).click();
+
+		// Should see a suspended account error, not the generic credentials error
+		const errorBanner = page.locator('.error-banner.account-suspended');
+		await expect(errorBanner).toBeVisible({ timeout: 5000 });
+		await expect(errorBanner).toContainText(/suspendu|contactez/i);
+	});
+
+	test('admin cannot block themselves', async ({ page }) => {
+		await loginAsAdmin(page);
+		await page.goto(`${ALPHA_URL}/admin/users`);
+
+		await expect(page.locator('.users-table')).toBeVisible({ timeout: 10000 });
+
+		// Find the admin's own row
+		const adminRow = page.locator('tr', { has: page.locator(`text=${ADMIN_EMAIL}`) });
+		await expect(adminRow).toBeVisible();
+
+		// "Bloquer" button should NOT be present on the admin's own row
+		await expect(adminRow.getByRole('button', { name: /^bloquer$/i })).not.toBeVisible();
+	});
+});

frontend/eslint.config.js

@@ -79,7 +79,8 @@ export default tseslint.config(
 				fetch: 'readonly',
 				HTMLDivElement: 'readonly',
 				setInterval: 'readonly',
-				clearInterval: 'readonly'
+				clearInterval: 'readonly',
+				URLSearchParams: 'readonly'
 			}
 		},
 		plugins: {

frontend/src/lib/auth/auth.svelte.ts

@@ -45,9 +45,10 @@ function parseJwtPayload(token: string): Record<string, unknown> | null {
 function extractUserId(token: string): string | null {
 	const payload = parseJwtPayload(token);
 	if (!payload) return null;
-	// JWT 'sub' claim contains the user ID
-	const sub = payload['sub'];
-	return typeof sub === 'string' ? sub : null;
+	// JWT 'user_id' claim contains the UUID (set by JwtPayloadEnricher)
+	// Note: 'sub' contains the email (Lexik default), not the UUID
+	const userId = payload['user_id'];
+	return typeof userId === 'string' ? userId : null;
 }
 
 export interface LoginCredentials {
@@ -59,7 +60,7 @@ export interface LoginCredentials {
 export interface LoginResult {
 	success: boolean;
 	error?: {
-		type: 'invalid_credentials' | 'rate_limited' | 'captcha_required' | 'captcha_invalid' | 'unknown';
+		type: 'invalid_credentials' | 'rate_limited' | 'captcha_required' | 'captcha_invalid' | 'account_suspended' | 'unknown';
 		message: string;
 		retryAfter?: number | undefined;
 		delay?: number | undefined;
@@ -132,6 +133,17 @@ export async function login(credentials: LoginCredentials): Promise<LoginResult>
 			};
 		}
 
+		// Compte suspendu (403)
+		if (response.status === 403 && error.type === '/errors/account-suspended') {
+			return {
+				success: false,
+				error: {
+					type: 'account_suspended',
+					message: error.detail,
+				},
+			};
+		}
+
 		// CAPTCHA invalide (400)
 		if (response.status === 400 && error.type === '/errors/captcha-invalid') {
 			return {

frontend/src/lib/auth/index.ts

@@ -5,6 +5,7 @@ export {
 	authenticatedFetch,
 	isAuthenticated,
 	getAccessToken,
+	getCurrentUserId,
 	type LoginCredentials,
 	type LoginResult,
 } from './auth.svelte';

frontend/src/lib/components/organisms/Dashboard/DashboardAdmin.svelte

@@ -26,11 +26,11 @@
 	<div class="quick-actions">
 		<h2 class="sr-only">Actions de configuration</h2>
 		<div class="action-cards">
-			<div class="action-card disabled" aria-disabled="true">
+			<a class="action-card" href="/admin/users">
 				<span class="action-icon">👥</span>
 				<span class="action-label">Gérer les utilisateurs</span>
-				<span class="action-hint">Bientôt disponible</span>
-			</div>
+				<span class="action-hint">Inviter et gérer</span>
+			</a>
 			<a class="action-card" href="/admin/classes">
 				<span class="action-icon">🏫</span>
 				<span class="action-label">Configurer les classes</span>

frontend/src/routes/admin/+layout.svelte

@@ -24,6 +24,7 @@
 	}
 
 	// Determine which admin section is active
+	const isUsersActive = $derived(page.url.pathname.startsWith('/admin/users'));
 	const isClassesActive = $derived(page.url.pathname.startsWith('/admin/classes'));
 	const isSubjectsActive = $derived(page.url.pathname.startsWith('/admin/subjects'));
 	const isPeriodsActive = $derived(page.url.pathname.startsWith('/admin/academic-year/periods'));
@@ -38,6 +39,7 @@
 			</button>
 			<nav class="header-nav">
 				<a href="/dashboard" class="nav-link">Tableau de bord</a>
+				<a href="/admin/users" class="nav-link" class:active={isUsersActive}>Utilisateurs</a>
 				<a href="/admin/classes" class="nav-link" class:active={isClassesActive}>Classes</a>
 				<a href="/admin/subjects" class="nav-link" class:active={isSubjectsActive}>Matières</a>
 				<a href="/admin/academic-year/periods" class="nav-link" class:active={isPeriodsActive}>Périodes</a>

frontend/src/routes/login/+page.svelte

@@ -104,7 +104,7 @@
 
 		try {
 			const result: LoginResult = await login({
-				email,
+				email: email.trim(),
 				password,
 				captcha_token: captchaToken ?? undefined
 			});
@@ -188,7 +188,7 @@
 			<h1>Connexion</h1>
 
 			{#if error}
-				<div class="error-banner" class:rate-limited={isRateLimited}>
+				<div class="error-banner" class:rate-limited={isRateLimited} class:account-suspended={error.type === 'account_suspended'}>
 					{#if isRateLimited}
 						<span class="error-icon">🔒</span>
 						<div class="error-content">
@@ -197,6 +197,11 @@
 								Réessayez dans <strong>{formatCountdown(retryAfterSeconds)}</strong>
 							</span>
 						</div>
+					{:else if error.type === 'account_suspended'}
+						<span class="error-icon">🚫</span>
+						<div class="error-content">
+							<span class="error-message">{error.message}</span>
+						</div>
 					{:else}
 						<span class="error-icon">⚠</span>
 						<span class="error-message">{error.message}</span>
@@ -208,6 +213,7 @@
 				<div class="form-group">
 					<label for="email">Adresse email</label>
 					<div class="input-wrapper">
+						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							id="email"
 							type="email"
@@ -216,6 +222,7 @@
 							bind:value={email}
 							disabled={isSubmitting || isRateLimited || isDelayed}
 							autocomplete="email"
+							autofocus
 						/>
 					</div>
 				</div>
@@ -393,6 +400,12 @@
 		color: hsl(38, 92%, 30%);
 	}
 
+	.error-banner.account-suspended {
+		background: linear-gradient(135deg, hsl(220, 30%, 95%) 0%, hsl(220, 30%, 97%) 100%);
+		border-color: hsl(220, 30%, 80%);
+		color: hsl(220, 30%, 30%);
+	}
+
 	.error-icon {
 		flex-shrink: 0;
 		font-size: 18px;