80 lines
2.5 KiB
JavaScript
80 lines
2.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useNavigate, useLocation } from 'react-router-dom';
|
|
import { useAuth } from '../context/useAuth';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Alert, AlertDescription } from '@/components/ui/alert';
|
|
|
|
const LoginPage = () => {
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [error, setError] = useState('');
|
|
const { login } = useAuth();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const from = location.state?.from?.pathname || "/";
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setError('');
|
|
try {
|
|
await login(username, password);
|
|
navigate(from, { replace: true });
|
|
} catch (err) {
|
|
setError('Nom d\'utilisateur ou mot de passe incorrect');
|
|
console.error(err);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="auth-page page-layout flex h-full w-full">
|
|
<Card className="flex h-full w-full">
|
|
<CardHeader className="border-b">
|
|
<CardTitle>Connexion</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{error && (
|
|
<Alert variant="destructive" className="mb-4">
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="username">Nom d'utilisateur:</Label>
|
|
<Input
|
|
id="username"
|
|
type="text"
|
|
autoComplete="username"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">Mot de passe:</Label>
|
|
<Input
|
|
className="current-password"
|
|
id="password"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<Button type="submit" className="w-full">
|
|
Se connecter
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoginPage;
|
|
|