Change the sidebar menu and the content on the account page

src/component/Account/Calendar.jsx

       <div className='calendar__link ml-2 ml-sm-0'>
         {props.user.caldavUrl}
       </div>
-
-      <div className='calendar__title ml-2 ml-sm-0'>
-        Changer de Fuseau Horaire :
-      </div>
-
-      <div className='calendar__timezone ml-2 ml-sm-0 dropdown'>
-        <button className='calendar__timezone__btn btn dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-          Fuseau Horaire
-        </button>
-        <div className='calendar__timezone__submenu dropdown-menu'>
-          {props.timezone.map((t, i) => <div className='calendar__timezone__submenu__item dropdown-item' key={i}>{t.place} {t.gmt}</div>)}
-        </div>
-      </div>
     </div>
   )
 }

src/component/Account/Notification.jsx

   return (
     <div className='account__userpreference__setting__notification'>
       <div className='notification__sectiontitle subTitle ml-2 ml-sm-0'>
-        Espace de Travail et Notification
+        Espace de Travail & Notification
       </div>
 
       <div className='notification__text ml-2 ml-sm-0'>

src/component/Account/Password.jsx

+import React from 'react'
+
+export const Password = props => {
+  return (
+    <div className='account__userpreference__setting__personaldata'>
+      <div className='personaldata__sectiontitle subTitle ml-2 ml-sm-0'>
+        Information du compte
+      </div>
+
+      <div className='personaldata__text ml-2 ml-sm-0'>
+        NYI
+      </div>
+
+      <form className='personaldata__form mr-5'>
+        <div className='personaldata__form__title'>
+          Mot de passe :
+        </div>
+        <input className='personaldata__form__txtinput form-control' type='password' placeholder='Ancien mot de passe' />
+        <input className='personaldata__form__txtinput form-control mt-4' type='password' placeholder='Nouveau mot de passe' />
+        <button type='submit' className='personaldata__form__button btn btn-outline-primary mt-4'>
+          Envoyer
+        </button>
+      </form>
+
+    </div>
+  )
+}
+
+export default Password

src/component/Account/PersonalData.jsx

   return (
     <div className='account__userpreference__setting__personaldata'>
       <div className='personaldata__sectiontitle subTitle ml-2 ml-sm-0'>
-        Information du compte et personnelles
+        Information du compte
       </div>
 
       <div className='personaldata__text ml-2 ml-sm-0'>
         NYI
       </div>
 
-      <div className='personaldata__dataconnexion d-flex align-items-center justify-content-between flex-wrap'>
-        <form className='personaldata__form mr-5'>
-          <div className='personaldata__form__title'>
-            Mot de passe :
-          </div>
-          <div className='d-flex align-items-center justify-content-between flex-wrap mb-4'>
-            <input className='personaldata__form__txtinput form-control mr-3' type='password' placeholder='Ancien mot de passe' />
-            <input className='personaldata__form__txtinput form-control mt-3 mt-sm-0' type='password' placeholder='Nouveau mot de passe' />
-          </div>
-          <div className='d-flex justify-content-sm-end'>
-            <button type='submit' className='personaldata__form__button btn btn-outline-primary d-flex justify-content-end'>
-              Envoyer
-            </button>
-          </div>
-        </form>
-
-        <form className='personaldata__form'>
-          <div className='personaldata__form__title'>
-            Adresse mail :
-          </div>
-          <div className='d-flex align-items-center justify-content-between flex-wrap mb-4'>
-            <input className='personaldata__form__txtinput form-control mr-3' type='email' placeholder='Ancienne adresse mail' />
-            <input className='personaldata__form__txtinput form-control mt-3 mt-sm-0' type='email' placeholder='Nouvelle adresse mail' />
-          </div>
-          <div className='d-flex justify-content-sm-end'>
-            <button type='submit' className='personaldata__form__button btn btn-outline-primary d-flex justify-content-end'>
-              Envoyer
-            </button>
-          </div>
-        </form>
-      </div>
-
-      <div className='personaldata__dataheader d-flex align-items-center justify-content-between flex-wrap'>
-
-        <form className='personaldata__form mr-5'>
-          <div className='personaldata__form__title'>
-            Nom de Famille :
-          </div>
-          <div className='d-flex align-items-center justify-content-between flex-wrap mb-4'>
-            <input className='personaldata__form__txtinput form-control mr-3' type='password' placeholder='Ancien nom de famille' />
-            <input className='personaldata__form__txtinput form-control mt-3 mt-sm-0' type='password' placeholder='Nouveau nom de famille' />
-          </div>
-          <div className='d-flex justify-content-sm-end'>
-            <button type='submit' className='personaldata__form__button btn btn-outline-primary'>
-              Envoyer
-            </button>
-          </div>
-        </form>
-
-        <form className='personaldata__form'>
-          <div className='personaldata__form__title'>
-            Prénom :
-          </div>
-          <div className='d-flex align-items-center justify-content-between flex-wrap mb-4'>
-            <input className='personaldata__form__txtinput form-control mr-3' type='password' placeholder='Ancien prénom' />
-            <input className='personaldata__form__txtinput form-control mt-3 mt-sm-0' type='password' placeholder='Nouveau prénom' />
-          </div>
-          <div className='d-flex justify-content-sm-end'>
-            <button type='submit' className='personaldata__form__button btn btn-outline-primary'>
-              Envoyer
-            </button>
-          </div>
-        </form>
-      </div>
-
-      <div className='account__userpreference__setting__calendar mt-4 '>
-
-        <div className='calendar__sectiontitle subTitle ml-2 ml-sm-0'>
-          Calendrier
+      <form className='personaldata__form'>
+        <div className='personaldata__form__title'>
+          Nom :
         </div>
-
-        <div className='calendar__text ml-2 ml-sm-0'>
-          NYI
-        </div>
-
-        <div className='calendar__title ml-2 ml-sm-0'>
-          Accèder à votre Calendrier personnel
-        </div>
-        <div className='calendar__link ml-2 ml-sm-0'>
-          { /* {props.user.caldavUrl} */ }
+        <div className='d-flex align-items-center justify-content-between flex-wrap mb-4'>
+          <input className='personaldata__form__txtinput form-control mt-3 mt-sm-0' type='text' placeholder='Nom' />
         </div>
-
-        <div className='calendar__title ml-2 ml-sm-0'>
-          Changer de Fuseau Horaire :
+        <div className='personaldata__form__title'>
+          Adresse mail :
         </div>
-
-        <div className='calendar__timezone ml-2 ml-sm-0 dropdown'>
-          <button className='calendar__timezone__btn btn dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-            Fuseau Horaire
-          </button>
-          <div className='calendar__timezone__submenu dropdown-menu'>
-            { /* {props.timezone.map((t, i) => <div className='calendar__timezone__submenu__item dropdown-item' key={i}>{t.place} {t.gmt}</div>)} */ }
-          </div>
+        <div className='d-flex align-items-center justify-content-between flex-wrap mb-4'>
+          <input className='personaldata__form__txtinput form-control mt-3 mt-sm-0' type='email' placeholder='Nouvelle adresse mail' />
         </div>
-      </div>
-
+        <button type='submit' className='personaldata__form__button btn btn-outline-primary'>
+          Envoyer
+        </button>
+      </form>
     </div>
   )
 }

src/component/Account/Timezone.jsx

+import React from 'react'
+
+export const Timezone = props => {
+  return (
+    <div className='account__userpreference__setting__calendar'>
+
+      <div className='calendar__title ml-2 ml-sm-0'>
+        Changer de Fuseau Horaire :
+      </div>
+
+      <div className='calendar__text ml-2 ml-sm-0'>
+        NYI
+      </div>
+
+      <div className='calendar__timezone ml-2 ml-sm-0 dropdown'>
+        <button className='calendar__timezone__btn btn dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+          Fuseau Horaire
+        </button>
+        <div className='calendar__timezone__submenu dropdown-menu'>
+          {props.timezone.map((t, i) => <div className='calendar__timezone__submenu__item dropdown-item' key={i}>{t.place} {t.gmt}</div>)}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Timezone

src/container/Account.jsx

 import PersonalData from '../component/Account/PersonalData.jsx'
 import Calendar from '../component/Account/Calendar.jsx'
 import Notification from '../component/Account/Notification.jsx'
+import Password from '../component/Account/Password.jsx'
+import Timezone from '../component/Account/Timezone.jsx'
 import { Delimiter } from 'tracim_lib'
 import { updateUserWorkspaceSubscriptionNotif } from '../action-creator.sync.js'
 import {
     this.state = {
       subComponentMenu: [{
         name: 'personalData',
-        menuLabel: 'Informations Compte',
+        menuLabel: 'Mon profil',
         active: true
       },
-      // {
-      //   name: 'calendar',
-      //   menuLabel: 'Calendrier',
-      //   active: false
-      // },
       {
         name: 'notification',
-        menuLabel: 'Notifications',
+        menuLabel: 'Espace de travail & Notifications',
+        active: false
+      },
+      {
+        name: 'password',
+        menuLabel: 'Mot de passe',
+        active: false
+      },
+      {
+        name: 'timezone',
+        menuLabel: 'Fuseau Horaire',
+        active: false
+      },
+      {
+        name: 'calendar',
+        menuLabel: 'Calendrier personnel',
         active: false
       }]
     }
           return <PersonalData />
 
         case 'calendar':
-          return <Calendar user={this.props.user} timezone={this.props.timezone} />
+          return <Calendar user={this.props.user} />
 
         case 'notification':
           return <Notification
             workspaceList={this.props.workspaceList}
             onChangeSubscriptionNotif={this.handleChangeSubscriptionNotif}
           />
+
+        case 'timezone':
+          return <Timezone timezone={this.props.timezone} />
+
+        case 'password':
+          return <Password />
+
       }
     })()