Mock login and show possible errors

src/components/PageLayout/PageLayout.js

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
 import Helmet from 'react-helmet';
 import { Topbar } from '../../containers';
 
@@ -17,10 +18,13 @@ class PageLayout extends Component {
   }
 
   render() {
-    const { className, title, children } = this.props;
+    const { className, title, children, loginError, logoutError } = this.props;
+    // TODO: use FlashMessages for loginError/logoutError
     return (
       <div className={className}>
         <Helmet title={title} />
+        {loginError ? <p style={{ color: 'red' }}>Error in login: {loginError}</p> : null}
+        {logoutError ? <p style={{ color: 'red' }}>Error in logout: {logoutError}</p> : null}
         <Topbar />
         <h1>{title}</h1>
         {children}
@@ -33,8 +37,19 @@ const { any, object, string } = PropTypes;
 
 PageLayout.contextTypes = { history: object };
 
-PageLayout.defaultProps = { className: '', children: null };
+PageLayout.defaultProps = { className: '', children: null, loginError: '', logoutError: '' };
 
-PageLayout.propTypes = { className: string, title: string.isRequired, children: any };
+PageLayout.propTypes = {
+  className: string,
+  title: string.isRequired,
+  children: any,
+  loginError: string,
+  logoutError: string,
+};
 
-export default PageLayout;
+const mapStateToProps = state => ({
+  loginError: state.Auth.loginError,
+  logoutError: state.Auth.logoutError,
+});
+
+export default connect(mapStateToProps)(PageLayout);

src/ducks/Auth.ducks.js

@@ -30,13 +30,26 @@ export default function reducer(state = initialState, action = {}) {
     case LOGIN:
       return { ...state, loginInProgress: true };
     case LOGIN_SUCCESS:
-      return { ...state, loginInProgress: false, isAuthenticated: true, user: payload };
+      return {
+        ...state,
+        loginInProgress: false,
+        isAuthenticated: true,
+        user: payload,
+        loginError: null,
+        logoutError: null,
+      };
     case LOGIN_FAILURE:
-      return { ...state, loginInProgress: false, loginError: payload };
+      return { ...state, loginInProgress: false, loginError: payload.message };
     case LOGOUT:
       return { ...state, logoutInProgress: true };
     case LOGOUT_SUCCESS:
-      return { ...state, logoutInProgress: false, isAuthenticated: false, user: null };
+      return {
+        ...state,
+        logoutInProgress: false,
+        isAuthenticated: false,
+        user: null,
+        logoutError: null,
+      };
     case LOGOUT_FAILURE:
       return { ...state, logoutInProgress: false, logoutError: payload };
     default:
@@ -59,7 +72,11 @@ export const logoutFailure = error => ({ type: LOGOUT_FAILURE, payload: error, e
 function* callLogin(action) {
   const { payload } = action;
   yield call(delay, 1000);
-  yield put(loginSuccess(payload));
+  if (payload.email === 'me@example.com' && payload.password) {
+    yield put(loginSuccess(payload));
+  } else {
+    yield put(loginFailure(new Error('Invalid credentials')));
+  }
 }
 
 function* callLogout() {