lucien/joclud-front
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

commit

Browse source
This commit is contained in:
Lukian LEIZOUR 2024-06-06 14:48:07 +02:00
parent 25f5de3975
commit 5a32ca9a68
6 changed files with 136 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/App.jsx
View file

@ -10,6 +10,7 @@ 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() {
@ -19,6 +20,7 @@ export default function App() {
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="/admin" element={<Admin />} />
</Routes>
</BrowserRouter>
)

55
src/assets/UserVerfication.jsx Normal file
View file

@ -0,0 +1,55 @@
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("https://leizour.fr/api/v1/admin/getUnVerifiedUsers", { token })
.catch((error) => {console.error("Error fetching users:", error);})
setUsers(response.data);
setUsersLoading(false);
}
fetchUsers();
}, []);
function verifyUser(username) {
axios.post("https://leizour.fr/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='no-users'>Aucun utilisateur à vérifier</div>
}
else {
return (
<div className='users'>
{users.map((user) => {
return (
<div className='user' key={user.id}>
<p>{user.username}</p>
<p>{user.name}</p>
<p>{user.lastname}</p>
<p>{user.id}</p>
<button className='verify-button' onClick={() => {verifyUser(user.username)}}>Vérifier</button>
</div>
)
})}
</div>
)
}
}

60
src/pages/Admin.jsx Normal file
View file

@ -0,0 +1,60 @@
import { useState, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import axios from "axios";
import UserVerfication from '../assets/UserVerfication';
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}
</div>
);
}

9
src/pages/Home.jsx
View file

@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from 'react';
import { useState, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import axios from "axios";
@ -26,6 +26,12 @@ export default function Home() {
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);
@ -80,6 +86,7 @@ export default function Home() {
<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");

21
src/pages/Login.jsx
View file

@ -22,18 +22,17 @@ export default function Login() {
return;
}
try {
const response = await axios.post("https://leizour.fr/api/v1/auth/login", {
username: username,
password: password
})
const response = await axios.post("https://leizour.fr/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("/");
} catch (error) {
alert("Invalid username or password");
return;
}
localStorage.setItem("token", response.data.token);
navigate("/");
}
return (

9
src/pages/Register.jsx
View file

@ -30,14 +30,7 @@ export default function Register() {
lastname: lastname,
password: password
})
const loginResponse = await axios.post("https://leizour.fr/api/v1/auth/login", {
username: username,
password: password
})
localStorage.setItem("token", loginResponse.data.token);
navigate("/");
navigate("/login");
} catch (error) {
alert("Username already exists");
return;