modif Théo

package-lock.json

@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.1.3",
         "crypto-js": "^4.1.1",
         "pg": "^8.8.0",
         "react": "^18.2.0",
@@ -4968,6 +4969,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz",
+      "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -13852,6 +13876,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -20471,6 +20500,28 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
       "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w=="
     },
+    "axios": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz",
+      "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -26725,6 +26776,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.1.3",
     "crypto-js": "^4.1.1",
     "pg": "^8.8.0",
     "react": "^18.2.0",

src/App.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Connexion from './pages/Connexion';
+//import Connexion from './pages/Connexion';
-// import Admin from './pages/Admin.js';
+import Admin from './pages/Admin.js';
+import Admin_supp from './pages/Admin_supp.js';
+import Admin_modif from './pages/Admin_modif.js';
 
 const App = () => {
   return (
@@ -11,7 +13,7 @@ const App = () => {
     //  </Routes>
     //</BrowserRouter>
 
-    <Connexion />
+    <Admin_modif/>
   );
 }
 

src/pages/Admin.js

@@ -8,17 +8,17 @@ const Admin = () => {
             <div className="nav_bar_verticale">
                 <img className="logo" srcSet="./LogoApp.svg"></img>
                 <div className="create_user">
-                    <button id="user" className="bouton" type="button" value="Créer un utilisateur" /*onClick="Create_user()"*/>Créer un nouvel utilisateur</button>
+                    <button id="user" className="bouton" type="button" value="Créer un utilisateur" onClick={Create_user}>Créer un nouvel utilisateur</button>
                 </div>
                 <div className="modify_user">
-                    <button id="user" className="bouton" type="button" value="Modifier un utilisateur" /*onClick="Modify_user()"*/>Modifier un utilisateur</button>
+                    <button id="user" className="bouton" type="button" value="Modifier un utilisateur" onClick={Modify_user}>Modifier un utilisateur</button>
                 </div>
                 <div className="delete_user">
-                    <button id="user" className="bouton" type="button" value="Supprimer un utilisateur" /*onClick="Delete_user()"*/>Supprimer un utilisateur</button>
+                    <button id="user" className="bouton" type="button" value="Supprimer un utilisateur" onClick={Delete_user}>Supprimer un utilisateur</button>
                 </div>
             </div>
+            <p className="Titre">Admin</p>
             <div className="Formulaire">
-                <p className="Titre">Admin</p>
                 <form className="form">
                     <table className="Formulaire_de_connexion">
                         <tr>
@@ -52,4 +52,20 @@ const Admin = () => {
     );
 };
 
+function Create_user() {
+    document.getElementById("user").onclick = function() {Create_user()};
+    document.location.href = "http://localhost:3000/";
+}
+
+function Modify_user(){
+    document.getElementById("user").onclick = function() {Modify_user()};
+    document.location.href = "http://localhost:3000/";
+}
+
+function Delete_user(){
+    //document.getElementById("user").onclick = function() {Delete_user()};
+    document.location = './pages/Admin_supp';
+    console.log(document.location);
+}
+
 export default Admin;

src/pages/Admin_modif.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+const Admin_modif = () => {
+    return (
+        <div className="page_admin">
+            {/* Create a page to delete an user in the admin page*/}
+            <div className="nav_bar_verticale">
+                <img className="logo" srcSet="./LogoApp.svg"></img>
+                <div className="create_user">
+                    <button id="user" className="bouton" type="button" value="Créer un utilisateur" onClick="Create_user()">Créer un nouvel utilisateur</button>
+                </div>
+                <div className="modify_user">
+                    <button id="user" className="bouton" type="button" value="Modifier un utilisateur" /*onClick="Modify_user()"*/>Modifier un utilisateur</button>
+                </div>
+                <div className="delete_user">
+                    <button id="user" className="bouton" type="button" value="Supprimer un utilisateur" /*onClick="Delete_user()"*/>Supprimer un utilisateur</button>
+                </div>
+            </div>
+            <div className="Formulaire">
+                <p className="Titre">Admin</p>
+                <form className="form">
+                    <table className="Formulaire_de_connexion">
+                        <tr>
+                            <p className="texte">Nom :</p>
+                            <input id="nom" className="texte_zone" type="text"/>
+                        </tr>
+                        <tr>
+                            <p className="texte">Prénom :</p>
+                            <input id="prénom" className="texte_zone" type="text"/>
+                        </tr>
+                        <tr>
+                            <p className="texte">Rôle dans l'entreprise :</p>
+                            <input id="rôle" className="texte_zone" type="text"/>
+                        </tr>
+                        <tr>
+                            <p className="texte">Identifiant :</p>
+                            <input id="identifiant" className="texte_zone" type="text"/>
+                        </tr>
+                        <tr>
+                            <p className="texte">Mot de passe (par défaut) :</p>
+                            <input id="password" className="texte_zone" type="text"/>
+                        </tr>
+                        <tr>
+                            <button className="bouton_val_ann" type="submit">Valider</button>
+                            <button className="bouton_val_ann" type="submit">Annuler</button>
+                        </tr>
+                    </table>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default Admin_modif;

src/pages/Admin_supp.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+const Admin_supp = () => {
+    return (
+        <div className="page_admin">
+            {/* Create a page to delete an user in the admin page*/}
+            <div className="nav_bar_verticale">
+                <img className="logo" srcSet="./LogoApp.svg"></img>
+                <div className="create_user">
+                    <button id="user" className="bouton" type="button" value="Créer un utilisateur" onClick="Create_user()">Créer un nouvel utilisateur</button>
+                </div>
+                <div className="modify_user">
+                    <button id="user" className="bouton" type="button" value="Modifier un utilisateur" /*onClick="Modify_user()"*/>Modifier un utilisateur</button>
+                </div>
+                <div className="delete_user">
+                    <button id="user" className="bouton" type="button" value="Supprimer un utilisateur" /*onClick="Delete_user()"*/>Supprimer un utilisateur</button>
+                </div>
+            </div>
+            <p className="Titre">Admin</p>
+            <form className="formulaire">
+                <table className="Formulaire_de_recherche">
+                    <tr>
+                        <input id="personne" type="search" className="texte_barre" placeholder="🔎 Rechercher un utilisateur" /*onClick={tab}*//>
+                    </tr>
+                    <tr>
+
+                    </tr>
+                </table>
+            </form>
+        </div>
+    );
+};
+
+/*function tab(){
+    var tab = new Array();
+    if(Create_user()){
+        tab.push(nom, prenom);
+    }
+    console.log(tab);
+}*/
+
+export default Admin_supp;

src/styles/components/_admin.scss

@@ -94,23 +94,34 @@
         }
     }
 
-    .Titre{
+    /*.form{
-        display: flex;
+        align-self: center;
-        font-weight: bold;
+        font-size: 30px;
-        font-size: 80px;
+    }*/
-        margin: 20px;
+
-    }
 
     .Formulaire{
         display: flex;
         flex-direction: column;
+        align-items: center;
         width: 100%;
     }
 
-    .form{
+    .formulaire{
-        align-self: center;
+        display: flex;
+        flex-direction: column;
+        margin: 100px;
+        padding: 30px;
+        align-items: center;
+    }
+
+
+    .Titre{
+        display: flex;
         flex-direction: row;
-        font-size: 30px;
+        font-weight: bold;
+        font-size: 80px;
+        margin: 20px;
     }
 
     .texte{
@@ -145,4 +156,13 @@
             background-color:rgba(68, 68, 68, 0.972);   
         }
     }
-}
+
+    .texte_barre{
+        display: flex;
+        width: 400px;
+    }
+}
+
+    
+
+