neckfire/Front-DataSentinel
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

feat(auth): real JWT login, RBAC routes, RGPD cookie banner + users/journal admin
Build & Deploy / build (push) Successful in 11s
Details

Browse Source
This commit is contained in:
neckfire
2026-06-20 12:54:01 +02:00
parent 4466b38f75
commit 7a4206a522
12 changed files with 693 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DataSentinel/src/App.jsx
+35 -5
View File
@@ -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>
DataSentinel/src/components/Layout/Header.jsx
+2 -2
View File
@@ -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
DataSentinel/src/components/Layout/Layout.jsx
+2
View File
@@ -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>
);
}
DataSentinel/src/components/Layout/Sidebar.jsx
+17 -9
View File
@@ -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 */}
DataSentinel/src/components/common/CookieBanner.jsx
+53
View File
@@ -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>
);
}
DataSentinel/src/components/common/CookieBanner.module.css
+74
View File
@@ -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);
}
DataSentinel/src/context/AuthContext.jsx
+12 -11
View File
@@ -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é */
DataSentinel/src/pages/Journal/Journal.jsx
+1 -1
View File
@@ -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' },
DataSentinel/src/pages/Login/Login.jsx
+41 -21
View File
@@ -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>
DataSentinel/src/pages/Users/Users.jsx
+226 -29
View File
@@ -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>
);
}
}
DataSentinel/src/pages/Users/Users.module.css
+86
View File
@@ -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;
}
DataSentinel/src/services/api.js
+144 -2
View File
@@ -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');