avancement configuration

Site Web/client/src/components/Configurations/ConfigurationDuProfil.js

@@ -12,24 +12,35 @@ const ConfigurationDuProfil = ()=>{
     const [pseudo, setPseudo] = useState('');
     const [nomUtilisateur, setNomUtilisateur] = useState('');
     const [displayAdd, setDisplayAdd] = useState(false);
-    const handleModals=()=>{
+    /*const [updateImage, setUpdateImage]= useState(false);
-        
+    const setimageDeProfile=()=>{
+        if(updateImage=true){
+        useState("");
+        setDisplayAdd(false);
+        }
+        else{
+            setDisplayAdd(false);
+        }
+    }*/
+    var handleLoadFile=(e)=>{
+        var image = document.getElementById("output");
+        image.src = URL.createObjectURL(e.target.files[0]);
         
     };
-
+    var a=PP;
-
     return(
     <div className='modificationDuProfilBackgroud'>
         <h2 className='ligneHorizontal' >Modifucation du Profil</h2>
         <div className='modificationDuProfil' >
             <button className='imageDeProfilConfigurationPlus imageDeProfil' >
                 <img src={PLUS} className="plusButton "/>
-                <img src={PP} className="imageDeProfilConfiguration imageDeProfil" onClick={() => setDisplayAdd(true)}/>
+                <img src={a} className="imageDeProfilConfiguration imageDeProfil" onClick={() => setDisplayAdd(true)}/>
             </button>
             <div className='modificationDuProfilText'>
                 <span>Pseudo: </span>
                 <span>Nom d'utilisateur:</span>
             </div>
+            <div>
             <div className='modificationDuProfilText'>
                 
                 <input className='inputConfiguration' 
@@ -46,8 +57,13 @@ const ConfigurationDuProfil = ()=>{
                     value={pseudo}
                     onChange={(e) => setPseudo (e.target.value)} 
                 />
+
+            
+            </div>
+            <button className='buttonValidationChangements'>Valider</button>
             </div>
         </div>
+        
         <h2 className='ligneHorizontal' >Acces au dossiers personnel</h2>
         <div className='accesDossiersPerso'>
             <div className='accesDossiersPersoValidation'>
@@ -67,11 +83,18 @@ const ConfigurationDuProfil = ()=>{
                 <div className="modal">
                 <div className='imagesPopup'>
                     <img src={PP} className="imageDeProfilConfigurationPlus imageDeProfil"/>
-                    <img src={PLUS} className="imageDeProfilConfigurationPlus imageDeProfil" onClick={handleModals}/>
+                    <div className="imageDeProfilConfigurationPlus imageDeProfil profile-pic" >
+                        <label className="-label" for="file">
+                        <span class="camera"></span>
+                            <span>Changer</span>
+                        </label>
+                        <input type="file" id="file" onChange={handleLoadFile}/>
+                        <img src={PLUS} id="output" />
+                    </div>
                 </div >
                 <div className='buttonPopup'>
-                <button  onClick={() => setDisplayAdd(false)}>Retour</button>
+                <button  onClick={() => setDisplayAdd(false)/*&&setUpdateImage(true)*/}>Retour</button>
-                <button /*onClick={handlePost} */>Valider</button>
+                <button /*onClick={} */>Valider</button>
                 </div>
                 </div>
             </div>

Site Web/client/src/pages/Configuration.js

@@ -28,7 +28,7 @@ const Configuration = () => {
 
         };        
     return(
-        <main className='mainConfig'>
+        <>
         <Navbar />
         <div className='configuration'>
             <div className='boutonDeConfigurations'>
@@ -48,7 +48,7 @@ const Configuration = () => {
             {ConfigurationCompte &&<ConfigurationDuCompte/>}
             {PolitiqueConfidentialite &&<PolitiqueDeConfidentialite/>}
         </div>
-        </main>
+        </>
     );
 }
 

Site Web/client/src/styles/component/_configurationDuProfil.scss

@@ -1,4 +1,8 @@
-
+@mixin object-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
 .modificationDuProfil{
     display: flex;
@@ -87,7 +91,7 @@ input{
 }
 
 .popup-modificationProfil{
-    z-index: 100;
+    z-index: 10;
     width: 100%;
     height: 100%;
     top: 0;
@@ -147,13 +151,44 @@ input{
             display: flex;
             justify-content: space-between;
             flex-direction: row;
-
+            .profile-pic {
-        }
+              color: transparent;
-        .imagesPopup{
+              transition: all .3s ease;
-          display: flex;
+              @include object-center;
-          flex-direction: row;
+              position: relative;
-          justify-content: space-between;
+              transition: all .3s ease;
-
+              
+              input{
+                display:none;
+              }
+
+              img{
+                position: absolute;
+                object-fit: cover;
+                z-index: 0;
+              }
+              .-label {
+                cursor: pointer;
+              }
+
+              &:hover {
+                .-label {
+                  @include object-center;
+                  background-color: rgba(0,0,0,.8);
+                  z-index: 10;
+                  color: rgba(255,255,255);
+                  transition: background-color .2s ease-in-out;
+                  border-radius: 20px;
+                  margin-bottom: 0;
+               }
+              }
+              
+              span {
+                display: inline-flex;
+                padding: .2em;
+                height: 2em;
+              }
+            }
         }
         .buttonPopup {
           display: flex;
@@ -175,3 +210,18 @@ input{
         }
         
 }
+
+.buttonValidationChangements{
+  position: relative;
+  margin-top: 2%;
+
+  border-radius: 20px;
+  min-width: 60px;
+}
+
+
+.camera{
+  background: url("./../../assets/img/Photo-Video-Camera-icon.png");
+}
+
+

Site Web/client/src/styles/component/_navbar.scss

@@ -36,6 +36,7 @@
     background:var(--navbar-background-color);
     box-shadow: rgba(12,43, 30, 0.2) 0 4px 14px;
     transition: width var(--navbar-transition-speed) ease;
+    z-index: 11;
   }
   
   .navbar:hover {

Site Web/client/src/styles/pages/_configuration.scss

@@ -56,8 +56,3 @@
 // }
 
 
-
-.mainConfig{
-    display: flex;
-    flex-direction: column;
-}

Site Web/package.json

@@ -10,17 +10,26 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "axios": "^1.1.3",
+    "@reduxjs/toolkit": "^1.9.1",
+    "axios": "^1.2.2",
     "bcrypt": "^5.1.0",
     "body-parser": "^1.20.1",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
+    "js-cookie": "^3.0.1",
     "jsonwebtoken": "^8.5.1",
     "mongoose": "^6.6.6",
     "multer": "^1.4.5-lts.1",
     "nodemon": "^2.0.20",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.6.1",
+    "react-scripts": "^5.0.1",
+    "sass": "^1.57.1",
+    "sass-loader": "^13.2.0",
+    "tachyons": "^4.12.0",
     "validator": "^13.7.0"
   }
 }