connected login and logout on real api + integration of flash messages

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",

src/action-creator.async.js

   LANG,
   updateLangList,
   USER_LOGIN,
+  USER_LOGOUT,
   USER_DATA,
   USER_ROLE,
   USER_CONNECTED,
-  setUserConnected,
   updateUserData,
   setUserRole,
   WORKSPACE,
 }
 
 export const postUserLogin = (login, password, rememberMe) => async dispatch => {
-  const fetchUserLogin = await fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/sessions/login`,
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.mockApiUrl}/sessions/login`,
     param: {
       headers: {...FETCH_CONFIG.headers},
       method: 'POST',
       body: JSON.stringify({
         email: login,
-        password: password
-        // remember_me: rememberMe
+        password: password,
+        remember_me: rememberMe
       })
     },
     actionName: USER_LOGIN,
     dispatch
   })
-  if (fetchUserLogin.status === 200) dispatch(setUserConnected(fetchUserLogin.json))
+}
+
+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 => {
-  const fetchUserLogged = await fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/sessions/whoami`,
+  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))
-  else if (fetchUserLogged.status === 401) dispatch(setUserConnected({logged: false}))
-  else dispatch(setUserConnected({logged: undefined}))
 }
 
 export const getUserRole = user => async 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

src/container/FlashMessage.jsx → src/component/FlashMessage.jsx

-import React, { Component } from 'react'
+import React from 'react'
+import classnames from 'classnames'
 
-class FlashMessage extends Component {
-  render() {
-    return(
-      <div className='flashmessage'>
+const FlashMessage = props => {
+  return (
+    <div className='flashmessage'>
+      {props.flashMessage.length > 0 && (
         <div className='flashmessage__container card'>
-          <div className='flashmessage__container__header' />
+          <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' onClick={() => props.removeFlashMessage(props.flashMessage[0].message)}>
               <i className='fa fa-times' />
             </div>
 
             <div className='flashmessage__container__content'>
-              <div className='flashmessage__container__content__icon'>
+              <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'>
-                  Sorry !
+                  {props.t('FlashMessage.error')}
                 </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.
+                  {props.flashMessage[0].message}
                 </div>
               </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/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/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

     return (
       <div>
         Home.<br />
-        User logged in : {user.isLoggedIn.toString()}
+        User logged in : {user.logged.toString()}
       </div>
     )
   }

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 { postUserLogin } from '../action-creator.async.js'
 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(postUserLogin(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/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/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 {
   Route,
   getLangList,
   getUserIsConnected
 } from '../action-creator.async.js'
+import {
+  removeFlashMessage, setUserConnected
+} from '../action-creator.sync.js'
 
 class Tracim extends React.Component {
-  componentDidMount () {
-    this.props.dispatch(getUserIsConnected())
-    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'>
   }
 }
 
-const mapStateToProps = ({ user }) => ({ user })
-export default withRouter(connect(mapStateToProps)(Tracim))
+const mapStateToProps = ({ flashMessage, user }) => ({ flashMessage, user })
+export default withRouter(connect(mapStateToProps)(translate()(Tracim)))

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
     &__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/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/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: false,
+  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',