frontend/src/components/Layout.tsx

@@ -1,5 +1,6 @@
 import { Link, NavLink, Outlet, useNavigate } from 'react-router-dom';
 import { Moon, Sun, Monitor } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { useAuth } from '@/hooks/useAuth';
 import { useTheme } from '@/hooks/useTheme';
 import type { Theme } from '@/hooks/useTheme';
@@ -20,6 +21,7 @@ export function Layout(): JSX.Element {
   const { user, isAdmin, isRedteam, logout } = useAuth();
   const navigate = useNavigate();
   const { theme, cycleTheme } = useTheme();
+  const { t } = useTranslation();
 
   const handleLogout = async () => {
     await logout();
@@ -52,7 +54,7 @@ export function Layout(): JSX.Element {
                 onClick={handleLogout}
                 className="text-[14px] underline-offset-2 hover:underline"
               >
-                Sign out
+                {t('nav.signOut')}
               </button>
             </div>
           ) : null}
@@ -78,7 +80,7 @@ export function Layout(): JSX.Element {
                 }`
               }
             >
-              Engagements
+              {t('nav.engagements')}
             </NavLink>
             {isAdmin || isRedteam ? (
               <NavLink
@@ -91,7 +93,7 @@ export function Layout(): JSX.Element {
                   }`
                 }
               >
-                Templates
+                {t('nav.templates')}
               </NavLink>
             ) : null}
             {isAdmin ? (
@@ -105,7 +107,7 @@ export function Layout(): JSX.Element {
                   }`
                 }
               >
-                Users
+                {t('nav.users')}
               </NavLink>
             ) : null}
           </nav>

frontend/src/components/ProtectedRoute.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { Navigate, Outlet, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { useAuth } from '@/hooks/useAuth';
 import { useToast } from '@/hooks/useToast';
 import type { Role } from '@/api/types';
@@ -23,6 +24,7 @@ export function ProtectedRoute({
 }: ProtectedRouteProps): JSX.Element {
   const { user, status } = useAuth();
   const { push } = useToast();
+  const { t } = useTranslation();
   const location = useLocation();
 
   const roleDenied = Boolean(
@@ -31,12 +33,12 @@ export function ProtectedRoute({
 
   useEffect(() => {
     if (roleDenied) {
-      push('Accès refusé', 'error');
+      push(t('auth.forbidden'), 'error');
     }
-  }, [roleDenied, push]);
+  }, [roleDenied, push, t]);
 
   if (status === 'loading') {
-    return <LoadingState label="Loading session…" />;
+    return <LoadingState label={t('auth.loadingSession')} />;
   }
 
   if (status === 'unauthenticated' || !user) {

frontend/src/pages/LoginPage.tsx

@@ -1,5 +1,6 @@
 import { useState, type FormEvent } from 'react';
 import { Navigate, useLocation, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { extractApiError } from '@/api/client';
 import { useAuth } from '@/hooks/useAuth';
 import { FormField, TextInput } from '@/components/FormField';
@@ -14,6 +15,7 @@ export function LoginPage(): JSX.Element {
   const location = useLocation();
   const fromPath = (location.state as LocationState | null)?.from;
 
+  const { t } = useTranslation();
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [submitting, setSubmitting] = useState(false);
@@ -34,7 +36,7 @@ export function LoginPage(): JSX.Element {
       await login(username, password);
       navigate(fromPath ?? '/engagements', { replace: true });
     } catch (err) {
-      setError(extractApiError(err, 'Invalid credentials'));
+      setError(extractApiError(err, t('auth.login.invalid')));
     } finally {
       setSubmitting(false);
     }
@@ -48,10 +50,10 @@ export function LoginPage(): JSX.Element {
           <span className="inline-block h-8 w-8 rotate-12 bg-primary" aria-hidden />
           <h1 className="text-[28px] font-medium leading-none">Mimic</h1>
         </div>
-        <p className="text-[16px] text-charcoal">Sign in to access your engagements.</p>
+        <p className="text-[16px] text-charcoal">{t('auth.login.subtitle')}</p>
 
         <form onSubmit={onSubmit} noValidate className="flex flex-col gap-md">
-          <FormField label="Username" htmlFor="login-username" required>
+          <FormField label={t('auth.login.username')} htmlFor="login-username" required>
             <TextInput
               id="login-username"
               name="username"
@@ -62,7 +64,7 @@ export function LoginPage(): JSX.Element {
             />
           </FormField>
 
-          <FormField label="Password" htmlFor="login-password" required>
+          <FormField label={t('auth.login.password')} htmlFor="login-password" required>
             <TextInput
               id="login-password"
               type="password"
@@ -81,7 +83,7 @@ export function LoginPage(): JSX.Element {
           ) : null}
 
           <button type="submit" className="btn-primary" disabled={submitting}>
-            {submitting ? 'Signing in…' : 'Sign in'}
+            {submitting ? t('auth.login.signingIn') : t('auth.login.signIn')}
           </button>
         </form>
       </div>

frontend/vitest.setup.ts

@@ -1 +1,2 @@
 import '@testing-library/jest-dom/vitest';
+import './src/i18n';