Lien avec le backend ajout des utilisateurs admin

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) {

Front-end/src/pages/Admin/User.jsx

@@ -21,27 +21,24 @@ function User() {
 
   const handleAddUser = (e) => {
     e.preventDefault();
-    const newUser = {
+    axios
-      id: Date.now(),
+      .post(`${API_BASE_URL}/signup`, {
-      name,
+        name,
-      surname,
+        surname,
-      pseudo,
+        pseudo,
-      email,
+        email,
-      password,
+        password,
-      gender,
+        confirmPassword:password,
-      accessLevel: "User",
+        gender,
-      points: 0,
+      })
-    };
+      .then((response) => {
-    setUsers([...users, newUser]);
+        logAction(name, "Utilisateur ajouté");
-    logAction(name, "Utilisateur ajouté");
+        alert("Ajout de l'utilisateur réussit !");
-
+        window.location.reload();
-    // Réinitialisation du formulaire
+      })
-    setname("");
+      .catch((error) => {
-    setSurname("");
+        alert("Erreur lors de l'ajout de l'utilisateur !");
-    setPseudo("");
+      });
-    setEmail("");
-    setPassword("");
-    setGender("Homme");
   };
 
   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
+          <form className="grid gap-4 mb-5" onSubmit={handleAddUser}>
-            className="gap-3 mb-5 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
-            onSubmit={handleAddUser}
+              <div className="lg:col-span-1">
-          >
+                <input
-            <input
+                  className="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-500 focus:outline-none"
-              className="p-3 border rounded-md"
+                  type="text"
-              type="text"
+                  placeholder="Nom"
-              placeholder="Nom"
+                  value={name}
-              value={name}
+                  onChange={(e) => setname(e.target.value)}
-              onChange={(e) => setname(e.target.value)}
+                  required
-              required
+                />
-            />
+              </div>
-            <input
+              <div className="lg:col-span-1">
-              className="p-3 border rounded-md"
+                <input
-              type="text"
+                  className="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-500 focus:outline-none"
-              placeholder="Prénom"
+                  type="text"
-              value={surname}
+                  placeholder="Prénom"
-              onChange={(e) => setSurname(e.target.value)}
+                  value={surname}
-              required
+                  onChange={(e) => setSurname(e.target.value)}
-            />
+                  required
-            <input
+                />
-              className="p-3 border rounded-md"
+              </div>
-              type="text"
+              <div className="lg:col-span-1">
-              placeholder="Pseudo"
+                <input
-              value={pseudo}
+                  className="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-500 focus:outline-none"
-              onChange={(e) => setPseudo(e.target.value)}
+                  type="text"
-              required
+                  placeholder="Pseudo"
-            />
+                  value={pseudo}
-            <input
+                  onChange={(e) => setPseudo(e.target.value)}
-              className="p-3 border rounded-md"
+                  required
-              type="email"
+                />
-              placeholder="Email"
+              </div>
-              value={email}
+              <div className="lg:col-span-1">
-              onChange={(e) => setEmail(e.target.value)}
+                <input
-              required
+                  className="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-500 focus:outline-none"
-            />
+                  type="email"
-            <input
+                  placeholder="Email"
-              className="p-3 border rounded-md"
+                  value={email}
-              type="password"
+                  onChange={(e) => setEmail(e.target.value)}
-              placeholder="Mot de passe"
+                  required
-              value={password}
+                />
-              onChange={(e) => setPassword(e.target.value)}
+              </div>
-              required
+              <div className="lg:col-span-1">
-            />
+                <input
-            <select
+                  className="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-500 focus:outline-none"
-              className="p-3 border rounded-md"
+                  type="password"
-              value={gender}
+                  placeholder="Mot de passe"
-              onChange={(e) => setGender(e.target.value)}
+                  value={password}
-            >
+                  onChange={(e) => setPassword(e.target.value)}
-              <option value="Homme">Homme</option>
+                  required
-              <option value="Femme">Femme</option>
+                />
-              <option value="Autre">Autre</option>
+              </div>
-            </select>
+              <div className="lg:col-span-1">
-            <button
+                <select
-              className="p-3 bg-green-600 text-white border-none rounded-md col-span-full md:col-span-1"
+                  className="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-500 focus:outline-none"
-              type="submit"
+                  value={gender}
-            >
+                  onChange={(e) => setGender(e.target.value)}
-              Ajouter utilisateur
+                >
-            </button>
+                  <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">
+          <div className="overflow-x-auto">
-            <thead>
+            <table className="w-full">
-              <tr>
+              <thead>
-                <th className={th}>Nom</th>
+                <tr>
-                <th className={th}>Action</th>
+                  <th className={th}>Nom</th>
-                <th className={th}>Timestamp</th>
+                  <th className={th}>Action</th>
-              </tr>
+                  <th className={th}>Timestamp</th>
-            </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>
-              ))}
+              </thead>
-            </tbody>
+              <tbody>
-          </table>
+                {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"

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: