integration of account page

jsonserver/server.js

 const jsonServer = require('json-server')
 const jsonDb = require('./static_db.json')
+const timezoneDb = require('./timezone.json')
 const server = jsonServer.create()
 const router = jsonServer.router() // for persistence : jsonServer.router('static_db.json')
 const middlewares = jsonServer.defaults()
   Object.assign({}, jsonDb.workspace_detail, {content: shuffle(jsonDb.workspace_detail.content)})
 ))
 
+server.get('/user/:id/roles', (req, res) => res.jsonp(jsonDb.user_role))
+
+server.get('/timezone', (req, res) => res.jsonp(timezoneDb.timezone))
+
 server.get('/workspace/:idws/content/:idc', (req, res) => {
   switch (req.params.idc) {
     case '1': // pageHtml

jsonserver/static_db.json

       "firstname": "Côme",
       "lastname": "Stoilenom",
       "email": "osef@algoo.fr",
-      "avatar": "https://avatars3.githubusercontent.com/u/11177014?s=460&v=4"
+      "avatar": "https://avatars3.githubusercontent.com/u/11177014?s=460&v=4",
+      "role": "Utilisateur",
+      "job": "Integrateur | Webdesigner",
+      "company": "Algoo",
+      "caldav_url": "http://algoo.trac.im/caldav/user/5.ics/"
     }
   },
   "app_config": [{
   }, {
     "id": 5,
     "title": "Évolutions"
+  }],
+  "user_role": [{
+    "workspace": {
+      "id": 0,
+      "title": "Ressources humaine"
+    },
+    "role": "reader",
+    "subscribed_to_notif": true
+  }, {
+    "workspace": {
+      "id": 1,
+      "title": "Marketing"
+    },
+    "role": "manager",
+    "subscribed_to_notif": true
+  }, {
+    "workspace": {
+      "id": 2,
+      "title": "Missions externes"
+    },
+    "role": "contributor",
+    "subscribed_to_notif": false
+  }, {
+    "workspace": {
+      "id": 3,
+      "title": "Recherche et développement"
+    },
+    "role": "content_manager",
+    "subscribed_to_notif": true
+  }, {
+    "workspace": {
+      "id": 4,
+      "title": "Commercialisation"
+    },
+    "role": "reader",
+    "subscribed_to_notif": false
+  }, {
+    "workspace": {
+      "id": 5,
+      "title": "Évolutions"
+    },
+    "role": "content_manager",
+    "subscribed_to_notif": true
   }]
 }

src/action-creator.async.js

 import { FETCH_CONFIG } from './helper.js'
 import {
+  TIMEZONE,
+  setTimezone,
   LANG,
   updateLangList,
   USER_LOGIN,
   USER_DATA,
+  USER_ROLE,
   USER_CONNECTED,
-  updateUserConnected,
+  setUserConnected,
   updateUserData,
+  setUserRole,
   WORKSPACE,
   updateWorkspaceData,
   WORKSPACE_LIST,
   if (fetchGetLangList.status === 200) dispatch(updateLangList(fetchGetLangList.json))
 }
 
+export const getTimezone = () => async dispatch => {
+  const fetchGetTimezone = await fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/timezone`,
+    param: {...FETCH_CONFIG.header, method: 'GET'},
+    actionName: TIMEZONE,
+    dispatch
+  })
+  if (fetchGetTimezone.status === 200) dispatch(setTimezone(fetchGetTimezone.json))
+}
+
 export const userLogin = (login, password, rememberMe) => async dispatch => {
   const fetchUserLogin = await fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/user/login`,
     actionName: USER_LOGIN,
     dispatch
   })
-  if (fetchUserLogin.status === 200) dispatch(updateUserConnected(fetchUserLogin.json))
+  if (fetchUserLogin.status === 200) dispatch(setUserConnected(fetchUserLogin.json))
 }
 
 export const getIsUserConnected = () => async dispatch => {
     actionName: USER_CONNECTED,
     dispatch
   })
-  if (fetchUserLogged.status === 200) dispatch(updateUserConnected(fetchUserLogged.json))
+  if (fetchUserLogged.status === 200) dispatch(setUserConnected(fetchUserLogged.json))
+}
+
+export const getUserRole = user => async dispatch => {
+  const fetchGetUserRole = await fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/user/${user.id}/roles`,
+    param: {...FETCH_CONFIG.header, method: 'GET'},
+    actionName: USER_ROLE,
+    dispatch
+  })
+  if (fetchGetUserRole.status === 200) dispatch(setUserRole(fetchGetUserRole.json))
 }
 
 export const updateUserLang = newLang => async dispatch => { // unused

src/action-creator.sync.js

+export const TIMEZONE = 'Timezone'
+export const setTimezone = timezone => ({ type: `Set/${TIMEZONE}`, timezone })
+
 export const USER_LOGIN = 'User/Login'
 export const USER_DATA = 'User/Data'
-
+export const USER_ROLE = 'User/Role'
 export const USER_CONNECTED = 'User/Connected'
-export const updateUserConnected = user => ({ type: `Update/${USER_CONNECTED}`, user })
+export const setUserConnected = user => ({ type: `Set/${USER_CONNECTED}`, user })
 export const updateUserData = userData => ({ type: `Update/${USER_DATA}`, data: userData })
+export const setUserRole = userRole => ({ type: `Set/${USER_ROLE}`, userRole }) // this actually update workspaceList state
+export const updateUserWorkspaceSubscriptionNotif = (workspaceId, subscriptionNotif) =>
+  ({ type: `Update/${USER_ROLE}/SubscriptionNotif`, workspaceId, subscriptionNotif })
 
 export const WORKSPACE = 'Workspace'
 export const updateWorkspaceData = workspace => ({ type: `Update/${WORKSPACE}`, workspace })
 
 export const WORKSPACE_LIST = 'WorkspaceList'
 export const updateWorkspaceListData = workspaceList => ({ type: `Update/${WORKSPACE_LIST}`, workspaceList })
-export const setWorkspaceListIsOpen = (workspaceId, isOpen) => ({ type: `Set/${WORKSPACE_LIST}/isOpen`, workspaceId, isOpen })
+export const setWorkspaceListisOpenInSidebar = (workspaceId, isOpenInSidebar) => ({ type: `Set/${WORKSPACE_LIST}/isOpenInSidebar`, workspaceId, isOpenInSidebar })
 
 export const FILE_CONTENT = 'FileContent'
 export const setActiveFileContentActive = file => ({ type: `Set/${FILE_CONTENT}/Active`, file })

src/component/Account/Calendar.jsx

+import React from 'react'
+
+export const Calendar = props => {
+  return (
+    <div className='account__userpreference__setting__calendar'>
+
+      <div className='calendar__title subTitle ml-2 ml-sm-0'>
+        Calendrier
+      </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>
+
+      <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>
+  )
+}
+
+export default Calendar

src/component/Account/MenuSubComponent.jsx

+import React from 'react'
+import classnames from 'classnames'
+
+export const Navbar = props => {
+  return (
+    <nav className='account__userpreference__menu navbar d-flex align-items-start'>
+
+      <div className='account__userpreference__menu__responsive d-lg-none'>
+        <i className='fa fa-bars' />
+      </div>
+
+      <ul className='account__userpreference__menu__list nav flex-column'>
+
+        <li className='account__userpreference__menu__list__close nav-link'>
+          <i className='fa fa-times' />
+        </li>
+
+        <li className='account__userpreference__menu__list__disabled'>Menu</li>
+        { props.subMenuList.map(sm =>
+          <li
+            className={classnames('account__userpreference__menu__list__item nav-item', {'active': sm.active})}
+            onClick={() => props.onClickMenuItem(sm.name)}
+            key={sm.name}
+          >
+            <div className='account__userpreference__menu__list__item__link nav-link'>{sm.menuLabel}</div>
+          </li>
+        )}
+      </ul>
+    </nav>
+  )
+}
+
+export default Navbar

src/component/Account/Notification.jsx

+import React from 'react'
+import { translate } from 'react-i18next'
+import { BtnSwitch } from 'tracim_lib'
+import { ROLE } from '../../helper.js'
+
+export const Notification = props => {
+  const getRole = role => ROLE.find(r => r.name === role)
+
+  return (
+    <div className='account__userpreference__setting__notification'>
+      <div className='notification__title subTitle ml-2 ml-sm-0'>
+        Mes Espaces de Travail
+      </div>
+
+      <div className='notification__text ml-2 ml-sm-0'>
+        NYI
+      </div>
+
+      <div className='notification__table'>
+        <table className='table'>
+          <thead>
+            <tr>
+              <th>Espace de travail</th>
+              <th>Role</th>
+              <th>Notification</th>
+            </tr>
+          </thead>
+          <tbody>
+
+            { props.workspaceList.map(ws =>
+              <tr key={ws.id}>
+                <td>
+                  <div className='notification__table__wksname'>
+                    {ws.title}
+                  </div>
+                </td>
+                <td>
+                  <div className='notification__table__role'>
+                    <div className='notification__table__role__icon'>
+                      <i className={`fa ${getRole(ws.role).icon}`} />
+                    </div>
+                    <div className='notification__table__role__text d-none d-sm-flex'>
+                      {props.t(getRole(ws.role).translationKey)}
+                    </div>
+                  </div>
+                </td>
+                <td>
+                  <BtnSwitch checked={ws.notif} onChange={() => props.onChangeSubscriptionNotif(ws.id, !ws.notif)} />
+                </td>
+              </tr>
+            )}
+
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+export default translate()(Notification)

src/component/Account/PersonalData.jsx

+import React from 'react'
+
+export const PersonalData = props => {
+  return (
+    <div className='account__userpreference__setting__personaldata'>
+      <div className='personaldata__title subTitle ml-2 ml-sm-0'>
+        Mes informations personnelles
+      </div>
+
+      <div className='personaldata__text ml-2 ml-sm-0'>
+        NYI
+      </div>
+
+      <div className='personaldata__form'>
+        <div className='personaldata__form__title'>
+          Changer le 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' type='password' placeholder='Nouveau mot de passe' />
+        <div className='personaldata__form__button btn btn-primary'>
+          Envoyer
+        </div>
+      </div>
+
+      <div className='personaldata__form'>
+        <div className='personaldata__form__title'>
+          Changer d'adresse mail :
+        </div>
+        <input className='personaldata__form__txtinput form-control' type='email' placeholder='Ancienne adresse mail' />
+        <input className='personaldata__form__txtinput form-control' type='email' placeholder='Nouvelle adresse mail' />
+        <div className='personaldata__form__button btn btn-primary'>
+          Envoyer
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PersonalData

src/component/Account/UserInfo.jsx

+import React from 'react'
+
+export const UserInfo = props => {
+  return (
+    <div className='account__userinformation mr-5 ml-5 mb-5'>
+      <div className='account__userinformation__avatar'>
+        <img src={props.user.avatar} alt='avatar' />
+      </div>
+      <div className='account__userinformation__wrapper'>
+        <div className='account__userinformation__name mb-3'>
+          {`${props.user.firstname} ${props.user.lastname}`}
+        </div>
+        <a href={`mailto:${props.user.email}`} className='account__userinformation__email mb-3'>
+          {props.user.email}
+        </a>
+        <div className='account__userinformation__role mb-3'>
+          {props.user.role}
+        </div>
+        <div className='account__userinformation__job mb-3'>
+          {props.user.job}
+        </div>
+        <a href='http://www.algoo.fr' className='account__userinformation__company'>
+          {props.user.company}
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default UserInfo

src/component/Sidebar/WorkspaceListItem.jsx

         </div>
       </div>
 
-      <AnimateHeight duration={500} height={props.isOpen ? 'auto' : 0}>
+      <AnimateHeight duration={500} height={props.isOpenInSidebar ? 'auto' : 0}>
         <ul
           className='sidebar__navigation__workspace__item__submenu'
           id={`sidebarSubMenu_${props.number}`}
   name: PropTypes.string.isRequired,
   onClickTitle: PropTypes.func,
   onClickAllContent: PropTypes.func,
-  isOpen: PropTypes.bool
+  isOpenInSidebar: PropTypes.bool
 }
 
 WorkspaceListItem.defaultProps = {
   onClickTitle: () => {},
   onClickAllContent: () => {},
-  isOpen: false
+  isOpenInSidebar: false
 }

src/component/common/layout/PageWrapper.jsx

   return (
     <div className={classnames(props.customeClass, 'pageWrapperGeneric')}>
       <div className='container-fluid'>
-        {props.children}
+        <div className='row'>
+          {props.children}
+        </div>
       </div>
     </div>
   )

src/container/Account.jsx

+import React from 'react'
+import { connect } from 'react-redux'
+import PageWrapper from '../component/common/layout/PageWrapper.jsx'
+import PageTitle from '../component/common/layout/PageTitle.jsx'
+import PageContent from '../component/common/layout/PageContent.jsx'
+import UserInfo from '../component/Account/UserInfo.jsx'
+import MenuSubComponent from '../component/Account/MenuSubComponent.jsx'
+import PersonalData from '../component/Account/PersonalData.jsx'
+import Calendar from '../component/Account/Calendar.jsx'
+import Notification from '../component/Account/Notification.jsx'
+import { Delimiter } from 'tracim_lib'
+import { updateUserWorkspaceSubscriptionNotif } from '../action-creator.sync.js'
+import {
+  getTimezone,
+  getUserRole
+} from '../action-creator.async.js'
+
+class Account extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      subComponentMenu: [{
+        name: 'personalData',
+        menuLabel: 'Informations Compte',
+        active: true
+      }, {
+        name: 'calendar',
+        menuLabel: 'Calendrier',
+        active: false
+      }, {
+        name: 'notification',
+        menuLabel: 'Notifications',
+        active: false
+      }]
+    }
+  }
+
+  componentDidMount () {
+    const { user, workspaceList, timezone, dispatch } = this.props
+
+    if (user.id !== -1 && workspaceList.length > 0) dispatch(getUserRole(user))
+    if (timezone.length === 0) dispatch(getTimezone())
+  }
+
+  componentDidUpdate () {
+    const { user, workspaceList, dispatch } = this.props
+    if (user.id !== -1 && workspaceList.length > 0 && workspaceList.some(ws => ws.role === undefined)) dispatch(getUserRole(user))
+  }
+
+  handleClickSubComponentMenuItem = subMenuItemName => this.setState(prev => ({
+    subComponentMenu: prev.subComponentMenu.map(m => ({...m, active: m.name === subMenuItemName}))
+  }))
+
+  handleChangeSubscriptionNotif = (workspaceId, subscriptionNotif) =>
+    this.props.dispatch(updateUserWorkspaceSubscriptionNotif(workspaceId, subscriptionNotif))
+
+  render () {
+    const subComponent = (() => {
+      switch (this.state.subComponentMenu.find(({active}) => active).name) {
+        case 'personalData':
+          return <PersonalData />
+
+        case 'calendar':
+          return <Calendar user={this.props.user} timezone={this.props.timezone} />
+
+        case 'notification':
+          return <Notification
+            workspaceList={this.props.workspaceList}
+            onChangeSubscriptionNotif={this.handleChangeSubscriptionNotif}
+          />
+      }
+    })()
+
+    return (
+      <PageWrapper customClass='account'>
+        <PageTitle
+          parentClass={'account'}
+          title={'Mon Compte'}
+        />
+
+        <PageContent parentClass='account'>
+          <UserInfo user={this.props.user} />
+
+          <Delimiter customClass={'account__delimiter'} />
+
+          <div className='account__userpreference'>
+            <MenuSubComponent subMenuList={this.state.subComponentMenu} onClickMenuItem={this.handleClickSubComponentMenuItem} />
+
+            <div className='account__userpreference__setting'>
+              { subComponent }
+            </div>
+          </div>
+
+        </PageContent>
+      </PageWrapper>
+    )
+  }
+}
+
+const mapStateToProps = ({ user, workspaceList, timezone }) => ({ user, workspaceList, timezone })
+export default connect(mapStateToProps)(Account)

src/container/AccountPage.jsx

-import React, { Component } from 'react'
-import imgProfil from '../img/imgProfil.png'
-import { BtnSwitch } from 'tracim_lib'
-
-class AccountPage extends Component {
-  render () {
-    return (
-      <div className='account'>
-        <div className='container-fluid nopadding'>
-          <div className='pageTitleGeneric'>
-            <div className='pageTitleGeneric__title'>
-              Mon Compte
-            </div>
-          </div>
-
-          <div className='account__userinformation mr-5 ml-5 mb-5'>
-            <div className='account__userinformation__avatar'>
-              <img src={imgProfil} alt='avatar' />
-            </div>
-            <div className='account__userinformation__wrapper'>
-              <div className='account__userinformation__name mb-3'>
-                Alexi Cauvin
-              </div>
-              <a href='mailto:contact@contact.fr' className='account__userinformation__email mb-3'>
-                alexi.cauvin@algoo.fr
-              </a>
-              <div className='account__userinformation__role mb-3'>
-                Utilisateur
-              </div>
-              <div className='account__userinformation__job mb-3'>
-                Integrateur | Webdesigner
-              </div>
-              <a href='www.algoo.fr' className='account__userinformation__company'>
-                Algoo
-              </a>
-            </div>
-          </div>
-
-          <div className='account__delimiter GenericDelimiter' />
-
-          <div className='account__userpreference'>
-
-            <nav className='account__userpreference__menu navbar d-flex align-items-start'>
-
-              <div className='account__userpreference__menu__responsive d-lg-none'>
-                <i className='fa fa-bars' />
-              </div>
-
-              <ul className='account__userpreference__menu__list nav flex-column'>
-
-                <li className='account__userpreference__menu__list__close nav-link'>
-                  <i className='fa fa-times' />
-                </li>
-
-                <li className='account__userpreference__menu__list__disabled'>Menu
-                </li>
-                <li className='account__userpreference__menu__list__item nav-item'>
-                  <div className='account__userpreference__menu__list__item__link nav-link'>Informations Compte</div>
-                </li>
-                <li className='account__userpreference__menu__list__item nav-item'>
-                  <div className='account__userpreference__menu__list__item__link nav-link'>Calendrier</div>
-                </li>
-                <li className='account__userpreference__menu__list__item nav-item'>
-                  <div className='account__userpreference__menu__list__item__link nav-link'>Notifications</div>
-                </li>
-              </ul>
-            </nav>
-
-            <div className='account__userpreference__setting'>
-
-              <div className='account__userpreference__setting__personaldata d-none'>
-                <div className='personaldata__title subTitle ml-2 ml-sm-0'>
-                  Mes informations personnelles
-                </div>
-
-                <div className='personaldata__text ml-2 ml-sm-0'>
-                  Ut consectetur dolor et sunt nisi officia ut magna. Ut consectetur dolor et sunt nisi officia ut magna.
-                  Ut consectetur dolor et sunt nisi officia ut magna.
-                </div>
-
-                <div className='personaldata__form'>
-                  <div className='personaldata__form__title'>
-                    Changer le 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' type='password' placeholder='Nouveau mot de passe' />
-                  <div className='personaldata__form__button btn btn-primary'>
-                    Envoyer
-                  </div>
-                </div>
-
-                <div className='personaldata__form'>
-                  <div className='personaldata__form__title'>
-                    Changer d'adresse mail :
-                  </div>
-                  <input className='personaldata__form__txtinput form-control' type='email' placeholder='Ancienne adresse mail' />
-                  <input className='personaldata__form__txtinput form-control' type='email' placeholder='Nouvelle adresse mail' />
-                  <div className='personaldata__form__button btn btn-primary'>
-                    Envoyer
-                  </div>
-                </div>
-              </div>
-
-              <div className='account__userpreference__setting__calendar d-none'>
-
-                <div className='calendar__title subTitle ml-2 ml-sm-0'>
-                  Calendrier
-                </div>
-
-                <div className='calendar__text ml-2 ml-sm-0'>
-                  Ut consectetur dolor et sunt nisi officia ut magna. Ut consectetur dolor et sunt nisi officia ut magna.
-                  Ut consectetur dolor et sunt nisi officia ut magna.
-                </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'>
-                  http://algoo.trac.im/caldav/user/262.ics/
-                </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'>
-                    <div className='calendar__timezone__submenu__item dropdown-item'> Paris GMT +1
-                    </div>
-                    <div className='calendar__timezone__submenu__item dropdown-item dropdown-item'> Londres GMT +0
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className='account__userpreference__setting__notification'>
-
-                <div className='notification__title subTitle ml-2 ml-sm-0'>
-                  Mes Espaces de Travail
-                </div>
-
-                <div className='notification__text ml-2 ml-sm-0'>
-                  Ut consectetur dolor et sunt nisi officia ut magna. Ut consectetur dolor et sunt nisi officia ut magna.
-                  Ut consectetur dolor et sunt nisi officia ut magna.
-                </div>
-
-                <div className='notification__table'>
-                  <table className='table'>
-                    <thead>
-                      <tr>
-                        <th>Espace de travail</th>
-                        <th>Role</th>
-                        <th>Notification</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td>
-                          <div className='notification__table__wksname'>
-                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
-                          </div>
-                        </td>
-                        <td>
-                          <div className='notification__table__role'>
-                            <div className='notification__table__role__icon'>
-                              <i className='fa fa-graduation-cap' />
-                            </div>
-                            <div className='notification__table__role__text d-none d-sm-flex'>
-                              Gestionnaire de Contenu
-                            </div>
-                          </div>
-                        </td>
-                        <td>
-                          <BtnSwitch />
-                        </td>
-                      </tr>
-                      <tr>
-                        <td>
-                          <div className='notification__table__wksname'>
-                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
-                          </div>
-                        </td>
-                        <td>
-                          <div className='notification__table__role'>
-                            <div className='notification__table__role__icon'>
-                              <i className='fa fa-eye' />
-                            </div>
-                            <div className='notification__table__role__text d-none d-sm-flex'>
-                              Lecteur
-                            </div>
-                          </div>
-                        </td>
-                        <td>
-                          <BtnSwitch />
-                        </td>
-                      </tr>
-                      <tr>
-                        <td>
-                          <div className='notification__table__wksname'>
-                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
-                          </div>
-                        </td>
-                        <td>
-                          <div className='notification__table__role'>
-                            <div className='notification__table__role__icon'>
-                              <i className='fa fa-pencil' />
-                            </div>
-                            <div className='notification__table__role__text d-none d-sm-flex'>
-                              Contributeur
-                            </div>
-                          </div>
-                        </td>
-                        <td>
-                          <BtnSwitch />
-                        </td>
-                      </tr>
-                      <tr>
-                        <td>
-                          <div className='notification__table__wksname'>
-                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
-                          </div>
-                        </td>
-                        <td>
-                          <div className='notification__table__role'>
-                            <div className='notification__table__role__icon'>
-                              <i className='fa fa-gavel' />
-                            </div>
-                            <div className='notification__table__role__text d-none d-sm-flex'>
-                              Responsable
-                            </div>
-                          </div>
-                        </td>
-                        <td>
-                          <BtnSwitch />
-                        </td>
-                      </tr>
-                      <tr>
-                        <td>
-                          <div className='notification__table__wksname'>
-                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
-                          </div>
-                        </td>
-                        <td>
-                          <div className='notification__table__role'>
-                            <div className='notification__table__role__icon'>
-                              <i className='fa fa-graduation-cap' />
-                            </div>
-                            <div className='notification__table__role__text d-none d-sm-flex'>
-                              Gestionnaire de Contenu
-                            </div>
-                          </div>
-                        </td>
-                        <td>
-                          <BtnSwitch />
-                        </td>
-                      </tr>
-                      <tr>
-                        <td>
-                          <div className='notification__table__wksname'>
-                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
-                          </div>
-                        </td>
-                        <td>
-                          <div className='notification__table__role'>
-                            <div className='notification__table__role__icon'>
-                              <i className='fa fa-graduation-cap' />
-                            </div>
-                            <div className='notification__table__role__text d-none d-sm-flex'>
-                              Gestionnaire de Contenu
-                            </div>
-                          </div>
-                        </td>
-                        <td>
-                          <BtnSwitch />
-                        </td>
-                      </tr>
-                      <tr>
-                        <td>
-                          <div className='notification__table__wksname'>
-                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
-                          </div>
-                        </td>
-                        <td>
-                          <div className='notification__table__role'>
-                            <div className='notification__table__role__icon'>
-                              <i className='fa fa-graduation-cap' />
-                            </div>
-                            <div className='notification__table__role__text d-none d-sm-flex'>
-                              Gestionnaire de Contenu
-                            </div>
-                          </div>
-                        </td>
-                        <td>
-                          <BtnSwitch />
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default AccountPage

src/container/Sidebar.jsx

 import { translate } from 'react-i18next'
 import WorkspaceListItem from '../component/Sidebar/WorkspaceListItem.jsx'
 import { getWorkspaceList } from '../action-creator.async.js'
-import { setWorkspaceListIsOpen } from '../action-creator.sync.js'
+import { setWorkspaceListisOpenInSidebar } from '../action-creator.sync.js'
 import { PAGE_NAME } from '../helper.js'
 
 class Sidebar extends React.Component {
 
   componentDidMount () {
     const { user, workspaceList, dispatch } = this.props
-    user.id !== 0 && workspaceList.length === 0 && dispatch(getWorkspaceList(user.id))
+    user.id !== -1 && workspaceList.length === 0 && dispatch(getWorkspaceList(user.id))
   }
 
   componentDidUpdate (prevProps) {
     const { user, dispatch } = this.props
-    user.id !== 0 && prevProps.user.id !== user.id && dispatch(getWorkspaceList(user.id))
+    user.id !== -1 && prevProps.user.id !== user.id && dispatch(getWorkspaceList(user.id))
   }
 
-  handleClickWorkspace = (wsId, newIsOpen) => this.props.dispatch(setWorkspaceListIsOpen(wsId, newIsOpen))
+  handleClickWorkspace = (wsId, newisOpenInSidebar) => this.props.dispatch(setWorkspaceListisOpenInSidebar(wsId, newisOpenInSidebar))
 
   handleClickAllContent = wsId => {
     this.props.history.push(`${PAGE_NAME.WS_CONTENT}/${wsId}`)
                 number={++i}
                 wsId={ws.id}
                 name={ws.title}
-                isOpen={ws.isOpen}
-                onClickTitle={() => this.handleClickWorkspace(ws.id, !ws.isOpen)}
+                isOpenInSidebar={ws.isOpenInSidebar}
+                onClickTitle={() => this.handleClickWorkspace(ws.id, !ws.isOpenInSidebar)}
                 onClickAllContent={this.handleClickAllContent}
                 key={ws.id}
               />

src/container/Tracim.jsx

 import Sidebar from './Sidebar.jsx'
 import Login from './Login.jsx'
 import Dashboard from './Dashboard.jsx'
-import AccountPage from './AccountPage.jsx'
+import Account from './Account.jsx'
 // import FlashMessage from './FlashMessage.jsx'
 import WorkspaceContent from './WorkspaceContent.jsx'
 import {
 
                 <PrivateRoute exact path={PAGE_NAME.HOME} component={WorkspaceContent} />
                 <PrivateRoute path={`${PAGE_NAME.WS_CONTENT}/:idws`} component={WorkspaceContent} />
-                <PrivateRoute exact path={PAGE_NAME.ACCOUNT} component={AccountPage} />
+                <PrivateRoute exact path={PAGE_NAME.ACCOUNT} component={Account} />
                 <PrivateRoute exact path={PAGE_NAME.DASHBOARD} component={Dashboard} />
 
               </SidebarWrapper>

src/css/AccountPage.styl

   background-color grey-hover
 
 .account
-  width 100%
   &__userinformation
     display flex
     justify-content center
           font-size 18px
           cursor pointer
           &:hover
+            background-color lightGrey
+          &.active
             background-color blue
             color white
     &__setting

src/css/Generic.styl

   padding 0
 
 .pageTitleGeneric
-  display flex
   margin 45px 0
+  width 100%
   &__title
     margin-left 10px
     font-size 30px
 
 
 .pageContentGeneric
-  margin 10px 10px 120px 10px
+  margin 10px 0 120px 0
+  width 100%
 
 .dropdownCreateBtn
   &__label
   font-weight 500
   color blue
 
-.GenericDelimiter
-  border-radius 10px
-  width 50%
-  height 5px
-  background-color blue
-
 .btnaction
   display flex
   flex-direction column

src/css/Workspace.styl

 .workspace
+  &__header
+    display flex
+    margin-right 15px
   &__content
+    margin 0 15px
     &__button
       display flex
       justify-content flex-end

src/helper.js

   DASHBOARD: '/dashboard',
   ACCOUNT: '/account'
 }
+
+export const ROLE = [{
+  id: 0,
+  name: 'reader',
+  icon: 'fa-eye',
+  translationKey: 'role.reader'
+}, {
+  id: 1,
+  name: 'contributor',
+  icon: 'fa-pencil',
+  translationKey: 'role.contributor'
+}, {
+  id: 2,
+  name: 'content_manager',
+  icon: 'fa-graduation-cap',
+  translationKey: 'role.content_manager'
+}, {
+  id: 3,
+  name: 'manager',
+  icon: 'fa-gavel',
+  translationKey: 'role.manager'
+}]

src/reducer/root.js

 import workspaceList from './workspaceList.js'
 import activeFileContent from './activeFileContent.js'
 import app from './app.js'
+import timezone from './timezone.js'
 
-const rootReducer = combineReducers({ lang, user, workspace, workspaceList, activeFileContent, app })
+const rootReducer = combineReducers({ lang, user, workspace, workspaceList, activeFileContent, app, timezone })
 
 export default rootReducer

src/reducer/timezone.js

+import { TIMEZONE } from '../action-creator.sync.js'
+
+export function timezone (state = [], action) {
+  switch (action.type) {
+    case `Set/${TIMEZONE}`:
+      return action.timezone
+
+    default:
+      return state
+  }
+}
+
+export default timezone

src/reducer/user.js

   firstname: data.user.firstname,
   lastname: data.user.lastname,
   email: data.user.email,
-  avatar: data.user.avatar
+  avatar: data.user.avatar,
+  role: data.user.role,
+  job: data.user.job,
+  company: data.user.company,
+  caldavUrl: data.user.caldav_url
 })
 
 export default function user (state = {
-  id: 0,
+  id: -1,
   isLoggedIn: undefined,
   username: '',
   firstname: '',
   avatar: ''
 }, action) {
   switch (action.type) {
-    case `Update/${USER_CONNECTED}`:
+    case `Set/${USER_CONNECTED}`:
       return serializeUser(action.user)
 
     case `Update/${USER_DATA}`:

src/reducer/workspace.js

 } from '../action-creator.sync.js'
 
 const serializeWorkspace = data => ({
-  ...data,
+  id: data.id,
+  title: data.title,
+  content: data.content,
   ownerId: data.owner_id
 })
 

src/reducer/workspaceList.js

 import {
-  WORKSPACE_LIST
+  WORKSPACE_LIST,
+  USER_ROLE
 } from '../action-creator.sync.js'
 
+const serializeWorkspaceItem = data => ({
+  id: data.id,
+  title: data.title,
+  role: data.role,
+  notif: data.notif
+})
+
 export function workspaceList (state = [], action) {
   switch (action.type) {
     case `Update/${WORKSPACE_LIST}`:
       return action.workspaceList.map(ws => ({
-        ...ws,
-        isOpen: false
+        ...serializeWorkspaceItem(ws),
+        isOpenInSidebar: false
       }))
 
-    case `Set/${WORKSPACE_LIST}/isOpen`:
+    case `Set/${WORKSPACE_LIST}/isOpenInSidebar`:
+      return state.map(ws => ws.id === action.workspaceId
+        ? {...ws, isOpenInSidebar: action.isOpenInSidebar}
+        : ws
+      )
+
+    case `Set/${USER_ROLE}`:
+      return state.map(ws => {
+        const foundWorkspace = action.userRole.find(r => ws.id === r.workspace.id) || {role: '', subscribed_to_notif: ''}
+        return {
+          ...ws,
+          role: foundWorkspace.role,
+          notif: foundWorkspace.subscribed_to_notif
+        }
+      })
+
+    case `Update/${USER_ROLE}/SubscriptionNotif`:
       return state.map(ws => ws.id === action.workspaceId
-        ? {...ws, isOpen: action.isOpen}
+        ? {...ws, notif: action.subscriptionNotif}
         : ws
       )
 

src/translate/en.js

     },
     Sidebar: {
       create_new_workspace: 'Create new workspace'
+    },
+    Account: {
+      title: 'My account'
+    },
+    role: {
+      reader: 'Reader',
+      contributor: 'Contributor',
+      content_manager: 'Content manager',
+      manager: 'Manager'
     }
   }
 }

src/translate/fr.js

     },
     Sidebar: {
       create_new_workspace: 'Créer un workspace'
+    },
+    Account: {
+      title: 'Mon compte'
+    },
+    role: {
+      reader: 'Lecteur',
+      contributor: 'Contributeur',
+      content_manager: 'Gestionnaire de contenu',
+      manager: 'Responsable'
     }
   }
 }