deploy
101 lines
3.8 KiB
TypeScript
101 lines
3.8 KiB
TypeScript
import { useState, FormEvent } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import toast from 'react-hot-toast';
|
|
import api from '../api/client';
|
|
import { useAuthStore } from '../store/auth';
|
|
|
|
export default function Login() {
|
|
const navigate = useNavigate();
|
|
const { setAuth } = useAuthStore();
|
|
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
async function handleSubmit(e: FormEvent) {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
|
|
try {
|
|
const res = await api.post('/auth/login', { email, password });
|
|
setAuth(res.data.user, res.data.accessToken, res.data.refreshToken);
|
|
navigate('/new', { replace: true });
|
|
} catch (err: any) {
|
|
toast.error(err.response?.data?.error ?? 'Connexion impossible');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-indigo-50 to-white flex flex-col items-center justify-center px-4">
|
|
|
|
{/* Logo / titre */}
|
|
<div className="mb-8 text-center">
|
|
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-indigo-600 shadow-lg mb-4">
|
|
<svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round"
|
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<h1 className="text-3xl font-bold text-gray-900">NotesFrais</h1>
|
|
<p className="text-gray-500 mt-1 text-sm">Gestion de notes de frais</p>
|
|
</div>
|
|
|
|
{/* Formulaire */}
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="w-full max-w-sm bg-white rounded-2xl shadow-sm border border-gray-100 p-6 space-y-4"
|
|
>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="votre@email.com"
|
|
required
|
|
autoComplete="email"
|
|
className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-900 placeholder-gray-400 transition"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Mot de passe
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="••••••••"
|
|
required
|
|
autoComplete="current-password"
|
|
className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-900 placeholder-gray-400 transition"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-60 text-white font-semibold rounded-xl transition-colors flex items-center justify-center gap-2 text-base"
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<svg className="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"/>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
|
|
</svg>
|
|
Connexion…
|
|
</>
|
|
) : (
|
|
'Se connecter'
|
|
)}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|