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