fix reload login/logout et expiration cookies

This commit is contained in:
Victor Turgeon 2022-11-08 02:17:15 -05:00
parent a868cb73e6
commit 261e89865c
7 changed files with 67 additions and 59 deletions

View File

@ -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"
}
},

View File

@ -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": {

View File

@ -14,43 +14,43 @@ 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 })
cookies.set('GMGM', { ...user, LoggedIn: true }, { path: '/', SameSite: 'strict', secure: true, maxAge: 2592000 })
}
else setCookie('GMGM', {LoggedIn:false}, { path: '/', SameSite:'strict', secure:true })
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 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>

View File

@ -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) }]);

View File

@ -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>

View File

@ -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) => {
@ -39,23 +41,23 @@ const Login = () => {
}
});
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">

View File

@ -1,9 +1,7 @@
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']);
@ -16,10 +14,13 @@ const Logout = () => {
await removeCookie("GMGM");
}
useEffect(()=>{
useEffect(() => {
if (cookies.GMGM != null) {
clear();
navigate("/");
});
window.location.reload();
}
}, []);
return (
<div className="inventaire-form-container">