From de641e80f0c819ada5d9b782ab19e0b4de5d12e8 Mon Sep 17 00:00:00 2001
From: Mathis <mathis.balet@gmail.com>
Date: Sun, 13 Apr 2025 16:02:18 +0200
Subject: [PATCH] Lien avec le backend ajout des utilisateurs admin

---
 .../java/com/example/starter/AuthHandler.java |   2 +-
 Front-end/src/pages/Admin/User.jsx            | 354 +++++++++---------
 Front-end/src/pages/Signup.jsx                |   1 -
 3 files changed, 188 insertions(+), 169 deletions(-)

diff --git a/Back-end/src/main/java/com/example/starter/AuthHandler.java b/Back-end/src/main/java/com/example/starter/AuthHandler.java
index 7021f26..fa82816 100644
--- a/Back-end/src/main/java/com/example/starter/AuthHandler.java
+++ b/Back-end/src/main/java/com/example/starter/AuthHandler.java
@@ -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) {
diff --git a/Front-end/src/pages/Admin/User.jsx b/Front-end/src/pages/Admin/User.jsx
index b358983..e14608e 100644
--- a/Front-end/src/pages/Admin/User.jsx
+++ b/Front-end/src/pages/Admin/User.jsx
@@ -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"
diff --git a/Front-end/src/pages/Signup.jsx b/Front-end/src/pages/Signup.jsx
index c6703db..4b9bfeb 100644
--- a/Front-end/src/pages/Signup.jsx
+++ b/Front-end/src/pages/Signup.jsx
@@ -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: