add login error for invalid username or password

client/constants.js

@@ -21,7 +21,6 @@ export const INDENT_WITH_TAB = 'INDENT_WITH_TAB';
 
 export const AUTH_USER = 'AUTH_USER';
 export const UNAUTH_USER = 'UNAUTH_USER';
-
 export const AUTH_ERROR = 'AUTH_ERROR';
 
 export const SET_PROJECT_NAME = 'SET_PROJECT_NAME';

client/modules/User/actions.js

@@ -25,17 +25,53 @@ export function signUpUser(formValues) {
   };
 }
 
+// export function loginUser(formValues) {
+//   return (dispatch) => {
+//     axios.post(`${ROOT_URL}/login`, formValues, { withCredentials: true })
+//       .then(response => {
+//         dispatch({ type: ActionTypes.AUTH_USER,
+//                     user: response.data
+//         });
+//         browserHistory.push('/');
+//       })
+//       .catch(response => {
+//         return Promise.reject({ email: response.data.message, _error: 'Login failed!' });
+//       });
+//   };
+// }
+
 export function loginUser(formValues) {
-  return (dispatch) => {
-    axios.post(`${ROOT_URL}/login`, formValues, { withCredentials: true })
+  return axios.post(`${ROOT_URL}/login`, formValues, { withCredentials: true });
+}
+
+export function loginUserSuccess(user) {
+  return {
+    type: ActionTypes.AUTH_USER,
+    user
+  };
+}
+
+export function loginUserFailure(error) {
+  return {
+    type: ActionTypes.AUTH_ERROR,
+    error
+  };
+}
+
+export function validateAndLoginUser(formProps, dispatch) {
+  return new Promise((resolve, reject) => {
+    loginUser(formProps)
       .then(response => {
         dispatch({ type: ActionTypes.AUTH_USER,
-                    user: response.data
+                  user: response.data
         });
         browserHistory.push('/');
+        resolve();
       })
-      .catch(response => dispatch(authError(response.data.error)));
-  };
+      .catch(response => {
+        reject({ email: response.data.message, _error: 'Login failed!' });
+      });
+  });
 }
 
 export function getUser() {

client/modules/User/components/LoginForm.js

@@ -1,9 +1,9 @@
 import React, { PropTypes } from 'react';
 
 function LoginForm(props) {
-  const { fields: { email, password }, handleSubmit } = props;
+  const { fields: { email, password }, handleSubmit, submitting, invalid, pristine } = props;
   return (
-    <form className="login-form" onSubmit={handleSubmit(props.loginUser.bind(this))}>
+    <form className="login-form" onSubmit={handleSubmit(props.validateAndLoginUser.bind(this))}>
       <p className="login-form__field">
         <input
           className="login-form__email-input"
@@ -12,6 +12,7 @@ function LoginForm(props) {
           placeholder="Email"
           {...email}
         />
+        {email.touched && email.error && <span className="form-error">{email.error}</span>}
       </p>
       <p className="login-form__field">
         <input
@@ -21,8 +22,9 @@ function LoginForm(props) {
           placeholder="Password"
           {...password}
         />
+        {password.touched && password.error && <span className="form-error">{password.error}</span>}
       </p>
-      <input type="submit" value="Login" aria-label="login" />
+      <input type="submit" disabled={submitting || invalid || pristine} value="Login" aria-label="login" />
     </form>
   );
 }
@@ -33,7 +35,10 @@ LoginForm.propTypes = {
     password: PropTypes.string.isRequired
   }).isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  loginUser: PropTypes.func.isRequired
+  validateAndLoginUser: PropTypes.func.isRequired,
+  submitting: PropTypes.bool,
+  invalid: PropTypes.bool,
+  pristine: PropTypes.bool
 };
 
 export default LoginForm;

client/modules/User/pages/LoginView.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { bindActionCreators } from 'redux';
 import { reduxForm } from 'redux-form';
-import * as UserActions from '../actions';
+import { validateAndLoginUser } from '../actions';
 import LoginForm from '../components/LoginForm';
 import GithubButton from '../components/GithubButton';
 
@@ -23,8 +22,10 @@ function mapStateToProps(state) {
   };
 }
 
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(UserActions, dispatch);
+function mapDispatchToProps() {
+  return {
+    validateAndLoginUser
+  };
 }
 
 function validate(formProps) {

package.json

@@ -95,7 +95,7 @@
     "react-router": "^2.4.1",
     "react-split-pane": "^0.1.44",
     "redux": "^3.5.2",
-    "redux-form": "^5.2.5",
+    "redux-form": "^5.3.3",
     "redux-thunk": "^2.1.0",
     "s3-policy": "^0.2.0",
     "shortid": "^2.2.6",

server/controllers/session.controller.js

@@ -4,7 +4,7 @@ export function createSession(req, res, next) {
   passport.authenticate('local', (err, user) => { // eslint-disable-line consistent-return
     if (err) { return next(err); }
     if (!user) {
-      return res.status(401).send({ error: 'Invalid username or password' });
+      return res.status(401).send({ message: 'Invalid username or password.' });
     }
 
     req.logIn(user, (innerErr) => {