fix reload login/logout et expiration cookies
This commit is contained in:
parent
a868cb73e6
commit
261e89865c
@ -33,6 +33,7 @@
|
||||
"react-transition-group": "^4.4.5",
|
||||
"sweetalert2": "^11.6.6",
|
||||
"sweetalert2-react-content": "^5.0.7",
|
||||
"universal-cookie": "^4.0.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
}
|
||||
},
|
||||
|
@ -28,6 +28,7 @@
|
||||
"react-transition-group": "^4.4.5",
|
||||
"sweetalert2": "^11.6.6",
|
||||
"sweetalert2-react-content": "^5.0.7",
|
||||
"universal-cookie": "^4.0.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
@ -14,46 +14,46 @@ import Formulaire from "../pages/Formulaire";
|
||||
import MyInvoices from "../pages/MyInvoices";
|
||||
import { useState, useEffect } from "react";
|
||||
import React from 'react';
|
||||
import { useCookies } from 'react-cookie';
|
||||
import Invoices from "../pages/Invoices";
|
||||
import Cookies from "universal-cookie";
|
||||
|
||||
const App = () => {
|
||||
const [cookies, setCookie] = useCookies(['name']);
|
||||
const cookies = new Cookies();
|
||||
|
||||
useEffect(() => {
|
||||
async function FetchUser() {
|
||||
const response = await fetch(`https://localhost:7292/api/WhoAmI`, { credentials: 'include' });
|
||||
if (response.status === 200) {
|
||||
var user = await response.json();
|
||||
setCookie('GMGM', {...user, LoggedIn:true}, { path: '/', SameSite:'strict', secure:true })
|
||||
}
|
||||
else setCookie('GMGM', {LoggedIn:false}, { path: '/', SameSite:'strict', secure:true })
|
||||
const response = await fetch(`https://localhost:7292/api/WhoAmI`, { credentials: 'include' });
|
||||
if (response.status === 200) {
|
||||
var user = await response.json();
|
||||
cookies.set('GMGM', { ...user, LoggedIn: true }, { path: '/', SameSite: 'strict', secure: true, maxAge: 2592000 })
|
||||
}
|
||||
else cookies.set('GMGM', { LoggedIn: false }, { path: '/', SameSite: 'strict', secure: true, maxAge: 2592000 })
|
||||
}
|
||||
if (cookies.GMGM === null) {
|
||||
FetchUser();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Layout />}>
|
||||
<Route index element={<Home />} />
|
||||
<Route path="morceaux" element={<Morceaux/>} />
|
||||
<Route path="aboutUs" element={<AboutUs/>} />
|
||||
<Route path="contactUs" element={<ContactUs/>}/>
|
||||
<Route path="privacy" element={<Privacy/>}/>
|
||||
<Route path="morceaux/:id" element={<MorceauDetail/>}/>
|
||||
<Route path="inventaire" element={<Inventaire/>}/>
|
||||
<Route path="login" element={<Login/>}/>
|
||||
<Route path="logout" element={<Logout/>}/>
|
||||
<Route path="register" element={<Register/>}/>
|
||||
<Route path="formulaire" element={<Formulaire/>}/>
|
||||
<Route path="myinvoices" element={<MyInvoices/>}/>
|
||||
<Route path="invoices" element={<Invoices/>}/>
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Layout />}>
|
||||
<Route index element={<Home />} />
|
||||
<Route path="morceaux" element={<Morceaux />} />
|
||||
<Route path="aboutUs" element={<AboutUs />} />
|
||||
<Route path="contactUs" element={<ContactUs />} />
|
||||
<Route path="privacy" element={<Privacy />} />
|
||||
<Route path="morceaux/:id" element={<MorceauDetail />} />
|
||||
<Route path="inventaire" element={<Inventaire />} />
|
||||
<Route path="login" element={<Login />} />
|
||||
<Route path="logout" element={<Logout />} />
|
||||
<Route path="register" element={<Register />} />
|
||||
<Route path="formulaire" element={<Formulaire />} />
|
||||
<Route path="myinvoices" element={<MyInvoices />} />
|
||||
<Route path="invoices" element={<Invoices />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { useEffect } from "react";
|
||||
import { createContext, useState } from "react";
|
||||
import { useCookies } from "react-cookie";
|
||||
|
||||
export const CartContext = createContext({
|
||||
items: [],
|
||||
@ -14,9 +14,12 @@ export const CartContext = createContext({
|
||||
|
||||
export function CartProvider({ children }) {
|
||||
|
||||
const [cartCookie, setCartCookie] = useCookies(['cart'])
|
||||
const [cartProducts, setCartProducts] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
}, []);
|
||||
|
||||
function addToCart(product, qty) {
|
||||
|
||||
setCartProducts([...cartProducts, { ...product, quantity: parseFloat(qty), remaining: parseFloat(product.quantity) }]);
|
||||
|
@ -57,7 +57,7 @@ const Topbar = () => {
|
||||
</Link>
|
||||
{(user === null || user.LoggedIn === false) &&
|
||||
<Link className="nav-link" to="/login" >
|
||||
Connexion
|
||||
<b>Connexion</b>
|
||||
</Link>
|
||||
}
|
||||
{(user === null || user.LoggedIn === false) &&
|
||||
@ -87,9 +87,9 @@ const Topbar = () => {
|
||||
</Link>
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item>
|
||||
<Button className="nav-link" onClick={() => logOut()}>
|
||||
Déconnexion
|
||||
</Button>
|
||||
<Link className="nav-link" to="/logout">
|
||||
<b>Déconnexion</b>
|
||||
</Link>
|
||||
</Dropdown.Item>
|
||||
{user.role === "Administrateur" &&
|
||||
<Container>
|
||||
|
@ -1,16 +1,18 @@
|
||||
import { useState } from "react";
|
||||
import { Button } from "react-bootstrap";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useCookies } from "react-cookie";
|
||||
import Cookies from "universal-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 cookies = new Cookies();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogin = async (e) => {
|
||||
@ -21,8 +23,8 @@ const Login = () => {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Accept': 'text/json',
|
||||
'Content-Type': 'text/json'
|
||||
'Accept': 'text/json',
|
||||
'Content-Type': 'text/json'
|
||||
},
|
||||
body: JSON.stringify({ email, password })
|
||||
});
|
||||
@ -34,32 +36,32 @@ const Login = () => {
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Accept': 'text/json',
|
||||
'Content-Type': 'text/json'
|
||||
'Accept': 'text/json',
|
||||
'Content-Type': 'text/json'
|
||||
}
|
||||
});
|
||||
const user = await confirm.json();
|
||||
setCookie('GMGM', {...user, LoggedIn:true}, { path: '/', SameSite:'strict', secure:true })
|
||||
navigate("/");
|
||||
cookies.set('GMGM', { ...user, LoggedIn: true }, { path: '/', SameSite: 'strict', secure: true, maxAge: 2592000 })
|
||||
window.location.href = "/";
|
||||
}
|
||||
else {
|
||||
returnMessage("L'adresse courriel ou le mot de passe est incorrect.");
|
||||
setCookie('GMGM', {LoggedIn:false}, { path: '/', SameSite:'strict', secure:true })
|
||||
}
|
||||
cookies.set('GMGM', { LoggedIn: false }, { path: '/', SameSite: 'strict', secure: true, maxAge: 2592000 })
|
||||
}
|
||||
}
|
||||
else {
|
||||
returnMessage("Erreur d'API, veuillez réessayer plus tard.")
|
||||
setCookie('GMGM', {LoggedIn:false}, { path: '/', SameSite:'strict', secure:true })
|
||||
}
|
||||
cookies.set('GMGM', { LoggedIn: false }, { path: '/', SameSite: 'strict', secure: true, maxAge: 2592000 })
|
||||
}
|
||||
setPassword("");
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
if (isLoading) return (<div className="cat-load"/>)
|
||||
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>
|
||||
|
@ -1,30 +1,31 @@
|
||||
import { useCookies } from "react-cookie";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const Logout = () => {
|
||||
const navigate = useNavigate();
|
||||
const [cookies, setCookie, removeCookie] = useCookies(['name']);
|
||||
|
||||
|
||||
const response = fetch(`https://localhost:7292/api/Logout`, {
|
||||
method: 'POST',
|
||||
credentials: 'include'
|
||||
})
|
||||
method: 'POST',
|
||||
credentials: 'include'
|
||||
})
|
||||
|
||||
async function clear() {
|
||||
await removeCookie("GMGM");
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
clear();
|
||||
navigate("/");
|
||||
});
|
||||
useEffect(() => {
|
||||
if (cookies.GMGM != null) {
|
||||
clear();
|
||||
|
||||
window.location.reload();
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="inventaire-form-container">
|
||||
<h3 className="text-center">Vous n'êtes plus connecté!</h3>
|
||||
<h5 className="text-center">Faites le party ou quelque-chose...</h5>
|
||||
<h3 className="text-center">Vous n'êtes plus connecté!</h3>
|
||||
<h5 className="text-center">Faites le party ou quelque-chose...</h5>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user