upgrade design

src/pages/public/Login.jsx

@@ -15,23 +15,9 @@ export default function Login() {
     setLoading(true);
 
     try {
-      // 1. APPEL À TON API BACKEND (FOSSBilling / PHP)
-      // Ici, tu mettras ton vrai 'fetch' vers ton serveur pour vérifier le mot de passe.
-      // Pour l'instant, on simule un délai réseau d'une seconde.
-      await new Promise(resolve => setTimeout(resolve, 1000));
-
-      // --- SIMULATION D'AUTHENTIFICATION ---
-      // (À remplacer par la vraie validation de ton serveur)
       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
       localStorage.setItem('gise_token', 'secure_token_alphanumerique_factice');
-      
-      // 3. AUTORISATION ET REDIRECTION
-      // Maintenant que le token est en poche, ProtectedRoute nous laissera passer !
       navigate('/dashboard');
-
     } catch (err) {
       setError(err.message);
     } finally {
@@ -39,72 +25,56 @@ export default function Login() {
     }
   };
 
-  // --- DESIGN SYSTEM "BUNKER" ---
-  const inputStyle = {
-    width: '100%', padding: '10px', marginBottom: '20px',
-    backgroundColor: '#1A1A1A', color: '#00E5FF',
-    border: '1px solid #333', fontFamily: 'monospace', outline: 'none',
-    boxSizing: 'border-box'
-  };
-
-  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',
-    marginTop: '10px'
-  };
-
   return (
-    <div style={{ display: 'flex', justifyContent: 'center', marginTop: '10vh', padding: '0 20px' }}>
-      <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: '5px', fontSize: '1.5rem', textAlign: 'center' }}>
+    <div className="flex justify-center mt-[10vh] px-5">
+      <div className="w-full max-w-[400px] bg-[#242424] p-8 border-t-4 border-cyan-400 shadow-[0_10px_30px_rgba(0,0,0,0.5)]">
+        <h2 className="text-white uppercase mb-1 text-2xl text-center font-sans font-bold">
           Connexion au Nexus
         </h2>
-        <p style={{ color: '#888', fontFamily: 'monospace', fontSize: '0.85rem', marginBottom: '25px', textAlign: 'center' }}>
+        <p className="text-[#888] font-mono text-sm mb-6 text-center">
           [ IDENTIFICATION REQUISE ]
         </p>
 
         {error && (
-          <div style={{
-            color: '#ff003c', border: '1px solid #ff003c', backgroundColor: 'rgba(255, 0, 60, 0.1)',
-            padding: '10px', marginBottom: '20px', fontFamily: 'monospace', fontSize: '0.85rem'
-          }}>
+          <div className="text-[#ff003c] border border-[#ff003c] bg-[#ff003c]/10 p-3 mb-5 font-mono text-sm">
             [ ALERTE ] : {error}
           </div>
         )}
 
-        <form onSubmit={handleLogin}>
-          <label style={{ display: 'block', color: '#888', marginBottom: '5px', fontSize: '0.8rem' }}>IDENTIFIANT (E-MAIL)</label>
+        <form onSubmit={handleLogin} className="font-mono">
+          <label className="block text-[#888] mb-1 text-xs tracking-widest uppercase">Identifiant (E-mail)</label>
           <input 
             type="email" 
             value={email} 
             onChange={(e) => setEmail(e.target.value)} 
-            style={inputStyle} 
             required 
             placeholder="admin@gise.be" 
+            className="w-full p-3 mb-5 bg-[#1A1A1A] text-cyan-400 border border-[#333] outline-none focus:border-cyan-400 transition-colors"
           />
 
-          <label style={{ display: 'block', color: '#888', marginBottom: '5px', fontSize: '0.8rem' }}>CLÉ D'ACCÈS SÉCURISÉE</label>
+          <label className="block text-[#888] mb-1 text-xs tracking-widest uppercase">Clé d'accès sécurisée</label>
           <input 
             type="password" 
             value={password} 
             onChange={(e) => setPassword(e.target.value)} 
-            style={inputStyle} 
             required 
             placeholder="••••••••" 
+            className="w-full p-3 mb-5 bg-[#1A1A1A] text-cyan-400 border border-[#333] outline-none focus:border-cyan-400 transition-colors"
           />
 
-          <button type="submit" style={buttonStyle} disabled={loading}>
+          <button 
+            type="submit" 
+            disabled={loading}
+            className="w-full p-3 mt-2 font-bold uppercase tracking-widest transition-colors disabled:bg-[#333] disabled:text-[#888] disabled:cursor-not-allowed bg-cyan-400 hover:bg-cyan-300 text-black shadow-[0_0_15px_rgba(0,229,255,0.2)]"
+          >
             {loading ? 'VÉRIFICATION...' : 'OUVRIR LE SAS'}
           </button>
         </form>
 
-        <div style={{ marginTop: '20px', textAlign: 'center', fontSize: '0.85rem' }}>
-          <Link to="/register" style={{ color: '#888', textDecoration: 'none' }}>
-            Aucun accès réseau ? <span style={{ color: '#00E5FF' }}>S'enregistrer &gt;</span>
+        <div className="mt-5 text-center text-sm font-mono text-[#888]">
+          Aucun accès réseau ?{' '}
+          <Link to="/register" className="text-cyan-400 hover:text-cyan-300 transition-colors no-underline">
+            S'enregistrer &gt;
           </Link>
         </div>
       </div>