88 lines
3.3 KiB
JavaScript
88 lines
3.3 KiB
JavaScript
import { useState } from "react";
|
|
import { Button } from "react-bootstrap";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useCookies } from "react-cookie";
|
|
|
|
const Login = () => {
|
|
const [cookies, setCookie] = useCookies(['name']);
|
|
const [rememberme, setPersistence] = useState(true);
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [returnmess, returnMessage] = useState("");
|
|
const [isLoading, setLoading] = useState(false);
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const handleLogin = async (e) => {
|
|
setLoading(true);
|
|
e.preventDefault();
|
|
|
|
const response = await fetch(`https://localhost:7292/api/Login?rememberMe=${rememberme}`, {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
headers: {
|
|
'Accept': 'text/json',
|
|
'Content-Type': 'text/json'
|
|
},
|
|
body: JSON.stringify({ email, password })
|
|
});
|
|
|
|
if (response.status === 200) {
|
|
var rep = await response.json();
|
|
if (rep.succeeded === true) {
|
|
const confirm = await fetch(`https://localhost:7292/api/WhoAmI`, {
|
|
method: 'GET',
|
|
credentials: 'include',
|
|
headers: {
|
|
'Accept': 'text/json',
|
|
'Content-Type': 'text/json'
|
|
}
|
|
});
|
|
const user = await confirm.json();
|
|
setCookie('GMGM', {...user, LoggedIn:true}, { path: '/', SameSite:'strict' })
|
|
navigate("/");
|
|
}
|
|
else {
|
|
returnMessage("L'adresse courriel ou le mot de passe est incorrect.");
|
|
setCookie('GMGM', {LoggedIn:false}, { path: '/', SameSite:'strict' })
|
|
}
|
|
}
|
|
else {
|
|
returnMessage("Erreur d'API, veuillez réessayer plus tard.")
|
|
setCookie('GMGM', {LoggedIn:false}, { path: '/', SameSite:'strict' })
|
|
}
|
|
setPassword("");
|
|
setLoading(false);
|
|
}
|
|
|
|
if (isLoading) return (<div className="cat-load"/>)
|
|
|
|
return (
|
|
<div className="inventaire-form-container">
|
|
|
|
<form className="form-horizontal" onSubmit={handleLogin}>
|
|
<h4 className="text-center">Connexion</h4>
|
|
<div>
|
|
<h5>{returnmess}</h5>
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Adresse courriel </label>
|
|
<input className="form-control form-input" type='text'
|
|
placeholder="Adresse..."
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)} />
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Mot de passe: </label>
|
|
<input type='password' className="form-control form-input"
|
|
placeholder="Mot de passe..."
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)} />
|
|
</div>
|
|
<Button className="btn-primary btn-ajouter-morceau" type="submit" >Connexion</Button>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Login; |