ajout du dashboard

src/pages/public/Login.jsx

@@ -1,6 +1,7 @@
 // src/pages/public/Login.jsx
 import { useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
+import { loginClient } from '../../services/api';
 
 export default function Login() {
   const [email, setEmail] = useState('');
@@ -22,7 +23,7 @@ export default function Login() {
 
       // --- SIMULATION D'AUTHENTIFICATION ---
       // (À remplacer par la vraie validation de ton serveur)
-      if (email === 'test@gise.be' && password === 'Bunker!2026') {
+      if (await loginClient(email, password)) {
         
         // 2. LA CLÉ DU PROBLÈME EST ICI : L'ATTRIBUTION DU BADGE
         // On sauvegarde le token (généralement renvoyé par ton API) dans le navigateur

src/pages/public/login.old.jsx

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { loginClient } from '../../services/api';
+
+export default function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const handleLogin = async (e) => {
+    e.preventDefault(); // Empêche la page de se rafraîchir
+    setError(null);
+    setLoading(true);
+
+    try {
+      // On envoie la requête à FOSSBilling
+      await loginClient(email, password);
+      
+      // Si on arrive ici, le login est un succès !
+      // On redirige vers l'espace client sécurisé
+      navigate('/dashboard');
+      
+    } catch (err) {
+      setError(err.message || "Accès refusé. Vérifiez vos identifiants.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Styles CSS en variables pour garder le code lisible
+  const inputStyle = {
+    width: '100%', padding: '12px', marginBottom: '15px', 
+    backgroundColor: '#1A1A1A', color: '#00E5FF', 
+    border: '1px solid #333', fontFamily: 'monospace', outline: 'none'
+  };
+
+  const buttonStyle = {
+    width: '100%', padding: '12px', backgroundColor: loading ? '#333' : '#00E5FF',
+    color: loading ? '#888' : '#000', border: 'none', cursor: loading ? 'not-allowed' : 'pointer',
+    fontFamily: 'monospace', fontWeight: 'bold', textTransform: 'uppercase', letterSpacing: '1px'
+  };
+
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', marginTop: '10vh' }}>
+      <div style={{ 
+        width: '100%', maxWidth: '400px', backgroundColor: '#242424', 
+        padding: '30px', borderTop: '4px solid #00E5FF', boxShadow: '0 10px 30px rgba(0,0,0,0.5)'
+      }}>
+        <h2 style={{ color: '#FFF', textTransform: 'uppercase', marginBottom: '20px', fontSize: '1.5rem' }}>
+          Authentification
+        </h2>
+
+        {/* Zone d'erreur qui s'affiche si le mot de passe est faux */}
+        {error && (
+          <div style={{ backgroundColor: 'rgba(255, 68, 68, 0.1)', color: '#FF4444', padding: '10px', marginBottom: '15px', border: '1px solid #FF4444', fontSize: '0.9rem' }}>
+            [ ERREUR ] : {error}
+          </div>
+        )}
+
+        <form onSubmit={handleLogin}>
+          <label style={{ display: 'block', color: '#888', marginBottom: '5px', fontSize: '0.8rem' }}>IDENTIFIANT (EMAIL)</label>
+          <input 
+            type="email" 
+            value={email} 
+            onChange={(e) => setEmail(e.target.value)} 
+            style={inputStyle} 
+            required 
+            placeholder="admin@gise.be"
+          />
+
+          <label style={{ display: 'block', color: '#888', marginBottom: '5px', fontSize: '0.8rem' }}>CLÉ D'ACCÈS (MOT DE PASSE)</label>
+          <input 
+            type="password" 
+            value={password} 
+            onChange={(e) => setPassword(e.target.value)} 
+            style={inputStyle} 
+            required 
+            placeholder="••••••••"
+          />
+
+          <button type="submit" style={buttonStyle} disabled={loading}>
+            {loading ? 'VÉRIFICATION...' : 'INITIALISER LA CONNEXION'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}