50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
|
import { useState, type FormEvent } from "react";
|
||
|
|
import { Link, useNavigate } from "react-router-dom";
|
||
|
|
import { useAuth } from "../context/AuthContext";
|
||
|
|
|
||
|
|
export default function Login() {
|
||
|
|
const { login } = useAuth();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const [email, setEmail] = useState("");
|
||
|
|
const [password, setPassword] = useState("");
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
|
||
|
|
const handleSubmit = async (e: FormEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
setError(null);
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
await login(email, password);
|
||
|
|
navigate("/dashboard");
|
||
|
|
} catch (err) {
|
||
|
|
setError(err instanceof Error ? err.message : "Errore di accesso");
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="auth-page">
|
||
|
|
<form className="auth-card" onSubmit={handleSubmit}>
|
||
|
|
<h1>Accedi</h1>
|
||
|
|
{error && <p className="error">{error}</p>}
|
||
|
|
<label>
|
||
|
|
Email
|
||
|
|
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
Password
|
||
|
|
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
|
||
|
|
</label>
|
||
|
|
<button type="submit" className="btn btn-primary" disabled={loading}>
|
||
|
|
{loading ? "Accesso..." : "Accedi"}
|
||
|
|
</button>
|
||
|
|
<p className="auth-link">
|
||
|
|
Non hai un account? <Link to="/register">Registrati</Link>
|
||
|
|
</p>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|