Merge branch 'develop' of https://github.com/tracim/tracim_frontend into develop

README.md

 - add an entry for you App in tracim_frontend/jsonserver/static_db.json in the `app_config` property
 - reload your mock api server
 - add the source of your app in tracim_frontend/dist/index.html and an entry to the switch case of the function `GLOBAL_renderApp`. All of this will be handled by backend later on, this is all work in progress stuffs.
+
+
+#### Urls list
+- __/__ => detail of the first workspace 
+- __/login__ => login page
+- __/workspace/:idws__ => detail of the workspace :idws
+- __/workspace/:idws/content/:idc__ => detail of the workspace :idws with the app of the content :idc openned
+- __/account__ => profile page of the connected user
+- __/dashboard__ => dashboard of a workspace (code not plugged in therefore no :idws in url) 

dist/index.html

       let prevSelectedApp = {name: ''} // default value
 
       GLOBAL_renderApp = app => {
+        console.log('GLOBAL_renderApp => ', app)
         const selectedApp = (() => {
           switch (app.config.name) {
             case 'PageHtml':

jsonserver/server.js

 
 server.get('/lang', (req, res) => res.jsonp(jsonDb.lang))
 
-server.post('/user/login', (req, res) => {
+server.post('/sessions/login', (req, res) => {
   if (req.body.login !== '' && req.body.password !== '') return res.jsonp(jsonDb.user_logged)
   else return res.jsonp('error')
 })
 
 server.get('/app/config', (req, res) => res.jsonp(jsonDb.app_config))
 
-server.get('/user/is_logged_in', (req, res) =>
+server.get('/sessions/whoami', (req, res) =>
   // res.jsonp({"logged": false})
   res.jsonp(jsonDb.user_logged)
 )

jsonserver/static_db.json

     "active": false
   }],
   "user_logged": {
-    "logged": true,
-    "user": {
-      "id": 5,
-      "username": "franclecompte",
-      "firstname": "François",
-      "lastname": "Lecompte",
-      "email": "francois.lecompte@algoo.fr",
-      "avatar": "https://rawgit.com/tracim/tracim_front/develop/src/img/imgProfil.png",
-      "role": "Utilisateur",
-      "caldav_url": "http://algoo.trac.im/caldav/user/5.ics/"
-    }
+    "timezone": "",
+    "profile": {
+      "id": 3,
+      "slug": "administrators"
+    },
+    "email": "admin@admin.admin",
+    "is_active": true,
+    "caldav_url": null,
+    "user_id": 1,
+    "avatar_url": null,
+    "created": "2018-05-17T08:43:03.745219+00:00",
+    "display_name": "Global manager"
   },
   "app_config": [{
     "name": "PageHtml",
     "label": {
-      "fr": "Page Html",
-      "en": "Html page"
+      "fr": "Document",
+      "en": "Document"
     },
     "componentLeft": "PageHtml",
     "componentRight": "Timeline",
   }, {
     "name": "PageMarkdown",
     "label": {
-      "fr": "Page Markdown",
-      "en": "Markdown page"
+      "fr": "Document markdown",
+      "en": "Markdown document"
     },
     "componentLeft": "PageMarkdown",
     "componentRight": "undefined",

src/action-creator.async.js

   LANG,
   updateLangList,
   USER_LOGIN,
+  USER_LOGOUT,
   USER_DATA,
   USER_ROLE,
   USER_CONNECTED,
-  setUserConnected,
   updateUserData,
   setUserRole,
   WORKSPACE,
 
 export const getLangList = () => async dispatch => {
   const fetchGetLangList = await fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/lang`,
+    url: `${FETCH_CONFIG.mockApiUrl}/lang`,
     param: {...FETCH_CONFIG.header, method: 'GET'},
     actionName: LANG,
     dispatch
 
 export const getTimezone = () => async dispatch => {
   const fetchGetTimezone = await fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/timezone`,
+    url: `${FETCH_CONFIG.mockApiUrl}/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`,
+export const postUserLogin = (login, password, rememberMe) => async dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.mockApiUrl}/sessions/login`,
     param: {
-      ...FETCH_CONFIG.header,
+      headers: {...FETCH_CONFIG.headers},
       method: 'POST',
       body: JSON.stringify({
-        login,
-        password,
+        email: login,
+        password: password,
         remember_me: rememberMe
       })
     },
     actionName: USER_LOGIN,
     dispatch
   })
-  if (fetchUserLogin.status === 200) dispatch(setUserConnected(fetchUserLogin.json))
 }
 
-export const getIsUserConnected = () => async dispatch => {
-  const fetchUserLogged = await fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/user/is_logged_in`,
+export const postUserLogout = () => async dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.mockApiUrl}/sessions/logout`,
+    param: {
+      headers: {...FETCH_CONFIG.headers},
+      method: 'POST'
+    },
+    actionName: USER_LOGOUT,
+    dispatch
+  })
+}
+
+export const getUserIsConnected = () => async dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.mockApiUrl}/sessions/whoami`,
     param: {...FETCH_CONFIG.header, method: 'GET'},
     actionName: USER_CONNECTED,
     dispatch
   })
-  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`,
+    url: `${FETCH_CONFIG.mockApiUrl}/user/${user.id}/roles`,
     param: {...FETCH_CONFIG.header, method: 'GET'},
     actionName: USER_ROLE,
     dispatch
 
 export const updateUserLang = newLang => async dispatch => { // unused
   const fetchUpdateUserLang = await fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/user`,
+    url: `${FETCH_CONFIG.mockApiUrl}/user`,
     param: {...FETCH_CONFIG.header, method: 'PATCH', body: JSON.stringify({lang: newLang})},
     actionName: USER_DATA,
     dispatch
 
 export const getWorkspaceList = (userId, workspaceIdToOpen) => async dispatch => {
   const fetchGetWorkspaceList = await fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/user/${userId}/workspace`,
+    url: `${FETCH_CONFIG.mockApiUrl}/user/${userId}/workspace`,
     param: {...FETCH_CONFIG.header, method: 'GET'},
     actionName: WORKSPACE_LIST,
     dispatch
 
 export const getWorkspaceContent = (workspaceId, filterStr) => async dispatch => {
   const fetchGetWorkspaceContent = await fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/workspace/${workspaceId}`,
+    url: `${FETCH_CONFIG.mockApiUrl}/workspace/${workspaceId}`,
     param: {...FETCH_CONFIG.header, method: 'GET'},
     actionName: WORKSPACE,
     dispatch
 
 export const getFolderContent = (workspaceId, folderId) => async dispatch => {
   const fetchGetFolderContent = await fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/workspace/${workspaceId}/folder/${folderId}`,
+    url: `${FETCH_CONFIG.mockApiUrl}/workspace/${workspaceId}/folder/${folderId}`,
     param: {...FETCH_CONFIG.header, method: 'GET'},
     actionName: `${WORKSPACE}/${FOLDER}`,
     dispatch
 
 export const getAppList = () => async dispatch => {
   const fetchGetAppList = await fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/app/config`,
+    url: `${FETCH_CONFIG.mockApiUrl}/app/config`,
     param: {...FETCH_CONFIG.header, method: 'GET'},
     actionName: APP_LIST,
     dispatch

src/action-creator.sync.js

 export const TIMEZONE = 'Timezone'
 export const setTimezone = timezone => ({ type: `Set/${TIMEZONE}`, timezone })
 
+export const FLASH_MESSAGE = 'FlashMessage'
+export const newFlashMessage = (msgText = '', msgType = 'info', msgDelay = 5000) => dispatch => {
+  msgDelay !== 0 && window.setTimeout(() => dispatch(removeFlashMessage(msgText)), msgDelay)
+  return dispatch(addFlashMessage({message: msgText, type: msgType}))
+}
+export const addFlashMessage = msg => ({ type: `Add/${FLASH_MESSAGE}`, msg })
+export const removeFlashMessage = msg => ({ type: `Remove/${FLASH_MESSAGE}`, msg })
+
 export const USER_LOGIN = 'User/Login'
+export const USER_LOGOUT = 'User/Logout'
 export const USER_DATA = 'User/Data'
 export const USER_ROLE = 'User/Role'
 export const USER_CONNECTED = 'User/Connected'
-export const setUserConnected = data => ({ type: `Set/${USER_CONNECTED}`, data })
+export const USER_DISCONNECTED = 'User/Disconnected'
+export const setUserConnected = user => ({ type: `Set/${USER_CONNECTED}`, user })
+export const setUserDisconnected = () => ({ type: `Set/${USER_DISCONNECTED}` })
 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) =>

src/appFactory.js

 export function appFactory (WrappedComponent) {
   return class AppFactory extends React.Component {
     renderApp = (appConfig, user, content) => GLOBAL_renderApp({
-      loggedUser: user.isLoggedIn ? user : {},
+      loggedUser: user.logged ? user : {},
       config: {
         ...appConfig,
-        apiUrl: FETCH_CONFIG.apiUrl
+        apiUrl: FETCH_CONFIG.apiUrl,
+        mockApiUrl: FETCH_CONFIG.mockApiUrl
       },
       content
     })

src/component/FlashMessage.jsx

+import React from 'react'
+import classnames from 'classnames'
+
+const FlashMessage = props => {
+  return (
+    <div className='flashmessage'>
+      {props.flashMessage.length > 0 && (
+        <div className='flashmessage__container card'>
+          <div className={classnames('flashmessage__container__header', props.flashMessage[0].type)} />
+
+          <div className='card-body nopadding'>
+            <div className='flashmessage__container__close'>
+              <div className='flashmessage__container__close__icon' onClick={() => props.removeFlashMessage(props.flashMessage[0].message)}>
+                <i className='fa fa-times' />
+              </div>
+            </div>
+
+            <div className='flashmessage__container__content'>
+              <div className={classnames('flashmessage__container__content__icon', props.flashMessage[0].type)}>
+                <i className='fa fa-times-circle' />
+              </div>
+
+              <div className='flashmessage__container__content__text'>
+                <div className='flashmessage__container__content__text__title'>
+                  {props.t('FlashMessage.error')}
+                </div>
+                <div className='flashmessage__container__content__text__paragraph'>
+                  {props.flashMessage[0].message}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default FlashMessage

src/component/Header/MenuActionListItem/MenuProfil.jsx

 import { PAGE_NAME } from '../../../helper.js'
 
 const MenuProfil = props => {
-  return props.user.isLoggedIn
+  return props.user.logged
     ? (
       <li className='header__menu__rightside__itemprofil'>
-        <div className='header__menu__rightside__itemprofil__profilgroup dropdown'>
+        <div className='profilgroup dropdown'>
           <button className='profilgroup__name btn btn-secondary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
             <img className='profilgroup__name__imgprofil' src={props.user.avatar} alt='avatar' />
             <div className='profilgroup__name__text'>

src/component/HomepageCard/HomepageCard.jsx

-import React, { Component } from 'react'
-import LogoHomepage from '../../img/logoHeader.svg'
-
-class HomepageCard extends Component {
-  render () {
-    return (
-      <div className='card homepagecard'>
-        <div className='card-body homepagecard__body'>
-          <div className='homepagecard__title text-center my-4'>
-            Bienvenue sur Tracim
-          </div>
-          <div className='homepagecard__thanks text-center'>
-            Merci de nous faire confiance et d'utiliser notre outil collaboratif
-          </div>
-          <div className='homepagecard__delimiter delimiter' />
-          <div className='homepagecard__text text-center mb-5'>
-            Vous allez créez votre premier espace de travail
-          </div>
-          <div className='homepagecard__btn btn btn-outline-primary'>
-            Créer votre espace de travail
-          </div>
-          <div className='homepagecard__logo mt-5 mb-3'>
-            <img src={LogoHomepage} alt='logo homepage' />
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default HomepageCard

src/component/Workspace/BtnExtandedAction.jsx

       >
         <i className='fa fa-fw fa-ellipsis-h' />
       </button>
+
       <div className='extandedaction__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>
         <div className='subdropdown__item dropdown-item d-flex align-items-center' onClick={props.onClickExtendedAction.edit}>
           <div className='subdropdown__item__icon mr-3'>

src/component/Workspace/FileItem.jsx → src/component/Workspace/ContentItem.jsx

   })()
 
   return (
-    <div className={classnames('file', 'align-items-center', {'item-last': props.isLast}, props.customClass)} onClick={props.onClickItem}>
-      <div className='file__type'>
+    <div className={classnames('content', 'align-items-center', {'item-last': props.isLast}, props.customClass)} onClick={props.onClickItem}>
+      <div className='content__type'>
         <i className={props.icon} />
       </div>
 
-      <div className='file__name'>
-        <div className='file__name__text'>
+      <div className='content__name'>
+        <div className='content__name__text'>
           { props.name }
         </div>
-
-
-        {/*
-          <div className='file__name__icons d-none d-md-flex'>
-            <div className='file__name__icons__download'>
-              <i className='fa fa-download' />
-            </div>
-            <div className='file__name__icons__archive'>
-              <i className='fa fa-archive' />
-            </div>
-            <div className='file__name__icons__delete'>
-              <i className='fa fa-trash-o' />
-            </div>
-          </div>
-        */ }
       </div>
 
       <div className='d-none d-md-flex'>
         <BtnExtandedAction onClickExtendedAction={props.onClickExtendedAction} />
       </div>
-      <div className={classnames('file__status d-flex align-items-center justify-content-start') + colorStatus}>
-        <div className='file__status__icon d-block '>
+
+      <div className={classnames('content__status d-flex align-items-center justify-content-start') + colorStatus}>
+        <div className='content__status__icon d-block '>
           <i className={iconStatus} />
         </div>
-        <div className='file__status__text d-none d-xl-block'>
+        <div className='content__status__text d-none d-xl-block'>
           {textStatus}
         </div>
       </div>

src/component/Workspace/FileItemHeader.jsx → src/component/Workspace/ContentItemHeader.jsx

 
 const FileItemHeader = props => {
   return (
-    <div className='file__header'>
-      <div className='file__header__type'>
+    <div className='content__header'>
+      <div className='content__header__type'>
         {props.t('FileItemHeader.type')}
       </div>
-      <div className='file__header__name'>
+      <div className='content__header__name'>
         {props.t('FileItemHeader.document_name')}
       </div>
-      <div className='file__header__status'>
+      <div className='content__header__status'>
         {props.t('FileItemHeader.status')}
       </div>
     </div>

src/component/Workspace/FileType/deprecated_folder

+this folder is deprecated.
+content types are handled by respective apps

src/component/Workspace/Folder.jsx

 import { translate } from 'react-i18next'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import FileItem from './FileItem.jsx'
+import FileItem from './ContentItem.jsx'
 // import PopupExtandedAction from '../../container/PopupExtandedAction.jsx'
 import BtnExtandedAction from './BtnExtandedAction.jsx'
 
     } = this.props
 
     return (
-      <div className={classnames('folder', {'active': this.state.open, 'item-last': isLast})}>
+      <div className={classnames('folder', {'active': this.state.open && folderData.content.length > 0, 'item-last': isLast})}>
         <div className='folder__header align-items-center' onClick={this.handleClickToggleFolder}>
 
           <div className='folder__header__triangleborder'>

src/component/common/CardPopup/CardPopup.jsx

+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+require('./CardPopup.styl')
+
+const CardPopup = props => {
+  return (
+    <div className={classnames(props.customClass, 'cardPopup')}>
+      <div className='cardPopup__container'>
+        <div className='cardPopup__header' />
+
+        <div className='nopadding'>
+          <div className='cardPopup__close' onClick={props.onClose}>
+            <i className='fa fa-times' />
+          </div>
+
+          <div className='cardPopup__body'>
+            <div className='cardPopup__body__icon'>
+              <i className={props.icon} />
+            </div>
+
+            <div className='cardPopup__body__text'>
+              <div className='cardPopup__body__text__title'>
+                {props.title}
+              </div>
+              <div className='cardPopup__body__text__message'>
+                {props.message}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CardPopup
+
+CardPopup.propTypes = {
+  customClass: PropTypes.string,
+  title: PropTypes.string,
+  message: PropTypes.string,
+  icon: PropTypes.string,
+  onClose: PropTypes.func
+}
+
+CardPopup.defaultProps = {
+  customClass: 'defaultCustomClass',
+  title: 'Default title',
+  message: 'Default message',
+  icon: 'fa fa-times-circle',
+  onClose: () => {}
+}

src/component/common/CardPopup/CardPopup.styl

+@import '../../../css/Variable.styl'
+
+.cardPopup
+  position fixed
+  display flex
+  justify-content center
+  width 100%
+  z-index 10
+  &__container
+    margin-top 50px
+    border 0
+    border-radius 10px
+    width 800px
+    background lightGrey
+    box-shadow shadow-all
+  &__header
+    border-top-right-radius 10px
+    border-top-left-radius 10px
+    width 100%
+    height 8px
+  &__close
+    display flex
+    justify-content flex-end
+    margin 5px
+    cursor pointer
+  &__body
+    display flex
+    align-items center
+    margin 10px 0 25px 0
+    &__icon
+      padding 0 30px
+      font-size 40px
+    &__text
+      &__title
+        font-size 20px
+        font-weight 600
+      &__message
+        padding-right 20px
+        font-weight 500

src/component/common/Input/InputGroupText.jsx

       </div>
       <input
         type={props.type}
-        className={classnames(`${props.parentClassName}__input`, 'form-control')}
+        className={classnames(`${props.parentClassName}__input`, 'form-control', {'is-invalid': props.isInvalid})}
         placeholder={props.placeHolder}
         value={props.value}
         onChange={props.onChange}
   icon: PropTypes.string,
   placeHolder: PropTypes.string,
   invalidMsg: PropTypes.string,
+  isInvalid: PropTypes.bool,
   onChange: PropTypes.func
 }
 
   icon: false,
   placeHolder: '',
   invalidMsg: false,
+  isInvalid: false,
   onChange: () => {}
 }

src/container/Dashboard.jsx

                         </ul>
                       </div>
                       <div className='dashboard__memberlist__form__submitbtn'>
-                        <button type='submit' className='btn btn-outline-primary'>Valider</button>
+                        <button className='btn btn-outline-primary'>Valider</button>
                       </div>
                     </form>
                   }

src/container/FlashMessage.jsx

-import React, { Component } from 'react'
-
-class FlashMessage extends Component {
-  render() {
-    return(
-      <div className='flashmessage'>
-        <div className='flashmessage__container card'>
-          <div className='flashmessage__container__header' />
-
-          <div className='card-body nopadding'>
-
-            <div className='flashmessage__container__close'>
-              <i className='fa fa-times' />
-            </div>
-
-            <div className='flashmessage__container__content'>
-              <div className='flashmessage__container__content__icon'>
-                <i className='fa fa-times-circle' />
-              </div>
-
-              <div className='flashmessage__container__content__text'>
-                <div className='flashmessage__container__content__text__title'>
-                  Sorry !
-                </div>
-                <div className='flashmessage__container__content__text__paragraph'>
-                  Reprehenderit reprehenderit veniam dolore velit dolor velit in occaecat dolor veniam nisi officia velit consequat amet cupidatat.
-                  Reprehenderit reprehenderit veniam dolore velit dolor velit in occaecat dolor veniam nisi officia velit consequat amet cupidatat.
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default FlashMessage

src/container/Header.jsx

 import React from 'react'
 import { connect } from 'react-redux'
 import i18n from '../i18n.js'
+import { translate } from 'react-i18next'
 import Logo from '../component/Header/Logo.jsx'
 import NavbarToggler from '../component/Header/NavbarToggler.jsx'
 import MenuLinkList from '../component/Header/MenuLinkList.jsx'
 import MenuActionListItemHelp from '../component/Header/MenuActionListItem/Help.jsx'
 import MenuActionListItemMenuProfil from '../component/Header/MenuActionListItem/MenuProfil.jsx'
 import logoHeader from '../img/logo-tracim.png'
-import { setLangActive } from '../action-creator.sync.js'
+import {
+  newFlashMessage,
+  setLangActive,
+  setUserDisconnected
+} from '../action-creator.sync.js'
+import {
+  postUserLogout
+} from '../action-creator.async.js'
 
 class Header extends React.Component {
   handleClickLogo = () => {}
 
   handleClickHelp = () => {}
 
-  handleClickLogout = () => {}
+  handleClickLogout = async () => {
+    const { dispatch, t } = this.props
+
+    const fetchPostUserLogout = await dispatch(postUserLogout())
+    if (fetchPostUserLogout.status === 204) dispatch(setUserDisconnected())
+    else dispatch(newFlashMessage(t('Login.logout_error', 'danger')))
+  }
 
   render () {
     const { lang, user } = this.props
 }
 
 const mapStateToProps = ({ lang, user }) => ({ lang, user })
-export default connect(mapStateToProps)(Header)
+export default connect(mapStateToProps)(translate()(Header))

src/container/Home.jsx

-import React from 'react'
-import { connect } from 'react-redux'
+import React, { Component } from 'react'
+import Card from '../component/common/Card/Card.jsx'
+import CardHeader from '../component/common/Card/CardHeader.jsx'
+import CardBody from '../component/common/Card/CardBody.jsx'
+import LogoHomepage from '../img/logoHeader.svg'
 
-class Home extends React.Component {
+class Home extends Component {
   render () {
-    const { user } = this.props
     return (
-      <div>
-        Home.<br />
-        User logged in : {user.isLoggedIn.toString()}
-      </div>
+      <section className='homepage'>
+        <div className='container-fluid nopadding'>
+          <Card customClass='homepagecard'>
+            <CardHeader /> {/* @TODO fix architecture of this component */}
+            <CardBody customClass='homepagecard'>
+              <div>
+                <div className='homepagecard__title text-center my-4'>
+                  Bienvenue sur Tracim
+                </div>
+                <div className='homepagecard__thanks text-center'>
+                  Merci de nous faire confiance et d'utiliser notre outil collaboratif
+                </div>
+                <div className='homepagecard__delimiter delimiter' />
+                <div className='homepagecard__text text-center mb-5'>
+                  Vous allez créez votre premier espace de travail
+                </div>
+                <div className='homepagecard__btn btn btn-outline-primary'>
+                  Créer votre espace de travail
+                </div>
+                <div className='homepagecard__logo mt-5 mb-3'>
+                  <img src={LogoHomepage} alt='logo homepage' />
+                </div>
+              </div>
+            </CardBody>
+          </Card>
+        </div>
+      </section>
     )
   }
 }
 
-const mapStateToProps = ({ user }) => ({ user })
-export default connect(mapStateToProps)(Home)
+export default Home

src/container/Homepage.jsx

-import React, { Component } from 'react'
-import HomepageCard from '../Component/HomepageCard/HomepageCard.jsx'
-
-class Homepage extends Component {
-  render () {
-    return (
-      <section className='homepage'>
-        <div className='container-fluid nopadding'>
-          <HomepageCard />
-        </div>
-      </section>
-    )
-  }
-}
-
-export default Homepage

src/container/Login.jsx

 import React from 'react'
 import { connect } from 'react-redux'
 import { Redirect } from 'react-router'
+import { translate } from 'react-i18next'
 import LoginLogo from '../component/Login/LoginLogo.jsx'
 import LoginLogoImg from '../img/logoTracimWhite.svg'
-import { userLogin } from '../action-creator.async.js'
+import { postUserLogin } from '../action-creator.async.js'
 import Card from '../component/common/Card/Card.jsx'
 import CardHeader from '../component/common/Card/CardHeader.jsx'
 import CardBody from '../component/common/Card/CardBody.jsx'
 import InputCheckbox from '../component/common/Input/InputCheckbox.jsx'
 import Button from '../component/common/Input/Button.jsx'
 import LoginBtnForgotPw from '../component/Login/LoginBtnForgotPw.jsx'
+import {
+  newFlashMessage,
+  setUserConnected
+} from '../action-creator.sync.js'
+import {PAGE_NAME} from '../helper.js'
 
 class Login extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
-      inputLogin: '',
-      inputPassword: '',
+      inputLogin: {
+        value: '',
+        isInvalid: false
+      },
+      inputPassword: {
+        value: '',
+        isInvalid: false
+      },
       inputRememberMe: false
     }
   }
 
-  handleChangeLogin = e => this.setState({inputLogin: e.target.value})
-  handleChangePassword = e => this.setState({inputPassword: e.target.value})
+  handleChangeLogin = e => this.setState({inputLogin: {...this.state.inputLogin, value: e.target.value}})
+  handleChangePassword = e => this.setState({inputPassword: {...this.state.inputPassword, value: e.target.value}})
   handleChangeRememberMe = () => this.setState(prev => ({inputRememberMe: !prev.inputRememberMe}))
 
   handleClickSubmit = async () => {
-    const { history, dispatch } = this.props
+    const { history, dispatch, t } = this.props
     const { inputLogin, inputPassword, inputRememberMe } = this.state
 
-    await dispatch(userLogin(inputLogin, inputPassword, inputRememberMe))
-    history.push('/')
+    const fetchPostUserLogin = await dispatch(postUserLogin(inputLogin.value, inputPassword.value, inputRememberMe))
+
+    if (fetchPostUserLogin.status === 200) {
+      dispatch(setUserConnected({...fetchPostUserLogin.json, logged: true}))
+      history.push(PAGE_NAME.HOME)
+    } else if (fetchPostUserLogin.status === 400) {
+      dispatch(newFlashMessage(t('Login.fail'), 'danger'))
+    }
   }
 
   render () {
-    if (this.props.user.isLoggedIn) return <Redirect to={{pathname: '/'}} />
+    if (this.props.user.logged) return <Redirect to={{pathname: '/'}} />
     else {
       return (
         <section className='loginpage'>
                         type='email'
                         placeHolder='Adresse Email'
                         invalidMsg='Email invalide.'
-                        value={this.state.inputLogin}
+                        isInvalid={this.state.inputLogin.isInvalid}
+                        value={this.state.inputLogin.value}
                         onChange={this.handleChangeLogin}
                       />
 
                         type='password'
                         placeHolder='Mot de passe'
                         invalidMsg='Mot de passe invalide.'
-                        value={this.state.inputPassword}
+                        isInvalid={this.state.inputPassword.isInvalid}
+                        value={this.state.inputPassword.value}
                         onChange={this.handleChangePassword}
                       />
 
 }
 
 const mapStateToProps = ({ user }) => ({ user })
-export default connect(mapStateToProps)(Login)
+export default connect(mapStateToProps)(translate()(Login))

src/container/PopupCreateContainer.jsx

 import React, { Component } from 'react'
-import GenericContent from '../Component/PopupContent/GenericContent.jsx'
-import FileContent from '../Component/PopupContent/FileContent.jsx'
-import WksContent from '../Component/PopupContent/WksContent.jsx'
+// import GenericContent from '../component/PopupContent/GenericContent.jsx'
+// import FileContent from '../component/PopupContent/FileContent.jsx'
+// import WksContent from '../component/PopupContent/WksContent.jsx'
 
 class PopupCreateContainer extends Component {
   render () {
         <div className='popupcontent__container card'>
           <div className='popupcontent__container__header' />
           <div className='card-body nopadding'>
-            <FileContent />
+            <div className='filecontent p-3'>
+              <div className='filecontent__close d-flex justify-content-end'>
+                <i className='fa fa-times' />
+              </div>
+              <div className='filecontent__contentname d-flex align-items-center mb-4'>
+                <div className='filecontent__contentname__icon mr-3'>
+                  <i className='fa fa-file-text-o' />
+                </div>
+                <div className='filecontent__contentname__title'>
+                  Fichier de prévisualisation
+                </div>
+              </div>
+
+              <div className='filecontent__text'>Importer votre fichier :</div>
+              <div className='filecontent__form mb-4' drop='true'>
+                <div className='filecontent__form__icon d-flex justify-content-center'>
+                  <label htmlFor='filecontentUpload' type='file'>
+                    <i className='fa fa-download' />
+                  </label>
+                  <input type='file' className='d-none' id='filecontentUpload' />
+                </div>
+                <div className='filecontent__form__instruction text-center'>
+                  Glisser votre fichier ici
+                </div>
+                <div className='filecontent__form__text text-center'>
+                  Vous pouvez également importer votre fichier en cliquant sur l'icon
+                </div>
+              </div>
+              <div className='filecontent__button d-flex justify-content-end'>
+                <button className='filecontent__form__button btn btn-outline-primary'>
+                  Créer et Valider
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>

src/container/PrivateRoute.jsx

 // /!\ you shall destruct props.component otherwise you get a warning:
 // "You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored
 const PrivateRoute = ({ component: Component, ...rest }) => (
-  <Route {...rest} render={props => rest.user.isLoggedIn
+  <Route {...rest} render={props => rest.user.logged
     ? <Component {...props} />
     : <Redirect to={{pathname: '/login', state: {from: props.location}}} />
   } />
 PrivateRoute.propTypes = {
   component: PropTypes.func.isRequired,
   user: PropTypes.shape({ // user is get with redux connect
-    isLoggedIn: PropTypes.bool.isRequired
+    logged: PropTypes.bool.isRequired
   })
 }

src/container/Sidebar.jsx

 
     return (
       <div className={classnames('sidebar', {'sidebarclose': sidebarClose})}>
-        <div className='sidebar__expand' onClick={this.handleClickToggleSidebar}>
-          <i className={classnames('fa fa-chevron-left', {'fa-chevron-right': sidebarClose, 'fa-chevron-left': !sidebarClose})} />
-        </div>
-
         <div className='sidebarSticky'>
+          <div className='sidebar__expand' onClick={this.handleClickToggleSidebar}>
+            <i className={classnames('fa fa-chevron-left', {'fa-chevron-right': sidebarClose, 'fa-chevron-left': !sidebarClose})} />
+          </div>
+
           <nav className='sidebar__navigation'>
             <ul className='sidebar__navigation__workspace'>
               { workspaceList.map((ws, i) =>

src/container/Tracim.jsx

 import React from 'react'
 import { connect } from 'react-redux'
+import { translate } from 'react-i18next'
 import Footer from '../component/Footer.jsx'
 import Header from './Header.jsx'
 import Login from './Login.jsx'
 import Dashboard from './Dashboard.jsx'
 import Account from './Account.jsx'
-// import FlashMessage from './FlashMessage.jsx'
+import FlashMessage from '../component/FlashMessage.jsx'
 import WorkspaceContent from './WorkspaceContent.jsx'
+import WIPcomponent from './WIPcomponent.jsx'
 import {
   Route,
   withRouter
 import { PAGE_NAME } from '../helper.js'
 import {
   getLangList,
-  getIsUserConnected
+  getUserIsConnected
 } from '../action-creator.async.js'
+import {
+  removeFlashMessage,
+  setUserConnected
+} from '../action-creator.sync.js'
 
 class Tracim extends React.Component {
-  componentDidMount () {
-    this.props.dispatch(getIsUserConnected())
-    this.props.dispatch(getLangList())
+  async componentDidMount () {
+    const { dispatch } = this.props
+
+    dispatch(getLangList())
+
+    const fetchGetUserIsConnected = await dispatch(getUserIsConnected())
+    switch (fetchGetUserIsConnected.status) {
+      case 200:
+        dispatch(setUserConnected({...fetchGetUserIsConnected.json, logged: true})); break
+      case 401:
+        dispatch(setUserConnected({logged: false})); break
+      default:
+        dispatch(setUserConnected({logged: undefined})); break
+    }
   }
 
+  handleRemoveFlashMessage = msg => this.props.dispatch(removeFlashMessage(msg))
+
   render () {
-    const { user } = this.props
+    const { flashMessage, user, t } = this.props
 
     return (
       <div className='tracim'>
         <Header />
+        <FlashMessage flashMessage={flashMessage} removeFlashMessage={this.handleRemoveFlashMessage} t={t} />
 
-        { user.isLoggedIn === undefined
+        { user.logged === undefined
           ? (<div />) // while we dont know if user is connected, display nothing but the header @TODO show loader
           : (
             <div className='tracim__content'>
               <PrivateRoute path={`${PAGE_NAME.WS_CONTENT}/:idws/:filter?`} component={WorkspaceContent} />
               <PrivateRoute exact path={PAGE_NAME.ACCOUNT} component={Account} />
               <PrivateRoute exact path={PAGE_NAME.DASHBOARD} component={Dashboard} />
+              <PrivateRoute path={'/wip/:cp'} component={WIPcomponent} /> {/* for testing purpose only */}
 
               <Footer />
             </div>
   }
 }
 
-const mapStateToProps = ({ user }) => ({ user })
-export default withRouter(connect(mapStateToProps)(Tracim))
+const mapStateToProps = ({ flashMessage, user }) => ({ flashMessage, user })
+export default withRouter(connect(mapStateToProps)(translate()(Tracim)))

src/container/WIPcomponent.jsx

+import React from 'react'
+import { connect } from 'react-redux'
+import PopupCreateContainer from './PopupCreateContainer.jsx'
+import ProgressBar from './ProgressBar.jsx'
+import Home from './Home.jsx'
+import CardPopup from '../component/common/CardPopup/CardPopup.jsx'
+
+export class WIPcomponent extends React.Component {
+  render () {
+    const MyComponent = {
+      PopupCreateContainer,
+      ProgressBar,
+      Home,
+      CardPopup
+    }
+
+    // this.props.dispatch(newFlashMessage('TEST', 'info', 0))
+
+    const ComponentToDisplay = MyComponent[this.props.match.params.cp]
+
+    return (
+      <div>
+        <ComponentToDisplay />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = () => ({})
+export default connect(mapStateToProps)(WIPcomponent)

src/container/WorkspaceContent.jsx

 import appFactory from '../appFactory.js'
 import Sidebar from './Sidebar.jsx'
 import Folder from '../component/Workspace/Folder.jsx'
-import FileItem from '../component/Workspace/FileItem.jsx'
-import FileItemHeader from '../component/Workspace/FileItemHeader.jsx'
+import ContentItem from '../component/Workspace/ContentItem.jsx'
+import ContentItemHeader from '../component/Workspace/ContentItemHeader.jsx'
 import PageWrapper from '../component/common/layout/PageWrapper.jsx'
 import PageTitle from '../component/common/layout/PageTitle.jsx'
 import PageContent from '../component/common/layout/PageContent.jsx'
     ? contentList
     : contentList.filter(c => c.type === 'folder' || filter.includes(c.type)) // keep unfiltered files and folders
       .map(c => c.type !== 'folder' ? c : {...c, content: this.filterWorkspaceContent(c.content, filter)}) // recursively filter folder content
-      .filter(c => c.type !== 'folder' || c.content.length > 0) // remove empty folder
+      // .filter(c => c.type !== 'folder' || c.content.length > 0) // remove empty folder => 2018/05/21 - since we load only one lvl of content, don't remove empty folders
 
   render () {
     const { workspace, app } = this.props
 
           <PageContent parentClass='workspace__content'>
             <div className='workspace__content__fileandfolder folder__content active'>
-              <FileItemHeader />
+              <ContentItemHeader />
 
               { filteredWorkspaceContent.map((c, i) => c.type === 'folder'
                 ? (
                   />
                 )
                 : (
-                  <FileItem
+                  <ContentItem
                     name={c.title}
                     type={c.type}
                     icon={(app[c.type] || {icon: ''}).icon}

src/css/FileItem.styl → src/css/ContentItem.styl

 .outdateColor
   color outdateColor
 
-.file
+.content
   display flex
   align-items center
   padding 10px 0
 
 
 @media (min-width: max-xs) and (max-width: max-lg)
-  .file
+  .content
     border-right 1px solid grey
     &__name__icons
         margin-top 5px

src/css/FileItemHeader.styl → src/css/ContentItemHeader.styl

-.file__header
+.content__header
   display flex
   font-size 17px
   &__type

src/css/File.styl

+// @Côme - this file is deprecated as its associated jsx file is deprecated
 .wsFileFile
   width 1200px
   height calc(100% - 85px)

src/css/FlashMessage.styl

   display flex
   justify-content center
   width 100%
-  z-index 3
+  z-index 10
   &__container
-    margin-top 120px
+    margin-top 50px
     border 0
     border-radius 10px
     width 800px
       border-top-left-radius 10px
       width 100%
       height 8px
-      background-color calendar
+      &.success
+        background-color success
+      &.info
+        background-color info
+      &.danger
+        background-color danger
     &__close
       display flex
       justify-content flex-end
       margin 5px
-      cursor pointer
+      &__icon
+        padding-right 10px
+        cursor pointer
     &__content
       display flex
       align-items center
-      margin 10px 0 35px 0
+      margin 10px 0 25px 0
       &__icon
         padding 0 30px
-        font-size 60px
-        color calendar
+        font-size 40px
+        &.success
+          color success
+        &.info
+          color info
+        &.danger
+          color danger
       &__text
         &__title
-          margin-bottom 10px
           font-size 20px
           font-weight 600
           color calendar

src/css/Folder.styl

 border-style = 1px solid secondColor
 .folder__header
   border border-style
-.folder + .file, .file + .file
+.folder + .content, .content + .content
   border-bottom 0
-.folder__content > .file, .folder__content > .folder
+.folder__content > .content, .folder__content > .folder
   border-bottom 0
 .folder:not(.active).item-last
   border-bottom border-style
-.file
+.content
   border border-style
   &.item-last
     border-bottom border-style

src/css/Generic.styl

     cursor pointer
     .setting__link
       padding 10px
+      cursor pointer
 
 .fa-file-image-o
   color previewColor

src/css/Header.styl

           .btnquestion__icon
             color darkGrey
       &__itemprofil
-        &__profilgroup
-          .profilgroup__name
+        .profilgroup
+          &__name
             border 0
             padding 0 5px
             background-color transparent
+            cursor pointer
             &:hover
               background-color lightGrey
             &:focus
               vertical-align middle
               margin-right 10px
               color darkGrey
-          .profilgroup__sub
+          &__sub
             color darkGrey
             cursor pointer
             &:focus
               box-shadow none
-          .profilgroup__setting
+          &__setting
             padding 0
             left inherit
             right 0
+            cursor pointer
             .dropdown-item
               color fontColor
             &__link

src/css/Variable.styl

 cancelColor = red
 outdateColor = grey
 
+/** Flash Message Color **/
+success = #30ce4e
+info = #0094bc
+danger = #e81a32
+
 /*************************/
 /**** BOX SHADOW ****/
 shadow-bottom = 0px 0px 5px 1px #606060

src/css/index.styl

 @import 'Login.styl'
 @import 'Workspace.styl'
 
-@import 'FileItem.styl'
-@import 'FileItemHeader.styl'
+@import 'ContentItem.styl'
+@import 'ContentItemHeader.styl'
 @import 'Folder.styl'
 
 @import 'File.styl'

src/helper.js

 export const FETCH_CONFIG = {
-  header: {
+  headers: {
     'Accept': 'application/json',
     'Content-Type': 'application/json'
   },
-  apiUrl: 'http://localhost:3001'
+  apiUrl: 'http://localhost:6543/api/v2',
+  mockApiUrl: 'http://localhost:3001'
 }
 
 export const PAGE_NAME = {

src/index.js

 
 ReactDOM.render(
   <Provider store={store}>
-    <BrowserRouter>
+    <BrowserRouter basename={'/#'}>
       <I18nextProvider i18n={i18n}>
         <Tracim />
       </I18nextProvider>

src/reducer/flashMessage.js

+import {
+  FLASH_MESSAGE
+} from '../action-creator.sync.js'
+
+export default function flashMessage (state = [], action) {
+  switch (action.type) {
+    case `Add/${FLASH_MESSAGE}`:
+      return [...state, {
+        message: action.msg.message,
+        type: action.msg.type || 'info' // may be info, success, danger
+      }]
+
+    case `Remove/${FLASH_MESSAGE}`:
+      return state.filter(fm => fm.message === action.message)
+
+    default:
+      return state
+  }
+}

src/reducer/root.js

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

src/reducer/user.js

 import {
   USER_CONNECTED,
+  USER_DISCONNECTED,
   USER_DATA
 } from '../action-creator.sync.js'
 
-const serializeUser = data => ({
-  id: data.user.id,
-  isLoggedIn: data.logged,
-  username: data.user.username,
-  firstname: data.user.firstname,
-  lastname: data.user.lastname,
-  email: data.user.email,
-  avatar: data.user.avatar,
-  role: data.user.role,
-  job: data.user.job,
-  company: data.user.company,
-  caldavUrl: data.user.caldav_url
-})
-
 const defaultUser = {
-  id: -1,
-  isLoggedIn: undefined, // undefined means the api (/is_logged_in) has not responded yet
-  username: '',
-  firstname: '',
-  lastname: '',
+  user_id: -1,
+  logged: undefined, // undefined avoid to be redirected to /login while whoami ep has not responded yet
+  timezone: '',
+  profile: {
+    id: 1,
+    slug: 'user'
+  },
   email: '',
-  avatar: ''
+  is_active: true,
+  caldav_url: null,
+  avatar_url: null,
+  created: '',
+  display_name: ''
 }
 
 export default function user (state = defaultUser, action) {
   switch (action.type) {
     case `Set/${USER_CONNECTED}`:
-      return action.data.logged
-        ? serializeUser(action.data)
-        : {...defaultUser, isLoggedIn: false}
+      return action.user
+
+    case `Set/${USER_DISCONNECTED}`:
+      return defaultUser
 
     case `Update/${USER_DATA}`:
       return {...state, ...action.data}

src/translate/en.js

       marketing_msg: 'Create your own collaborative workspaces on trac.im',
       copyright: 'Copyright 2013 - 2017'
     },
+    FlashMessage: {
+      error: 'Error'
+    },
+    Login: {
+      fail: 'Unknown email or password',
+      logout_error: 'Disconnection error'
+    },
     FileItemHeader: {
       type: 'Type',
       document_name: "Document's name",

src/translate/fr.js

       marketing_msg: 'Créer votre propre espace de travail collaboratif sur trac.im',
       copyright: 'Copyright 2013 - 2017'
     },
+    FlashMessage: {
+      error: 'Erreur'
+    },
+    Login: {
+      fail: 'Email ou mot de passe inconnu.',
+      logout_error: 'Erreur de déconnexion.'
+    },
     FileItemHeader: {
       type: 'Type',
       document_name: 'Nom du document',