From 7a4206a5227fb3b19808467ab0d5d3b7dd30eb62 Mon Sep 17 00:00:00 2001
From: neckfire <ma.garnier@xefi.fr>
Date: Sat, 20 Jun 2026 12:53:56 +0200
Subject: [PATCH] feat(auth): real JWT login, RBAC routes, RGPD cookie banner +
 users/journal admin

---
 DataSentinel/src/App.jsx                      |  40 ++-
 DataSentinel/src/components/Layout/Header.jsx |   4 +-
 DataSentinel/src/components/Layout/Layout.jsx |   2 +
 .../src/components/Layout/Sidebar.jsx         |  26 +-
 .../src/components/common/CookieBanner.jsx    |  53 ++++
 .../components/common/CookieBanner.module.css |  74 +++++
 DataSentinel/src/context/AuthContext.jsx      |  23 +-
 DataSentinel/src/pages/Journal/Journal.jsx    |   2 +-
 DataSentinel/src/pages/Login/Login.jsx        |  62 +++--
 DataSentinel/src/pages/Users/Users.jsx        | 255 ++++++++++++++++--
 DataSentinel/src/pages/Users/Users.module.css |  86 ++++++
 DataSentinel/src/services/api.js              | 146 +++++++++-
 12 files changed, 693 insertions(+), 80 deletions(-)
 create mode 100644 DataSentinel/src/components/common/CookieBanner.jsx
 create mode 100644 DataSentinel/src/components/common/CookieBanner.module.css

diff --git a/DataSentinel/src/App.jsx b/DataSentinel/src/App.jsx
index f11b569..24306f8 100644
--- a/DataSentinel/src/App.jsx
+++ b/DataSentinel/src/App.jsx
@@ -12,14 +12,22 @@ import Fournisseur from './pages/Fournisseur/Fournisseur';
 import Historique from './pages/Historique/Historique';
 import Admin from './pages/Admin/Admin';
 import Users from './pages/Users/Users';
+import Journal from './pages/Journal/Journal';
 import Documentation from './pages/Documentation/Documentation';
 import MentionsLegales from './pages/MentionsLegales/MentionsLegales';
 import CGU from './pages/CGU/CGU';
 
-/* Composant pour protéger les routes nécessitant une authentification */
-function ProtectedRoute({ children }) {
+/* Composant pour protéger les routes nécessitant une authentification.
+ * requireRole (optionnel) : restreint l'accès à un rôle précis (ex. "Admin"). */
+function ProtectedRoute({ children, requireRole }) {
   const { user } = useAuth();
-  return user ? children : <Navigate to="/login" replace />;
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+  if (requireRole && user.role !== requireRole) {
+    return <Navigate to="/dashboard" replace />;
+  }
+  return children;
 }
 
 /* Composant pour les routes publiques (login) */
@@ -61,8 +69,30 @@ function App() {
             <Route path="contrat" element={<Contrat />} />
             <Route path="fournisseur" element={<Fournisseur />} />
             <Route path="historique" element={<Historique />} />
-            <Route path="admin" element={<Admin />} />
-            <Route path="utilisateurs" element={<Users />} />
+            <Route
+              path="admin"
+              element={
+                <ProtectedRoute requireRole="Admin">
+                  <Admin />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="utilisateurs"
+              element={
+                <ProtectedRoute requireRole="Admin">
+                  <Users />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="journal"
+              element={
+                <ProtectedRoute requireRole="Admin">
+                  <Journal />
+                </ProtectedRoute>
+              }
+            />
             <Route path="documentation" element={<Documentation />} />
           </Route>
 
diff --git a/DataSentinel/src/components/Layout/Header.jsx b/DataSentinel/src/components/Layout/Header.jsx
index 31a2449..3692e77 100644
--- a/DataSentinel/src/components/Layout/Header.jsx
+++ b/DataSentinel/src/components/Layout/Header.jsx
@@ -44,8 +44,8 @@ export default function Header({ onToggleSidebar, sidebarOpen }) {
           <Bell size={18} color="var(--color-white)" aria-hidden="true" />
         </button>
         {user && (
-          <span className={styles.username} aria-label={`Connecté en tant que ${user.nom}`}>
-            {user.nom}
+          <span className={styles.username} aria-label={`Connecté en tant que ${user.username}`}>
+            {user.username}
           </span>
         )}
         <button
diff --git a/DataSentinel/src/components/Layout/Layout.jsx b/DataSentinel/src/components/Layout/Layout.jsx
index 2f77506..a4dc843 100644
--- a/DataSentinel/src/components/Layout/Layout.jsx
+++ b/DataSentinel/src/components/Layout/Layout.jsx
@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import Header from './Header';
 import Sidebar from './Sidebar';
+import CookieBanner from '../common/CookieBanner';
 import { Outlet } from 'react-router-dom';
 import styles from './Layout.module.css';
 
@@ -19,6 +20,7 @@ export default function Layout() {
       <main id="main-content" className={styles.main} tabIndex="-1">
         <Outlet />
       </main>
+      <CookieBanner />
     </div>
   );
 }
diff --git a/DataSentinel/src/components/Layout/Sidebar.jsx b/DataSentinel/src/components/Layout/Sidebar.jsx
index 3a54ea3..082bd2d 100644
--- a/DataSentinel/src/components/Layout/Sidebar.jsx
+++ b/DataSentinel/src/components/Layout/Sidebar.jsx
@@ -11,7 +11,9 @@ import {
   Book,
   Shield,
   FileText,
+  ScrollText,
 } from 'lucide-react';
+import { useAuth } from '../../context/AuthContext';
 import styles from './Sidebar.module.css';
 
 /* Un lien de navigation avec icône */
@@ -31,6 +33,9 @@ function NavItem({ to, icon: Icon, label }) {
 }
 
 export default function Sidebar({ isOpen, onClose }) {
+  const { user } = useAuth();
+  const isAdmin = user?.role === 'Admin';
+
   return (
     <>
       {/* Overlay mobile pour fermer la sidebar */}
@@ -58,15 +63,18 @@ export default function Sidebar({ isOpen, onClose }) {
             <NavItem to="/historique" icon={Clock} label="Historique" />
           </div>
 
-          <div className={styles.separator} role="separator" />
-
-          {/* Section administration */}
-          <div className={styles.sectionLabel} aria-hidden="true">ADMIN</div>
-          <div className={styles.section} role="group" aria-label="Administration">
-            <NavItem to="/admin" icon={Settings} label="Nomenclature" />
-            <NavItem to="/utilisateurs" icon={Users} label="Utilisateurs" />
-
-          </div>
+          {/* Section administration : réservée aux administrateurs */}
+          {isAdmin && (
+            <>
+              <div className={styles.separator} role="separator" />
+              <div className={styles.sectionLabel} aria-hidden="true">ADMIN</div>
+              <div className={styles.section} role="group" aria-label="Administration">
+                <NavItem to="/admin" icon={Settings} label="Nomenclature" />
+                <NavItem to="/utilisateurs" icon={Users} label="Utilisateurs" />
+                <NavItem to="/journal" icon={ScrollText} label="Journal d'audit" />
+              </div>
+            </>
+          )}
         </nav>
 
         {/* Liens de pied de sidebar */}
diff --git a/DataSentinel/src/components/common/CookieBanner.jsx b/DataSentinel/src/components/common/CookieBanner.jsx
new file mode 100644
index 0000000..ae7208b
--- /dev/null
+++ b/DataSentinel/src/components/common/CookieBanner.jsx
@@ -0,0 +1,53 @@
+/* Bandeau de consentement aux cookies (RGPD) */
+
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import styles from './CookieBanner.module.css';
+
+const CONSENT_KEY = 'ds_cookies_consent';
+const CONSENT_VERSION = 1;
+
+export default function CookieBanner() {
+  /* Affiché tant qu'aucune décision n'a été enregistrée */
+  const [visible, setVisible] = useState(() => localStorage.getItem(CONSENT_KEY) === null);
+
+  if (!visible) {
+    return null;
+  }
+
+  /* Enregistre la décision de l'utilisateur (accept / refuse) */
+  function enregistrerChoix(choice) {
+    const decision = { choice, date: new Date().toISOString(), version: CONSENT_VERSION };
+    localStorage.setItem(CONSENT_KEY, JSON.stringify(decision));
+    setVisible(false);
+  }
+
+  return (
+    <div className={styles.banner} role="dialog" aria-label="Consentement aux cookies">
+      <div className={styles.content}>
+        <p className={styles.text}>
+          Nous utilisons des cookies pour assurer le bon fonctionnement de la plateforme.
+          Vous pouvez accepter ou refuser leur utilisation. Pour en savoir plus, consultez nos{' '}
+          <Link to="/mentions-legales" className={styles.link}>mentions légales</Link> et nos{' '}
+          <Link to="/cgu" className={styles.link}>CGU</Link>.
+        </p>
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className={styles.btnRefuse}
+            onClick={() => enregistrerChoix('refuse')}
+          >
+            Refuser
+          </button>
+          <button
+            type="button"
+            className={styles.btnAccept}
+            onClick={() => enregistrerChoix('accept')}
+          >
+            Tout accepter
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/DataSentinel/src/components/common/CookieBanner.module.css b/DataSentinel/src/components/common/CookieBanner.module.css
new file mode 100644
index 0000000..df9afc9
--- /dev/null
+++ b/DataSentinel/src/components/common/CookieBanner.module.css
@@ -0,0 +1,74 @@
+/* Bandeau de consentement aux cookies (RGPD) */
+
+.banner {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: var(--color-white);
+  border-top: 3px solid var(--color-primary);
+  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
+  padding: 16px 24px;
+}
+
+.content {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.text {
+  font-size: 13px;
+  color: var(--color-text);
+  margin: 0;
+  flex: 1;
+  min-width: 240px;
+}
+
+.link {
+  color: var(--color-link);
+  text-decoration: underline;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.btnAccept {
+  padding: 9px 18px;
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  border: none;
+  border-radius: var(--radius);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.btnAccept:hover {
+  background-color: var(--color-primary-dark);
+}
+
+.btnRefuse {
+  padding: 9px 18px;
+  background-color: var(--color-white);
+  color: var(--color-text);
+  border: 1px solid var(--color-gray-border);
+  border-radius: var(--radius);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.btnRefuse:hover {
+  background-color: var(--color-danger-bg);
+}
diff --git a/DataSentinel/src/context/AuthContext.jsx b/DataSentinel/src/context/AuthContext.jsx
index 37f0c12..931718e 100644
--- a/DataSentinel/src/context/AuthContext.jsx
+++ b/DataSentinel/src/context/AuthContext.jsx
@@ -1,32 +1,33 @@
 /* Contexte d'authentification global : gestion de l'utilisateur connecté */
 
 import { createContext, useContext, useState } from 'react';
+import * as api from '../services/api';
 
 const AuthContext = createContext(null);
 
-/* Utilisateur fictif stocké après connexion réussie (V1, pas de vrai auth) */
-const USER_FICTIF = { nom: 'Coyaud', prenom: 'Anthony', role: 'Admin' };
 const STORAGE_KEY = 'ds_user';
 
 /* Fournisseur du contexte d'authentification */
 export function AuthProvider({ children }) {
   const [user, setUser] = useState(() => {
-    /* Restauration de la session depuis sessionStorage */
-    const stored = sessionStorage.getItem(STORAGE_KEY);
+    /* Restauration de la session depuis le localStorage au montage */
+    const stored = localStorage.getItem(STORAGE_KEY);
     return stored ? JSON.parse(stored) : null;
   });
 
-  /* Connexion : stocke l'utilisateur fictif dans le state et sessionStorage, retourne true */
-  function login() {
-    setUser(USER_FICTIF);
-    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(USER_FICTIF));
-    return true;
+  /* Connexion : appelle l'API, stocke le token + l'utilisateur retourné */
+  async function login(username, password) {
+    const connectedUser = await api.login(username, password);
+    setUser(connectedUser);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(connectedUser));
+    return connectedUser;
   }
 
-  /* Déconnexion : vide le state et sessionStorage */
+  /* Déconnexion : vide le token, le state et le localStorage */
   function logout() {
+    api.clearToken();
     setUser(null);
-    sessionStorage.removeItem(STORAGE_KEY);
+    localStorage.removeItem(STORAGE_KEY);
   }
 
   /* Booléen pratique pour savoir si l'utilisateur est connecté */
diff --git a/DataSentinel/src/pages/Journal/Journal.jsx b/DataSentinel/src/pages/Journal/Journal.jsx
index 9c9a181..2c25bc7 100644
--- a/DataSentinel/src/pages/Journal/Journal.jsx
+++ b/DataSentinel/src/pages/Journal/Journal.jsx
@@ -30,7 +30,7 @@ export default function Journal() {
 
   const columns = [
     { key: 'date_action', label: 'Date' },
-    { key: 'utilisateur', label: 'Utilisateur' },
+    { key: 'username', label: 'Utilisateur' },
     { key: 'action', label: 'Action' },
     { key: 'detail', label: 'Détail' },
     { key: 'ip', label: 'Adresse IP' },
diff --git a/DataSentinel/src/pages/Login/Login.jsx b/DataSentinel/src/pages/Login/Login.jsx
index a52a2a4..8a470e7 100644
--- a/DataSentinel/src/pages/Login/Login.jsx
+++ b/DataSentinel/src/pages/Login/Login.jsx
@@ -1,14 +1,23 @@
-/* Page de connexion : formulaire + SSO Windows */
+/* Page de connexion : formulaire avec authentification JWT + captcha anti-bot */
 
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
-import { getHealth } from '../../services/api';
 import styles from './Login.module.css';
 
+/* Génère deux entiers aléatoires pour le captcha additif */
+function genererCaptcha() {
+  return {
+    x: Math.floor(Math.random() * 10) + 1,
+    y: Math.floor(Math.random() * 10) + 1,
+  };
+}
+
 export default function Login() {
   const [identifiant, setIdentifiant] = useState('');
   const [motDePasse, setMotDePasse] = useState('');
+  const [captcha, setCaptcha] = useState(() => genererCaptcha());
+  const [reponseCaptcha, setReponseCaptcha] = useState('');
   const [loading, setLoading] = useState(false);
   const [erreur, setErreur] = useState('');
 
@@ -18,25 +27,29 @@ export default function Login() {
   async function handleSubmit(e) {
     e.preventDefault();
     setErreur('');
-    setLoading(true);
 
+    /* Vérification anti-bot du captcha avant tout appel réseau */
+    if (parseInt(reponseCaptcha, 10) !== captcha.x + captcha.y) {
+      setErreur('Réponse au captcha incorrecte.');
+      setCaptcha(genererCaptcha());
+      setReponseCaptcha('');
+      return;
+    }
+
+    setLoading(true);
     try {
-      /* Vérification de la disponibilité de l'API avant connexion */
-      await getHealth();
-      login({ nom: identifiant || 'Utilisateur', role: 'user', token: 'session' });
+      await login(identifiant, motDePasse);
       navigate('/dashboard');
-    } catch {
-      setErreur('Impossible de contacter le serveur. Vérifiez que l\'API est démarrée sur le port 8000.');
+    } catch (err) {
+      /* Message générique en cas d'identifiants invalides ou d'erreur serveur */
+      setErreur(err.message === 'Identifiants invalides' ? 'Identifiants invalides' : (err.message || 'Identifiants invalides'));
+      setCaptcha(genererCaptcha());
+      setReponseCaptcha('');
     } finally {
       setLoading(false);
     }
   }
 
-  function handleSso() {
-    /* Connexion SSO Windows : même vérification API */
-    handleSubmit({ preventDefault: () => {} });
-  }
-
   return (
     <div className={styles.page}>
       <div className={styles.card}>
@@ -73,6 +86,21 @@ export default function Login() {
             />
           </div>
 
+          <div className={styles.field}>
+            <label className={styles.label} htmlFor="captcha">
+              Vérification : combien font {captcha.x} + {captcha.y} ?
+            </label>
+            <input
+              id="captcha"
+              type="number"
+              className={styles.input}
+              value={reponseCaptcha}
+              onChange={e => setReponseCaptcha(e.target.value)}
+              placeholder="Votre réponse"
+              autoComplete="off"
+            />
+          </div>
+
           {erreur && <p className={styles.erreur}>{erreur}</p>}
 
           <button type="submit" className={styles.btnPrimary} disabled={loading}>
@@ -80,14 +108,6 @@ export default function Login() {
           </button>
         </form>
 
-        <div className={styles.divider}>
-          <span>ou</span>
-        </div>
-
-        <button type="button" className={styles.btnSecondary} onClick={handleSso} disabled={loading}>
-          Connexion Windows SSO
-        </button>
-
         <div className={styles.links}>
           <a href="#" className={styles.forgotLink}>Mot de passe oublié ?</a>
         </div>
diff --git a/DataSentinel/src/pages/Users/Users.jsx b/DataSentinel/src/pages/Users/Users.jsx
index 345e29b..b0e5b79 100644
--- a/DataSentinel/src/pages/Users/Users.jsx
+++ b/DataSentinel/src/pages/Users/Users.jsx
@@ -1,76 +1,273 @@
 // src/pages/Users/Users.jsx
-// Page Utilisateurs : gestion des utilisateurs (simulation)
-import { useState } from 'react';
-import { Plus, Edit, Trash2 } from 'lucide-react';
+// Page Utilisateurs : gestion réelle des utilisateurs via l'API admin
+import { useState, useEffect, useCallback } from 'react';
+import { Plus, Edit, Trash2, KeyRound } from 'lucide-react';
 import DataTable from '../../components/common/DataTable';
 import Button from '../../components/common/Button';
+import LoadingSpinner from '../../components/common/LoadingSpinner';
+import ErrorMessage from '../../components/common/ErrorMessage';
+import {
+  getUsers,
+  createUser,
+  updateUser,
+  deleteUser,
+  resetUserPassword,
+} from '../../services/api';
 import styles from './Users.module.css';
 
-/* Données simulées pour les utilisateurs */
-const mockUsers = [
-  { id: 1, nom: 'Alice Dupont', email: 'alice@xefi.fr', role: 'Admin', actif: true },
-  { id: 2, nom: 'Bob Martin', email: 'bob@xefi.fr', role: 'Utilisateur', actif: true },
-  { id: 3, nom: 'Charlie Durand', email: 'charlie@xefi.fr', role: 'Utilisateur', actif: false }
-];
+/* Rôles disponibles côté backend */
+const ROLES = ['Admin', 'Superviseur', 'Consultant'];
 
 export default function Users() {
-  const [users, setUsers] = useState(mockUsers);
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [erreur, setErreur] = useState('');
 
-  function handleAdd() {
-    console.log('Ajouter utilisateur');
+  /* Modale active : 'create' | 'edit' | 'reset' | null */
+  const [modal, setModal] = useState(null);
+  const [selected, setSelected] = useState(null);
+  const [form, setForm] = useState({});
+  const [formError, setFormError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const charger = useCallback(async () => {
+    setLoading(true);
+    setErreur('');
+    try {
+      const data = await getUsers();
+      setUsers(Array.isArray(data) ? data : []);
+    } catch (e) {
+      setErreur(e.message || 'Erreur lors du chargement des utilisateurs.');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    charger();
+  }, [charger]);
+
+  /* Ouverture des modales */
+  function ouvrirCreation() {
+    setSelected(null);
+    setForm({ username: '', email: '', password: '', role: 'Consultant' });
+    setFormError('');
+    setModal('create');
   }
 
-  function handleEdit(user) {
-    console.log('Modifier utilisateur', user);
+  function ouvrirEdition(user) {
+    setSelected(user);
+    setForm({ email: user.email ?? '', role: user.role ?? 'Consultant', actif: !!user.actif });
+    setFormError('');
+    setModal('edit');
   }
 
-  function handleDelete(user) {
-    setUsers(prev => prev.map(u => u.id === user.id ? { ...u, actif: false } : u));
+  function ouvrirReset(user) {
+    setSelected(user);
+    setForm({ password: '' });
+    setFormError('');
+    setModal('reset');
+  }
+
+  function fermerModale() {
+    setModal(null);
+    setSelected(null);
+    setForm({});
+    setFormError('');
+  }
+
+  /* Suppression (soft delete) avec confirmation */
+  async function handleDelete(user) {
+    if (!window.confirm(`Désactiver l'utilisateur "${user.username}" ?`)) {
+      return;
+    }
+    try {
+      await deleteUser(user.id_user);
+      await charger();
+    } catch (e) {
+      setErreur(e.message || 'Erreur lors de la suppression.');
+    }
+  }
+
+  /* Soumission de la modale courante */
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setFormError('');
+    setSubmitting(true);
+    try {
+      if (modal === 'create') {
+        await createUser({
+          username: form.username,
+          email: form.email,
+          password: form.password,
+          role: form.role,
+        });
+      } else if (modal === 'edit') {
+        await updateUser(selected.id_user, {
+          email: form.email,
+          role: form.role,
+          actif: form.actif,
+        });
+      } else if (modal === 'reset') {
+        await resetUserPassword(selected.id_user, form.password);
+      }
+      fermerModale();
+      await charger();
+    } catch (e) {
+      setFormError(e.message || 'Une erreur est survenue.');
+    } finally {
+      setSubmitting(false);
+    }
   }
 
   const columns = [
-    { key: 'nom', label: 'Nom' },
+    { key: 'username', label: 'Identifiant' },
     { key: 'email', label: 'Email' },
     { key: 'role', label: 'Rôle' },
     {
       key: 'actif',
       label: 'Statut',
-      render: (val) => val ? 'Actif' : 'Inactif'
+      render: (val) => (val ? 'Actif' : 'Inactif'),
     },
     {
       key: 'actions',
       label: 'Actions',
       render: (val, row) => (
         <div className={styles.actions}>
-          <button className={styles.actionBtn} onClick={() => handleEdit(row)}>
+          <button className={styles.actionBtn} onClick={() => ouvrirEdition(row)}>
             <Edit size={14} />
             Modifier
           </button>
+          <button className={styles.actionBtn} onClick={() => ouvrirReset(row)}>
+            <KeyRound size={14} />
+            Mot de passe
+          </button>
           <button className={styles.actionBtn} onClick={() => handleDelete(row)}>
             <Trash2 size={14} />
             Désactiver
           </button>
         </div>
-      )
-    }
+      ),
+    },
   ];
 
   return (
     <div className={styles.page}>
       <div className={styles.header}>
         <h1 className={styles.title}>Utilisateurs</h1>
-        <Button variant="primary" onClick={handleAdd}>
+        <Button variant="primary" onClick={ouvrirCreation}>
           <Plus size={14} />
           Ajouter
         </Button>
       </div>
 
-      <DataTable
-        columns={columns}
-        data={users}
-        pageSize={50}
-        emptyMessage="Aucun utilisateur trouvé."
-      />
+      {loading ? (
+        <LoadingSpinner message="Chargement des utilisateurs..." />
+      ) : erreur ? (
+        <ErrorMessage message={erreur} onRetry={charger} />
+      ) : (
+        <DataTable
+          columns={columns}
+          data={users.map(u => ({ ...u, id: u.id_user }))}
+          pageSize={50}
+          emptyMessage="Aucun utilisateur trouvé."
+        />
+      )}
+
+      {modal && (
+        <div className={styles.overlay} role="dialog" aria-modal="true" onClick={fermerModale}>
+          <div className={styles.modal} onClick={e => e.stopPropagation()}>
+            <h2 className={styles.modalTitle}>
+              {modal === 'create' && 'Nouvel utilisateur'}
+              {modal === 'edit' && `Modifier ${selected?.username}`}
+              {modal === 'reset' && `Réinitialiser le mot de passe de ${selected?.username}`}
+            </h2>
+
+            <form className={styles.form} onSubmit={handleSubmit}>
+              {modal === 'create' && (
+                <div className={styles.field}>
+                  <label className={styles.label} htmlFor="username">Identifiant</label>
+                  <input
+                    id="username"
+                    type="text"
+                    className={styles.input}
+                    value={form.username}
+                    onChange={e => setForm(f => ({ ...f, username: e.target.value }))}
+                    required
+                  />
+                </div>
+              )}
+
+              {(modal === 'create' || modal === 'edit') && (
+                <div className={styles.field}>
+                  <label className={styles.label} htmlFor="email">Email</label>
+                  <input
+                    id="email"
+                    type="email"
+                    className={styles.input}
+                    value={form.email}
+                    onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
+                    required
+                  />
+                </div>
+              )}
+
+              {(modal === 'create' || modal === 'reset') && (
+                <div className={styles.field}>
+                  <label className={styles.label} htmlFor="password">Mot de passe</label>
+                  <input
+                    id="password"
+                    type="password"
+                    className={styles.input}
+                    value={form.password}
+                    onChange={e => setForm(f => ({ ...f, password: e.target.value }))}
+                    required
+                  />
+                </div>
+              )}
+
+              {(modal === 'create' || modal === 'edit') && (
+                <div className={styles.field}>
+                  <label className={styles.label} htmlFor="role">Rôle</label>
+                  <select
+                    id="role"
+                    className={styles.input}
+                    value={form.role}
+                    onChange={e => setForm(f => ({ ...f, role: e.target.value }))}
+                  >
+                    {ROLES.map(r => (
+                      <option key={r} value={r}>{r}</option>
+                    ))}
+                  </select>
+                </div>
+              )}
+
+              {modal === 'edit' && (
+                <div className={styles.checkboxField}>
+                  <input
+                    id="actif"
+                    type="checkbox"
+                    checked={form.actif}
+                    onChange={e => setForm(f => ({ ...f, actif: e.target.checked }))}
+                  />
+                  <label htmlFor="actif">Compte actif</label>
+                </div>
+              )}
+
+              {formError && <p className={styles.formError}>{formError}</p>}
+
+              <div className={styles.modalActions}>
+                <Button variant="neutral" type="button" onClick={fermerModale} disabled={submitting}>
+                  Annuler
+                </Button>
+                <Button variant="primary" type="submit" disabled={submitting}>
+                  {submitting ? 'Enregistrement...' : 'Enregistrer'}
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/DataSentinel/src/pages/Users/Users.module.css b/DataSentinel/src/pages/Users/Users.module.css
index d8d1f99..0552da1 100644
--- a/DataSentinel/src/pages/Users/Users.module.css
+++ b/DataSentinel/src/pages/Users/Users.module.css
@@ -40,4 +40,90 @@
 
 .actionBtn:hover {
   color: var(--color-primary);
+}
+
+/* Modale de création / édition / réinitialisation */
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.modal {
+  background-color: var(--color-white);
+  width: 100%;
+  max-width: 440px;
+  border-radius: var(--radius);
+  border-top: 4px solid var(--color-primary);
+  padding: 28px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.modalTitle {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0 0 20px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.input {
+  padding: 10px 12px;
+  border: 1px solid var(--color-gray-border);
+  border-radius: var(--radius);
+  font-size: 14px;
+  color: var(--color-text);
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.input:focus {
+  border-color: var(--color-primary);
+}
+
+.checkboxField {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: var(--color-text);
+}
+
+.formError {
+  font-size: 13px;
+  color: var(--color-primary);
+  background-color: var(--color-danger-bg);
+  border-left: 3px solid var(--color-primary);
+  padding: 8px 12px;
+  border-radius: var(--radius);
+  margin: 0;
+}
+
+.modalActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 8px;
 }
\ No newline at end of file
diff --git a/DataSentinel/src/services/api.js b/DataSentinel/src/services/api.js
index c7442ce..7c6f0c9 100644
--- a/DataSentinel/src/services/api.js
+++ b/DataSentinel/src/services/api.js
@@ -3,7 +3,44 @@
 /* Utilise la variable d'environnement Vite si définie, sinon localhost par défaut */
 const BASE_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
 
-/* Fonction utilitaire pour les requêtes fetch avec gestion d'erreur */
+/* Clés de stockage local pour le token JWT et l'utilisateur connecté */
+const TOKEN_KEY = 'ds_token';
+const USER_KEY = 'ds_user';
+
+/* Helpers de gestion du token JWT dans le localStorage */
+export function getToken() {
+  return localStorage.getItem(TOKEN_KEY);
+}
+
+export function setToken(token) {
+  localStorage.setItem(TOKEN_KEY, token);
+}
+
+export function clearToken() {
+  localStorage.removeItem(TOKEN_KEY);
+}
+
+/* Construit les en-têtes d'authentification si un token est présent */
+function authHeaders(extra = {}) {
+  const token = getToken();
+  const headers = { ...extra };
+  if (token) {
+    headers.Authorization = `Bearer ${token}`;
+  }
+  return headers;
+}
+
+/* Gestion d'une réponse 401 : purge de la session et redirection vers /login */
+function handleUnauthorized() {
+  clearToken();
+  localStorage.removeItem(USER_KEY);
+  /* Évite une boucle de redirection si on est déjà sur la page de connexion */
+  if (window.location.pathname !== '/login') {
+    window.location.href = '/login';
+  }
+}
+
+/* Fonction utilitaire pour les requêtes fetch (GET) avec gestion d'erreur et auth */
 async function fetchApi(path, params = {}) {
   const url = new URL(`${BASE_URL}${path}`);
   Object.entries(params).forEach(([key, value]) => {
@@ -13,7 +50,11 @@ async function fetchApi(path, params = {}) {
   });
 
   try {
-    const response = await fetch(url.toString());
+    const response = await fetch(url.toString(), { headers: authHeaders() });
+    if (response.status === 401) {
+      handleUnauthorized();
+      throw new Error('Session expirée, veuillez vous reconnecter.');
+    }
     if (!response.ok) {
       const errorText = await response.text();
       console.error(`Erreur API [${response.status}] ${path}: ${errorText}`);
@@ -26,6 +67,107 @@ async function fetchApi(path, params = {}) {
   }
 }
 
+/* Helper générique pour les requêtes JSON (POST / PUT / DELETE) avec auth */
+async function sendJson(path, method, body) {
+  const url = `${BASE_URL}${path}`;
+  const options = {
+    method,
+    headers: authHeaders(body !== undefined ? { 'Content-Type': 'application/json' } : {}),
+  };
+  if (body !== undefined) {
+    options.body = JSON.stringify(body);
+  }
+
+  try {
+    const response = await fetch(url, options);
+    if (response.status === 401) {
+      handleUnauthorized();
+      throw new Error('Session expirée, veuillez vous reconnecter.');
+    }
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error(`Erreur API [${response.status}] ${path}: ${errorText}`);
+      throw new Error(`Erreur ${response.status}: ${errorText}`);
+    }
+    /* Certaines réponses (204, DELETE) peuvent ne pas contenir de corps JSON */
+    const text = await response.text();
+    return text ? JSON.parse(text) : null;
+  } catch (error) {
+    console.error(`Erreur lors de l'appel API ${path}:`, error);
+    throw error;
+  }
+}
+
+/* Authentification : POST /auth/login en x-www-form-urlencoded (OAuth2) */
+export async function login(username, password) {
+  const body = new URLSearchParams();
+  body.append('username', username);
+  body.append('password', password);
+
+  const response = await fetch(`${BASE_URL}/auth/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: body.toString(),
+  });
+
+  if (response.status === 401) {
+    throw new Error('Identifiants invalides');
+  }
+  if (response.status === 429) {
+    throw new Error('Trop de tentatives. Veuillez réessayer dans une minute.');
+  }
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Erreur ${response.status}: ${errorText}`);
+  }
+
+  const data = await response.json();
+  setToken(data.access_token);
+  return data.user;
+}
+
+/* Récupère le profil de l'utilisateur connecté */
+export async function getMe() {
+  return fetchApi('/auth/me');
+}
+
+/* ---------- Administration des utilisateurs ---------- */
+
+export async function getUsers() {
+  return fetchApi('/admin/users');
+}
+
+export async function createUser({ username, email, password, role }) {
+  return sendJson('/admin/users', 'POST', { username, email, password, role });
+}
+
+export async function updateUser(id_user, changes) {
+  return sendJson(`/admin/users/${id_user}`, 'PUT', changes);
+}
+
+export async function deleteUser(id_user) {
+  return sendJson(`/admin/users/${id_user}`, 'DELETE');
+}
+
+export async function resetUserPassword(id_user, password) {
+  return sendJson(`/admin/users/${id_user}/reset-password`, 'POST', { password });
+}
+
+/* Journal d'audit */
+export async function getJournal(limit = 200) {
+  return fetchApi('/admin/journal', { limit });
+}
+
+/* ---------- RGPD : données personnelles ---------- */
+
+export async function exportMyData() {
+  return fetchApi('/me/data-export');
+}
+
+export async function deleteMyAccount() {
+  return sendJson('/me', 'DELETE');
+}
+
 /* Santé de l'API */
 export async function getHealth() {
   return fetchApi('/health');