68 lines
2.3 KiB
React
68 lines
2.3 KiB
React
import {useState, useContext, useEffect} from "react";
|
|
import styles from "./loginForm.module.css";
|
|
import Button from "../../../../components/ui/button/button.tsx";
|
|
import Input from "../../../../components/ui/input/input.tsx";
|
|
import Modal from "../../../../components/ui/modal/modal.tsx";
|
|
import { useNavigate } from "react-router";
|
|
import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
|
|
|
|
|
|
function LoginForm({ className }) {
|
|
|
|
|
|
const navigate = useNavigate();
|
|
const { login } = useContext(AuthContext);
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [open , setOpen] = useState(false);
|
|
|
|
|
|
const handleSubmit = async () => {
|
|
const res = await login(email, password);
|
|
if (res.status === 401 || res.status === 422) setOpen(true);
|
|
else navigate("/");
|
|
};
|
|
|
|
useEffect(() => {
|
|
const listener = (e) => {
|
|
if (e.key === "Enter") {
|
|
handleSubmit();
|
|
}
|
|
};
|
|
window.addEventListener("keydown", listener);
|
|
|
|
return () => {
|
|
window.removeEventListener("keydown", listener);
|
|
};
|
|
},);
|
|
|
|
return (
|
|
<div className={`${className} glassCard ${styles.inputContainer}`}>
|
|
<div className={styles.formgroup}>
|
|
<Input
|
|
type="email"
|
|
value={email}
|
|
placeholder="Adresse mail"
|
|
onChange={e => setEmail(e.target.value)}
|
|
style={{ width: '100%' }}
|
|
/>
|
|
</div>
|
|
<div className={styles.formgroup}>
|
|
<Input password={true} onChange={e => setPassword(e.target.value)} value={password} placeholder={"Mot de passe"} />
|
|
</div>
|
|
|
|
<div className={styles.logButton}>
|
|
<Button variant={"transparent"} onClick={() => navigate("/register")}>Vous n'avez pas de compte ?</Button>
|
|
<Button onClick={handleSubmit} variant={"default"}> Se connecter </Button>
|
|
</div>
|
|
|
|
<Modal title={"Impossible de se connecter"} open={open} onClose={() => setOpen(false)}>
|
|
<p>L'Email ou le mot de passe est incorrect</p>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default LoginForm;
|
|
|