memartel_loc/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix reload login/logout et expiration cookies

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
GrossesMitaines/grosses-mitaines-ui/package-lock.json generated
View File

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

1
GrossesMitaines/grosses-mitaines-ui/package.json
View File

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

56
GrossesMitaines/grosses-mitaines-ui/src/components/App.js
View File

@ -14,46 +14,46 @@ 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>
); );
}; };

7
GrossesMitaines/grosses-mitaines-ui/src/components/Cart.js
View File

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

8
GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
View File

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

24
GrossesMitaines/grosses-mitaines-ui/src/pages/Login.js
View File

@ -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) => {
@ -21,8 +23,8 @@ const Login = () => {
method: 'POST', method: 'POST',
credentials: 'include', credentials: 'include',
headers: { headers: {
'Accept': 'text/json', 'Accept': 'text/json',
'Content-Type': 'text/json' 'Content-Type': 'text/json'
}, },
body: JSON.stringify({ email, password }) body: JSON.stringify({ email, password })
}); });
@ -34,28 +36,28 @@ const Login = () => {
method: 'GET', method: 'GET',
credentials: 'include', credentials: 'include',
headers: { headers: {
'Accept': 'text/json', 'Accept': 'text/json',
'Content-Type': 'text/json' 'Content-Type': 'text/json'
} }
}); });
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">

21
GrossesMitaines/grosses-mitaines-ui/src/pages/Logout.js
View File

@ -1,30 +1,31 @@
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']);
const response = fetch(`https://localhost:7292/api/Logout`, { const response = fetch(`https://localhost:7292/api/Logout`, {
method: 'POST', method: 'POST',
credentials: 'include' credentials: 'include'
}) })
async function clear() { async function clear() {
await removeCookie("GMGM"); await removeCookie("GMGM");
} }
useEffect(()=>{ useEffect(() => {
clear(); if (cookies.GMGM != null) {
navigate("/"); clear();
});
window.location.reload();
}
}, []);
return ( return (
<div className="inventaire-form-container"> <div className="inventaire-form-container">
<h3 className="text-center">Vous n'êtes plus connecté!</h3> <h3 className="text-center">Vous n'êtes plus connecté!</h3>
<h5 className="text-center">Faites le party ou quelque-chose...</h5> <h5 className="text-center">Faites le party ou quelque-chose...</h5>
</div> </div>
) )
} }