From 21370725fde4bf34e6cec487d0ec7932cad66ae1 Mon Sep 17 00:00:00 2001
From: Arcade69 <65565653+Arcade69@users.noreply.github.com>
Date: Sun, 13 Apr 2025 15:11:27 +0200
Subject: [PATCH] Update User.jsx

mise a jour du form
---
 Front-end/src/pages/Admin/User.jsx | 121 ++++++++++++++++++++---------
 1 file changed, 85 insertions(+), 36 deletions(-)

diff --git a/Front-end/src/pages/Admin/User.jsx b/Front-end/src/pages/Admin/User.jsx
index 78f7359..b358983 100644
--- a/Front-end/src/pages/Admin/User.jsx
+++ b/Front-end/src/pages/Admin/User.jsx
@@ -9,8 +9,14 @@ const th = `${thTd} bg-gray-100`;
 function User() {
   const [users, setUsers] = useState([]);
   const [logs, setLogs] = useState([]);
+
   const [name, setname] = useState("");
+  const [surname, setSurname] = useState("");
+  const [pseudo, setPseudo] = useState("");
   const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [gender, setGender] = useState("Homme");
+
   const [pointsInput, setPointsInput] = useState({});
 
   const handleAddUser = (e) => {
@@ -18,20 +24,32 @@ function User() {
     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");
   };
+
   useEffect(() => {
     axios.get(`${API_BASE_URL}/users`).then((response) => {
       setUsers(response.data);
     });
   }, []);
+
   const handleDeleteUser = (userId) => {
     const user = users.find((u) => u.id === userId);
 
@@ -50,10 +68,7 @@ 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é");
@@ -68,7 +83,7 @@ function User() {
   const handleChangeAccessLevel = (userId, newLevel) => {
     setUsers(
       users.map((user) => {
-        if (user.id === userId && newLevel != user.role) {
+        if (user.id === userId && newLevel !== user.role) {
           const oldLevel = user.role;
           user.role = newLevel;
           if (user.role === "user") {
@@ -91,10 +106,7 @@ 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;
       })
@@ -113,14 +125,14 @@ function User() {
               points: user.points,
             })
             .then((response) => {
-              alert("Les points ont bien été enregistré !");
-              console.log("Ajout des points réussit :", response.data);
+              alert("Les points ont bien été enregistrés !");
+              console.log("Ajout des points réussi :", response.data);
             })
             .catch((error) => {
-              alert("Il y a eu une erreur dans l'ajout des points!");
+              alert("Il y a eu une erreur dans l'ajout des points !");
               console.error("Erreur lors de l'ajout des points :", error);
             });
-          logAction(user.name, `Points ajustés par ${pointsToAdd}`);
+          logAction(user.name, `Points ajustés à ${pointsToAdd}`);
         }
         return user;
       })
@@ -145,7 +157,7 @@ function User() {
     link.click();
     document.body.removeChild(link);
   };
-  
+
   return (
     <div className="flex min-h-screen">
       <Sidebar />
@@ -155,31 +167,62 @@ function User() {
             Gestion des utilisateurs
           </h1>
           <p>Gérez les utilisateurs à partir de ce panneau.</p>
-          
+
           <form
-            className="gap-3 mb-5 grid grid-cols-[1fr_1fr_auto]"
+            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"
-              id="name"
-              placeholder="name"
+              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"
-              id="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 "
+              className="p-3 bg-green-600 text-white border-none rounded-md col-span-full md:col-span-1"
               type="submit"
             >
               Ajouter utilisateur
@@ -189,19 +232,25 @@ function User() {
           <table className="w-full">
             <thead>
               <tr>
-                <th className={`${th}`}>Nom</th>
-                <th className={`${th}`}>Email</th>
-                <th className={`${th}`}>Niveau d'accès</th>
-                <th className={`${th}`}>Points</th>
-                <th className={`${th}`}>Actions</th>
+                <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.email}</td>
-                  <td className={`${thTd}`}>
+                  <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) =>
@@ -214,7 +263,7 @@ function User() {
                       <option value="complexe">Complexe</option>
                     </select>
                   </td>
-                  <td className={`${thTd}`}>
+                  <td className={thTd}>
                     <input
                       className="border ml-4 w-16"
                       type="number"
@@ -234,7 +283,7 @@ function User() {
                       Changer
                     </button>
                   </td>
-                  <td className={`${thTd}`}>
+                  <td className={thTd}>
                     <button
                       className="p-2 bg-red-600 text-white border-none rounded-md"
                       onClick={() => handleDeleteUser(user.id)}
@@ -255,17 +304,17 @@ function User() {
           <table className="w-full">
             <thead>
               <tr>
-                <th className={`${th}`}>Nom</th>
-                <th className={`${th}`}>Action</th>
-                <th className={`${th}`}>Timestamp</th>
+                <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>
+                  <td className={thTd}>{log.name}</td>
+                  <td className={thTd}>{log.action}</td>
+                  <td className={thTd}>{log.timestamp}</td>
                 </tr>
               ))}
             </tbody>