Merge remote-tracking branch 'origin/master'

# Conflicts:
#	Site Web/client/src/styles/index.scss

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

@@ -4,23 +4,55 @@ import { NavLink } from "react-router-dom";
 
 
 const ConfigurationDuCompte =()=>{
+
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [controlPassword, setControlPassword] = useState('');
+
     return(
         <div>
-        <h2>Modifucation information du compte</h2>
-        <div className='ligneHorizontal'>
-            <div>
-                <span>adresse mail : mail</span>
-                <span>mot de passe  : mdp</span>
-                <span>confirmer le mot de passe  : mdp</span>
+        <h2 className='ligneHorizontal'>Modifucation information du compte</h2>
+       
+            <div className="ModifucationInformationDuCompte">
+                        
+                        <div className='ModificationInformationDuCompteText'>
+                        <span>email</span>
+                        <span>mot de passe</span>
+                        <span>comfirmation mot de passe</span>
                         </div>
+                        
+                        <div className='ModificationInformationDuCompteText'>
+                        
+                        <input  type="text" 
+                                name="email"
+                                id="email"
+                                onChange={(e) => setEmail(e.target.value)}
+                                value={email}/>
+                        <br />
+                        <div className='email error'></div>
+                        <input  type="password"
+                                name="password"
+                                id="password"
+                                onChange={(e) => setPassword(e.target.value)}
+                                value={password}/>
+                        <br/>
+                        <div className='password error'></div>
+                        <input  type="password" 
+                                name="password"
+                                id="password-conf"
+                                onChange={(e) => setControlPassword(e.target.value)}
+                                value={controlPassword}/>
+                                <div className='password error'></div>
                         </div>
-        <h2>Suppression du compte</h2>
-        <div className='ligneHorizontal'/>
-        <div >
+            </div>
+        <div />
+        <h2 className='ligneHorizontal'>Suppression du compte</h2>
+        <div className='buttonSuppressionCompte'>
+
         <button>
             supprimer votre compte    
         </button>
-        <span>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</span>
+        <span>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</span>
         </div> 
     </div>
     )
@@ -28,6 +60,7 @@ const ConfigurationDuCompte =()=>{
 
 
 
+
 export default ConfigurationDuCompte;
 
 

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

@@ -14,36 +14,35 @@ const ConfigurationDuProfil = ()=>{
     <div className='modificationDuProfilBackgroud'>
         <h2 className='ligneHorizontal' >Modifucation  du Profil</h2>
         <div className='modificationDuProfil' >
-            <img src={PP} className="imageDeProfil"/>
+            <img src={PP} className="imageDeProfilConfiguration imageDeProfil"/>
+
+                <div className='modificationDuProfilText'>
                 <span>Pseudo: </span>
+                <span>Nom d'utilisateur:</span>
+                </div>
                 <div className='modificationDuProfilText'>
-                <div className="inputbox">
-                    <input 
-                        type="pseudo" 
-                        name="pseudo" 
-                        id="pseudo" 
-                        value={userData.pseudo}
-                        onChange={(e) => setPseudo (e.target.value)} 
-
-                    />
                 
-                </div>
-                <div className="inputbox">
-                    <span>Nom d'utilisateur</span>
                     <input 
                         type="nomUtilisateur" 
                         name="nomUtilisateur" 
                         id="nomUtilisateur" 
                         onChange={(e) => setNomUtilisateur (e.target.value)} 
-                        value={userData.pseudo}
+                        value={pseudo}
+                    />
+                    <input 
+                        type="pseudo" 
+                        name="pseudo" 
+                        id="pseudo" 
+                        value={pseudo}
+                        onChange={(e) => setPseudo (e.target.value)} 
                     />
                 </div>
-            </div>
+                
         </div>
         <h2 className='ligneHorizontal' >Acces au dossiers personnel</h2>
         <div className='accesDossiersPerso'>
-            <input type="checkbox" id="accesDossiersPerso" name='cocher' />
-            <label >Cocher si oui</label>
+            <input type="checkbox" name='cocher' />
+            <label for="cocher" class='textAccesDossiersPerso'>Cocher si oui</label>
         </div> 
     </div>
 

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

@@ -4,8 +4,8 @@ import { NavLink } from "react-router-dom";
 
 const PolitiqueDeConfidentialite =()=>{
     return(
-        <div>
-            Cette politique de confidentialité s’applique au site : Designed By GG.
+        <div className='PolitiqueDeConfidentialiteText'>
+           <p> Cette politique de confidentialité s’applique au site : Designed By GG.
             La présente politique de confidentialité a pour but d’exposer aux utilisateurs du site :
 
             La manière dont sont collectées et traitées leurs données à caractère
@@ -15,7 +15,7 @@ const PolitiqueDeConfidentialite =()=>{
             collectées et traitées ;
             A qui ces données sont transmises ;
             Eventuellement, la politique du site en matière de fichiers “cookies”
-            
+            </p>
         </div>
     )
 }

Site Web/client/src/styles/_settings.scss

@@ -22,3 +22,10 @@ $color-5: #AABBCC;
     margin: 0;
     box-sizing: border-box;
 }
+
+.imageDeProfil{
+    object-fit: none;
+    clip-path:circle(50%);
+    
+}
+

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

@@ -0,0 +1,41 @@
+
+.ModifucationInformationDuCompte{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: 10%;
+}
+
+.ModificationInformationDuCompteText{
+    display: flex;
+    flex-direction: column;
+    padding-left:5%;
+    font-size: medium;
+    
+}
+
+.buttonSuppressionCompte{
+    display: flex;
+    flex-direction:row;
+    align-items:center;
+    button{
+        padding: 1%;
+        margin-bottom: 1%;
+        margin-top: 2%;
+        margin-left: 6%;
+        width: 16%;
+        max-width: 160px;
+        background-color: $color-3;
+        border: 2px solid $color-4;
+        border-radius: 20px;
+    }
+    button:hover  {
+        background-color: $color-1;
+        border-color: black;
+        
+    }
+    span{
+        padding-left: 40px;
+        max-width: 100px;
+    }
+}

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

@@ -15,19 +15,23 @@
     display: flex;
     flex-direction: column;
     padding-left:5%;
-    width: 88%;
     font-size: medium;
+
 }
 
 span{
-    margin: 1%;
+
+    margin-bottom: 4%;
 
 }
 
-.imageDeProfil{
+.imageDeProfilConfiguration{
     width: 15%;
-}
     
+}
+.imageDeProfilConfiguration:hover{
+    filter: blur(1px);
+}
 .accesDossiersPerso{
     display: flex;
     align-items: row;
@@ -39,5 +43,15 @@ span{
 
 
 input{
-    margin-right: 0.5%;
+    margin-bottom: 2%;
 }
+
+.accesDossiersPerso{
+    display: flex;
+  
+}
+
+.textAccesDossiersPerso{
+    margin-left:18px;
+}
+

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

@@ -1,8 +0,0 @@
-.ligneVertical{
-    border-right: thick solid #000;
-    height:85%;
-}
-.ligneHorizontal{
-    border-top: thick solid #000;
-    width: 78%;
-}