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

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

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

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';
-
+import { useCookies } from 'react-cookie';
-const UserContext = React.createContext();
 
 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})
+        else setCookie('GMGM', {LoggedIn:false},  { path: '/', sameSite:'strict' })
-        console.log(user)
     }
-    if (user === null) {
+    if (cookies.GMGM === null) {
       FetchUser();
     }
 });
 
   return (
       <BrowserRouter>
-      <UserContext.Provider value={user}>
         <Routes>
           <Route path="/" element={<Layout />}>
             <Route index element={<Home />} />
@@ -51,7 +49,6 @@ const App = () => {
             <Route path="formulaire" element={<Formulaire/>}/>
           </Route>
         </Routes>
-      </UserContext.Provider>
       </BrowserRouter>
   );
 };

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,33 +38,70 @@ 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 &&
+                        {user !== null && user.LoggedIn &&
+                        <Dropdown className="dropdown-gestion-container">
+                        <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 !== null && user.hasCookie === true && user.role === "Administrateur" &&
+                            {user.role === "Administrateur" &&
-                        <Dropdown className="dropdown-gestion-container">
+                            <Container>
-                            <Dropdown.Toggle className="dropdown-gestion" >
+                            <Dropdown.Divider/>
+                            <Dropdown.ItemText>
                                 Gestion
-                            </Dropdown.Toggle>
+                            </Dropdown.ItemText>
-
-                            <Dropdown.Menu className="dropdown-gestion-menu">
                             <Dropdown.Item>
                                     <Link className="nav-link" to="/inventaire" >
                                         Inventaire
                                     </Link>
                                 </Dropdown.Item>
+                                <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>
                         }

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

GrossesMitaines/grosses-mitaines-ui/src/pages/Home.js

@@ -1,6 +1,5 @@
 import React from "react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
-import { 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}

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.")
+            setCookie('GMGM', {LoggedIn:false},  { path: '/', sameSite:'strict' })      
         } 
-        else returnMessage("Erreur d'API, veuillez réessayer plus tard.")           
         setPassword("");
     }
 

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>