138 lines
3.7 KiB
JavaScript
138 lines
3.7 KiB
JavaScript
/**
|
|
* Created by andrew on 15/02/16.
|
|
*/
|
|
import React, {PropTypes} from "react";
|
|
import { connect } from "react-redux";
|
|
import read from '../../utils/readProp';
|
|
|
|
import * as BS from "react-bootstrap";
|
|
import Input from "./Input";
|
|
import ButtonLoader from "./ButtonLoader";
|
|
import AuxErrorLabel from './AuxErrorLabel';
|
|
|
|
import * as AS from "../../actions/signIn";
|
|
|
|
const formValidation = (payload) => [
|
|
'email',
|
|
'password'
|
|
].reduce((memo, prop) => {
|
|
let result = [];
|
|
const value = (payload[prop] || '').replace(/(^\s+)|(\s+$)/g, '');
|
|
|
|
switch (prop) {
|
|
case 'email':
|
|
case 'password':
|
|
if (/^$/.test(value)) {
|
|
result.push('required');
|
|
}
|
|
}
|
|
|
|
if (result.length) {
|
|
memo[prop] = result;
|
|
memo.hasErrors = true;
|
|
}
|
|
return memo;
|
|
}, {});
|
|
|
|
export class EmailSignInForm extends React.Component {
|
|
|
|
handleInput (key, val) {
|
|
this.props.dispatch(AS.emailSignInFormUpdate(key, val));
|
|
}
|
|
|
|
handleSubmit (event) {
|
|
event.preventDefault();
|
|
|
|
const formData = read(this.props.auth, 'signIn.form');
|
|
|
|
const validationErrors = formValidation(formData);
|
|
if (validationErrors.hasErrors) {
|
|
this.props.dispatch(AS.emailSignInError(validationErrors));
|
|
return;
|
|
}
|
|
|
|
this.props.dispatch(AS.emailSignIn(formData));
|
|
}
|
|
|
|
render () {
|
|
|
|
try {
|
|
const disabled = (
|
|
this.props.auth.user.isSignedIn ||
|
|
this.props.auth.signIn.loading
|
|
);
|
|
|
|
//const error = read(this.props.auth, 'signIn.errors.email', null);
|
|
const formErrors = read(this.props.auth, 'signIn.errors.errors', '');
|
|
|
|
return (
|
|
<form className='redux-auth email-sign-in-form clearfix'
|
|
onSubmit={this.handleSubmit.bind(this)}>
|
|
|
|
<div className="form-group" style={{
|
|
display: formErrors ? 'block' : 'none'
|
|
}}>
|
|
<AuxErrorLabel
|
|
label="Form:"
|
|
errors={ formErrors.length ? [ formErrors ] : [] }
|
|
/>
|
|
</div>
|
|
|
|
<Input type="text"
|
|
className="email-sign-in-email"
|
|
label="Email"
|
|
placeholder="Email"
|
|
name="email"
|
|
disabled={disabled}
|
|
value={read(this.props.auth, 'signIn.form.email', '')}
|
|
errors={read(this.props.auth, 'signIn.errors.email', [])}
|
|
onChange={this.handleInput.bind(this, "email")}
|
|
{...this.props.inputProps.email} />
|
|
|
|
<Input type="password"
|
|
className="password-sign-in-email"
|
|
label="Password"
|
|
placeholder="Password"
|
|
name="password"
|
|
disabled={disabled}
|
|
value={read(this.props.auth, 'signIn.form.password', '')}
|
|
errors={read(this.props.auth, 'signIn.errors.password', [])}
|
|
onChange={this.handleInput.bind(this, "password")}
|
|
{...this.props.inputProps.password} />
|
|
|
|
<ButtonLoader loading={read(this.props.auth, 'signIn.loading', false)}
|
|
type="submit"
|
|
icon={<BS.Glyphicon glyph="log-in" />}
|
|
className='email-sign-in-submit pull-right'
|
|
disabled={disabled}
|
|
onClick={this.handleSubmit.bind(this)}
|
|
{...this.props.inputProps.submit}>
|
|
Sign In
|
|
</ButtonLoader>
|
|
</form>
|
|
);
|
|
} catch (ex){
|
|
console.error('Render exception: ', ex);
|
|
return [' ERROR '];
|
|
}
|
|
}
|
|
}
|
|
|
|
EmailSignInForm.propTypes = {
|
|
endpoint: PropTypes.string,
|
|
inputProps: PropTypes.shape({
|
|
email: PropTypes.object,
|
|
password: PropTypes.object,
|
|
submit: PropTypes.object
|
|
})
|
|
};
|
|
|
|
EmailSignInForm.defaultProps = {
|
|
inputProps: {
|
|
email: {},
|
|
password: {},
|
|
submit: {}
|
|
}
|
|
};
|
|
|
|
// export default connect(({app}) => ({auth: app.auth}))(EmailSignInForm);
|