diff --git a/plugins/coral-plugin-auth/client/components/SignInContainer.js b/plugins/coral-plugin-auth/client/components/SignInContainer.js index 73094920e..5a8ffa11a 100644 --- a/plugins/coral-plugin-auth/client/components/SignInContainer.js +++ b/plugins/coral-plugin-auth/client/components/SignInContainer.js @@ -1,11 +1,13 @@ -import React, {Component, PropTypes} from 'react'; +import React from 'react'; import {connect} from 'react-redux'; -import SignDialog from './SignDialog'; -import validate from 'coral-framework/helpers/validate'; -import errorMsj from 'coral-framework/helpers/error'; -import I18n from 'coral-framework/modules/i18n/i18n'; -import translations from '../translations'; import {pym} from 'coral-framework'; +import SignDialog from './SignDialog'; +import {bindActionCreators} from 'redux'; +import translations from '../translations'; +import I18n from 'coral-framework/modules/i18n/i18n'; +import errorMsj from 'coral-framework/helpers/error'; +import validate from 'coral-framework/helpers/validate'; + const lang = new I18n(translations); import { @@ -23,34 +25,22 @@ import { checkLogin } from 'coral-framework/actions/auth'; -class SignInContainer extends Component { - initialState = { - formData: { - email: '', - username: '', - password: '', - confirmPassword: '' - }, - emailToBeResent: '', - errors: {}, - showErrors: false - }; - +class SignInContainer extends React.Component { constructor(props) { super(props); - this.state = this.initialState; - this.addError = this.addError.bind(this); - this.handleAuth = this.handleAuth.bind(this); - this.handleSignUp = this.handleSignUp.bind(this); - this.handleSignIn = this.handleSignIn.bind(this); - this.handleChange = this.handleChange.bind(this); - this.handleChangeEmail = this.handleChangeEmail.bind(this); - this.handleResendVerification = this.handleResendVerification.bind(this); - } - static propTypes = { - requireEmailConfirmation: PropTypes.bool.isRequired - }; + this.state = { + formData: { + email: '', + username: '', + password: '', + confirmPassword: '' + }, + emailToBeResent: '', + errors: {}, + showErrors: false + }; + } componentWillMount() { this.props.checkLogin(); @@ -71,8 +61,7 @@ class SignInContainer extends Component { window.removeEventListener('storage', this.handleAuth); } - handleAuth(e) { - + handleAuth = e => { // Listening to FB changes // FB localStorage key is 'auth' const authCallback = this.props.facebookCallback; @@ -81,12 +70,12 @@ class SignInContainer extends Component { const {err, data} = JSON.parse(e.newValue); authCallback(err, data); } - } + }; - handleChange(e) { + handleChange = e => { const {name, value} = e.target; this.setState( - (state) => ({ + state => ({ ...state, formData: { ...state.formData, @@ -97,14 +86,14 @@ class SignInContainer extends Component { this.validation(name, value); } ); - } + }; - handleChangeEmail(e) { + handleChangeEmail = e => { const {value} = e.target; this.setState({emailToBeResent: value}); - } + }; - handleResendVerification(e) { + handleResendVerification = e => { e.preventDefault(); this.props .requestConfirmEmail( @@ -113,23 +102,22 @@ class SignInContainer extends Component { ) .then(() => { setTimeout(() => { - // allow success UI to be shown for a second, and then close the modal - this.props.handleClose(); + this.props.hideSignInDialog(); }, 2500); }); - } + }; - addError(name, error) { - return this.setState((state) => ({ + addError = (name, error) => { + return this.setState(state => ({ errors: { ...state.errors, [name]: error } })); - } + }; - validation(name, value) { + validation = (name, value) => { const {addError} = this; const {formData} = this.state; @@ -145,20 +133,20 @@ class SignInContainer extends Component { } else { const {[name]: prop, ...errors} = this.state.errors; // eslint-disable-line // Removes Error - this.setState((state) => ({...state, errors})); + this.setState(state => ({...state, errors})); } - } + }; - isCompleted() { + isCompleted = () => { const {formData} = this.state; - return !Object.keys(formData).filter((prop) => !formData[prop].length).length; - } + return !Object.keys(formData).filter(prop => !formData[prop].length).length; + }; - displayErrors(show = true) { + displayErrors = (show = true) => { this.setState({showErrors: show}); - } + }; - handleSignUp(e) { + handleSignUp = e => { e.preventDefault(); const {errors} = this.state; const {fetchSignUp, validForm, invalidForm} = this.props; @@ -169,12 +157,12 @@ class SignInContainer extends Component { } else { invalidForm(lang.t('signIn.checkTheForm')); } - } + }; - handleSignIn(e) { + handleSignIn = e => { e.preventDefault(); this.props.fetchSignIn(this.state.formData); - } + }; render() { const {auth, requireEmailConfirmation} = this.props; @@ -197,24 +185,28 @@ class SignInContainer extends Component { } } -const mapStateToProps = (state) => ({ +const mapStateToProps = state => ({ auth: state.auth.toJS() }); -const mapDispatchToProps = (dispatch) => ({ - checkLogin: () => dispatch(checkLogin()), - facebookCallback: (err, data) => dispatch(facebookCallback(err, data)), - fetchSignUp: (formData, url) => dispatch(fetchSignUp(formData, url)), - fetchSignIn: (formData) => dispatch(fetchSignIn(formData)), - fetchSignInFacebook: () => dispatch(fetchSignInFacebook()), - fetchSignUpFacebook: () => dispatch(fetchSignUpFacebook()), - fetchForgotPassword: (formData) => dispatch(fetchForgotPassword(formData)), - requestConfirmEmail: (email, url) => - dispatch(requestConfirmEmail(email, url)), - changeView: (view) => dispatch(changeView(view)), - handleClose: () => dispatch(hideSignInDialog()), - invalidForm: (error) => dispatch(invalidForm(error)), - validForm: () => dispatch(validForm()) -}); +const mapDispatchToProps = dispatch => + bindActionCreators( + { + checkLogin, + facebookCallback, + fetchSignUp, + fetchSignUp, + fetchSignIn, + fetchSignInFacebook, + fetchSignUpFacebook, + fetchForgotPassword, + requestConfirmEmail, + changeView, + hideSignInDialog, + invalidForm, + validForm + }, + dispatch + ); export default connect(mapStateToProps, mapDispatchToProps)(SignInContainer); diff --git a/plugins/coral-plugin-auth/client/components/SignInContent.js b/plugins/coral-plugin-auth/client/components/SignInContent.js index 7460efb97..6f0027084 100644 --- a/plugins/coral-plugin-auth/client/components/SignInContent.js +++ b/plugins/coral-plugin-auth/client/components/SignInContent.js @@ -18,17 +18,17 @@ const SignInContent = ({ auth, fetchSignInFacebook }) => { - return (
{lang.t('signIn.verifyEmail')}
{lang.t('signIn.verifyEmail2')}
+ {lang.t('signIn.verifyEmail')}
+
+
+ {lang.t('signIn.verifyEmail2')}
+