Pagination/login signup

backend/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "argon2": "^0.31.2",
+    "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "dotenv": "^16.3.1",
     "express": "^4.18.2",

backend/src/app.js

@@ -66,8 +66,9 @@ app.use(express.json());
 
 // Then, require the module and use it as middleware in your Express application:
 
-// const cookieParser = require("cookie-parser");
-// app.use(cookieParser());
+const cookieParser = require("cookie-parser");
+
+app.use(cookieParser());
 
 // Once `cookie-parser` is set up, you can read and set cookies in your routes.
 // For example, to set a cookie named "username" with the value "john":

backend/src/controllers/playerControllers.js

@@ -88,9 +88,18 @@ const log = async (req, res, next) => {
   }
 };
 
+const logout = (req, res) => {
+  // Effacer le cookie d'authentification côté client
+  res.clearCookie("auth");
+
+  // Répondre avec succès
+  res.sendStatus(200);
+};
+
 module.exports = {
   browse,
   destroy,
   add,
   log,
+  logout,
 };

backend/src/router.js

@@ -13,6 +13,7 @@ const hashPassword = require("./midleware/hash/hashPassword");
 const validateUsers = require("./midleware/joi/validateUsers");
 
 router.get("/players", PlayerControllers.browse);
+router.post("/logout", PlayerControllers.logout);
 router.delete("/players/:id", PlayerControllers.destroy);
 router.get("/party", PartyControllers.browse);
 router.get("/party/:id", PartyControllers.read);

frontend/context/AuthContext.jsx

@@ -19,6 +19,7 @@ function AuthProvider({ children }) {
     }),
     [connected, setConnected, profil, setProfile, wonGames, setWonGames]
   );
+
   return (
     <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
   );

frontend/src/components/header/Header.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import logo from "../../assets/logo.png";
+import ButtonConected from "../input/ButtonConected";
+
+function Header() {
+  return (
+    <div className="headerContainer">
+      <img src={logo} alt="logo" width={100} />
+      <ButtonConected />
+    </div>
+  );
+}
+
+export default Header;

frontend/src/components/input/ButtonConected.jsx

@@ -0,0 +1,36 @@
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+import { AuthContext } from "../../../context/AuthContext";
+import connexion from "../../services/connexion";
+
+function ButtonConected() {
+  const { connected } = useContext(AuthContext);
+  const reload = async () => {
+    try {
+      await connexion.post("/logout");
+    } catch (error) {
+      console.error("Erreur lors de la déconnexion :", error);
+    }
+    window.location.reload();
+  };
+  return (
+    <div>
+      {connected.login && (
+        <div>
+          <button onClick={reload} className="disconnectedButton" type="button">
+            Deconnexion
+          </button>
+        </div>
+      )}
+      {!connected.login && (
+        <Link to="/login">
+          <button className="connexionButton" type="button">
+            Connexion
+          </button>
+        </Link>
+      )}
+    </div>
+  );
+}
+
+export default ButtonConected;

frontend/src/pages/Home.jsx

@@ -3,6 +3,7 @@ import Carousel from "../components/carousel/Carousel";
 import connexion from "../services/connexion";
 import Contact from "../components/Contact/Contact";
 import ListGames from "../components/ListGames";
+import Header from "../components/header/Header";
 import ProfilContainer from "../components/profilContainer/Profile";
 
 function Home() {
@@ -21,6 +22,7 @@ function Home() {
 
   return (
     <div className="home-page-container">
+      <Header />
       <div className="carousel-Container">
         <Carousel games={games} />
         <div>

frontend/src/pages/auth/Login.jsx

@@ -45,31 +45,38 @@ function Login() {
           alt="ceci est l illustration de la page de creation de compte"
         />
       </div>
-      <div className="authFormContainer">
-        <h3>Connexion au compte</h3>
-        <form className="formLoginContainer" onSubmit={handleSubmit}>
-          <InputComponents
-            label="Email"
-            name="email"
-            type="email"
-            onChange={handleChange}
-            value={formValue.email}
-          />
-          <InputComponents
-            label="Mot de passe"
-            name="password"
-            type="password"
-            onChange={handleChange}
-            value={formValue.password}
-            minLength={6}
-            maxLength={25}
-          />
-          <div className="inputConnexionContainer">
-            <button className="inputConnexion" type="submit">
-              connexion
-            </button>
-          </div>
-        </form>
+      <div className="authFormButtonInscriptionContainer">
+        <div className="authInscriptionButtonContainer">
+          <button className="authInscriptionButton" type="button">
+            Inscription
+          </button>
+        </div>
+        <div className="authFormContainer">
+          <h3>Connexion au compte</h3>
+          <form className="formLoginContainer" onSubmit={handleSubmit}>
+            <InputComponents
+              label="Email"
+              name="email"
+              type="email"
+              onChange={handleChange}
+              value={formValue.email}
+            />
+            <InputComponents
+              label="Mot de passe"
+              name="password"
+              type="password"
+              onChange={handleChange}
+              value={formValue.password}
+              minLength={6}
+              maxLength={25}
+            />
+            <div className="inputConnexionContainer">
+              <button className="inputConnexion" type="submit">
+                connexion
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
       <ToastContainer />
     </div>

frontend/src/style/components/ButtonConnected.scss

@@ -0,0 +1,23 @@
+.connexionButton {
+  width: 102px;
+  height: 33px;
+  border-radius: 20px;
+  background-color: var(--button-color);
+  border: none;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  color: var(--text-color);
+  cursor: pointer;
+}
+
+.disconnectedButton {
+  width: 102px;
+  height: 33px;
+  border-radius: 20px;
+  background-color: #f05555;
+  border: none;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  color: var(--text-color);
+  cursor: pointer;
+}

frontend/src/style/components/Header.scss

@@ -0,0 +1,7 @@
+.headerContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
+}

frontend/src/style/index.scss

@@ -17,4 +17,6 @@
 @import "./components/InputComponents.scss";
 @import "../style/pages/Signup.scss";
 @import "../style/pages/Login.scss";
+@import "../style/components/Header.scss";
+@import "../style/components/ButtonConnected.scss";
 @import "../style/pages/Profil.scss";

frontend/src/style/pages/Login.scss

@@ -18,12 +18,22 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  margin-top: -6rem;
   width: 50vw;
+  height: 100vh;
   h3 {
     color: var(--text-color);
     margin-bottom: 0;
   }
 }
+
+.authInscriptionButtonContainer {
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 2rem;
+  width: 100%;
+}
+
 .formLoginContainer {
   background-color: var(--primary-color);
   flex-direction: column;
@@ -51,6 +61,23 @@
 .inputConnexion:active {
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
 }
+.authInscriptionButton {
+  width: 102px;
+  height: 33px;
+  border-radius: 20px;
+  background-color: var(--button-color);
+  border: none;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  color: var(--text-color);
+  cursor: pointer;
+}
+.authInscriptionButton:hover {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+.authInscriptionButton:active {
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+}
 @media screen and (max-width: 1200px) {
   .imageLogin {
     width: 400px;
@@ -70,10 +97,16 @@
     align-items: center;
     justify-content: center;
   }
+  .authFormContainer {
+    width: 100vw;
+  }
   .authFormContainer h3 {
     font-size: 15px;
   }
   .formLoginContainer {
     width: 350px;
   }
+  .authInscriptionButtonContainer {
+    width: 100vw;
+  }
 }