mot de passe oublié

Site Web/client/src/components/AjoutLien.js

@@ -3,6 +3,7 @@ import React, {useContext, useState} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { addPost, getPosts } from '../actions/post.actions';
 import { UidContext } from './AppContext';
+import IconeFavor from '../assets/img/logo.png';
 
 const AjoutLien = () => {
     const uid = useContext(UidContext);
@@ -29,6 +30,7 @@ const AjoutLien = () => {
                 dispatch(getPosts());
                 cancelPost();
                 setDisplayAdd(false);
+                await new Promise(r => setTimeout(r, 500));
                 window.location.reload();
             }else {
                 alert("Veuillez compléter tous les champs et ajouter au moins un tag.")
@@ -74,19 +76,30 @@ const AjoutLien = () => {
                     </button>
                 }
                 {uid !== null &&
-                    <button className='button-add-link'  onClick={() => setDisplayAdd(true)} >
+                    // <button className='button-add-link'  onClick={() => setDisplayAdd(true)} >
-                        Poster un lien
+                    //     Poster un lien
+                    // </button>
+                    <ul className="wrapperAjout">
+  
+                    <button className="iconFavor" onClick={() => setDisplayAdd(true)}>
+                        <div className="flexButon">
+                        {/* <img src={IconeFavor}/> */}
+                        <span>Poster un lien</span>
+                        
+                        </div>
                     </button>
+ 
+                    </ul>
                 }
             </div>
             {displayAdd && (
-                <div className="popup-profil-container">
+                <div className="popup-ajout-container">
                     <div className="modal">
                         <h3>Ajout d'un lien</h3>
                         <span className="cross" onClick={() => setDisplayAdd(false)}>
                             &#10005;
                         </span>
-                        <ul>
+                        <ul className='ul_ajout_Profil'>
                             <form className="newPoste-form-container">
                                 <div className="newPoste-input">
                                     <input  type="text" 
@@ -110,7 +123,7 @@ const AjoutLien = () => {
                                     value={tag}
                                     onChange={e => setTag(e.target.value)}
                                 />
-                                <i type="submit" onClick={handleSubmit}>Add Tag</i>
+                                <i type="submit" onClick={handleSubmit}>Ajouter un tag</i>
 
                                 <ul>
                                     {tags.map(t => (
@@ -120,7 +133,7 @@ const AjoutLien = () => {
 
                                 <div id="newPoste-buttonForm">
                                     <div>
-                                        <button  onClick={() => setDisplayAdd(false)} className="newPoste-btn-cancel" >retour</button>
+                                        <button  onClick={() => setDisplayAdd(false)} className="newPoste-btn-cancel" >Retour</button>
                                     </div>
                                     <div>
                                         <button onClick={handlePost} className="newPoste-btn">Poster</button>

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

@@ -16,7 +16,7 @@ const ConfigurationDuCompte =()=>{
         e.preventDefault();
         console.log(userData._id);
         axios
-          .put(`${process.env.REACT_APP_API_URL}api/user/update/`+ userData._id , { email, password })
+          .put(`${process.env.REACT_APP_API_URL}api/user/update/email/`+ userData._id , { email, password })
           .then(response => {
             console.log(response);
           })
@@ -25,11 +25,26 @@ const ConfigurationDuCompte =()=>{
           });
       }
       
+     /* const handleSuppression{
+
+      }
+      */
+      const deleteUser = (userId) => {
+        try {
+          console.log("test");
+          console.log(userId);
+          const response = axios.delete(`${process.env.REACT_APP_API_URL}api/user/delete/${userId}`);
+          console.log(response.data.message);
+        } catch (error) {
+          console.log(error.response.data.error);
+        }
+      }
+
 
 
     return(
         <div>
-        <h2 className='ligneHorizontal'>Modification des information du compte</h2>
+        <h2 className='ligneHorizontal'>Modification des informations du compte</h2>
        
             <form className="ModifucationInformationDuCompte">
                         
@@ -69,10 +84,10 @@ const ConfigurationDuCompte =()=>{
         <h2 className='ligneHorizontal'>Suppression du compte</h2>
         <div className='buttonSuppressionCompte'>
 
-        <button>
+        <button  onClick={()=>deleteUser(userData._id)}>
             supprimer votre compte    
         </button>
-            <p className='buttonSuppressionText'>Note : action irreversible qui vous fera perdre toutes les données du compte en conséquence</p>
+            <p className='buttonSuppressionText'>Note : Cette action est  irréversible qui vous fera perdre toutes les données du compte en conséquence</p>
         </div> 
     </div>
     )

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

@@ -3,7 +3,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import PLUS from "../../assets/img/plus.png";
 import { NavLink } from "react-router-dom";
 import axios from "axios";
-import { uploadPicture } from '../../actions/user.actions';
+import { getUser, uploadPicture } from '../../actions/user.actions';
 import { useParams } from 'react-router-dom';
 import { UidContext } from '../AppContext';
 
@@ -16,6 +16,9 @@ const ConfigurationDuProfil = ()=>{
     const [tmpAffichageImage, setTmpAffichageImage]=useState(PLUS);
     const [displayAdd, setDisplayAdd] = useState(false);
     const [message, setMessage] = useState('');
+    const dispatch=useDispatch();
+
+
 
     const handleLoadFile=(e)=>{
         const file=e.target.files[0];
@@ -35,6 +38,21 @@ const ConfigurationDuProfil = ()=>{
    console.log(tmpImage);
     };
 
+
+    const handleUpdatePseudo=(e)=>{
+        e.preventDefault();
+        console.log(userData.pseudo);
+        axios
+          .put(`${process.env.REACT_APP_API_URL}api/user/update/`+ userData._id , { pseudo })
+          .then(response => {
+            console.log(response);
+          })
+          .catch(error => {
+            console.log(error);
+          });
+          dispatch(getUser);
+      }
+
     const handleTPM =()=> {
         console.log("test");
         console.log(tmpImage);
@@ -44,6 +62,7 @@ const ConfigurationDuProfil = ()=>{
     const handleUpdate = async (e) => {
 
         e.preventDefault();
+        
         try {
             await axios.patch( `${process.env.REACT_APP_API_URL}api/user/${userData.id}/image`, tmpImage);
             setMessage("Image de profil mise à jour avec succès!");
@@ -51,29 +70,10 @@ const ConfigurationDuProfil = ()=>{
             setMessage("Erreur lors de la mise à jour de l'image de profil");
           }
           
-          userPicture(tmpAffichageImage);
+          setUserPicture(tmpAffichageImage);
           console.log(userPicture);
           setDisplayAdd(false);
-        //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));*/
     };
 
 
@@ -115,7 +115,7 @@ const ConfigurationDuProfil = ()=>{
 
             
             </div>
-            <button type='submit' className='buttonValidationChangements' id='update' value='update' >Valider</button>
+            <button type='submit' className='buttonValidationChangements' id='update' value='update' onClick={handleUpdatePseudo}>Valider</button>
             </div>
         </div>
         </form>
@@ -138,7 +138,6 @@ const ConfigurationDuProfil = ()=>{
                     </div>
                     <div className='profile-pic '>
                         <label className="-label" for="file">
-                        <span className="camera"></span>
                             <span>Changer</span>
                         </label>
                         <input type="file" id="file" name='file' accept=".jpg, .jpeg, .png" onChange={handleLoadFile}/> {/*onChange={handleLoadFile} onChange={(e)=> setTmpImage(e.target.files[0].name)} */}

Site Web/client/src/components/Post/ActionComment.js

@@ -7,7 +7,8 @@ import { UidContext } from '../AppContext';
 const ActionComment = ( { commentaire , postId}) => {
     const [createur, setCreateur] = useState(false);
     const [edit, setEdit] = useState(false);
-    const [message,setMessage] = useState('');
+    const [message,setMessage] = useState(commentaire.text);
+
     const uid = useContext(UidContext);
     const dispatch = useDispatch();
     
@@ -15,13 +16,14 @@ const ActionComment = ( { commentaire , postId}) => {
         e.preventDefault();
         if(message){
             dispatch(editComment(postId, commentaire._id, message));
-            setMessage('');
             setEdit(false);
         }
     };
 
     const handleDelete = () => {
         dispatch(deleteComment(postId, commentaire._id));
+        setMessage('commantaire suprimer');
+        setEdit(false);
     };
 
     useEffect(() => {
@@ -36,6 +38,9 @@ const ActionComment = ( { commentaire , postId}) => {
     }, [uid, commentaire.commenterId]);
 
     return (
+        <>
+            <p>{message}</p>
+
         <div className="edit-comment">
             {createur && edit === false && (
                 <span onClick={() => setEdit(!edit)}>
@@ -45,10 +50,8 @@ const ActionComment = ( { commentaire , postId}) => {
             {createur && edit && (
                 <form action="" onSubmit={handleEdit}
                 className="edit-comment-form">
-                    <label htmlFor='text' onClick={() => setEdit(!edit)}>Modifier le commentaire</label>
+                    <div className="top-edit-com">
-                
+                        <label htmlFor='text' onClick={() => setEdit(!edit)}>Annuler</label>
-                    <input type="text" name="text" onChange={(e) => setMessage(e.target.value)} defaultValue={commentaire.text}/>
-                    <br/>
                         <div className="btn">
                             <span onClick={() => {
                                 if(window.confirm("Etes-vous sur de supprimer ce commentaire ?")){
@@ -58,11 +61,17 @@ const ActionComment = ( { commentaire , postId}) => {
                                 <i className="fas fa-trash-alt"></i>
                             </span>
                     </div>
-                    <input type="submit" value="Modifier"/>
+                    
+                    </div>
+                    <input type="text" name="text" onChange={(e) => setMessage(e.target.value)} defaultValue={commentaire.text}/>
+                    <br/>
+                    
+                    <input className="comment-modify" type="submit" value="Modifier"/>
                 </form>
 
             )}
         </div>
+        </>
     );
 };
 

Site Web/client/src/components/Post/ButtonLike.js

@@ -6,31 +6,28 @@ import CoeurPlein from '../../assets/img/coeursPlein.png';
 import { likePost, unlikePost } from '../../actions/post.actions';
 
 const ButtonLike = ( { post } ) => {
-  const [liked, setLiked] = useState(false);
   const uid = useContext(UidContext);
+  const [likes, setLikes] = useState(post.likers.length);
+  const [liked, setLiked] = useState(post.likers.includes(uid));
   const dispatch = useDispatch();
 
   const like = (e) => {
     e.preventDefault();
-    dispatch(likePost(post._id, uid));
+    setLikes(likes + 1);
     setLiked(true);
+    dispatch(likePost(post._id, uid));
   };
 
   const unlike = (e) => {
     e.preventDefault();
-    dispatch(unlikePost(post._id, uid));
+    setLikes(likes - 1);
     setLiked(false);
+    dispatch(unlikePost(post._id, uid));
   };
 
-  useEffect(() => {
-    if (post.likers.includes(uid)) {
-        setLiked(true);
-    } else {
-        setLiked(false);
-    }
-  }, [uid, post.likers, liked]);
 
   return (
+      <>
          <div>
             {uid && liked === false && (
                 <img src={Coeur} onClick={like} alt="like" />
@@ -39,6 +36,10 @@ const ButtonLike = ( { post } ) => {
                 <img src={CoeurPlein} onClick={unlike} alt="unlike" />
             )}
           </div>
+          <div>
+            {likes}
+          </div>
+      </>
   );
 };
 

Site Web/client/src/components/Post/Comment.js

@@ -4,6 +4,9 @@ import { addComment, getPosts } from '../../actions/post.actions';
 import FollowHandler from '../UserProfil/FollowHandler';
 import { isEmpty, timestampParser } from '../Utils';
 import ActionComment from './ActionComment';
+import MiniProfil from "../MiniProfil";
+
+
 
 const Comment = ({ post }) => {
     const [message, setMessage] = useState("");
@@ -27,42 +30,30 @@ const Comment = ({ post }) => {
             return (
               <div
                 className={
-                  comment.commenterId === userData._id
+                  comment.commentId === userData._id
                     ? "comment-container client"
                     : "comment-container"
                 }
                 key={comment._id}
               >
                 <div className="left-part">
-                  <img
+                <MiniProfil uid={comment.commentId}/>
-                    src={
-                      !isEmpty(usersData[0]) &&
-                      usersData
-                        .map((user) => {
-                          if (user._id === comment.commenterId) return user.picture;
-                          else return null;
-                        })
-                        .join("")
-                    }
-                    alt="commenter-pic"
-                  />
                 </div>
                 <div className="right-part">
                   <div className="comment-header">
                     <div className="pseudo">
-                      <h3>{comment.commenterPseudo}</h3>
-                      {comment.commenterId !== userData._id && (
                     <FollowHandler
-                          idToFollow={comment.commenterId}
+                          idToFollow={comment.commentId}
                           type={"suggest"}
                         />
-                      )}
                     </div>
                     <span>{timestampParser(comment.timestamp)}</span>
                   </div>
-                  <p>{comment.text}</p>
+                  <div className="content-com">
                       <ActionComment commentaire={comment} postId={post._id} />
                     </div>
+                  
+                </div>
               </div>
             );
           })}

Site Web/client/src/components/Post/DisplayPost/DiplayPostDossier.js

@@ -13,14 +13,17 @@ const DiplayPostDossier = () => {
     useEffect(() => {
         dispatch(getPosts());
     },[dispatch])
-
+    console.log("datados");
+    console.log(postsData);
 
     return (
         <div>
             <ul>
-                {!isEmpty(postsData[0]) &&
+                {!isEmpty(postsData) &&
                     postsData.map((post) => {
                         if(post.postedId === uid){
+                            console.log(post)
+                            console.log("tttt")
                         return <Post post={post} key={post._id}/>
                         }
                    })}

Site Web/client/src/components/Post/DisplayPost/DisplayPostLikeProfil.js

@@ -13,7 +13,8 @@ const DisplayPostLikeProfil = () => {
     useEffect(() => {
         dispatch(getPosts());
     },[dispatch])
-
+    console.log("datapost like");
+    console.log(postsData);
 
     return (
         <div>

Site Web/client/src/components/Post/DisplayPost/NouveauDisplayPosts.js

@@ -13,7 +13,8 @@ const NouveauDisplayPosts = () => {
     useEffect(() => {
         dispatch(getPosts());
     },[dispatch])
-
+    console.log("datapost");
+    console.log(postsData);
     if (!postsData) {
         return <p>Loading...</p>;
     }

Site Web/client/src/components/Post/Post.js

@@ -75,7 +75,6 @@ const Post = ( { post } ) => {
                     <div id="basPoste">
                         <div id="like">
                             <ButtonLike post={post}/>
-                            <div>{post.likers.length}</div>
                         </div>
                         <div id="commentaire">
                             <img src={Commentaire} onClick={() => setComments(!comments)}/>

Site Web/client/src/components/Post/PostNouvelleAffichage.js

@@ -46,12 +46,15 @@ const PostNouvelleAffichage = ( { post } ) => {
 
 
     useEffect(() => {
+        try {
             !isEmpty(usersData[0]) && setIsLoading(false)
-    })
+        }
+        catch (error){
 
-    if(!isLoading){
-        return <p></p>;
         }
+    })
+
+    
     try {
         return (
             <li className='PostesProfilConteneur' key={post._id}>
@@ -70,8 +73,6 @@ const PostNouvelleAffichage = ( { post } ) => {
                             <div className='informationDunPosteNouvelleAffichage'>
                                 <div id="like">
                                     <ButtonLike post={post}/>
-                                    {/* <img src="coeurs.png"/> */}
-                                    <div>{post.likers.length}</div>
                                 </div>
                                 <div id="commentaire">
                                     <img src={Commentaire} onClick={() => setComments(!comments)}/>

Site Web/client/src/components/UserProfil/NavigationProfil/DossiersPersonnels.js

@@ -5,7 +5,6 @@ import DiplayPostDossier from "../../Post/DisplayPost/DiplayPostDossier";
 
 
 const DossiersPersonnels=()=>{
-
     return(
     <div className='dossierPersonnel'>
      <DiplayPostDossier/>

Site Web/client/src/components/UserProfil/SuggestFriends.js

@@ -66,6 +66,7 @@ const SuggestFriends = () => {
         }
     }, [userData, usersData, change])
 
+    try {
         return (
             <div className="recoDiv">
                 <div className="reco">
@@ -80,9 +81,13 @@ const SuggestFriends = () => {
                                     if (user === usersData[i]._id) {
                                         return (
                                             <div className="UtiReco" key={user}>
+                                                <div>
                                                     <MiniProfil uid={usersData[i]._id}></MiniProfil>
+                                                </div>
+                                                <div>
                                                     <FollowHandler idToFollow={usersData[i]._id} type={"card"}/>
                                                 </div>
+                                            </div>
                                         );
                                     }
                                 }
@@ -93,6 +98,10 @@ const SuggestFriends = () => {
                 </div>
             </div>
         );
+    }
+    catch (error){
+        return <div>Loading...</div>
+    }
 };
 
 export default SuggestFriends;

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

@@ -64,7 +64,7 @@ const Profil = () => {
         <div>
             <div>
                 <div className="imageProfil">
-                    <img className="image" src={userData.picture}/>
+                    <img className="image" src={userData.picture.data}/>
                 </div>
                 <div className="divPseudo">
                     <h3 className="pseudo">{userData.pseudo}</h3>
@@ -94,7 +94,7 @@ const Profil = () => {
                                   {
                                       userData.following.map((follower, i) => {
                                           return (
-                                                    <li key={i}>
+                                              <li className="infoFollow" key={i}>
                                                   <MiniProfil uid={follower}/>
                                                   <div classNameName="follow-handler">
                                                       <FollowHandler idToFollow={uid} type={'card'}/>
@@ -108,17 +108,17 @@ const Profil = () => {
                       </div>
                   )}
                 {followerPopup && (
-                                <div classNameName="popup-profil-container">
+                    <div className="popup-profil-container">
-                                <div classNameName="modal">
+                        <div className="modal">
-                                    <h3>Abonnés</h3>
+                            <h3>Abonnements</h3>
-                                    <span classNameName="cross" onClick={() => setFollowerPopup(false)}>
+                            <span className="cross" onClick={() => setFollowerPopup(false)}>
                                   &#10005;
                               </span>
                             <ul>
                                 {
                                     userData.followers.map((follower, i) => {
                                         return (
-                                                    <li key={i}>
+                                            <li className="infoFollow" key={i}>
                                                 <MiniProfil uid={follower}/>
                                                 <div classNameName="follow-handler">
                                                     <FollowHandler idToFollow={uid} type={'card'}/>
@@ -131,8 +131,6 @@ const Profil = () => {
                         </div>
                     </div>
                 )}
-
-                
             </div>
 
 

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

@@ -56,11 +56,31 @@ const SearchBar = () => {
                 <Navbar/>
                 <main>
                     <div className="search-main">
-                        <form>
+                       
+                            {/* <form>
                             <input type="text" value={searchValue} onChange={(e) => setSearchValue(e.target.value)}
                                    placeholder="Rechercher..."/>
                             <button type="button" onClick={handleSearch}>Rechercher</button>
+                        </form> */}
+                        <div class="Card">
+                            <div class="CardInner">
+                                <div class="container">
+                                    <form> 
+                                        <div className="search-form">
+                                        <button type="button" onClick={handleSearch} class="Icon">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#657789" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+                                    </button>
+                                    <div class="InputContainer">
+                                    <input  type="text" value={searchValue} onChange={(e) => setSearchValue(e.target.value)} placeholder="Rechercher..."/>
+                                    </div>
+                                    </div>
                                     </form>
+                                    
+                                </div>
+                                </div>
+                            
+                        </div>
+                        
                         <div className="divMenuSearch">
                             <nav role="navigation" className="navProfil">
                                 <ul className="navItemsProfil">

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

@@ -15,9 +15,7 @@ const Trends = () => {
             {
                 userData.notif != null && userData.notif.map((notif) => {
                     return (
-                        <li>
                             <Notif key={notif._id} notification={notif}/>
-                        </li>
                     );
                 })
 

Site Web/client/src/reducers/post.reducer.js

@@ -3,8 +3,7 @@ import { createSlice } from "@reduxjs/toolkit";
 export const postSlice = createSlice({
     name: "post",
     initialState: {
-        post : {
+        post : null,
-          },
     },
     reducers: {
         setPostData: (state,action) => {

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

@@ -2,18 +2,57 @@
     border: solid black 2px;
     background-color: beige;
     border-radius: 10px;
+    position: fixed;
     width: 250px;
     height: 50px;
     text-align: center;
     cursor: pointer;
 }
 
+.flexButon img {
+  width: 20px;
+  padding-right:20px;
+}
+
+.flexButon {
+  display: flex;
+  flex-direction: row;
+  justify-content:space-evenly;
+  
+}
 
+.wrapperAjout .iconFavor {
+  position: fixed;
+  background: #ffffff;
+  border-radius: 25px;
+  width: 250px;
+  height: 50px;
+  font-size: 18px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+
+  border : none;
+}
+
+.wrapperAjout .iconFavor:hover span {
+  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
+  
+}
+
+.wrapperAjout .iconFavor:hover {
+  background: #a8a8a8;
+  color: #ffffff;
+  border : none;
+}
 
 .popup-ajout-container {
   position: fixed;
   animation: popup 1s forwards;
-  z-index: 100;
+  z-index: 10000;
   left: 50%;
   
     @keyframes popup {
@@ -59,12 +98,13 @@
         }
       }
 
-      ul {
+      .ul_ajout_Profil {
         min-width: 250px;
         max-width: 300px;
         margin: 20px 0 0;
         max-height: 500px;
         min-height: 200px;
+        overflow: hidden;
 
 
         li {

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

@@ -216,9 +216,6 @@ input{
 }
 
 
-.camera{
-  background: url("./../../assets/img/Photo-Video-Camera-icon.png");
-}
 
 .alignementText{
   margin-bottom: 2%;

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

@@ -1,6 +1,7 @@
 .miniProfil{
   display: flex;
   justify-content: start;
+  margin-right: 5px;
 }
 
 .infoMiniProfil{

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

@@ -25,6 +25,10 @@
         background-color: $color-3;
         border: 0.2px solid $color-5;
     }
+    // a {
+    //     width: 100%;
+    //     white-space:pre-wrap;
+    // }
 
 }
 
@@ -95,7 +99,7 @@
 }
 
 .comment-container {
-    display: grid;
+    display: flex;
     grid-template-columns: 50px 1fr;
     border: 1px solid $color-2;
     padding: 15px;
@@ -155,10 +159,13 @@
         }
 
         .edit-comment-form {
+            background-color: rgb(131, 131, 131);
+            padding: 3%;
             margin-top: 14px;
+            border-radius:20px 20px 20px 6px ;
             label {
                 background: white;
-                color: $color-1;
+                color: black;
                 padding: 6px 12px 5px;
                 border-radius: 20px 20px 20px 6px;
                 cursor: pointer;
@@ -169,29 +176,35 @@
                 transform: scale(1.05);
                 }
             }
+            .comment-modify{
+                height: 30px;
+            }
             input[type="text"] {
                 margin: 4px 0;
                 background: white;
-                font-size: 1.15rem;
+                font-size: 1rem;
-                padding: 16px;
+                padding: 8px;
                 width: 100%;
                 border-radius: 6px 20px 6px 20px;
             }
+            label{
+                background-color: rgb(188, 184, 184);
+            }
             .btn {
                 display: flex;
                 align-items: center;
                 float: right;
 
                 span {
-                    background: white;
+                    background: rgb(102, 27, 27);
-                    padding: 10px 5px;
+                    padding: 3px 5px;
                     border-radius: 50px;
                     margin-right: 6px;
                     transition: 0.2s;
                     cursor: pointer;
 
                     &:hover {
-                        background: $color-2;
+                        background: red;
                     }
 
                     img {
@@ -213,23 +226,24 @@
     }
 }
 
+
 .comment-form {
     margin-top: 6px;
 
     input[type="text"] {
       width: 100%;
-      background: $color-4;
+      background: rgb(215, 215, 215);
       border-radius: 20px 20px 6px 20px;
-      padding: 20px;
+      padding: 10px;
-      font-size: 1.4rem;
+      font-size: 1rem;
 
       &:focus {
-        box-shadow: 0 0 2px rgba(51, 51, 51, 0.5);
+        box-shadow: 0 0 2px rgba(125, 123, 123, 0.5);
         }
     }
     input[type="submit"] {
       margin-top: 4px;
-      padding: 12px 16px;
+      padding: 10px 16px;
       width: 120px;
       background: $color-2;
       border-radius: 20px 6px 20px 20px;
@@ -253,6 +267,23 @@
     }
 }
 
+.top-edit-com {
+    display: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.content-com {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+}
+
+.right-part {
+    width: 80%;
+}
+
 .like-container {
     span {
       font-size: 1.02rem;

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

@@ -59,6 +59,7 @@
       position: absolute;
       top: 10%;
       left: 50%;
+      width: 400px;
       transform: translate(-100%);
       background: $color-2;
       padding: 25px;
@@ -90,8 +91,12 @@
           transform: scale(1.07);
         }
       }
+      .infoFollow{
+        display: flex;
+        justify-content: space-between;
+      }
 
-      ul {
+      /*ul {
         margin: 20px 0 0;
         max-height: 500px;
         overflow-y: scroll;
@@ -142,7 +147,7 @@
             }
           }
         }
-      }
+      }*/
     }
 }
 
@@ -329,10 +334,11 @@ height: 85%;
 
 .reco{
 background-color: #a8a8a8;
-margin: 0% 0% 0% 2.5%;
+margin: 5% 0% 0% 0%;
 border-radius: 25px;
-width: 100%;
+width: 19%;
 height: 300px;
+position: fixed;
 }
 
 .reco span{
@@ -359,13 +365,15 @@ scrollbar-gutter: stable both-edges;
 .recoDiv {
   width: 250px;
   margin-top: 10px;
+
 }
 
 .UtiReco {
 display: flex;
 flex-direction: row;
-justify-content: space-evenly;
+justify-content: space-between;
 padding: 5% 0% 0% 0%;
+
 }
 
 .ListReco {

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

@@ -15,9 +15,100 @@
 
 .listUsers{
     padding-top: 20px;
-    li {
+    ul {
         list-style: none;
         padding-left: 10%;
         padding-bottom: 15px;
     }
 }
+
+// div {
+//   border: 5px ridge;
+// } 
+
+.Card {
+    width: 380px;
+  }
+  
+  .CardInner {
+    padding: 16px 16px;
+
+  }
+  
+  .container {
+    display: flex;
+  }
+  
+  .Icon {
+    min-width: 46px;
+    min-height: 46px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12px;
+    border: none;
+      
+    svg {
+      transform: translate(-1px, -1px);    
+    }
+  }
+  
+  
+  .InputContainer {
+    width: 100%;
+  }
+  
+  .InputContainer input {
+
+    padding: 16px 32px;
+    border: none;
+    display: block;
+    font-weight: 600;
+
+    width: 100%;
+    
+    &::placeholder {
+      color: #6d7f8f;
+    }
+    
+    &:focus {
+      outline: none;
+
+      background-color: lighten(#edecec, 3%);
+    }
+  };
+    
+  .InputContainer {
+    --top-shadow: inset 1px 1px 3px #c5d4e3, inset 2px 2px 6px #c5d4e3;
+    --bottom-shadow: inset -2px -2px 4px rgba(255,255,255, .7);
+    
+    position: relative;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    
+    &:before,
+    &:after {
+      left: 0;
+      top: 0;
+      display: block;
+      content: "";
+      pointer-events: none;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+    }
+    
+    &:before {
+      box-shadow: var(--bottom-shadow);
+    }
+    
+    &:after {
+      box-shadow: var(--top-shadow);
+    }
+  }
+  .search-form {
+    display: flex;
+    flex-direction: row;
+  }
+  
+  

Site Web/controllers/user.controller.js

@@ -1,6 +1,7 @@
 const UserModel = require("../models/user.model");
 const ObjectID = require("mongoose").Types.ObjectId;
-
+const Post = require('../models/post.model');
+const bcrypt = require('bcrypt');
 
 //-password pour ne pas donner le password
 module.exports.getAllUsers = async (req, res) => {
@@ -46,25 +47,39 @@ module.exports.updateUser = async (req, res) => {
     return res.status(500).json({ message: err });
   }
 };
-
 module.exports.compteUpdatePseudo= async (req,res)=>{
 
   try {
-    console.log("test1");
+   
-    console.log(req.body.email);
+    console.log("test Change Pseudo");
-    console.log(req.body.password);
+    const updatedUser = await UserModel.findByIdAndUpdate(
-    console.log(req.params.id);
+      { _id: req.params.id },
-    /*if (!UserModel.isValid(req.params.id)) {
+      {
-      return res.status(400).send("ID unknown : " + req.params.id);
+        $set: {
+          pseudo: req.body.pseudo,
         }
-    */
+      },
-    console.log("test");
+      { runValidators: true, new: true}
+    );
+    res.status(200).json({ message: "User updated successfully", data: updatedUser });
+  } catch (err) {
+    return res.status(500).json({ message: err });
+  }
+  
+}
+
+module.exports.compteUpdateEmail= async (req, res) => {
+
+  try {
+   
+    console.log("test Change mail");
+    const salt = await bcrypt.genSalt();
     const updatedUser = await UserModel.findByIdAndUpdate(
       { _id: req.params.id },
       {
         $set: {
           email: req.body.email,
-          password: req.body.password,
+          password: password = await bcrypt.hash(req.body.password, salt),
         }
       },
       { runValidators: true, new: true}
@@ -105,9 +120,33 @@ module.exports.saveImage = async (req, res) => {
    
 
  
+module.exports.deleteUser = async (req ,res) => {
+  try {
+    // Delete all posts created by user 
+    console.log("testdelete1");
+    await Post.deleteMany({ postedId: req.params.id });
+
+    // Delete all comments and likes in other post made by user
+    await Post.updateMany({}, {
+      $pull: {
+        likers: req.params.id,
+        comments: { commentId: req.params.id }
+      }
       
+    });
+    console.log("testdelete2");
+    // Delete user
+    await UserModel.findByIdAndDelete(req.params.id);
 
+    res.status(200).json({ message: 'User and all associated data deleted successfully.' });
+  } catch (error) {
+    console.log(error);
+    res.status(500).json({ error: 'An error occurred while deleting the user. Please try again later.' });
+  }
+};
 
+
+/*
 module.exports.deleteUser = async (req, res) => {
   if (!ObjectID.isValid(req.params.id))
     return res.status(400).send("ID unknown : " + req.params.id);
@@ -119,7 +158,7 @@ module.exports.deleteUser = async (req, res) => {
     return res.status(500).json({ message: err });
   }
 };
-
+*/
 module.exports.follow = async (req, res) => {
   if (!ObjectID.isValid(req.params.id) || !ObjectID.isValid(req.body.idToFollow)) {
     return res.status(400).send("ID unknown : " + req.params.id);

Site Web/routes/user.routes.js

@@ -24,12 +24,9 @@ router.patch('/unfollow/:id', userController.unfollow);
 router.patch('/notif/:id', userController.getNotif);
 router.patch('/:id/image', userController.saveImage);
 router.get('/:id/image',userController.getImage);
+router.put('/update/email/:id',userController.compteUpdateEmail);
 router.put('/update/:id',userController.compteUpdatePseudo);
-router.post('/verify-email',authController.verifyEmail);
+router.delete('/delete/:ip', userController.deleteUser);
-router.post('/forgotpassword',authController.forgotPassword);
-router.post('/reset/:token',authController.resetPost);
-router.get('/reset/:token',authController.resetGet);
-router.post('/send-verification-email',authController.sendVerificationEmail);
 //upload pb avec postman
 //router.post("/upload", upload.single('file'), uploadController.uploadProfil);