avancement update

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

@@ -14,7 +14,7 @@ const ConfigurationDuCompte =()=>{
 
     return(
         <div>
-        <h2 className='ligneHorizontal'>Modifucation information du compte</h2>
+        <h2 className='ligneHorizontal'>Modification des information du compte</h2>
        
             <form className="ModifucationInformationDuCompte">
                         

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

@@ -3,6 +3,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import PP  from "../../assets/img/unknown.png";
 import PLUS from "../../assets/img/plus.png";
 import { NavLink } from "react-router-dom";
+import axios from "axios";
 
 
 
@@ -25,14 +26,51 @@ const ConfigurationDuProfil = ()=>{
         setTmpImage(image.src);
     };
 
+    const handleUpdate = async (e) => {
+        e.preventDefault();
+        //const pseudoError = document.querySelector(".pseudo.error");
+        const pictureError =document.querySelector(".picture.error");
+
+          await axios({
+            method: "post",
+            url: `${process.env.REACT_APP_API_URL}api/user/upload`,
+            data: {
+              //pseudo,
+              userPicture,
+            },
+          })
+             .then((res) => {
+               console.log(res);
+               if (res.data.errors) {
+                // pseudoError.innerHTML = res.data.errors.pseudo;
+                 pictureError.innerHTML = res.data.errors.picture;
+               } 
+            })
+            .catch((err) => console.log(err));
+    };
+
+
+
+
+
+
+
+
+
+
     return(
     <div className='modificationDuProfilBackgroud'>
-        <h2 className='ligneHorizontal' >Modifucation du Profil</h2>
+        
+        <h2 className='ligneHorizontal' >Modification des informations du Profil</h2>
+        <form action='' onSubmit={handleUpdate} >
         <div className='modificationDuProfil' >
+            <>
             <button className='imageDeProfilConfigurationPlus imageDeProfil' >
                 <img src={PLUS} className="plusButton "/>
                 <img src={userPicture} className="imageDeProfilConfiguration imageDeProfil" onClick={() => setDisplayAdd(true)}/>
             </button>
+            {/*<div className='picture error'></div>*/}
+            </>
             <div className='modificationDuProfilText alignementText'>
                 <span>Pseudo: </span>
                 <span>Nom d'utilisateur:</span>
@@ -54,12 +92,14 @@ const ConfigurationDuProfil = ()=>{
                     value={pseudo}
                     onChange={(e) => setPseudo (e.target.value)} 
                 />
+               {/* <div className='pseudo error'></div>*/}
 
             
             </div>
-            <button className='buttonValidationChangements'>Valider</button>
+            <button type='submit' className='buttonValidationChangements' id='update' value='update' >Valider</button>
             </div>
         </div>
+        </form>
         
         <h2 className='ligneHorizontal' >Acces au dossiers personnel</h2>
         <div className='accesDossiersPerso'>
@@ -74,14 +114,16 @@ const ConfigurationDuProfil = ()=>{
             <div className='popup-modificationProfil'>
                 <div className="modal">
                 <div className='imagesPopup'>
-                    <img src={userPicture} className="imageDeProfilConfigurationPlus imageDeProfil"/>
-                    <div className="imageDeProfilConfigurationPlus imageDeProfil profile-pic" >
+                    <div className='imageModifSpace'>
+                    <img src={userPicture} className=" imageDeProfil "/>
+                    </div>
+                    <div className='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" />
+                        <input type="file" id="file" name='file' accept=".jpg, .jpeg, .png" onChange={handleLoadFile}/>
+                        <img src={PLUS} className="imageDeProfil"id="output" />
                     </div>
                 </div >
                 <div className='buttonPopup'>

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

@@ -64,17 +64,17 @@ const Trends = () => {
             </div>
         );*/
 
-    return (
-        <div id={'listeNotif'}>
-            <Navbar />
-            <h1>Notification</h1>
-            <Notif message="a like"/>
-            <Notif message="a like"/>
-            <Notif message="a like"/>
-            <Notif message="a like"/>
-            <Notif message="a like"/>
-            <Notif message="a commenter votre poste"/>
-        </div>);
+    // return (
+    //     <div id={'listeNotif'}>
+    //         <Navbar />
+    //         <h1>Notification</h1>
+    //         <Notif message="a like"/>
+    //         <Notif message="a like"/>
+    //         <Notif message="a like"/>
+    //         <Notif message="a like"/>
+    //         <Notif message="a like"/>
+    //         <Notif message="a commenter votre poste"/>
+    //     </div>);
 };
 
 export default Trends;

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

@@ -34,6 +34,9 @@ body{
 
 .imageDeProfil{
     object-fit: cover;
+    background-size: cover;
+    width: 180px;
+    height: 180px;
     clip-path:circle(50%);
 
 }

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

@@ -38,9 +38,10 @@ span{
 
 .imageDeProfilConfigurationPlus {
     position: relative;
+    
     width: 15%;
-    max-width: 180px;
-    min-width: 130px;
+    max-width: 200px;
+    min-width: 150px;
     border: none;
 
 }
@@ -119,8 +120,8 @@ input{
       transform: scaleY(0);
       transform-origin: center;
       animation: modal .5s forwards;
-      max-width: 360px;
-      min-width: 320px;
+      max-width: 650px;
+      min-width: 500px;
       border: 2px solid $color-4;
       border-bottom-right-radius: 50px;
 
@@ -130,42 +131,33 @@ input{
         }
       }
 
-        &:hover {
-          transform: scale(1.07);
-        }
+        
       }
 
 
-        &::-webkit-scrollbar {
-          width: 2px;
-        }
-        &::-webkit-scrollbar-track {
-          background: $color-4;
-        }
-        &::-webkit-scrollbar-thumb {
-          background: $color-1;
-        }
-        &::-webkit-scrollbar-thumb:hover {
-          background: #555;
-        }
+       
         .imagesPopup{
             display: flex;
             justify-content: space-between;
             flex-direction: row;
+            .imageModifSpace{
+              margin-right: 18%;
+              img{
+                max-width: initial;
+              }
+            }
             .profile-pic {
+              position: relative;
+              width: 100%;
               color: transparent;
               transition: all .3s ease;
               @include object-center;
-              position: relative;
-              transition: all .3s ease;
-              
               input{
                 display:none;
               }
 
               img{
                 position: absolute;
-                object-fit: cover;
                 z-index: 0;
               }
               .-label {

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

@@ -26,12 +26,10 @@
         
         @keyframes slide {
           from {
-            margin-top: 80%;
             width: 80%;
           }
         
           to {
-            margin-top: 0%;
             width: 100%;
           }
         }

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

@@ -30,7 +30,7 @@
             flex-direction: row;
             justify-content: space-between;
             padding-left: 10%;
-            flex: 0.5 0.8 auto;
+            flex: 0.5 0.4 auto;
         }
 
     }

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

@@ -39,7 +39,7 @@
     input:focus{
         background-color:$color-3;
     }
-    margin-left: 1%;
+    margin-left: 6%;
 }
 
 .ligneHorizontal{

Site Web/routes/user.routes.js

@@ -12,6 +12,7 @@ router.post('/login', authController.signIn);
 //retirer le token (cookie)
 router.get('/logout', authController.logout);
 
+
 // user 
 router.get('/', userController.getAllUsers);
 router.get('/:id', userController.userInfo);

Site Web/utils/errors.utils.js

@@ -43,13 +43,3 @@ module.exports.uploadErrors = (err) => {
   return errors
 }
 
-module.exports.uploadErrors = (err) => {
-  let errors = { format: '', maxSize: ""};
-
-  if (err.message.includes('invalid file'))
-    errors.format = "Format incompatible";
-  
-  if (err.message.includes('max size'))
-    errors.maxSize = "Le fichier dépasse 500ko";
-  return errors;
-}