Issue #19 - When you log in (successfully) the login window remains open (also when you log out)

birdofpreyru · birdofpreyru · commit 6575e740f401 · 2017-01-05T00:31:54.000+01:00
Fixes #19
diff --git a/src/api/User.js b/src/api/User.js
@@ -24,7 +24,6 @@ class UserApi {
 
   login(email, password) {
     const url = `${this.basePath}/api/v1/login`;
-
     return reqwest({
       url,
       method: 'post',
diff --git a/src/containers/HeaderContainer.js b/src/containers/HeaderContainer.js
@@ -1,6 +1,6 @@
 import Header from 'components/Header';
 import {asyncConnect} from 'redux-connect';
-import {actions, toggleNotification, loginAction, logoutAction} from '../store/modules/global';
+import {actions, toggleNotification, logoutAction} from '../store/modules/global';
 
 const resolve = [{
   promise: () => Promise.resolve(),
diff --git a/src/routes/Home/components/LoginModal/LoginModal.jsx b/src/routes/Home/components/LoginModal/LoginModal.jsx
@@ -76,17 +76,6 @@ class LogInModal extends React.Component {
     this.setState({modalLoginIsOpen: true});
   }
 
-  handleLogin(handleLoggedIn, loggedUser) {
-    const _self = this;
-    setTimeout(() => {
-      handleLoggedIn();
-      if (loggedUser) {
-        _self.setState({modalLoginIsOpen: false});
-        _self.setState({modalSignupIsOpen: false});
-      }
-    }, 100);
-  }
-
   forgetPassword() {
     this.setState({showForgetPassword: true});
   }
@@ -133,7 +122,7 @@ class LogInModal extends React.Component {
 
   render() {
     const _self = this;
-    const {handleSubmit, fields, handleLoggedIn, loggedUser, hasError, errorText} = this.props;
+    const {handleSubmit, fields, hasError, errorText} = this.props;
     return (
       <div styleName="signin-modal">
         <div styleName="login-signup">
@@ -154,7 +143,7 @@ class LogInModal extends React.Component {
             {this.state.showForgetPassword === true && <div styleName="title">Reset forgotten password</div>}
           </div>
           {this.state.showForgetPassword === false &&
-            <form styleName="login-form" onSubmit={handleSubmit}>
+            <form styleName="login-form">
               <div styleName="login-with-fb">
                 <a href="javascript:;" onClick={this.facebookLogin.bind(this)}>
                   <i styleName="icon-facebook" />
@@ -176,7 +165,7 @@ class LogInModal extends React.Component {
               </div>
               {/* or end */}
               <div>
-                {hasError && <span className="error-msg">{errorText.error}</span>}
+                {hasError && <span className="error-msg">{errorText}</span>}
                 <div styleName="email-input">
                   <FormField {...fields.email}>
                     <TextField {...fields.email} login type="email" label="Email" />
@@ -203,8 +192,9 @@ class LogInModal extends React.Component {
               </div>
               <div styleName="login-btn">
                 <Button
-                  type="submit" color="black"
-                  className={styles.btnLogin} onClick={() => this.handleLogin(handleLoggedIn, loggedUser)}
+                  color="black"
+                  className={styles.btnLogin}
+                  onClick={handleSubmit(this.props.loginAction)}
                 >
                   Log In
                 </Button>
@@ -217,7 +207,7 @@ class LogInModal extends React.Component {
           { this.state.showForgetPassword === true &&
             <form styleName="login-form" onSubmit={handleSubmit((data) => _self.handleForgetPassword(data))}>
               <div>
-                {hasError && <span className="error-msg">{errorText.error}</span>}
+                {hasError && <span className="error-msg">{errorText}</span>}
                 <div styleName="email-input">
                   <FormField {...fields.emailUp}>
                     <TextField {...fields.emailUp} login type="email" label="Email" />
@@ -238,10 +228,9 @@ class LogInModal extends React.Component {
 }
 
 LogInModal.propTypes = {
-  handleSubmit: PropTypes.func.isRequired,
+  handleSubmit: PropTypes.func,
   fields: PropTypes.object,
-  handleLoggedIn: PropTypes.func.isRequired,
-  loggedUser: PropTypes.bool,
+  loginAction: PropTypes.func.isRequired,
   hasError: PropTypes.bool,
   errorText: PropTypes.string,
 };
diff --git a/src/routes/Home/components/SignupModal/SignupModal.jsx b/src/routes/Home/components/SignupModal/SignupModal.jsx
@@ -3,7 +3,6 @@ import CSSModules from 'react-css-modules';
 import {reduxForm} from 'redux-form';
 import cn from 'classnames';
 import Modal from 'react-modal';
-import Select from 'components/Select';
 import Button from 'components/Button';
 import TextField from 'components/TextField';
 import styles from './SignupModal.scss';
@@ -152,7 +151,7 @@ class SignupModal extends React.Component {
             </div>
             {/* or end */}
             <div>
-              {hasError && <span className="error-msg">{errorText.error}</span>}
+              {hasError && <span className="error-msg">{errorText}</span>}
               <div styleName="email-input">
                 <FormField {...fields.email}>
                   <TextField {...fields.email} login type="email" label="Email" />
diff --git a/src/routes/Home/containers/LoginModalContainer.js b/src/routes/Home/containers/LoginModalContainer.js
@@ -1,11 +1,9 @@
 import {connect} from 'react-redux';
-import {sendLoginRequest, loginAction} from '../../../store/modules/global';
+import {loginAction} from '../../../store/modules/global';
 import LogInModal from '../components/LoginModal';
 
-const mapState = (state) => ({...state.global, onSubmit: sendLoginRequest});
+const mapState = (state) => ({...state.global});
 
-const mapDispatchToProps = (dispatch) => ({
-  handleLoggedIn: (value) => dispatch(loginAction(value)),
-});
-
-export default connect(mapState, mapDispatchToProps)(LogInModal);
+export default connect(mapState, {
+  loginAction,
+})(LogInModal);
diff --git a/src/routes/Home/containers/SignupModalContainer.js b/src/routes/Home/containers/SignupModalContainer.js
@@ -3,7 +3,7 @@ import {sendSignupRequest, signupAction} from '../../../store/modules/global';
 
 import SignupModal from '../components/SignupModal';
 
-const mapState = (state) => ({...state.global, onSubmit: sendSignupRequest,});
+const mapState = (state) => ({...state.global, onSubmit: sendSignupRequest});
 
 const mapDispatchToProps = (dispatch) => ({
   handleSigned: (value) => dispatch(signupAction(value)),
diff --git a/src/store/modules/global.js b/src/store/modules/global.js
@@ -10,12 +10,26 @@ const userApi = new UserApi(config.api.basePath);
 //------------------------------------------------------------------------------
 // Constants
 
+const LOGIN_ACTION_FAILURE = 'LOGIN_ACTION_FAILURE';
+const LOGIN_ACTION_SUCCESS = 'LOGIN_ACTION_SUCCESS';
+
+const LOGIN_REDIRECT = {
+  admin: '/admin',
+  consumer: '/browse-provider',
+  pilot: '/pilot',
+  provider: '/dashboard',
+};
+
 const LOGOUT_ACTION = 'LOGOUT_ACTION';
 const USER_INFO_KEY = 'userInfo';
 
 // ------------------------------------
 // Actions
 // ------------------------------------
+
+// TODO: Any use of these local variables should be eliminated!
+// Their current usage should be entirely replaced using the redux state,
+// and action payloads!
 let isLogged = false;
 let hasError = false;
 let errorText = '';
@@ -30,29 +44,6 @@ function loadUserInfo() {
   return userInfo;
 }
 
-export const sendLoginRequest = (values) => new Promise((resolve) => {
-  userApi.login(values.email, values.password).then((authResult) => {
-    isLogged = true;
-    hasError = false;
-    userInfo = authResult;
-    localStorage.setItem(USER_INFO_KEY, JSON.stringify(authResult));
-    if (authResult.user.role === 'consumer') {
-      browserHistory.push('/browse-provider');
-    } else if (authResult.user.role === 'provider') {
-      browserHistory.push('/dashboard');
-    } else if (authResult.user.role === 'admin') {
-      browserHistory.push('/admin');
-    } else if (authResult.user.role === 'pilot') {
-      browserHistory.push('/pilot');
-    }
-  }).catch((err) => {
-    isLogged = false;
-    hasError = true;
-    errorText = JSON.parse(err.responseText);
-  });
-  resolve();
-});
-
 export const sendSignupRequest = (values) => new Promise((resolve) => {
   userApi.register(values.firstName, values.lastName, values.email, values.password).then(() => {
     isLogged = true;
@@ -68,14 +59,25 @@ export const sendSignupRequest = (values) => new Promise((resolve) => {
 
 export const toggleNotification = createAction('TOGGLE_NOTIFICATION');
 
-export const loginAction = createAction('LOGIN_ACTION');
+export const loginAction = (data) => (dispatch) => {
+  userApi.login(data.email, data.password).then((res) => {
+    localStorage.setItem(USER_INFO_KEY, JSON.stringify(res));
+    dispatch({type: LOGIN_ACTION_SUCCESS});
+    browserHistory.push(LOGIN_REDIRECT[res.user.role]);
+  }).catch((failure) => {
+    dispatch({
+      type: LOGIN_ACTION_FAILURE,
+      payload: JSON.parse(failure.response).error,
+    });
+  });
+};
 
-export const logoutAction = () => dispatch => {
+export const logoutAction = () => (dispatch) => {
   browserHistory.push('/home');
   dispatch({
-    type: LOGOUT_ACTION
+    type: LOGOUT_ACTION,
   });
-}
+};
 
 export const signupAction = createAction('SIGNUP_ACTION');
 
@@ -90,8 +92,19 @@ export default handleActions({
   [toggleNotification]: (state, action) => ({
     ...state, toggleNotif: action.payload,
   }),
-  [loginAction]: (state) => ({
-    ...state, loggedUser: isLogged, hasError, errorText, user: (loadUserInfo() ? loadUserInfo().user : {}),
+  [LOGIN_ACTION_FAILURE]: (state, action) => ({
+    ...state,
+    loggedUser: false,
+    hasError: true,
+    errorText: action.payload,
+    user: {},
+  }),
+  [LOGIN_ACTION_SUCCESS]: (state) => ({
+    ...state,
+    loggedUser: true,
+    hasError: false,
+    errorText: '',
+    user: (loadUserInfo() ? loadUserInfo().user : {}),
   }),
   [LOGOUT_ACTION]: (state) => {
     localStorage.removeItem(USER_INFO_KEY);
