add nb follower et nb abonné

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { NavLink } from "react-router-dom";
+
+
+
+const ConfigurationDuCompte =()=>{
+    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>
+            </div>
+        </div>
+        <h2>Suppression du compte</h2>
+        <div className='ligneHorizontal'/>
+        <div >
+        <button>
+            supprimer votre compte    
+        </button>
+        <span>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</span>
+        </div> 
+    </div>
+    )
+}
+
+
+
+export default ConfigurationDuCompte;
+
+

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import PP  from "../../assets/img/unknown.png";
+import { NavLink } from "react-router-dom";
+
+
+const ConfigurationDuProfil = ()=>{
+    return(
+
+        <div>
+        <h2>Modifucation  du Profil</h2>
+        <div className='ligneHorizontal'>
+            <img src={PP}/>
+            <div>
+                <span>Pseudo : Pseudo</span>
+                <span>Nom d'utilisateur : @Pseudo</span>
+            </div>
+        </div>
+        <h2>Acces au dossiers personnel</h2>
+        <div className='ligneHorizontal'/>
+        <div >
+        <caption> Rendre vos dossiers prives</caption>
+        </div> 
+    </div>
+
+    )
+
+}
+
+export default ConfigurationDuProfil;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { NavLink } from "react-router-dom";
+
+
+const PolitiqueDeConfidentialite =()=>{
+    return(
+        <div>
+         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
+    personnel. Doivent être considérées comme données personnelles toutes les données étant susceptibles d’identifier un utilisateur. Il s’agit notamment du prénom et du nom, de l’âge, de l’adresse postale, l’adresse mail, la localisation de l’utilisateur ou encore son adresse IP ;
+    Quels sont les droits des utilisateurs concernant ces données ;
+    Qui est responsable du traitement des données à caractère personnes
+    collectées et traitées ;
+    A qui ces données sont transmises ;
+    Eventuellement, la politique du site en matière de fichiers “cookies”
+        
+        
+        </div>
+    )
+}
+
+export default PolitiqueDeConfidentialite;

Site Web/client/src/components/Log/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
 import Connexion from './Connexion';
 import Inscription from './Inscription';
 

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

@@ -6,6 +6,8 @@ import PP  from "../assets/img/unknown.png";
 import cookie from 'js-cookie';
 import axios from "axios";
 import Logo from "../assets/img/logo.png";
+import Configuration from "./../pages/Configuration";
+
 
 const Navbar = () => {
     const uid = useContext( UidContext );
@@ -82,7 +84,7 @@ const Navbar = () => {
                                     </svg>
                                 </div>
                                 <div className="more-menu">
-                                    <NavLink className='element-menu-deroulant'>Élement 1</NavLink>
+                                    <NavLink className='element-menu-deroulant' to="/Configuration">Configurations</NavLink>
                                     <NavLink className='element-menu-deroulant'>Élement 2</NavLink>
                                     <NavLink  className='element-menu-deroulant' onClick={logout}>Élement 3</NavLink>
                                 </div>

Site Web/client/src/components/Routes/index.js

@@ -5,6 +5,7 @@ import Home from '../../pages/Home.js';
 import Trends from '../../pages/Trends.js';
 import Discover from '../../pages/Discover.js';
 import Profil from '../../pages/Profil.js';
+import Configuration from '../../pages/Configuration';
 
 const index = () => {
     return (
@@ -16,6 +17,7 @@ const index = () => {
                     <Route path="/discover" element={<Discover/>} />
                     <Route path="*" element={<HomeNavigation/>} />
                     <Route path="/profil" element={<Profil />} />
+                    <Route path="/configuration" element={<Configuration/>}/>
                 </Routes>
             </BrowserRouter>
     );

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

@@ -1,36 +1,52 @@
 import 'tachyons';
-import React from 'react';
-import PP  from "../assets/img/unknown.png";
-import { NavLink } from "react-router-dom";
+import React, {useState} from 'react';
+import ConfigurationDuProfil from '../components/Configurations/ConfigurationDuProfil';
+import ConfigurationDuCompte from '../components/Configurations/ConfigurationDuCompte.js';
+import PolitiqueDeConfidentialite from '../components/Configurations/PolitiqueDeConfidentialite';
 
+function Configuration(){
 
-const  Configuration = () => {
+        const [ConfigurationCompte, setConfigurationDuCompte] = useState(false);
+        const [ConfigurationProfil, setConfigurationDuProfil] = useState(true);
+        const [PolitiqueConfidentialite, setPolitiqueDeConfidentialite] =useState(false)
+    
+        const handleModals = (e) => {
+            if (e.target.id === "ConfigurationDuProfil") {
+                setConfigurationDuCompte(false);
+                setPolitiqueDeConfidentialite(false);
+                setConfigurationDuProfil(true);
+            } else if (e.target.id === "ConfigurationDuCompte") {
+                setConfigurationDuCompte(true);
+                setPolitiqueDeConfidentialite(false);
+                setConfigurationDuProfil(false);
+            } else if (e.target.id ==="PolitiqueDeConfidentialite"){
+                setConfigurationDuCompte(false);
+                setPolitiqueDeConfidentialite(true);
+                setConfigurationDuProfil(false);
+            }
+
+        };        
     return(
-        <div>
-            <div className='ligneVertical'>
-                <button ></button>
-                <button ></button>
-                <button ></button>
-                 
-            </div>
-            <div>
-                <h2>Modifucation information du compte</h2>
-                <div className='ligneHorizontal'>
-                    <img src={PP}/>
-                    <div>
-                        <span>Pseudo : Pseudo</span>
-                        <span>Nom d'utilisateur : @Pseudo</span>
-                    </div>
-                </div>
-                <h2>Acces au dossiers personnel</h2>
-               
-                <div className='ligneHorizontal'>
-                <caption> Rendre vos dossiers prives</caption>
+        <>
 
-                </div>  
-            </div>
+            <div className='boutonDeConfigurations'>
 
-        </div>
+            <button onClick={handleModals} id="ConfigurationDuProfil" className={ConfigurationProfil} >
+            Configuration du profil
+            </button>
+            <button onClick={handleModals} id="ConfigurationDuCompte" className={ConfigurationCompte}>
+            Configuration du compte
+            </button>
+            <button onClick={handleModals} id="PolitiqueDeConfidentialite" className={PolitiqueConfidentialite}>
+            Politique de confidentialite
+            </button>
+            
+            <div className='ligneVertical'/>
+            </div>
+            {ConfigurationProfil &&<ConfigurationDuProfil/>}
+            {ConfigurationCompte &&<ConfigurationDuCompte/>}
+            {PolitiqueConfidentialite &&<PolitiqueDeConfidentialite/>}
+        </>
     );
 }
 

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

@@ -4,6 +4,17 @@ $color-1: #A4EBF3;
 $color-2: #CCF2F4;
 $color-3: #F4F9F9;
 $color-4: #AAAAAA;
+$color-5: #AABBCC;
+
+
+
+// $color-1: #4cbfa6;
+// $color-2: #f6ebf4;
+// $color-3: #553283ef;
+// $color-4: #ed0b70;
+// $color-5: #301008;
+// $color-6: yellow;
+
 
 * {
     padding: 0;

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

@@ -3,4 +3,5 @@
 @import './pages/homenavigation';
 @import './pages/profil';
 @import './component/poste';
-@import './component/ajoutLien';
+@import './pages/configuration';
+@import './component/ajoutLien';

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

@@ -0,0 +1,17 @@
+.ligneVertical{
+    border-right: thick solid $color-1;
+    height:85%;
+    width: 1%;
+}
+.boutonDeConfigurations{
+
+
+width: 20%;
+
+}
+.ligneHorizontal{
+    border-top: thick solid $color-1;
+    width: 78%;
+    height: 1%;
+}
+

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

@@ -1,7 +1,4 @@
-$color-1: #A4EBF3;
-$color-2: #CCF2F4;
-$color-3: #F4F9F9;
-$color-4: #AAAAAA;
+
 
 .ul-profil{
     list-style-type: none;
@@ -12,18 +9,17 @@ $color-4: #AAAAAA;
         cursor: pointer;
         border: 3px solid black;
         border-radius: 20px;
-        padding: 10px 20px;
+        padding: 10px 5%;
         transition: 0.2s;
-        width: 150px;
-        height: 45px;
+        width: 96%;
         text-align: center;
-        margin-top: 10px;
+        margin-top: 6%;
     }
     .active-btn {
-        background: $color-1;
+        background: $color-3;
 
         &:hover {
-          background: $color-2;
+          background: $color-5;
         }
       }
       .button-form:not(.active-btn) {
@@ -38,7 +34,7 @@ $color-4: #AAAAAA;
     width: 20%;
     border: 2px solid black;
     border-radius: 0px 15px 15px 0px;
-    background-color: aliceblue;
+    background-color: $color-3;
     p{
         line-height: 15px;
         letter-spacing: 1.01px;
@@ -52,7 +48,7 @@ $color-4: #AAAAAA;
     display: flex;
     flex-direction: row-reverse;
     justify-content: center;
-    padding-top: 2%;
+    padding-top: 4%;
 
 }
 
@@ -64,34 +60,34 @@ $color-4: #AAAAAA;
 
 
 .cadre {
-    padding: 50px 50px;
+    padding: 5% 10%;
     border: 2px solid black;
     border-right: 0px solid black;
     border-radius: 15px 0px 0px 15px;
     background-color: $color-1;
     h1 {
       letter-spacing: 5px;
-      margin-bottom: 60px;
+      margin-bottom: 30%;
       font-weight: bold;
       text-align: center;
     }
     .inputbox {
       position: relative;
-      width: 300px;
-      margin-top: 25px;
+      width: 100%;
+      margin-top: 4%;
       input {
         width: 100%;
         border: 2px solid #000;
         outline: none;
         background-color: $color-3;
-        padding: 10px;
+        padding: 4%;
         border-radius: 10px;
         font-size: 1.1em;
       }
       span {
         position: absolute;
-        top: 14px;
-        left: 20px;
+        top: 12px;
+        left: 6%;
         font-size: 1em;
         transition: 0.3s;
         font-family: sans-serif;
@@ -131,7 +127,7 @@ input[type="submit"], .buttonTEL{
     border-radius: 8px;
     border: 2px solid #000;
     background-color: $color-3;
-    width: 300px;
+    width: 100%;
     height: 50px;
 }
 
@@ -141,7 +137,7 @@ input[type="submit"], .buttonTEL{
 }
 
 input[type="submit"]:hover, .buttonTEL:hover{
-    background-color: $color-4;
+    background-color: $color-5;
 }
 
 .mdp{
@@ -158,3 +154,7 @@ input[type="submit"]:hover, .buttonTEL:hover{
   display: flex;
   flex-direction: column;
 }
+
+.formulaire{
+  width: 35%;
+}

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%;
-}