Ajout react-cookie. (Besoin de reloader pour que la topbar suive le cookie)

2022-11-06 06:21:55 -08:00 · 2022-11-06 06:21:55 -08:00 · 10254a6439
commit 10254a6439
parent 82195303eb
8 changed files with 212 additions and 34 deletions
--- 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",
--- 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",
--- 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 (
-    <BrowserRouter>
-      <UserContext.Provider value={user}>
+      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<Home />} />
@ -51,8 +49,7 @@ const App = () => {
            <Route path="formulaire" element={<Formulaire/>}/>
          </Route>
        </Routes>
-      </UserContext.Provider>
-    </BrowserRouter>
+      </BrowserRouter>
  );
 };

--- 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 (
        <Navbar expand="sm" className="topbar-container">
            <Container>
@ -31,35 +38,72 @@ const Topbar = () => {
                        <Link className="nav-link" to="/privacy" >
                            Vie privée
                        </Link>
-                        {user !== null && user.hasCookie === false &&
+                        {(user === null || user.LoggedIn === false) &&
                        <Link className="nav-link" to="/login" >
                            Connexion
                        </Link>
                        }
-                        {user !== null && user.hasCookie === false &&
+                        {(user === null || user.LoggedIn === false) &&
                        <Link className="nav-link" to="/register">
                            S'inscrire
                        </Link>
                        }
-                        {user !== null && user.hasCookie === true &&
-                        <Link className="nav-link" to="/logout" >
-                            Déconnexion
-                        </Link>
-                        }
-                        {user !== null && user.hasCookie === true && user.role === "Administrateur" &&
+                        {user !== null && user.LoggedIn &&
                        <Dropdown className="dropdown-gestion-container">
-                            <Dropdown.Toggle className="dropdown-gestion" >
+                        <Dropdown.Toggle className="dropdown-gestion" >
+                            Bonjour, {user.firstName} {user.lastName}!
+                        </Dropdown.Toggle>
+                        <Dropdown.Menu className="dropdown-gestion-menu">
+                            <Dropdown.Item>
+                                <Link className="nav-link" to="/myaccount" >
+                                    Mon Compte
+                                </Link>
+                            </Dropdown.Item>
+                            <Dropdown.Item>
+                                <Link className="nav-link" to="/myaddresses" >
+                                    Mes Addresses
+                                </Link>
+                            </Dropdown.Item>
+                            <Dropdown.Item>
+                                <Link className="nav-link" to="/myinvoices" >
+                                    Mes Commandes
+                                </Link>
+                            </Dropdown.Item>
+                            <Dropdown.Item>
+                                <Link className="nav-link" to="/logout" >
+                                    Déconnexion
+                                </Link>
+                            </Dropdown.Item>
+                            {user.role === "Administrateur" &&
+                            <Container>
+                            <Dropdown.Divider/>
+                            <Dropdown.ItemText>
                                Gestion
-                            </Dropdown.Toggle>
-
-                            <Dropdown.Menu className="dropdown-gestion-menu">
-                                <Dropdown.Item>
+                            </Dropdown.ItemText>
+                            <Dropdown.Item>
                                    <Link className="nav-link" to="/inventaire" >
                                        Inventaire
                                    </Link>
                                </Dropdown.Item>
-                            </Dropdown.Menu>
-                        </Dropdown>
+                                <Dropdown.Item>
+                                    <Link className="nav-link" to="/invoices" >
+                                        Commandes
+                                    </Link>
+                                </Dropdown.Item>
+                                <Dropdown.Item>
+                                    <Link className="nav-link" to="/clients" >
+                                        Clients
+                                    </Link>
+                                </Dropdown.Item>
+                                <Dropdown.Item>
+                                    <Link className="nav-link" to="/addresses" >
+                                        Adresses
+                                    </Link>
+                                </Dropdown.Item>
+                            </Container>
+                            }
+                        </Dropdown.Menu>
+                    </Dropdown>
                        }
                    </Nav>
                </Navbar.Collapse>
--- 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(<App />)
+root.render(<CookiesProvider><App /></CookiesProvider>)
--- 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 = () => {
                <h4 className="home-subtitle">(à Ginette et Monique)</h4>
                <img src="/images/LesGrossesMitaines.png" className="home-img" alt="home"/>
                <br/>
-                <h2 className="home-description">Des produits bien commodes faits par des aînées d'expérience. {document.cookie}</h2>
+                <h2 className="home-description">Des produits bien commodes faits par des aînées d'expérience. </h2>
            </div>
            <FeaturedList
                products={products}
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Login.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Login.js
@ -1,8 +1,10 @@
 import { useState } from "react";
 import { Button } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
+import { useCookies } from "react-cookie";

 const Login = () => {
+    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("");
    }

--- 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 (
        <div className="inventaire-form-container">
                <h3 className="text-center">Vous n'êtes plus connecté!</h3>