From 10254a6439b724639bc69a537076db6932d46952 Mon Sep 17 00:00:00 2001 From: MarcEricMartel <74071476+MarcEricMartel@users.noreply.github.com> Date: Sun, 6 Nov 2022 06:21:55 -0800 Subject: [PATCH] Ajout react-cookie. (Besoin de reloader pour que la topbar suive le cookie) --- .../grosses-mitaines-ui/package-lock.json | 113 ++++++++++++++++++ .../grosses-mitaines-ui/package.json | 1 + .../grosses-mitaines-ui/src/components/App.js | 21 ++-- .../src/components/Topbar.js | 76 +++++++++--- .../grosses-mitaines-ui/src/index.js | 4 +- .../grosses-mitaines-ui/src/pages/Home.js | 5 +- .../grosses-mitaines-ui/src/pages/Login.js | 14 ++- .../grosses-mitaines-ui/src/pages/Logout.js | 12 ++ 8 files changed, 212 insertions(+), 34 deletions(-) diff --git a/GrossesMitaines/grosses-mitaines-ui/package-lock.json b/GrossesMitaines/grosses-mitaines-ui/package-lock.json index 561588e..d23ef8d 100644 --- a/GrossesMitaines/grosses-mitaines-ui/package-lock.json +++ b/GrossesMitaines/grosses-mitaines-ui/package-lock.json @@ -22,6 +22,7 @@ "fortawesome": "^0.0.1-security", "react": "^18.2.0", "react-bootstrap": "^2.5.0", + "react-cookie": "^4.1.1", "react-devtools": "^4.26.0", "react-dom": "^18.2.0", "react-fontawesome": "^1.7.1", @@ -3924,6 +3925,11 @@ "@types/node": "*" } }, + "node_modules/@types/cookie": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz", + "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==" + }, "node_modules/@types/eslint": { "version": "8.4.6", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.6.tgz", @@ -3976,6 +3982,15 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -9424,6 +9439,19 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -15137,6 +15165,19 @@ } } }, + "node_modules/react-cookie": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz", + "integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==", + "dependencies": { + "@types/hoist-non-react-statics": "^3.0.1", + "hoist-non-react-statics": "^3.0.0", + "universal-cookie": "^4.0.0" + }, + "peerDependencies": { + "react": ">= 16.3.0" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -17443,6 +17484,23 @@ "node": ">=8" } }, + "node_modules/universal-cookie": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz", + "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==", + "dependencies": { + "@types/cookie": "^0.3.3", + "cookie": "^0.4.0" + } + }, + "node_modules/universal-cookie/node_modules/cookie": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", + "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/universalify": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", @@ -21290,6 +21348,11 @@ "@types/node": "*" } }, + "@types/cookie": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz", + "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==" + }, "@types/eslint": { "version": "8.4.6", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.6.tgz", @@ -21342,6 +21405,15 @@ "@types/node": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -25364,6 +25436,21 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -29323,6 +29410,16 @@ "warning": "^4.0.3" } }, + "react-cookie": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz", + "integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==", + "requires": { + "@types/hoist-non-react-statics": "^3.0.1", + "hoist-non-react-statics": "^3.0.0", + "universal-cookie": "^4.0.0" + } + }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -31061,6 +31158,22 @@ "crypto-random-string": "^2.0.0" } }, + "universal-cookie": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz", + "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==", + "requires": { + "@types/cookie": "^0.3.3", + "cookie": "^0.4.0" + }, + "dependencies": { + "cookie": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", + "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==" + } + } + }, "universalify": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", diff --git a/GrossesMitaines/grosses-mitaines-ui/package.json b/GrossesMitaines/grosses-mitaines-ui/package.json index 751706c..e4c095d 100644 --- a/GrossesMitaines/grosses-mitaines-ui/package.json +++ b/GrossesMitaines/grosses-mitaines-ui/package.json @@ -17,6 +17,7 @@ "fortawesome": "^0.0.1-security", "react": "^18.2.0", "react-bootstrap": "^2.5.0", + "react-cookie": "^4.1.1", "react-devtools": "^4.26.0", "react-dom": "^18.2.0", "react-fontawesome": "^1.7.1", diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/App.js b/GrossesMitaines/grosses-mitaines-ui/src/components/App.js index 14de554..62cb7bf 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/App.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/App.js @@ -13,29 +13,27 @@ import Register from "../pages/Register"; import Formulaire from "../pages/Formulaire"; import { useState, useEffect } from "react"; import React from 'react'; - -const UserContext = React.createContext(); +import { useCookies } from 'react-cookie'; const App = () => { - const [user, setUser] = useState(null); + const [cookies, setCookie] = useCookies(['name']); useEffect(() => { 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) { - setUser(await response.json()); + var user = await response.json(); + setCookie('GMGM', {...user, LoggedIn:true}, { path: '/', sameSite:'strict' }) } - else setUser({hasCookie: false}) - console.log(user) + else setCookie('GMGM', {LoggedIn:false}, { path: '/', sameSite:'strict' }) } - if (user === null) { + if (cookies.GMGM === null) { FetchUser(); } }); return ( - - + }> } /> @@ -51,8 +49,7 @@ const App = () => { }/> - - + ); }; diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js index 5823d25..e725000 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js @@ -4,9 +4,16 @@ import Nav from 'react-bootstrap/Nav'; import Navbar from 'react-bootstrap/Navbar'; import { Link } from "react-router-dom"; import Dropdown from "react-bootstrap/Dropdown"; +import { useCookies } from "react-cookie"; const Topbar = () => { - const user = null; + const [cookies, setCookie] = useCookies(['name']); + var user = cookies.GMGM ?? null; + useEffect(() => { + if (cookies.GMGM !== user) + user = cookies.GMGM; + }); + return ( @@ -31,35 +38,72 @@ const Topbar = () => { Vie privée - {user !== null && user.hasCookie === false && + {(user === null || user.LoggedIn === false) && Connexion } - {user !== null && user.hasCookie === false && + {(user === null || user.LoggedIn === false) && S'inscrire } - {user !== null && user.hasCookie === true && - - Déconnexion - - } - {user !== null && user.hasCookie === true && user.role === "Administrateur" && + {user !== null && user.LoggedIn && - + + Bonjour, {user.firstName} {user.lastName}! + + + + + Mon Compte + + + + + Mes Addresses + + + + + Mes Commandes + + + + + Déconnexion + + + {user.role === "Administrateur" && + + + Gestion - - - - + + Inventaire - - + + + Commandes + + + + + Clients + + + + + Adresses + + + + } + + } diff --git a/GrossesMitaines/grosses-mitaines-ui/src/index.js b/GrossesMitaines/grosses-mitaines-ui/src/index.js index 3eae5d6..21aa725 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/index.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/index.js @@ -4,8 +4,10 @@ import 'font-awesome/css/font-awesome.min.css' import 'bootstrap/dist/css/bootstrap.min.css' import './stylesheets/site.css' import App from './components/App' +import { CookiesProvider } from 'react-cookie'; + const container = document.getElementById('root') const root = ReactDOM.createRoot(container) -root.render() \ No newline at end of file +root.render() \ No newline at end of file diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Home.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Home.js index 035305c..5af5e16 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Home.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Home.js @@ -1,6 +1,5 @@ import React from "react"; -import { useEffect } from "react"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import ResearchBar from "../components/ResearchBar"; import FeaturedList from "../components/FeaturedList"; @@ -29,7 +28,7 @@ const Home = () => {

(à Ginette et Monique)

home
-

Des produits bien commodes faits par des aînées d'expérience. {document.cookie}

+

Des produits bien commodes faits par des aînées d'expérience.

{ + const [cookies, setCookie] = useCookies(['name']); const [rememberme, setPersistence] = useState(true); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); @@ -34,11 +36,19 @@ const Login = () => { 'Content-Type': 'text/json' } }); + const user = await confirm.json(); + setCookie('GMGM', {...user, LoggedIn:true}, { path: '/', sameSite:'strict' }) navigate("/"); } - else returnMessage("L'adresse courriel ou le mot de passe est incorrect."); + else { + returnMessage("L'adresse courriel ou le mot de passe est incorrect."); + setCookie('GMGM', {LoggedIn:false}, { path: '/', sameSite:'strict' }) + } } - else returnMessage("Erreur d'API, veuillez réessayer plus tard.") + else { + returnMessage("Erreur d'API, veuillez réessayer plus tard.") + setCookie('GMGM', {LoggedIn:false}, { path: '/', sameSite:'strict' }) + } setPassword(""); } diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Logout.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Logout.js index 94298f2..82f8862 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Logout.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Logout.js @@ -1,10 +1,22 @@ +import { useCookies } from "react-cookie"; +import { useNavigate } from "react-router-dom"; +import { useEffect } 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' }) + removeCookie("GMGM"); + + useEffect(()=>{ + navigate("/"); + }); + return (

Vous n'êtes plus connecté!