add: merged front with back

front/src/App.jsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+import { far } from '@fortawesome/free-regular-svg-icons';
+
+
+library.add(fas, far)
+
+import Home from './pages/Home';
+import Login from './pages/Login';
+import Register from './pages/Register';
+import Admin from './pages/Admin';
+
+export default function App() {
+
+  return (
+    <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/register" element={<Register />} />
+          <Route path="/admin" element={<Admin />} />
+        </Routes>
+    </BrowserRouter>
+  )
+}

front/src/assets/Game.jsx

@@ -0,0 +1,34 @@
+import Helpers from "./Helpers"
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+export default function Game({game, token, user}) {
+    function getCode(id) {
+        const alphabet = 'abcdefghijklmnopqrstuvwxyz';
+        const base = alphabet.length;
+        let firstLetterIndex = Math.floor(id / base);
+        let secondLetterIndex = id % base;
+    
+        let firstLetter = alphabet[firstLetterIndex];
+        let secondLetter = alphabet[secondLetterIndex];
+    
+        return firstLetter + secondLetter;
+    }
+
+    return (
+        <div className='game'>
+            <img src={`https://www.myludo.fr/img/jeux/1/300/${getCode(Math.floor(game.id / 1000))}/${game.id}.png`} className='game-image'/>
+            <div className='game-right'>
+                <h1 className='game-title'>{game.title}{game.subtitle ? `, ${game.subtitle}` : null}</h1>
+                <div className="tags">
+                    {game.type == "extension" ? <div className="tag extension"><FontAwesomeIcon icon="fa-solid fa-plus" />  Extension</div> : <div className="tag basegame"><FontAwesomeIcon icon="fa-solid fa-puzzle-piece" /> Jeu de base</div>}
+                    <div className="tag duration"><FontAwesomeIcon icon="fa-regular fa-clock" /> {game.duration}</div>
+                    <div className="tag players"><FontAwesomeIcon icon="fa-solid fa-user-group" /> {game.players}</div>
+                    <div className="tag ages"><FontAwesomeIcon icon="fa-solid fa-child" /> {game.ages}</div>
+                </div>
+                <div className='game-bottom'>
+                    <Helpers gameid={game.id} user={user} token={token} />
+                </div>
+              </div>
+        </div>
+    )
+}

front/src/assets/GameAdder.jsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+export default function GameAdder({token}) {
+
+
+	function send() {
+		const file = document.getElementById("avatar");
+		console.log("caca")
+		console.log(file.files[0]);
+		var formData = new FormData();
+		formData.append("file", file.files[0])
+		axios.post('/api/v1/admin/addGames', formData, {
+		    headers: {
+		      'Content-Type': 'multipart/form-data'
+		    }
+		})
+	}
+
+	return (
+		<div>
+			<input type="file" id="avatar" name="avatar" />
+			<button onClick={send}>send</button>
+		</div>
+	)
+}

front/src/assets/Helpers.jsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import axios from 'axios';
+
+export default function Helpers({ gameid, user, token }) {
+    const [helpers, setHelpers] = useState([]);
+    const [gameLoading, setGameLoading] = useState(true);
+    const [helping, setHelping] = useState();
+
+    useEffect(() => {
+        async function fetchGame() {
+            const response = await axios.post("/api/v1/games/getHelpers", { token, gameid })
+                .catch((error) => console.error("Error getting game"));
+            setHelpers(response.data);
+            setHelping(JSON.stringify(response.data).includes(user.id));
+            setGameLoading(false);
+        }
+
+        fetchGame();
+    }, [gameid, helping]);
+
+    function addHelper() {
+        axios.post("/api/v1/games/addHelper", { token, gameid })
+            .then(() => setHelping(true))
+            .catch((error) => console.error("Error adding helper"));
+    }
+
+    function removeHelper() {
+        axios.post("/api/v1/games/removeHelper", { token, gameid })
+            .then(() => setHelping(false))
+            .catch((error) => console.error("Error removing helper"));
+    }
+
+    function handleClick(event) {
+        if (helping) {
+            removeHelper();
+        } else {
+            addHelper();
+        }
+    }
+
+    if (gameLoading) {
+        return <p>Loading...</p>
+    }
+
+    else if (helpers.length === 0) {
+        return (
+            <div className='helpers'>
+                <p className='no-helper'><FontAwesomeIcon icon="fa-regular fa-face-frown-open" /> Personne</p>
+                <button className={`helpButton ${helping ? "helpButton-enabled" : "helpButton-disabled"}`} 
+                        id={`helpbutton-${gameid}`} 
+                        onClick={handleClick}>
+                        {helping ? <FontAwesomeIcon icon="fa-solid fa-book-bookmark" /> : <FontAwesomeIcon icon="fa-solid fa-book" />}
+                </button>
+            </div>
+        )
+    }
+
+    else {
+        return (
+            <div>
+                <div className='helpers'>
+                    {helpers.map((helper) => {
+                        if (helper.user_id === user.id) {
+                            return <p className='helper' key={helper}><FontAwesomeIcon icon="fa-regular fa-face-smile" /> Vous</p>
+                        } else {
+                            return <p className='helper' key={helper.id}><FontAwesomeIcon icon="fa-regular fa-face-smile" /> {helper.name}</p>
+                        }
+                    })}
+                    <button className={`helpButton ${helping ? "helpButton-enabled" : "helpButton-disabled"}`} 
+                        id={`helpbutton-${gameid}`} 
+                        onClick={handleClick}>
+                        {helping ? <FontAwesomeIcon icon="fa-solid fa-book-bookmark" /> : <FontAwesomeIcon icon="fa-solid fa-book" />}
+                    </button>
+                </div>
+            </div>
+        )
+    }
+}

front/src/assets/UserVerfication.jsx

@@ -0,0 +1,58 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from "react-router-dom";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import axios from "axios";
+
+export default function UserVerfication({token}) {
+    const [users, setUsers] = useState([]);
+    const [usersLoading, setUsersLoading] = useState(true);
+
+    useEffect(() => {
+        async function fetchUsers() {
+            const response = await axios.post("/api/v1/admin/getUnVerifiedUsers", { token })
+                .catch((error) => {console.error("Error fetching users:", error);})
+            setUsers(response.data);
+            setUsersLoading(false);
+        }
+
+        fetchUsers();
+    }, []);
+
+    function verifyUser(username) {
+        axios.post("/api/v1/admin/verifyUser", { token, username })
+            .then(() => {
+                setUsers(users.filter((user) => user.username !== username));
+            })
+            .catch((error) => {console.error("Error verifying user:", error);})
+    }
+
+    if (usersLoading) {
+        return <div>Loading...</div>
+    }
+
+    else if (users.length === 0) {
+        return (
+            <div className='users'>
+                <div className='no-users'>Aucun utilisateur à vérifier</div>
+            </div>
+        )
+    }
+
+    else {
+        return (
+            <div className='users'>
+                {users.map((user) => {
+                    return (
+                        <div className='user' key={user.id}>
+                            <p className='user-info'>Nom d'utilisateur : {user.username}</p>
+                            <p className='user-info'>Prénom : {user.name}</p>
+                            <p className='user-info'>Nom : {user.lastname}</p>
+                            <button className='button' onClick={() => {verifyUser(user.username)}}>Vérifier</button>
+                        </div>
+                    )
+                })}
+            </div>
+        )
+    }
+
+}

front/src/main.jsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);

front/src/pages/Admin.css

@@ -0,0 +1,49 @@
+.navigation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+}
+
+.users {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 15px;
+    gap: 20px;
+}
+
+.no-users {
+    background-color: #d66666;
+    padding: 7px 10px;
+    border-radius: 15px;
+    margin: 0;
+}
+
+.user {
+    padding: 20px;
+    background-color: white;
+    display: flex;
+    border-radius: 60px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+    justify-content: space-between;
+    align-items: center;
+    min-width: 600px;
+}
+
+.user-info {
+    background-color: #b4d666;
+    padding: 7px 10px;
+    border-radius: 15px;
+    margin: 0;
+}
+
+@media only screen and (max-width: 664px) {
+    .user {
+        flex-wrap: wrap;
+        padding: 10px;
+        min-width: 90vw;
+        border-radius: 25px;
+    }
+}

front/src/pages/Admin.jsx

@@ -0,0 +1,62 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from "react-router-dom";
+
+import './Admin.css';
+
+import UserVerfication from '../assets/UserVerfication';
+import GameAdder from '../assets/GameAdder';
+
+export default function Admin() {
+	const navigate = useNavigate();
+	const [user, setUser] = useState();
+	const [token, setToken] = useState();
+	const [userloading, setUserLoading] = useState(true);
+    const [section , setSection] = useState(1);
+
+    useEffect(() => {
+		const tokenLocal = localStorage.getItem("token");
+
+		function checkToken() {
+			if (!tokenLocal) {
+				navigate("/login");
+				return;
+			}
+
+			if (JSON.parse(atob(tokenLocal.split(".")[1])).expiration < Date.now()) {
+				localStorage.removeItem("token");
+				navigate("/login");
+				return;
+			}
+	
+			setToken(tokenLocal);
+			setUser(JSON.parse(atob(tokenLocal.split(".")[1])).user);
+			setUserLoading(false);
+		}
+
+		checkToken();
+	}, []);
+
+    if (userloading) return <div>Loading...</div>;
+
+    return (
+        <div>
+			<h1 className='page-title'>Base de données des jeux Joclud</h1>
+			<div className='home'>
+				<h2 className='welcome'>Bienvenue, {user.name} !</h2>
+				<button onClick={() => navigate("/")} className='button admin-button'>Home</button>
+				<button onClick={() => {
+					localStorage.removeItem("token");
+					navigate("/login");
+				}} className='logout-button'>
+					Me déconnecter
+				</button>
+			</div>
+            <div className='navigation'>
+                <button className='button' onClick={() => {setSection(1)}}>Vérification d'utilisateurs</button>
+                <button className='button' onClick={() => {setSection(2)}}>Importation de jeux</button>
+            </div>
+            {section === 1 ? <UserVerfication token={token} /> : null}
+            {section === 2 ? <GameAdder token={token} /> : null}
+		</div>
+    );
+}

front/src/pages/Home.css

@@ -0,0 +1,204 @@
+body {
+    text-align: center;
+    background-color: #66c6d6;
+    font-family: sans-serif;
+}
+
+.page-title {
+    font-size: 50px;
+}
+
+.home {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+}
+
+.logout-button {
+    padding: 7px 10px;
+    border-radius: 15px;
+    border: none;
+    background-color: #d45555;
+}
+
+.search {
+    margin: 20px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+}
+
+.search-input {
+    padding: 7px 10px;
+    border-radius: 15px;
+    border: none;
+}
+
+.pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    margin: 20px;
+}
+
+.pagination-button {
+    padding: 7px 10px;
+    border-radius: 15px;
+    border: none;
+}
+
+.games {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+.game {
+    padding: 30px;
+    background-color: white;
+    display: flex;
+    border-radius: 60px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+    justify-content: space-between;
+    width: 900px;
+}
+
+.game-image {
+    width: 250px;
+    margin-left: 20px;
+    margin-right: 5px;
+    object-fit: contain;
+}
+
+.game-right {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    width: 100%;
+    margin: 15px;
+}
+
+.game-title {
+    margin: 0;
+}
+
+.game-bottom {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    gap: 15px;
+}
+
+.tags {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+}
+
+.tag {
+    background-color: #b4d666;
+    padding: 7px 10px;
+    border-radius: 15px;
+    margin: 0;
+}
+
+.basegame {
+    background-color: #66d6bf;
+}
+
+.extension {
+    background-color: #e99731;
+}
+
+.players {
+    background-color: #fae294;
+}
+
+.duration {
+    background-color: #c892c4;
+}
+
+.ages {
+    background-color: #92c8b5;
+}
+
+.helpers {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    gap: 5px;
+}
+
+.helper {
+    background-color: #b4d666;
+    padding: 7px 10px;
+    border-radius: 15px;
+    margin: 0;
+}
+
+.no-helper {
+    background-color: #d66666;
+    padding: 7px 10px;
+    border-radius: 15px;
+    margin: 0;
+}
+
+.helpButton {
+    padding: 7px 10px;
+    border-radius: 15px;
+    border: none;
+}
+
+.helpButton-enabled {
+    background-color: #8caf39;
+}
+
+.helpButton-disabled {
+    background-color: #d45555;
+}
+
+@media only screen and (max-width: 664px) {
+    .games {
+        margin: 15px;
+    }
+
+    .game {
+        width: 100%;
+        padding: 10px;
+        border-radius: 35px;
+    }
+
+    .game-image {
+        width: 75px;
+    }
+
+    .game-title {
+        font-size: 17px;
+    }
+
+    .tags{
+        flex-wrap: wrap;
+    }
+
+    .tag {
+        font-size: 13px;
+    }
+
+    .helpers {
+        flex-wrap: wrap;
+    }
+
+    .helper {
+        font-size: 13px;
+    }
+
+    .no-helper {
+        font-size: 13px;
+    }
+}

front/src/pages/Home.jsx

@@ -0,0 +1,140 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from "react-router-dom";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import axios from "axios";
+
+import './Home.css';
+
+import Game from '../assets/Game';
+
+export default function Home() {
+	const navigate = useNavigate();
+	const [user, setUser] = useState();
+	const [token, setToken] = useState();
+	const [games, setGames] = useState([]);
+	const [userloading, setUserLoading] = useState(true);
+	const [gamesLoading, setGamesLoading] = useState(true);
+	const [name, setName] = useState("");
+	const [currentPage, setCurrentPage] = useState(1);
+
+	useEffect(() => {
+		const tokenLocal = localStorage.getItem("token");
+
+		function checkToken() {
+			if (!tokenLocal) {
+				navigate("/login");
+				return;
+			}
+
+			if (JSON.parse(atob(tokenLocal.split(".")[1])).expiration < Date.now()) {
+				localStorage.removeItem("token");
+				navigate("/login");
+				return;
+			}
+	
+			setToken(tokenLocal);
+			setUser(JSON.parse(atob(tokenLocal.split(".")[1])).user);
+			setUserLoading(false);
+		}
+
+		async function fetchGames() {
+			try {
+				const response = await axios.post("/api/v1/games/getall", { token: tokenLocal });
+				setGames(response.data);
+			} catch (error) {
+				console.error("Error fetching games:", error);
+			} finally {
+				setGamesLoading(false);
+			}
+		}
+
+		checkToken();
+		fetchGames();
+	}, []);
+
+	function handleSearchChange(event) {
+		setName(event.target.value);
+		setCurrentPage(1);
+	};
+
+	const filteredGames = games.filter((game) =>
+		game.title.toLowerCase().includes(name.toLowerCase())
+	);
+
+	const itemsPerPage = 10;
+	const totalPages = Math.ceil(filteredGames.length / itemsPerPage);
+
+	function handlePageChange(newPage) {
+		if (newPage >= 1 && newPage <= totalPages) {
+			setCurrentPage(newPage);
+			window.scrollTo(0, 0);
+		}
+	}
+
+	function resetSearch() {
+		setName("");
+	}
+
+	const currentGames = filteredGames.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+
+	if (userloading) {
+		return <p>Loading...</p>
+	}
+
+	return (
+		<div>
+			<h1 className='page-title'>Base de données des jeux Joclud</h1>
+			<div className='home'>
+				<h2 className='welcome'>Bienvenue, {user.name} !</h2>
+				{user.admin ? <button onClick={() => navigate("/admin")} className='button admin-button'>Admin</button> : null}
+				<button onClick={() => {
+					localStorage.removeItem("token");
+					navigate("/login");
+				}} className='logout-button'>
+					Me déconnecter
+				</button>
+			</div>
+			<div className='search'>
+				<input type="text" value={name} onChange={handleSearchChange} className='search-input' placeholder='Chercher un jeu' />
+				<button className='button' onClick={resetSearch}><FontAwesomeIcon icon="fa-solid fa-xmark" /></button>
+			</div>
+			<div className="pagination">
+				<button onClick={() => handlePageChange(1)} disabled={currentPage === 1} className="pagination-button">
+					<FontAwesomeIcon icon="fa-solid fa-angles-left" />
+				</button>
+				<button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1} className="pagination-button">
+					<FontAwesomeIcon icon="fa-solid fa-chevron-left" />
+				</button>
+				<span className='pagination-text'>Page {currentPage} sur {totalPages}</span>
+				<button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages} className="pagination-button">
+					<FontAwesomeIcon icon="fa-solid fa-chevron-right" />
+				</button>
+				<button onClick={() => handlePageChange(totalPages)} disabled={currentPage === totalPages} className="pagination-button">
+					<FontAwesomeIcon icon="fa-solid fa-angles-right" />
+				</button>
+			</div>
+			{gamesLoading ? <p>Loading...</p> :
+				<div className='games'>
+					{currentGames.map((game) => {
+						return <Game key={game.id} game={game} token={token} user={user} />
+					})}
+				</div>
+			}
+			<div className="pagination">
+				<button onClick={() => handlePageChange(1)} disabled={currentPage === 1} className="pagination-button">
+					<FontAwesomeIcon icon="fa-solid fa-angles-left" />
+				</button>
+				<button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1} className="pagination-button">
+					<FontAwesomeIcon icon="fa-solid fa-chevron-left" />
+				</button>
+				<span className='pagination-text'>Page {currentPage} sur {totalPages}</span>
+				<button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages} className="pagination-button">
+					<FontAwesomeIcon icon="fa-solid fa-chevron-right" />
+				</button>
+				<button onClick={() => handlePageChange(totalPages)} disabled={currentPage === totalPages} className="pagination-button">
+					<FontAwesomeIcon icon="fa-solid fa-angles-right" />
+				</button>
+			</div>
+		</div>
+	);
+}

front/src/pages/Login.css

@@ -0,0 +1,23 @@
+body {
+    text-align: center;
+    background-color: #66c6d6;
+}
+
+.login {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+}
+
+.input {
+    padding: 7px 10px;
+    border-radius: 15px;
+    border: none;
+}
+
+.button {
+    padding: 7px 10px;
+    border-radius: 15px;
+    border: none;
+}

front/src/pages/Login.jsx

@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react'
+import { useNavigate, Link } from "react-router-dom";
+import axios from 'axios';
+
+import './Login.css';
+
+export default function Login() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+
+    if (localStorage.getItem("token")) {
+      navigate("/")
+    }
+  }, []);
+
+  async function login() {
+    const username = document.getElementById("username").value;
+    const password = document.getElementById("password").value;
+
+    if (!username || !password) {
+      return;
+    }
+
+    const response = await axios.post("/api/v1/auth/login", { username: username, password: password})
+      .catch((error) => {
+        if (error.response.data.error == "you need to be verified to login") {
+          alert("Vous devez être vérifié pour vous connecter, veuillez attendre qu'un administrateur vérifie votre compte.");
+        } else {
+          alert("Nom d'utilisateur ou mot de passe incorrect.");
+        }
+      });
+
+    localStorage.setItem("token", response.data.token);
+    navigate("/");
+  }
+
+  return (
+    <div className='login'>
+      <h1>Connexion</h1>
+      <input type="text" id="username" className='input' placeholder="Nom d'utilisateur"/>
+      <input type="password" id="password" className='input' placeholder='Mot de passe'/>
+      <button onClick={login} className='button'>Me connecter</button>
+      <Link to="/register">Créer un compte</Link>
+    </div>
+  )
+}

front/src/pages/Register.css

@@ -0,0 +1,23 @@
+body {
+    text-align: center;
+    background-color: #66c6d6;
+}
+
+.register {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+}
+
+.input {
+    padding: 7px 10px;
+    border-radius: 15px;
+    border: none;
+}
+
+.button {
+    padding: 7px 10px;
+    border-radius: 15px;
+    border: none;
+}

front/src/pages/Register.jsx

@@ -0,0 +1,53 @@
+import { useState, useEffect } from 'react'
+import { useNavigate, Link } from "react-router-dom";
+import axios from 'axios';
+
+import './Register.css';
+
+export default function Register() {
+    const navigate = useNavigate();
+
+    useEffect(() => {
+      if (localStorage.getItem("token")) {
+        navigate("/")
+      }
+    }, []);
+  
+    async function register() {
+      const username = document.getElementById("username").value;
+      const name = document.getElementById("name").value;
+      const lastname = document.getElementById("lastname").value;
+      const password = document.getElementById("password").value;
+  
+      if (!username || !name || !lastname || !password) {
+        return;
+      }
+  
+      try {
+        const response = await axios.post("/api/v1/auth/register", {
+            username: username,
+            name: name,
+            lastname: lastname,
+            password: password
+        })
+        navigate("/login");
+      } catch (error) {
+        alert("Username already exists");
+        return;
+      }
+    }
+
+    return (
+        <div className='register'>
+          <h1>Création de compte</h1>
+            <input type="text" id="username" placeholder="Nom d'utilisateur" className='input'/>
+            <input type="text" id="name" placeholder='Prénom' className='input'/>
+            <input type="text" id="lastname" placeholder='Nom de famille' className='input'/>
+            <input type="password" id="password" placeholder='Mot de passe' className='input'/>
+          <div>
+            <button onClick={register} className='button'>Créer un compte</button>
+          </div>
+          <Link to="/login">Me connecter avec mon compte</Link>
+        </div>
+    )
+}