Skip to content

Commit

Permalink
Merge pull request #25 from WildCodeSchool-2023-09/pagination/login-s…
Browse files Browse the repository at this point in the history
…ignup

Pagination/login signup
  • Loading branch information
aimach authored Feb 5, 2024
2 parents 2205116 + 2abca24 commit 2bd3c6d
Show file tree
Hide file tree
Showing 15 changed files with 201 additions and 27 deletions.
37 changes: 37 additions & 0 deletions backend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions backend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 3 additions & 2 deletions backend/src/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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":
Expand Down
9 changes: 9 additions & 0 deletions backend/src/controllers/playerControllers.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
1 change: 1 addition & 0 deletions backend/src/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
1 change: 1 addition & 0 deletions frontend/context/AuthContext.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ function AuthProvider({ children }) {
}),
[connected, setConnected, profil, setProfile, wonGames, setWonGames]
);

return (
<AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
);
Expand Down
File renamed without changes
14 changes: 14 additions & 0 deletions frontend/src/components/header/Header.jsx
Original file line number Diff line number Diff line change
@@ -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;
36 changes: 36 additions & 0 deletions frontend/src/components/input/ButtonConected.jsx
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 2 additions & 0 deletions frontend/src/pages/Home.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -21,6 +22,7 @@ function Home() {

return (
<div className="home-page-container">
<Header />
<div className="carousel-Container">
<Carousel games={games} />
<div>
Expand Down
57 changes: 32 additions & 25 deletions frontend/src/pages/auth/Login.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
23 changes: 23 additions & 0 deletions frontend/src/style/components/ButtonConnected.scss
Original file line number Diff line number Diff line change
@@ -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;
}
7 changes: 7 additions & 0 deletions frontend/src/style/components/Header.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.headerContainer {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 100%;
}
2 changes: 2 additions & 0 deletions frontend/src/style/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
33 changes: 33 additions & 0 deletions frontend/src/style/pages/Login.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -70,10 +97,16 @@
align-items: center;
justify-content: center;
}
.authFormContainer {
width: 100vw;
}
.authFormContainer h3 {
font-size: 15px;
}
.formLoginContainer {
width: 350px;
}
.authInscriptionButtonContainer {
width: 100vw;
}
}

0 comments on commit 2bd3c6d

Please sign in to comment.