Pagination/login signup

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,30 @@
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+import { AuthContext } from "../../../context/AuthContext";
+
+function ButtonConected() {
+  const { connected } = useContext(AuthContext);
+  const reload = () => {
+    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;
+  }
 }