Lien avec le backend ajout des utilisateurs admin
This commit is contained in:
parent
76d5e02d4c
commit
de641e80f0
@ -140,7 +140,7 @@ public class AuthHandler {
|
||||
if (surname != null) claims.put("surname", surname);
|
||||
|
||||
// Attribution du rôle en fonction des points
|
||||
String role = "user"; // Rôle par défaut
|
||||
String role = "user";
|
||||
if (nbPointsUser >= 200) {
|
||||
role = "admin";
|
||||
} else if (nbPointsUser >= 100) {
|
||||
|
||||
@ -21,27 +21,24 @@ function User() {
|
||||
|
||||
const handleAddUser = (e) => {
|
||||
e.preventDefault();
|
||||
const newUser = {
|
||||
id: Date.now(),
|
||||
name,
|
||||
surname,
|
||||
pseudo,
|
||||
email,
|
||||
password,
|
||||
gender,
|
||||
accessLevel: "User",
|
||||
points: 0,
|
||||
};
|
||||
setUsers([...users, newUser]);
|
||||
logAction(name, "Utilisateur ajouté");
|
||||
|
||||
// Réinitialisation du formulaire
|
||||
setname("");
|
||||
setSurname("");
|
||||
setPseudo("");
|
||||
setEmail("");
|
||||
setPassword("");
|
||||
setGender("Homme");
|
||||
axios
|
||||
.post(`${API_BASE_URL}/signup`, {
|
||||
name,
|
||||
surname,
|
||||
pseudo,
|
||||
email,
|
||||
password,
|
||||
confirmPassword:password,
|
||||
gender,
|
||||
})
|
||||
.then((response) => {
|
||||
logAction(name, "Utilisateur ajouté");
|
||||
alert("Ajout de l'utilisateur réussit !");
|
||||
window.location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
alert("Erreur lors de l'ajout de l'utilisateur !");
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -68,7 +65,10 @@ function User() {
|
||||
window.location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Erreur lors de la suppression de l'utilisateur :", error);
|
||||
console.error(
|
||||
"Erreur lors de la suppression de l'utilisateur :",
|
||||
error
|
||||
);
|
||||
});
|
||||
|
||||
logAction(user.name, "Utilisateur supprimé");
|
||||
@ -106,7 +106,10 @@ function User() {
|
||||
alert("Il y a eu une erreur dans le changement de niveau !");
|
||||
console.error("Erreur lors du changement de niveau :", error);
|
||||
});
|
||||
logAction(user.name, `Niveau d'accès changé de ${oldLevel} à ${newLevel}`);
|
||||
logAction(
|
||||
user.name,
|
||||
`Niveau d'accès changé de ${oldLevel} à ${newLevel}`
|
||||
);
|
||||
}
|
||||
return user;
|
||||
})
|
||||
@ -161,164 +164,181 @@ function User() {
|
||||
return (
|
||||
<div className="flex min-h-screen">
|
||||
<Sidebar />
|
||||
<main className="flex-grow p-5">
|
||||
<main className="flex-grow overflow-x-auto p-5">
|
||||
<section className="mt-5">
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-5">
|
||||
Gestion des utilisateurs
|
||||
</h1>
|
||||
<p>Gérez les utilisateurs à partir de ce panneau.</p>
|
||||
|
||||
<form
|
||||
className="gap-3 mb-5 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
|
||||
onSubmit={handleAddUser}
|
||||
>
|
||||
<input
|
||||
className="p-3 border rounded-md"
|
||||
type="text"
|
||||
placeholder="Nom"
|
||||
value={name}
|
||||
onChange={(e) => setname(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
className="p-3 border rounded-md"
|
||||
type="text"
|
||||
placeholder="Prénom"
|
||||
value={surname}
|
||||
onChange={(e) => setSurname(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
className="p-3 border rounded-md"
|
||||
type="text"
|
||||
placeholder="Pseudo"
|
||||
value={pseudo}
|
||||
onChange={(e) => setPseudo(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
className="p-3 border rounded-md"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
className="p-3 border rounded-md"
|
||||
type="password"
|
||||
placeholder="Mot de passe"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<select
|
||||
className="p-3 border rounded-md"
|
||||
value={gender}
|
||||
onChange={(e) => setGender(e.target.value)}
|
||||
>
|
||||
<option value="Homme">Homme</option>
|
||||
<option value="Femme">Femme</option>
|
||||
<option value="Autre">Autre</option>
|
||||
</select>
|
||||
<button
|
||||
className="p-3 bg-green-600 text-white border-none rounded-md col-span-full md:col-span-1"
|
||||
type="submit"
|
||||
>
|
||||
Ajouter utilisateur
|
||||
</button>
|
||||
<form className="grid gap-4 mb-5" onSubmit={handleAddUser}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
<div className="lg:col-span-1">
|
||||
<input
|
||||
className="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-500 focus:outline-none"
|
||||
type="text"
|
||||
placeholder="Nom"
|
||||
value={name}
|
||||
onChange={(e) => setname(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="lg:col-span-1">
|
||||
<input
|
||||
className="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-500 focus:outline-none"
|
||||
type="text"
|
||||
placeholder="Prénom"
|
||||
value={surname}
|
||||
onChange={(e) => setSurname(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="lg:col-span-1">
|
||||
<input
|
||||
className="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-500 focus:outline-none"
|
||||
type="text"
|
||||
placeholder="Pseudo"
|
||||
value={pseudo}
|
||||
onChange={(e) => setPseudo(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="lg:col-span-1">
|
||||
<input
|
||||
className="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-500 focus:outline-none"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="lg:col-span-1">
|
||||
<input
|
||||
className="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-500 focus:outline-none"
|
||||
type="password"
|
||||
placeholder="Mot de passe"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="lg:col-span-1">
|
||||
<select
|
||||
className="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-500 focus:outline-none"
|
||||
value={gender}
|
||||
onChange={(e) => setGender(e.target.value)}
|
||||
>
|
||||
<option value="Homme">Homme</option>
|
||||
<option value="Femme">Femme</option>
|
||||
<option value="Autre">Autre</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<button
|
||||
className="w-full sm:w-auto px-6 py-3 bg-green-600 hover:bg-green-700 text-white font-medium border-none rounded-md transition-colors"
|
||||
type="submit"
|
||||
>
|
||||
Ajouter utilisateur
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className={th}>Nom</th>
|
||||
<th className={th}>Prénom</th>
|
||||
<th className={th}>Pseudo</th>
|
||||
<th className={th}>Email</th>
|
||||
<th className={th}>Genre</th>
|
||||
<th className={th}>Niveau d'accès</th>
|
||||
<th className={th}>Points</th>
|
||||
<th className={th}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user) => (
|
||||
<tr key={user.id}>
|
||||
<td className={thTd}>{user.name}</td>
|
||||
<td className={thTd}>{user.surname}</td>
|
||||
<td className={thTd}>{user.pseudo}</td>
|
||||
<td className={thTd}>{user.email}</td>
|
||||
<td className={thTd}>{user.gender}</td>
|
||||
<td className={thTd}>
|
||||
<select
|
||||
value={user.role}
|
||||
onChange={(e) =>
|
||||
handleChangeAccessLevel(user.id, e.target.value)
|
||||
}
|
||||
className="p-2 rounded-md"
|
||||
>
|
||||
<option value="admin">Admin</option>
|
||||
<option value="user">User</option>
|
||||
<option value="complexe">Complexe</option>
|
||||
</select>
|
||||
</td>
|
||||
<td className={thTd}>
|
||||
<input
|
||||
className="border ml-4 w-16"
|
||||
type="number"
|
||||
min="0"
|
||||
value={pointsInput[user.id] || user.points}
|
||||
onChange={(e) =>
|
||||
setPointsInput({
|
||||
...pointsInput,
|
||||
[user.id]: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<button
|
||||
className="p-2 bg-green-600 text-white border-none rounded-md"
|
||||
onClick={() => handleAdjustPoints(user.id)}
|
||||
>
|
||||
Changer
|
||||
</button>
|
||||
</td>
|
||||
<td className={thTd}>
|
||||
<button
|
||||
className="p-2 bg-red-600 text-white border-none rounded-md"
|
||||
onClick={() => handleDeleteUser(user.id)}
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
{/*Tableau utilisateur*/}
|
||||
<div className="w-full overflow-x-auto">
|
||||
<table className="w-full table-auto border border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className={th}>Nom</th>
|
||||
<th className={th}>Prénom</th>
|
||||
<th className={th}>Pseudo</th>
|
||||
<th className={th}>Email</th>
|
||||
<th className={th}>Genre</th>
|
||||
<th className={th}>Niveau d'accès</th>
|
||||
<th className={th}>Points</th>
|
||||
<th className={th}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user) => (
|
||||
<tr key={user.id}>
|
||||
<td className={thTd}>{user.name}</td>
|
||||
<td className={thTd}>{user.surname}</td>
|
||||
<td className={thTd}>{user.pseudo}</td>
|
||||
<td className={thTd}>{user.email}</td>
|
||||
<td className={thTd}>{user.gender}</td>
|
||||
<td className={thTd}>
|
||||
<select
|
||||
value={user.role}
|
||||
onChange={(e) =>
|
||||
handleChangeAccessLevel(user.id, e.target.value)
|
||||
}
|
||||
className="p-2 rounded-md"
|
||||
>
|
||||
<option value="admin">Admin</option>
|
||||
<option value="user">User</option>
|
||||
<option value="complexe">Complexe</option>
|
||||
</select>
|
||||
</td>
|
||||
<td className={thTd}>
|
||||
<input
|
||||
className="border p-1 w-20 rounded-md"
|
||||
type="number"
|
||||
min="0"
|
||||
value={pointsInput[user.id] || user.points}
|
||||
onChange={(e) =>
|
||||
setPointsInput({
|
||||
...pointsInput,
|
||||
[user.id]: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<button
|
||||
className="ml-2 p-2 bg-green-600 text-white border-none rounded-md"
|
||||
onClick={() => handleAdjustPoints(user.id)}
|
||||
>
|
||||
Changer
|
||||
</button>
|
||||
</td>
|
||||
<td className={thTd}>
|
||||
<button
|
||||
className="p-2 bg-red-600 text-white border-none rounded-md"
|
||||
onClick={() => handleDeleteUser(user.id)}
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<section className="user-logs mt-10">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-5">
|
||||
Historique des connexions et journal des logs{" "}
|
||||
</h2>
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className={th}>Nom</th>
|
||||
<th className={th}>Action</th>
|
||||
<th className={th}>Timestamp</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{logs.map((log) => (
|
||||
<tr key={log.id}>
|
||||
<td className={thTd}>{log.name}</td>
|
||||
<td className={thTd}>{log.action}</td>
|
||||
<td className={thTd}>{log.timestamp}</td>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className={th}>Nom</th>
|
||||
<th className={th}>Action</th>
|
||||
<th className={th}>Timestamp</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{logs.map((log) => (
|
||||
<tr key={log.id}>
|
||||
<td className={thTd}>{log.name}</td>
|
||||
<td className={thTd}>{log.action}</td>
|
||||
<td className={thTd}>{log.timestamp}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button
|
||||
onClick={downloadLogs}
|
||||
className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md"
|
||||
|
||||
@ -60,7 +60,6 @@ function Signup() {
|
||||
<div className="w-full md:w-96 bg-white rounded-lg shadow-md p-6 mx-auto">
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">Inscription</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Formulaire (Nom, Prénom, Sexe, Email, Mot de passe) */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Prénom:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user