LathanDevers
83 lines
3.1 KiB
React
83 lines
3.1 KiB
React
import { useState } from 'react';
|
|
import { useNavigate, Link } from 'react-router-dom';
|
|
import { loginClient } from '../../services/billing_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();
|
|
setError(null);
|
|
setLoading(true);
|
|
|
|
try {
|
|
await loginClient(email, password);
|
|
localStorage.setItem('gise_token', 'secure_token_alphanumerique_factice');
|
|
navigate('/dashboard');
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex justify-center mt-[10vh] px-5">
|
|
<div className="w-full max-w-100 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 className="text-[#888] font-mono text-sm mb-6 text-center">
|
|
[ IDENTIFICATION REQUISE ]
|
|
</p>
|
|
|
|
{error && (
|
|
<div className="text-[#ff003c] border border-[#ff003c] bg-[#ff003c]/10 p-3 mb-5 font-mono text-sm">
|
|
[ ALERTE ] : {error}
|
|
</div>
|
|
)}
|
|
|
|
<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)}
|
|
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 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)}
|
|
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"
|
|
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 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 >
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |