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,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>
);
};

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) => {
@ -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>

View File

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