add login error for invalid username or password

This commit is contained in:
catarak 2016-09-02 17:31:07 -04:00
parent 3b6bfbc552
commit 1d86d766d9
6 changed files with 57 additions and 16 deletions

View file

@ -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';

View file

@ -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() {

View file

@ -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;

View file

@ -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) {

View file

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

View file

@ -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) => {