pluged in account page

frontend/src/action-creator.async.js

 import { FETCH_CONFIG } from './helper.js'
 import {
-  TIMEZONE,
-  setTimezone,
   USER_LOGIN,
   USER_LOGOUT,
-  USER_ROLE,
   USER_CONNECTED,
   USER_KNOWN_MEMBER_LIST,
-  setUserRole,
+  USER_NAME,
+  USER_EMAIL,
+  USER_PASSWORD,
   WORKSPACE,
   WORKSPACE_LIST,
   WORKSPACE_DETAIL,
   WORKSPACE_CONTENT_ARCHIVED,
   WORKSPACE_CONTENT_DELETED,
   WORKSPACE_RECENT_ACTIVITY,
-  WORKSPACE_READ_STATUS
+  WORKSPACE_READ_STATUS,
+  USER_WORKSPACE_DO_NOTIFY
 } from './action-creator.sync.js'
 
 /*
   return fetchResult
 }
 
-export const getTimezone = () => async dispatch => {
-  const fetchGetTimezone = await fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/timezone`,
-    param: {
-      headers: {...FETCH_CONFIG.headers},
-      method: 'GET'
-    },
-    actionName: TIMEZONE,
-    dispatch
-  })
-  if (fetchGetTimezone.status === 200) dispatch(setTimezone(fetchGetTimezone.json))
-}
-
 export const postUserLogin = (login, password, rememberMe) => async dispatch => {
   return fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/sessions/login`, // FETCH_CONFIG.apiUrl
   })
 }
 
-export const getUserRole = user => async dispatch => {
-  const fetchGetUserRole = await fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/roles`,
+export const getUserKnownMember = (user, userNameToSearch) => dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/known_members?acp=${userNameToSearch}`,
     param: {
-      headers: {...FETCH_CONFIG.headers},
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
       method: 'GET'
     },
-    actionName: USER_ROLE,
+    actionName: USER_KNOWN_MEMBER_LIST,
     dispatch
   })
-  if (fetchGetUserRole.status === 200) dispatch(setUserRole(fetchGetUserRole.json))
 }
 
-export const getUserKnownMember = (user, userNameToSearch) => dispatch => {
+export const putUserName = (user, newName) => dispatch => {
   return fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/known_members?acp=${userNameToSearch}`,
+    url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}`,
     param: {
       headers: {
         ...FETCH_CONFIG.headers,
         'Authorization': 'Basic ' + user.auth
       },
-      method: 'GET'
+      method: 'PUT',
+      body: JSON.stringify({
+        public_name: newName,
+        timezone: user.timezone
+      })
     },
-    actionName: USER_KNOWN_MEMBER_LIST,
+    actionName: USER_NAME,
+    dispatch
+  })
+}
+
+export const putUserEmail = (user, newEmail, checkPassword) => dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/email`,
+    param: {
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
+      method: 'PUT',
+      body: JSON.stringify({
+        email: newEmail,
+        loggedin_user_password: checkPassword
+      })
+    },
+    actionName: USER_EMAIL,
+    dispatch
+  })
+}
+
+export const putUserPassword = (user, oldPassword, newPassword, newPassword2) => dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/password`,
+    param: {
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
+      method: 'PUT',
+      body: JSON.stringify({
+        loggedin_user_password: oldPassword,
+        new_password: newPassword,
+        new_password2: newPassword2
+      })
+    },
+    actionName: USER_PASSWORD,
     dispatch
   })
 }
   })
 }
 
+export const putUserWorkspaceDoNotify = (user, idWorkspace, doNotify) => dispatch => {
+  return fetchWrapper({
+    // @TODO Côme - 2018/08/23 - this is the wrong endpoint, but backend hasn't implemented it yet
+    url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}/members/${user.user_id}`,
+    param: {
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
+      method: 'PUT',
+      body: JSON.stringify({
+        do_notify: doNotify
+      })
+
+    },
+    actionName: USER_WORKSPACE_DO_NOTIFY,
+    dispatch
+  })
+}
+
 export const getWorkspaceList = user => dispatch => {
   return fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/workspaces`,

frontend/src/action-creator.sync.js

-export const SET = 'Set'
-export const UPDATE = 'Update'
+export const SET = 'Set' // save data from api
+export const UPDATE = 'Update' // edit data from api
 export const ADD = 'Add'
 export const REMOVE = 'Remove'
 export const APPEND = 'Append'
 export const USER_DISCONNECTED = `${USER}/Disconnected`
 export const setUserConnected = user => ({ type: `${SET}/${USER}/Connected`, user })
 export const setUserDisconnected = () => ({ type: `${SET}/${USER}/Disconnected` })
-export const USER_DATA = `${USER}/Data`
-export const updateUserData = userData => ({ type: `${UPDATE}/${USER}/Data`, data: userData })
-export const USER_ROLE = `${USER}/Role`
-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 USER_LANG = `${USER}/Lang`
 export const setUserLang = lang => ({ type: `${SET}/${USER}/Lang`, lang })
 export const USER_KNOWN_MEMBER = `${USER}/KnownMember`
 export const USER_KNOWN_MEMBER_LIST = `${USER_KNOWN_MEMBER}/List`
 
+export const USER_NAME = `${USER}/PublicName`
+export const updateUserName = newName => ({ type: `${UPDATE}/${USER_NAME}`, newName })
+export const USER_EMAIL = `${USER}/Email`
+export const updateUserEmail = newEmail => ({ type: `${UPDATE}/${USER_EMAIL}`, newEmail })
+export const USER_PASSWORD = `${USER}/Password`
+export const USER_AUTH = `${USER}/Auth`
+export const updateUserAuth = newAuth => ({ type: `${UPDATE}/${USER_AUTH}`, newAuth })
+
 export const WORKSPACE = 'Workspace'
 export const WORKSPACE_CONTENT = `${WORKSPACE}/Content`
 export const setWorkspaceContentList = workspaceContentList => ({ type: `${SET}/${WORKSPACE_CONTENT}`, workspaceContentList })
 export const updateWorkspaceFilter = filterList => ({ type: `${UPDATE}/${WORKSPACE}/Filter`, filterList })
 
+export const USER_WORKSPACE_DO_NOTIFY = `${USER}/${WORKSPACE}/SubscriptionNotif`
+export const updateUserWorkspaceSubscriptionNotif = (idUser, idWorkspace, doNotify) =>
+  ({ type: `${UPDATE}/${USER_WORKSPACE_DO_NOTIFY}`, idUser, idWorkspace, doNotify })
+
 export const WORKSPACE_CONTENT_ARCHIVED = `${WORKSPACE_CONTENT}/Archived`
 export const WORKSPACE_CONTENT_DELETED = `${WORKSPACE_CONTENT}/Deleted`
 export const setWorkspaceContentArchived = (idWorkspace, idContent) => ({ type: `${SET}/${WORKSPACE_CONTENT_ARCHIVED}`, idWorkspace, idContent })
 export const setWorkspaceContentDeleted = (idWorkspace, idContent) => ({ type: `${SET}/${WORKSPACE_CONTENT_DELETED}`, idWorkspace, idContent })
 
 export const WORKSPACE_LIST = `${WORKSPACE}/List`
-export const updateWorkspaceListData = workspaceList => ({ type: `${UPDATE}/${WORKSPACE_LIST}`, workspaceList })
+export const setWorkspaceList = workspaceList => ({ type: `${SET}/${WORKSPACE_LIST}`, workspaceList })
 export const setWorkspaceListIsOpenInSidebar = (workspaceId, isOpenInSidebar) => ({ type: `${SET}/${WORKSPACE_LIST}/isOpenInSidebar`, workspaceId, isOpenInSidebar })
 
+export const WORKSPACE_LIST_MEMBER = `${WORKSPACE_LIST}/Member/List`
+export const setWorkspaceListMemberList = workspaceListMemberList => ({ type: `${SET}/${WORKSPACE_LIST_MEMBER}`, workspaceListMemberList })
+
+// workspace related const bellow is for currentWorkspace
 export const WORKSPACE_DETAIL = `${WORKSPACE}/Detail`
 export const setWorkspaceDetail = workspaceDetail => ({ type: `${SET}/${WORKSPACE_DETAIL}`, workspaceDetail })
 

frontend/src/component/Account/MenuSubComponent.jsx

 import React from 'react'
 import classnames from 'classnames'
 
-export const Navbar = props => {
+require('./MenuSubComponent.styl')
+
+export const MenuSubComponent = props => {
   return (
-    <nav className='account__userpreference__menu navbar d-flex align-items-start'>
+    <nav className='menusubcomponent navbar d-flex align-items-start'>
 
-      <div className='account__userpreference__menu__responsive d-lg-none'>
-        <button className='hamburger hamburger--spring account__userpreference__menu__responsive__hamburger' type='button'>
-          <span className='hamburger-box account__userpreference__menu__responsive__hamburger__box'>
-            <span className='hamburger-inner account__userpreference__menu__responsive__hamburger__box__icon' />
+      <div className='menusubcomponent__responsive d-lg-none'>
+        <button className='hamburger hamburger--spring menusubcomponent__responsive__hamburger' type='button'>
+          <span className='hamburger-box menusubcomponent__responsive__hamburger__box'>
+            <span className='hamburger-inner menusubcomponent__responsive__hamburger__box__icon' />
           </span>
         </button>
       </div>
 
-      <ul className='account__userpreference__menu__list nav flex-column'>
+      <ul className='menusubcomponent__list nav flex-column'>
 
-        <li className='account__userpreference__menu__list__close nav-link'>
+        <li className='menusubcomponent__list__close nav-link'>
           <i className='fa fa-times' />
         </li>
 
-        <li className='account__userpreference__menu__list__disabled'>Menu</li>
+        <li className='menusubcomponent__list__disabled'>Menu</li>
         { props.subMenuList.map(sm =>
           <li
-            className={classnames('account__userpreference__menu__list__item nav-item', {'active': sm.active})}
+            className={classnames('menusubcomponent__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>
+            <div className='menusubcomponent__list__item__link nav-link'>{sm.menuLabel}</div>
           </li>
         )}
       </ul>
   )
 }
 
-export default Navbar
+export default MenuSubComponent

frontend/src/component/Account/MenuSubComponent.styl

+@import "../../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
+
+.menusubcomponent
+  margin-right 30px
+  border-radius 10px
+  padding 0
+  width 20%
+  min-height 600px
+  background-color off-white
+  &__responsive
+    font-size 20px
+  &__list
+    width 100%
+    margin-bottom 20px
+    &__close
+      display none
+      justify-content flex-end
+      margin 10px 0 15px 0
+      font-size 20px
+      cursor pointer
+    &__disabled
+      padding 25px 20px 20px 16px
+      color grey
+      font-size 18px
+    &__item
+      margin-top 10px
+      font-weight 500
+      font-size 18px
+      cursor pointer
+      &:hover
+        background-color lightGrey
+      &.active
+        background-color thirdColor
+        color white

frontend/src/component/Account/Notification.jsx

 import { BtnSwitch } from 'tracim_frontend_lib'
 import { ROLE } from '../../helper.js'
 
-export const Notification = props => {
-  const getRole = role => ROLE.find(r => r.slug === role)
-
-  return (
-    <div className='account__userpreference__setting__notification'>
-      <div className='notification__sectiontitle subTitle ml-2 ml-sm-0'>
-        {props.t('Workspace and notifications')}
-      </div>
+export const Notification = props =>
+  <div className='account__userpreference__setting__notification'>
+    <div className='notification__sectiontitle subTitle ml-2 ml-sm-0'>
+      {props.t('Workspace and notifications')}
+    </div>
 
-      <div className='notification__text ml-2 ml-sm-0'>
-        NYI
-      </div>
+    <div className='notification__text ml-2 ml-sm-0' />
 
-      <div className='notification__table'>
-        <table className='table'>
-          <thead>
-            <tr>
-              <th>{props.t('Workspace')}</th>
-              <th>{props.t('Role')}</th>
-              <th>{props.t('Notification')}</th>
-            </tr>
-          </thead>
-          <tbody>
+    <div className='notification__table'>
+      <table className='table'>
+        <thead>
+          <tr>
+            <th>{props.t('Workspace')}</th>
+            <th>{props.t('Role')}</th>
+            <th>{props.t('Notification')}</th>
+          </tr>
+        </thead>
 
-            { props.workspaceList.map(ws =>
+        <tbody>
+          { props.workspaceList.map(ws => {
+            const mySelf = ws.memberList.find(u => u.user_id === props.idMyself)
+            const myRole = ROLE.find(r => r.slug === mySelf.role)
+            return (
               <tr key={ws.id}>
                 <td>
                   <div className='notification__table__wksname'>
-                    {ws.title}
+                    {ws.label}
                   </div>
                 </td>
+
                 <td>
                   <div className='notification__table__role'>
                     <div className='notification__table__role__icon'>
-                      <i className={`fa fa-fw ${getRole(ws.role).icon}`} />
+                      <i className={`fa fa-fw ${myRole.faIcon}`} />
                     </div>
                     <div className='notification__table__role__text d-none d-sm-flex'>
-                      {props.t(getRole(ws.role).translationKey)}
+                      {myRole.label}
                     </div>
                   </div>
                 </td>
+
                 <td>
-                  <BtnSwitch checked={ws.notif} onChange={() => props.onChangeSubscriptionNotif(ws.id, !ws.notif)} />
+                  <BtnSwitch
+                    checked={mySelf.do_notify}
+                    onChange={() => props.onChangeSubscriptionNotif(ws.id, !mySelf.do_notify)}
+                  />
                 </td>
               </tr>
-            )}
-
-          </tbody>
-        </table>
-      </div>
+            )
+          })}
+        </tbody>
+      </table>
     </div>
-  )
-}
+  </div>
 
 export default translate()(Notification)

frontend/src/component/Account/Password.jsx

 import React from 'react'
 import { translate } from 'react-i18next'
+import { newFlashMessage } from '../../action-creator.sync.js'
 
-export const Password = props => {
-  return (
-    <div className='account__userpreference__setting__personaldata'>
-      <div className='personaldata__sectiontitle subTitle ml-2 ml-sm-0'>
-        {props.t('Change your password')}
-      </div>
+export class Password extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      oldPassword: '',
+      newPassword: '',
+      newPassword2: ''
+    }
+  }
 
-      <div className='personaldata__text ml-2 ml-sm-0'>
-        NYI
-      </div>
+  handleChangeOldPassword = e => this.setState({oldPassword: e.target.value})
+
+  handleChangeNewPassword = e => this.setState({newPassword: e.target.value})
+
+  handleChangeNewPassword2 = e => this.setState({newPassword2: e.target.value})
+
+  handleClickSubmit = () => {
+    const { props, state } = this
+
+    if (state.newPassword !== state.newPassword2) {
+      props.dispatch(newFlashMessage('New passwords are differents'))
+      return
+    }
+
+    props.onClickSubmit(state.oldPassword, state.newPassword, state.newPassword2)
+  }
+
+  render () {
+    const { props } = this
 
-      <form className='personaldata__form mr-5'>
-        <div className='personaldata__form__title'>
-          {props.t('Password')}
+    return (
+      <div className='account__userpreference__setting__personaldata'>
+        <div className='personaldata__sectiontitle subTitle ml-2 ml-sm-0'>
+          {props.t('Change your password')}
         </div>
-        <input
-          className='personaldata__form__txtinput primaryColorBorderLighten form-control'
-          type='password'
-          placeholder={props.t('Old password')}
-        />
-        <input
-          className='personaldata__form__txtinput primaryColorBorderLighten form-control mt-4'
-          type='password'
-          placeholder={props.t('New password')}
-        />
-        <button type='submit' className='personaldata__form__button primaryColorBorderLighten btn btn-outline-primary mt-4'>
-          {props.t('Send')}
-        </button>
-      </form>
-
-    </div>
-  )
+
+        <div className='personaldata__text ml-2 ml-sm-0' />
+
+        <form className='personaldata__form mr-5'>
+          <div className='personaldata__form__title'>
+            {props.t('Password')}
+          </div>
+
+          <input
+            className='personaldata__form__txtinput primaryColorBorderLighten form-control'
+            type='password'
+            placeholder={props.t('Old password')}
+            onChange={this.handleChangeOldPassword}
+          />
+
+          <input
+            className='personaldata__form__txtinput primaryColorBorderLighten form-control mt-4'
+            type='password'
+            placeholder={props.t('New password')}
+            onChange={this.handleChangeNewPassword}
+          />
+
+          <input
+            className='personaldata__form__txtinput primaryColorBorderLighten form-control mt-4'
+            type='password'
+            placeholder={props.t('Repeat new password')}
+            onChange={this.handleChangeNewPassword2}
+          />
+
+          <button
+            type='button'
+            className='personaldata__form__button primaryColorBorderLighten btn btn-outline-primary mt-4'
+            onClick={this.handleClickSubmit}
+          >
+            {props.t('Send')}
+          </button>
+        </form>
+
+      </div>
+    )
+  }
 }
 
 export default translate()(Password)

frontend/src/component/Account/PersonalData.jsx

 import React from 'react'
+import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import { translate } from 'react-i18next'
+import {newFlashMessage} from '../../action-creator.sync.js'
 
-export const PersonalData = props => {
-  return (
-    <div className='account__userpreference__setting__personaldata'>
-      <div className='personaldata__sectiontitle subTitle ml-2 ml-sm-0'>
-        {props.t('Account information')}
-      </div>
+require('./PersonalData.styl')
 
-      <div className='personaldata__text ml-2 ml-sm-0'>
-        NYI
-      </div>
+export class PersonalData extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      newName: '',
+      newEmail: '',
+      checkPassword: ''
+    }
+  }
 
-      <form className='personaldata__form'>
-        <div className='personaldata__form__title'>
-          {props.t('Name:')}
-        </div>
-        <div className='d-flex align-items-center justify-content-between flex-wrap mb-4'>
-          <input
-            className='personaldata__form__txtinput primaryColorBorderLighten form-control mt-3 mt-sm-0'
-            type='text'
-            placeholder={props.t('Change your name')}
-          />
-        </div>
-        <div className='personaldata__form__title'>
-          {props.t('Email Adress:')}
-        </div>
-        <div className='d-flex align-items-center justify-content-between flex-wrap mb-4'>
-          <input
-            className='personaldata__form__txtinput primaryColorBorderLighten form-control mt-3 mt-sm-0'
-            type='email'
-            placeholder={props.t('Change your email')}
-          />
+  handleChangeName = e => this.setState({newName: e.target.value})
+
+  handleChangeEmail = e => this.setState({newEmail: e.target.value})
+
+  handleChangeCheckPassword = e => this.setState({checkPassword: e.target.value})
+
+  handleClickSubmit = () => {
+    const { props, state } = this
+
+    if (state.newEmail !== '' && state.checkPassword === '') {
+      props.dispatch(newFlashMessage(props.t('Please type your password in order to change your email. (For security reasons)'), 'info'))
+      return
+    }
+
+    props.onClickSubmit(state.newName, state.newEmail, state.checkPassword)
+  }
+
+  render () {
+    const { props } = this
+    return (
+      <div className='account__userpreference__setting__personaldata'>
+        <div className='personaldata__sectiontitle subTitle ml-2 ml-sm-0'>
+          {props.t('Account information')}
         </div>
-        <button type='submit' className='personaldata__form__button primaryColorBorderLighten btn btn-outline-primary'>
-          {props.t('Send')}
-        </button>
-      </form>
-    </div>
-  )
+
+        <div className='personaldata__text ml-2 ml-sm-0' />
+
+        <form className='personaldata__form'>
+          <div className='personaldata__form__title'>
+            {props.t('Name:')}
+          </div>
+
+          <div className='d-flex align-items-center flex-wrap mb-4'>
+            <input
+              className='personaldata__form__txtinput primaryColorBorderLighten form-control mt-3 mt-sm-0'
+              type='text'
+              placeholder={props.t('Change your name')}
+              onChange={this.handleChangeName}
+            />
+          </div>
+
+          <div className='personaldata__form__title'>
+            {props.t('Email Address:')}
+          </div>
+
+          <div className='d-flex align-items-center flex-wrap mb-4'>
+            <input
+              className='personaldata__form__txtinput primaryColorBorderLighten form-control mt-3 mt-sm-0'
+              type='email'
+              placeholder={props.t('Change your email')}
+              onChange={this.handleChangeEmail}
+            />
+
+            <input
+              className='personaldata__form__txtinput checkPassword primaryColorBorderLighten form-control mt-3 mt-sm-0'
+              type='password'
+              placeholder={props.t('Check your password')}
+              onChange={this.handleChangeCheckPassword}
+            />
+          </div>
+
+          <button
+            type='button'
+            className='personaldata__form__button primaryColorBorderLighten btn'
+            onClick={this.handleClickSubmit}
+          >
+            {props.t('Send')}
+          </button>
+        </form>
+      </div>
+    )
+  }
 }
 
 PersonalData.propTypes = {
-  inputPlaceholderNameUser: PropTypes.string,
-  inputPlaceholderEmailUser: PropTypes.string
+  onClickSubmit: PropTypes.func
 }
 
-export default translate()(PersonalData)
+const mapStateToProps = () => ({})
+export default connect(mapStateToProps)(translate()(PersonalData))

frontend/src/component/Account/PersonalData.styl

+.personaldata
+  &__text
+    settingText()
+  &__form
+    margin 25px 0
+    &__title
+      margin-bottom 15px
+      font-size 18px
+    &__txtinput
+      display block
+      width auto
+      border-width 1px
+      border-style solid
+      border-radius 5px
+      &.checkPassword
+        margin-left 15px
+    &__button
+      vertical-align top
+      border-width 1px
+      border-style solid
+      border-radius 5px
+      padding 8px 25px
+      cursor pointer

frontend/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' />
+require('./UserInfo.styl')
+
+export const UserInfo = props =>
+  <div className='userinfo mr-5 ml-5 mb-5'>
+    <div className='userinfo__avatar'>
+      <img src={props.user.avatar_url} />
+    </div>
+
+    <div className='userinfo__wrapper'>
+      <div className='userinfo__name mb-3'>
+        {`${props.user.public_name}`}
       </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 d-block primaryColorFontLighten 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 primaryColorFontLighten'>
-          {props.user.company}
-        </a> */ }
+
+      <a href={`mailto:${props.user.email}`} className='userinfo__email d-block primaryColorFontLighten mb-3'>
+        {props.user.email}
+      </a>
+
+      <div className='userinfo__profile mb-3'>
+        {props.user.profile}
       </div>
     </div>
-  )
-}
+  </div>
 
 export default UserInfo

frontend/src/component/Account/UserInfo.styl

+.userinfo
+  display flex
+  justify-content center
+  align-items center
+  flex-wrap wrap
+  padding 25px
+  font-size 18px
+  &__wrapper
+    flex-direction column
+  &__avatar
+    margin-right 50px
+    img
+      width 100px
+      height 100px
+  &__name
+    font-size 22px
+
+@media (max-width: max-xs)
+  .hamburger-box
+    width 45px
+    height 22px
+
+  .userinfo
+    &__avatar
+      margin 0 0 20px 0
+    &__wrapper
+      text-align center

frontend/src/component/FlashMessage.jsx

 
               <div className='flashmessage__container__content__text'>
                 <div className='flashmessage__container__content__text__title'>
-                  {props.t('Error')}
+                  {(() => {
+                    switch (props.flashMessage[0].type) {
+                      case 'info': return props.t('Information')
+                      case 'warning': return props.t('Warning')
+                      case 'danger': return props.t('Error')
+                    }
+                  })()}
                 </div>
                 <div className='flashmessage__container__content__text__paragraph'>
                   {props.flashMessage[0].message}

frontend/src/container/Account.jsx

   PageTitle,
   PageContent
 } from 'tracim_frontend_lib'
-import { updateUserWorkspaceSubscriptionNotif } from '../action-creator.sync.js'
 import {
-  getTimezone,
-  getUserRole
+  newFlashMessage,
+  setWorkspaceListMemberList,
+  updateUserName,
+  updateUserEmail,
+  updateUserAuth,
+  updateUserWorkspaceSubscriptionNotif
+} from '../action-creator.sync.js'
+import {
+  getWorkspaceMemberList,
+  putUserName,
+  putUserEmail,
+  putUserPassword,
+  putUserWorkspaceDoNotify
 } from '../action-creator.async.js'
 import { translate } from 'react-i18next'
+import { setCookie } from '../helper.js'
 
 class Account extends React.Component {
   constructor (props) {
     this.state = {
       subComponentMenu: [{
         name: 'personalData',
-        menuLabel: 'Mon profil',
+        menuLabel: props.t('My profil'),
         active: true
       }, {
         name: 'notification',
-        menuLabel: 'Espace de travail & Notifications',
+        menuLabel: props.t('Workspaces and notifications'),
         active: false
       }, {
         name: 'password',
-        menuLabel: 'Mot de passe',
+        menuLabel: props.t('Password'),
         active: false
       }, {
         name: 'timezone',
-        menuLabel: 'Fuseau Horaire',
+        menuLabel: props.t('Timezone'),
         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())
+    const { props } = this
+    if (props.system.workspaceListLoaded && props.workspaceList.length > 0) this.loadWorkspaceListMemberList()
   }
 
-  componentDidUpdate () {
-    const { user, workspaceList, dispatch } = this.props
+  loadWorkspaceListMemberList = async () => {
+    const { props } = this
+
+    const fetchWorkspaceListMemberList = await Promise.all(
+      props.workspaceList.map(async ws => ({
+        idWorkspace: ws.id,
+        fetchMemberList: await props.dispatch(getWorkspaceMemberList(props.user, ws.id))
+      }))
+    )
+
+    const workspaceListMemberList = fetchWorkspaceListMemberList.map(wsMemberList => ({
+      idWorkspace: wsMemberList.idWorkspace,
+      memberList: wsMemberList.fetchMemberList.status === 200
+        ? wsMemberList.fetchMemberList.json
+        : [] // handle error ?
+    }))
 
-    if (user.id !== -1 && workspaceList.length > 0 && workspaceList.some(ws => ws.role === undefined)) dispatch(getUserRole(user))
+    props.dispatch(setWorkspaceListMemberList(workspaceListMemberList))
   }
 
   handleClickSubComponentMenuItem = subMenuItemName => this.setState(prev => ({
     subComponentMenu: prev.subComponentMenu.map(m => ({...m, active: m.name === subMenuItemName}))
   }))
 
-  handleChangeSubscriptionNotif = (workspaceId, subscriptionNotif) =>
-    this.props.dispatch(updateUserWorkspaceSubscriptionNotif(workspaceId, subscriptionNotif))
+  handleSubmitNameOrEmail = async (newName, newEmail, checkPassword) => {
+    const { props } = this
+
+    if (newName !== '') {
+      const fetchPutUserName = await props.dispatch(putUserName(props.user, newName))
+      switch (fetchPutUserName.status) {
+        case 200:
+          props.dispatch(updateUserName(newName))
+          if (newEmail === '' )props.dispatch(newFlashMessage(props.t('Your name has been changed'), 'info'))
+          // else, if email also has been changed, flash msg is handled bellow to not display 2 flash msg
+          break
+        default: props.dispatch(newFlashMessage(props.t('Error while changing name'), 'warning')); break
+      }
+    }
+
+    if (newEmail !== '') {
+      const fetchPutUserEmail = await props.dispatch(putUserEmail(props.user, newEmail, checkPassword))
+      switch (fetchPutUserEmail.status) {
+        case 200:
+          props.dispatch(updateUserEmail(fetchPutUserEmail.json.email))
+          const newAuth = setCookie(fetchPutUserEmail.json.email, checkPassword)
+          props.dispatch(updateUserAuth(newAuth))
+          if (newName !== '') props.dispatch(newFlashMessage(props.t('Your name and email has been changed'), 'info'))
+          else props.dispatch(newFlashMessage(props.t('Your email has been changed'), 'info'))
+          break
+        default: props.dispatch(newFlashMessage(props.t('Error while changing email'), 'warning')); break
+      }
+    }
+  }
+
+  handleChangeSubscriptionNotif = async (idWorkspace, doNotify) => {
+    const { props } = this
+
+    const fetchPutUserWorkspaceDoNotify = await props.dispatch(putUserWorkspaceDoNotify(props.user, idWorkspace, doNotify))
+    switch (fetchPutUserWorkspaceDoNotify.status) {
+      // @TODO: Côme - 2018/08/23 - uncomment this when fetch implements the right endpoint (blocked by backend)
+      // case 200:
+      //   break
+      default:
+        props.dispatch(updateUserWorkspaceSubscriptionNotif(props.user.user_id, idWorkspace, doNotify))
+        // props.dispatch(newFlashMessage(props.t('Error while changing subscription'), 'warning'))
+        break
+    }
+  }
+
+  handleSubmitPassword = async (oldPassword, newPassword, newPassword2) => {
+    const { props } = this
+
+    const fetchPutUserPassword = await props.dispatch(putUserPassword(props.user, oldPassword, newPassword, newPassword2))
+    switch (fetchPutUserPassword.status) {
+      case 204:
+        const newAuth = setCookie(props.user.email, newPassword)
+        props.dispatch(updateUserAuth(newAuth))
+        props.dispatch(newFlashMessage(props.t('Your password has been changed'), 'info'))
+        break
+      default: props.dispatch(newFlashMessage(props.t('Error while changing password'), 'warning')); break
+    }
+  }
 
   handleChangeTimezone = newTimezone => console.log('(NYI) new timezone : ', newTimezone)
 
   render () {
+    const { props, state } = this
+
     const subComponent = (() => {
-      switch (this.state.subComponentMenu.find(({active}) => active).name) {
+      switch (state.subComponentMenu.find(({active}) => active).name) {
         case 'personalData':
-          return <PersonalData />
+          return <PersonalData onClickSubmit={this.handleSubmitNameOrEmail} />
 
         // case 'calendar':
-        //   return <Calendar user={this.props.user} />
+        //   return <Calendar user={props.user} />
 
         case 'notification':
           return <Notification
-            workspaceList={this.props.workspaceList}
+            idMyself={props.user.user_id}
+            workspaceList={props.workspaceList}
             onChangeSubscriptionNotif={this.handleChangeSubscriptionNotif}
           />
 
         case 'password':
-          return <Password />
+          return <Password onClickSubmit={this.handleSubmitPassword} />
 
         case 'timezone':
-          return <Timezone timezone={this.props.timezone} onChangeTimezone={this.handleChangeTimezone} />
+          return <Timezone timezone={props.timezone} onChangeTimezone={this.handleChangeTimezone} />
       }
     })()
 
     return (
-      <div className='account'>
-        <PageWrapper customClass='account'>
-          <PageTitle
-            parentClass={'account'}
-            title={'Mon Compte'}
-          />
+      <PageWrapper customClass='account'>
+        <PageTitle
+          parentClass={'account'}
+          title={props.t('My account')}
+        />
 
-          <PageContent parentClass='account'>
-            <UserInfo user={this.props.user} />
+        <PageContent parentClass='account'>
+          <UserInfo user={props.user} />
 
-            <Delimiter customClass={'account__delimiter'} />
+          <Delimiter customClass={'account__delimiter'} />
 
-            <div className='account__userpreference'>
-              <MenuSubComponent subMenuList={this.state.subComponentMenu} onClickMenuItem={this.handleClickSubComponentMenuItem} />
+          <div className='account__userpreference'>
+            <MenuSubComponent
+              subMenuList={state.subComponentMenu}
+              onClickMenuItem={this.handleClickSubComponentMenuItem}
+            />
 
-              <div className='account__userpreference__setting'>
-                { subComponent }
-              </div>
+            <div className='account__userpreference__setting'>
+              { subComponent }
             </div>
+          </div>
 
-          </PageContent>
-        </PageWrapper>
-      </div>
+        </PageContent>
+      </PageWrapper>
     )
   }
 }
 
-const mapStateToProps = ({ user, workspaceList, timezone }) => ({ user, workspaceList, timezone })
+const mapStateToProps = ({ user, workspaceList, timezone, system }) => ({ user, workspaceList, timezone, system })
 export default connect(mapStateToProps)(translate()(Account))

frontend/src/container/Dashboard.jsx

     }
   }
 
-  async componentDidMount () {
+  componentDidMount () {
     this.loadWorkspaceDetail()
     this.loadMemberList()
     this.loadRecentActivity()

frontend/src/container/Login.jsx

 import { connect } from 'react-redux'
 import { withRouter, Redirect } from 'react-router'
 import { translate } from 'react-i18next'
-import Cookies from 'js-cookie'
 import LoginLogo from '../component/Login/LoginLogo.jsx'
 import LoginLogoImg from '../img/logoTracimWhite.svg'
 import Card from '../component/common/Card/Card.jsx'
 import {
   newFlashMessage,
   setUserConnected,
-  updateWorkspaceListData,
+  setWorkspaceList,
   setWorkspaceListIsOpenInSidebar,
   setContentTypeList,
   setAppList
   getWorkspaceList,
   postUserLogin
 } from '../action-creator.async.js'
-import { COOKIE, PAGE } from '../helper.js'
+import { setCookie, PAGE } from '../helper.js'
 import { Checkbox } from 'tracim_frontend_lib'
 
 class Login extends React.Component {
     const { inputLogin, inputPassword, inputRememberMe } = this.state
 
     const fetchPostUserLogin = await dispatch(postUserLogin(inputLogin.value, inputPassword.value, inputRememberMe))
-    const userAuth = btoa(`${inputLogin.value}:${inputPassword.value}`)
 
     if (fetchPostUserLogin.status === 200) {
+      let userAuth = ''
+
+      if (inputRememberMe) userAuth = setCookie(inputLogin.value, inputPassword.value, 365)
+      else userAuth = setCookie(inputLogin.value, inputPassword.value)
+
       const loggedUser = {
         ...fetchPostUserLogin.json,
         auth: userAuth,
       this.loadAppConfig(loggedUser)
       this.loadWorkspaceList(loggedUser)
 
-      if (inputRememberMe) {
-        Cookies.set(COOKIE.USER_LOGIN, inputLogin.value, {expires: 365})
-        Cookies.set(COOKIE.USER_AUTH, userAuth, {expires: 365})
-      } else {
-        Cookies.set(COOKIE.USER_LOGIN, inputLogin.value)
-        Cookies.set(COOKIE.USER_AUTH, userAuth)
-      }
-
       history.push(PAGE.WORKSPACE.ROOT)
     } else if (fetchPostUserLogin.status === 403) {
       dispatch(newFlashMessage(t('Email or password invalid'), 'danger'))
     const fetchGetWorkspaceList = await props.dispatch(getWorkspaceList(user))
 
     if (fetchGetWorkspaceList.status === 200) {
-      props.dispatch(updateWorkspaceListData(fetchGetWorkspaceList.json))
+      props.dispatch(setWorkspaceList(fetchGetWorkspaceList.json))
 
       const idWorkspaceToOpen = (() =>
         props.match && props.match.params.idws !== undefined && !isNaN(props.match.params.idws)

frontend/src/container/Tracim.jsx

   removeFlashMessage,
   setAppList,
   setContentTypeList,
-  setUserConnected, setWorkspaceListIsOpenInSidebar, updateWorkspaceListData
+  setUserConnected,
+  setWorkspaceListIsOpenInSidebar,
+  setWorkspaceList
 } from '../action-creator.sync.js'
 import Cookies from 'js-cookie'
 import Dashboard from './Dashboard.jsx'
         this.loadWorkspaceList()
         break
       case 401:
+        Cookies.remove(COOKIE.USER_LOGIN)
+        Cookies.remove(COOKIE.USER_AUTH)
         dispatch(setUserConnected({logged: false})); break
       default:
         dispatch(setUserConnected({logged: null})); break
     if (fetchGetWorkspaceList.status === 200) {
       this.setState({workspaceListLoaded: true})
 
-      props.dispatch(updateWorkspaceListData(fetchGetWorkspaceList.json))
+      props.dispatch(setWorkspaceList(fetchGetWorkspaceList.json))
 
       const idWorkspaceToOpen = (() =>
         props.match && props.match.params.idws !== undefined && !isNaN(props.match.params.idws)
       return <Redirect to={{pathname: '/login', state: {from: props.location}}} />
     }
 
+    if (props.location.pathname !== '/login' && (
+      !props.system.workspaceListLoaded ||
+      !props.system.appListLoaded ||
+      !props.system.contentTypeListLoaded
+    )) return null // @TODO Côme - 2018/08/22 - should show loader here
+
     return (
       <div className='tracim'>
         <Header />
   }
 }
 
-const mapStateToProps = ({ user, appList, contentType, workspaceList, flashMessage }) => ({ user, appList, contentType, workspaceList, flashMessage })
+const mapStateToProps = ({ user, appList, contentType, workspaceList, flashMessage, system }) => ({ user, appList, contentType, workspaceList, flashMessage, system })
 export default withRouter(connect(mapStateToProps)(translate()(Tracim)))

frontend/src/container/WorkspaceContent.jsx

     }
   }
 
-  async componentDidMount () {
+  componentDidMount () {
     const { workspaceList, match } = this.props
 
     console.log('%c<WorkspaceContent> componentDidMount', 'color: #c17838')

frontend/src/css/AccountPage.styl

       width 80%
       min-height 600px
       background-color off-white
-      .personaldata
-        &__text
-          settingText()
-        &__form
-          margin 25px 0
-          &__title
-            margin-bottom 15px
-            font-size 18px
-          &__txtinput
-            display block
-            width auto
-            border-width 1px
-            border-style solid
-            border-radius 5px
-          &__button
-            vertical-align top
-            border-width 1px
-            border-style solid
-            border-radius 5px
-            padding 8px 25px
-            cursor pointer
       .calendar
         &__text
           settingText()
 
 /**** MEDIA 576px & 1199px ****/
 
-// Regroup the common rules
-
+// @TODO Côme - 2018/08/22 - dont bypass breakpoints (from sm to md)
 @media (min-width: min-sm) and (max-width: max-md)
 
   .account

frontend/src/helper.js

+import i18n from './i18n.js'
+import Cookies from 'js-cookie'
+
 const configEnv = require('../configEnv.json')
 
 export const FETCH_CONFIG = {
   USER_AUTH: 'user_auth'
 }
 
+export const setCookie = (login, password, expires = undefined) => {
+  const auth = btoa(`${login}:${password}`)
+  if (expires) {
+    Cookies.set(COOKIE.USER_LOGIN, login, {expires})
+    Cookies.set(COOKIE.USER_AUTH, auth, {expires})
+  } else {
+    Cookies.set(COOKIE.USER_LOGIN, login)
+    Cookies.set(COOKIE.USER_AUTH, auth)
+  }
+
+  return auth
+}
+
 // Côme - 2018/08/02 - shouldn't this come from api ?
 export const workspaceConfig = {
   slug: 'workspace',
   faIcon: 'bank',
   hexcolor: '#7d4e24',
-  creationLabel: 'Create a workspace',
+  creationLabel: i18n.t('Create a workspace'),
   domContainer: 'appFeatureContainer'
 }
 
   slug: 'reader',
   faIcon: 'eye',
   hexcolor: '#15d948',
-  label: 'Reader'
+  label: i18n.t('Reader')
 }, {
   id: 2,
   slug: 'contributor',
   faIcon: 'pencil',
   hexcolor: '#3145f7',
-  label: 'Contributor'
+  label: i18n.t('Contributor')
 }, {
   id: 4,
   slug: 'content-manager',
   faIcon: 'graduation-cap',
   hexcolor: '#f2af2d',
-  label: 'Content manager'
+  label: i18n.t('Content manager')
 }, {
   id: 8,
   slug: 'workspace-manager',
   faIcon: 'gavel',
   hexcolor: '#ed0007',
-  label: 'Workspace manager'
+  label: i18n.t('Workspace manager')
 }]
 
 export const findIdRoleUserWorkspace = (idUser, memberList, roleList) => {
     sluf: 'reader',
     faIcon: 'eye',
     hexcolor: '#15D948',
-    label: 'Reader'
+    label: i18n.t('Reader')
   },
   contributor: {
     id: 2,
     slug: 'contributor',
     faIcon: 'pencil',
     hexcolor: '#3145f7',
-    label: 'Contributor'
+    label: i18n.t('Contributor')
   },
   contentManager: {
     id: 4,
     slug: 'content-manager',
     faIcon: 'graduation-cap',
     hexcolor: '#f2af2d',
-    label: 'Content manager'
+    label: i18n.t('Content manager')
   },
   workspaceManager: {
     id: 8,
     slug: 'workspace-manager',
     faIcon: 'gavel',
     hexcolor: '#ed0007',
-    label: 'Workspace manager'
+    label: i18n.t('Workspace manager')
   }
 }
 

frontend/src/reducer/root.js

 import appList from './appList.js'
 import contentType from './contentType.js'
 import timezone from './timezone.js'
+import system from './system.js'
 
-const rootReducer = combineReducers({ lang, flashMessage, user, currentWorkspace, workspaceContentList, workspaceList, appList, contentType, timezone })
+const rootReducer = combineReducers({ lang, flashMessage, user, currentWorkspace, workspaceContentList, workspaceList, appList, contentType, timezone, system })
 
 export default rootReducer

frontend/src/reducer/system.js

+import {
+  APP_LIST,
+  CONTENT_TYPE_LIST,
+  SET,
+  WORKSPACE_LIST
+} from '../action-creator.sync.js'
+
+const defaultSystem = {
+  workspaceListLoaded: false,
+  appListLoaded: false,
+  contentTypeListLoaded: false
+}
+
+export function system (state = defaultSystem, action) {
+  switch (action.type) {
+    case `${SET}/${WORKSPACE_LIST}`:
+      return {...state, workspaceListLoaded: true}
+
+    case `${SET}/${APP_LIST}`:
+      return {...state, appListLoaded: true}
+
+    case `${SET}/${CONTENT_TYPE_LIST}`:
+      return {...state, contentTypeListLoaded: true}
+
+    default:
+      return state
+  }
+}
+
+export default system

frontend/src/reducer/user.js

   UPDATE,
   USER_CONNECTED,
   USER_DISCONNECTED,
-  USER_DATA,
-  USER_LANG
+  USER_LANG,
+  USER_NAME,
+  USER_AUTH
 } from '../action-creator.sync.js'
 import { generateAvatarFromPublicName } from 'tracim_frontend_lib'
 
     case `${SET}/${USER_DISCONNECTED}`:
       return {...defaultUser, logged: false}
 
-    case `${UPDATE}/${USER_DATA}`:
-      return {...state, ...action.data}
-
     case `${SET}/${USER_LANG}`:
       return {...state, lang: action.lang}
 
+    case `${UPDATE}/${USER_NAME}`:
+      return {...state, public_name: action.newName}
+
+    case `${UPDATE}/${USER_AUTH}`:
+      return {...state, auth: action.auth}
+
     default:
       return state
   }

frontend/src/reducer/workspaceList.js

 import {
   SET,
   UPDATE,
+  USER_WORKSPACE_DO_NOTIFY,
   WORKSPACE_LIST,
-  USER_ROLE
+  WORKSPACE_LIST_MEMBER
 } from '../action-creator.sync.js'
 import { handleRouteFromApi } from '../helper.js'
 
 export function workspaceList (state = [], action) {
   switch (action.type) {
-    case `${UPDATE}/${WORKSPACE_LIST}`:
+    case `${SET}/${WORKSPACE_LIST}`:
       return action.workspaceList.map(ws => ({
         id: ws.workspace_id,
         label: ws.label,
           hexcolor: sbe.hexcolor,
           label: sbe.label
         })),
-        isOpenInSidebar: false
+        isOpenInSidebar: false,
+        memberList: []
       }))
 
     case `${SET}/${WORKSPACE_LIST}/isOpenInSidebar`:
         : ws
       )
 
-    case `${SET}/${USER_ROLE}`: // not used yet
-      return state.map(ws => {
-        const foundWorkspace = action.userRole.find(r => ws.id === r.workspace.id) || {role: '', subscribed_to_notif: ''}
-        return {
+    case `${SET}/${WORKSPACE_LIST_MEMBER}`:
+      return state.map(ws => ({
+        ...ws,
+        memberList: action.workspaceListMemberList.find(wlml => wlml.idWorkspace === ws.id).memberList
+      }))
+
+    case `${UPDATE}/${USER_WORKSPACE_DO_NOTIFY}`:
+      return state.map(ws => ws.id === action.idWorkspace
+        ? {
           ...ws,
-          role: foundWorkspace.role,
-          notif: foundWorkspace.subscribed_to_notif
+          memberList: ws.memberList.map(u => u.user_id === action.idUser
+            ? {...u, do_notify: action.doNotify}
+            : u
+          )
         }
-      })
-
-    case `${UPDATE}/${USER_ROLE}/SubscriptionNotif`: // not used yet
-      return state.map(ws => ws.id === action.workspaceId
-        ? {...ws, notif: action.subscriptionNotif}
         : ws
       )