Ajout react-cookie. (Besoin de reloader pour que la topbar suive le cookie)
This commit is contained in:
MarcEricMartel
parent
82195303eb
commit
10254a6439
113
GrossesMitaines/grosses-mitaines-ui/package-lock.json
generated
113
GrossesMitaines/grosses-mitaines-ui/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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}>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
}
|
||||
{user !== null && user.hasCookie === true && user.role === "Administrateur" &&
|
||||
<Dropdown className="dropdown-gestion-container">
|
||||
<Dropdown.Toggle className="dropdown-gestion" >
|
||||
</Dropdown.Item>
|
||||
{user.role === "Administrateur" &&
|
||||
<Container>
|
||||
<Dropdown.Divider/>
|
||||
<Dropdown.ItemText>
|
||||
Gestion
|
||||
</Dropdown.Toggle>
|
||||
|
||||
<Dropdown.Menu className="dropdown-gestion-menu">
|
||||
</Dropdown.ItemText>
|
||||
<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>
|
||||
}
|
||||
|
||||
@ -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>)
|
||||
@ -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}
|
||||
|
||||
@ -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("");
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user