fix reload login/logout et expiration cookies
This commit is contained in:
		@@ -14,46 +14,46 @@ import Formulaire from "../pages/Formulaire";
 | 
			
		||||
import MyInvoices from "../pages/MyInvoices";
 | 
			
		||||
import { useState, useEffect } from "react";
 | 
			
		||||
import React from 'react';
 | 
			
		||||
import { useCookies } from 'react-cookie';
 | 
			
		||||
import Invoices from "../pages/Invoices";
 | 
			
		||||
import Cookies from "universal-cookie";
 | 
			
		||||
 | 
			
		||||
const App = () => {
 | 
			
		||||
  const [cookies, setCookie] = useCookies(['name']);
 | 
			
		||||
  const cookies = new Cookies();
 | 
			
		||||
 | 
			
		||||
  useEffect(() => {
 | 
			
		||||
    async function FetchUser() {
 | 
			
		||||
        const response = await fetch(`https://localhost:7292/api/WhoAmI`, { credentials: 'include' });
 | 
			
		||||
        if (response.status === 200) {
 | 
			
		||||
          var user = await response.json();
 | 
			
		||||
          setCookie('GMGM', {...user, LoggedIn:true},  { path: '/', SameSite:'strict', secure:true })
 | 
			
		||||
        }
 | 
			
		||||
        else setCookie('GMGM', {LoggedIn:false},  { path: '/', SameSite:'strict', secure:true })
 | 
			
		||||
      const response = await fetch(`https://localhost:7292/api/WhoAmI`, { credentials: 'include' });
 | 
			
		||||
      if (response.status === 200) {
 | 
			
		||||
        var user = await response.json();
 | 
			
		||||
        cookies.set('GMGM', { ...user, LoggedIn: true }, { path: '/', SameSite: 'strict', secure: true, maxAge: 2592000 })
 | 
			
		||||
      }
 | 
			
		||||
      else cookies.set('GMGM', { LoggedIn: false }, { path: '/', SameSite: 'strict', secure: true, maxAge: 2592000 })
 | 
			
		||||
    }
 | 
			
		||||
    if (cookies.GMGM === null) {
 | 
			
		||||
      FetchUser();
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
      <BrowserRouter>
 | 
			
		||||
        <Routes>
 | 
			
		||||
          <Route path="/" element={<Layout />}>
 | 
			
		||||
            <Route index element={<Home />} />
 | 
			
		||||
            <Route path="morceaux" element={<Morceaux/>} />
 | 
			
		||||
            <Route path="aboutUs" element={<AboutUs/>} />
 | 
			
		||||
            <Route path="contactUs" element={<ContactUs/>}/>
 | 
			
		||||
            <Route path="privacy" element={<Privacy/>}/>
 | 
			
		||||
            <Route path="morceaux/:id" element={<MorceauDetail/>}/>
 | 
			
		||||
            <Route path="inventaire" element={<Inventaire/>}/>
 | 
			
		||||
            <Route path="login" element={<Login/>}/>
 | 
			
		||||
            <Route path="logout" element={<Logout/>}/>
 | 
			
		||||
            <Route path="register" element={<Register/>}/>
 | 
			
		||||
            <Route path="formulaire" element={<Formulaire/>}/>
 | 
			
		||||
            <Route path="myinvoices" element={<MyInvoices/>}/>
 | 
			
		||||
            <Route path="invoices" element={<Invoices/>}/>
 | 
			
		||||
          </Route>
 | 
			
		||||
        </Routes>
 | 
			
		||||
      </BrowserRouter>
 | 
			
		||||
    <BrowserRouter>
 | 
			
		||||
      <Routes>
 | 
			
		||||
        <Route path="/" element={<Layout />}>
 | 
			
		||||
          <Route index element={<Home />} />
 | 
			
		||||
          <Route path="morceaux" element={<Morceaux />} />
 | 
			
		||||
          <Route path="aboutUs" element={<AboutUs />} />
 | 
			
		||||
          <Route path="contactUs" element={<ContactUs />} />
 | 
			
		||||
          <Route path="privacy" element={<Privacy />} />
 | 
			
		||||
          <Route path="morceaux/:id" element={<MorceauDetail />} />
 | 
			
		||||
          <Route path="inventaire" element={<Inventaire />} />
 | 
			
		||||
          <Route path="login" element={<Login />} />
 | 
			
		||||
          <Route path="logout" element={<Logout />} />
 | 
			
		||||
          <Route path="register" element={<Register />} />
 | 
			
		||||
          <Route path="formulaire" element={<Formulaire />} />
 | 
			
		||||
          <Route path="myinvoices" element={<MyInvoices />} />
 | 
			
		||||
          <Route path="invoices" element={<Invoices />} />
 | 
			
		||||
        </Route>
 | 
			
		||||
      </Routes>
 | 
			
		||||
    </BrowserRouter>
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -1,5 +1,5 @@
 | 
			
		||||
import { useEffect } from "react";
 | 
			
		||||
import { createContext, useState } from "react";
 | 
			
		||||
import { useCookies } from "react-cookie";
 | 
			
		||||
 | 
			
		||||
export const CartContext = createContext({
 | 
			
		||||
    items: [],
 | 
			
		||||
@@ -14,9 +14,12 @@ export const CartContext = createContext({
 | 
			
		||||
 | 
			
		||||
export function CartProvider({ children }) {
 | 
			
		||||
 | 
			
		||||
    const [cartCookie, setCartCookie] = useCookies(['cart'])
 | 
			
		||||
    const [cartProducts, setCartProducts] = useState([]);
 | 
			
		||||
 | 
			
		||||
    useEffect(() => {
 | 
			
		||||
        
 | 
			
		||||
    }, []);
 | 
			
		||||
 | 
			
		||||
    function addToCart(product, qty) {
 | 
			
		||||
 | 
			
		||||
        setCartProducts([...cartProducts, { ...product, quantity: parseFloat(qty), remaining: parseFloat(product.quantity) }]);
 | 
			
		||||
 
 | 
			
		||||
@@ -57,7 +57,7 @@ const Topbar = () => {
 | 
			
		||||
                            </Link>
 | 
			
		||||
                            {(user === null || user.LoggedIn === false) &&
 | 
			
		||||
                                <Link className="nav-link" to="/login" >
 | 
			
		||||
                                    Connexion
 | 
			
		||||
                                    <b>Connexion</b>
 | 
			
		||||
                                </Link>
 | 
			
		||||
                            }
 | 
			
		||||
                            {(user === null || user.LoggedIn === false) &&
 | 
			
		||||
@@ -87,9 +87,9 @@ const Topbar = () => {
 | 
			
		||||
                                            </Link>
 | 
			
		||||
                                        </Dropdown.Item>
 | 
			
		||||
                                        <Dropdown.Item>
 | 
			
		||||
                                            <Button className="nav-link" onClick={() => logOut()}>
 | 
			
		||||
                                                Déconnexion
 | 
			
		||||
                                            </Button>
 | 
			
		||||
                                            <Link className="nav-link" to="/logout">
 | 
			
		||||
                                                <b>Déconnexion</b>
 | 
			
		||||
                                            </Link>
 | 
			
		||||
                                        </Dropdown.Item>
 | 
			
		||||
                                        {user.role === "Administrateur" &&
 | 
			
		||||
                                            <Container>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,16 +1,18 @@
 | 
			
		||||
import { useState } from "react";
 | 
			
		||||
import { Button } from "react-bootstrap";
 | 
			
		||||
import { useNavigate } from "react-router-dom";
 | 
			
		||||
import { useCookies } from "react-cookie";
 | 
			
		||||
import Cookies from "universal-cookie";
 | 
			
		||||
 | 
			
		||||
const Login = () => {
 | 
			
		||||
    const [cookies, setCookie] = useCookies(['name']);
 | 
			
		||||
 | 
			
		||||
    const [rememberme, setPersistence] = useState(true);
 | 
			
		||||
    const [email, setEmail] = useState("");
 | 
			
		||||
    const [password, setPassword] = useState("");
 | 
			
		||||
    const [returnmess, returnMessage] = useState("");
 | 
			
		||||
    const [isLoading, setLoading] = useState(false);
 | 
			
		||||
 | 
			
		||||
    const cookies = new Cookies();
 | 
			
		||||
 | 
			
		||||
    const navigate = useNavigate();
 | 
			
		||||
 | 
			
		||||
    const handleLogin = async (e) => {
 | 
			
		||||
@@ -21,8 +23,8 @@ const Login = () => {
 | 
			
		||||
            method: 'POST',
 | 
			
		||||
            credentials: 'include',
 | 
			
		||||
            headers: {
 | 
			
		||||
               'Accept': 'text/json',
 | 
			
		||||
               'Content-Type': 'text/json'
 | 
			
		||||
                'Accept': 'text/json',
 | 
			
		||||
                'Content-Type': 'text/json'
 | 
			
		||||
            },
 | 
			
		||||
            body: JSON.stringify({ email, password })
 | 
			
		||||
        });
 | 
			
		||||
@@ -34,32 +36,32 @@ const Login = () => {
 | 
			
		||||
                    method: 'GET',
 | 
			
		||||
                    credentials: 'include',
 | 
			
		||||
                    headers: {
 | 
			
		||||
                       'Accept': 'text/json',
 | 
			
		||||
                       'Content-Type': 'text/json'
 | 
			
		||||
                        'Accept': 'text/json',
 | 
			
		||||
                        'Content-Type': 'text/json'
 | 
			
		||||
                    }
 | 
			
		||||
                });
 | 
			
		||||
                const user = await confirm.json();
 | 
			
		||||
                setCookie('GMGM', {...user, LoggedIn:true},  { path: '/', SameSite:'strict', secure:true })
 | 
			
		||||
                navigate("/");
 | 
			
		||||
                cookies.set('GMGM', { ...user, LoggedIn: true }, { path: '/', SameSite: 'strict', secure: true, maxAge: 2592000 })
 | 
			
		||||
                window.location.href = "/";
 | 
			
		||||
            }
 | 
			
		||||
            else {
 | 
			
		||||
                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 {
 | 
			
		||||
            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("");
 | 
			
		||||
        setLoading(false);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    if (isLoading) return (<div className="cat-load"/>)
 | 
			
		||||
    if (isLoading) return (<div className="cat-load" />)
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
        <div className="inventaire-form-container">
 | 
			
		||||
          
 | 
			
		||||
 | 
			
		||||
            <form className="form-horizontal" onSubmit={handleLogin}>
 | 
			
		||||
                <h4 className="text-center">Connexion</h4>
 | 
			
		||||
                <div>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,30 +1,31 @@
 | 
			
		||||
import { useCookies } from "react-cookie";
 | 
			
		||||
import { useNavigate } from "react-router-dom";
 | 
			
		||||
import { useEffect, useState } 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'
 | 
			
		||||
    })  
 | 
			
		||||
        method: 'POST',
 | 
			
		||||
        credentials: 'include'
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
    async function clear() {
 | 
			
		||||
        await removeCookie("GMGM");
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    useEffect(()=>{
 | 
			
		||||
       clear();
 | 
			
		||||
        navigate("/");
 | 
			
		||||
    });
 | 
			
		||||
    useEffect(() => {
 | 
			
		||||
        if (cookies.GMGM != null) {
 | 
			
		||||
            clear();
 | 
			
		||||
 | 
			
		||||
            window.location.reload();
 | 
			
		||||
        }
 | 
			
		||||
    }, []);
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
        <div className="inventaire-form-container">
 | 
			
		||||
                <h3 className="text-center">Vous n'êtes plus connecté!</h3>
 | 
			
		||||
                <h5 className="text-center">Faites le party ou quelque-chose...</h5>
 | 
			
		||||
            <h3 className="text-center">Vous n'êtes plus connecté!</h3>
 | 
			
		||||
            <h5 className="text-center">Faites le party ou quelque-chose...</h5>
 | 
			
		||||
        </div>
 | 
			
		||||
    )
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user