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 (

- {auth.emailVerificationFailure ? lang.t('signIn.emailVerifyCTA') : lang.t('signIn.signIn')} + {auth.emailVerificationFailure + ? lang.t('signIn.emailVerifyCTA') + : lang.t('signIn.signIn')}

- { auth.error && {auth.error} } - { - auth.emailVerificationFailure + {auth.error && {auth.error}} + {auth.emailVerificationFailure ?

{lang.t('signIn.requestNewVerifyEmail')}

- + onChange={handleChangeEmail} + /> + {emailVerificationLoading && } {emailVerificationSuccess && } @@ -70,23 +73,29 @@ const SignInContent = ({ onChange={handleChange} />
- { - !auth.isLoading ? - - : - - } + {!auth.isLoading + ? + : }
-
- } + }
- changeView('FORGOT')}>{lang.t('signIn.forgotYourPass')} + + changeView('FORGOT')}> + {lang.t('signIn.forgotYourPass')} + + {lang.t('signIn.needAnAccount')} - changeView('SIGNUP')} id='coralRegister'> + changeView('SIGNUP')} id="coralRegister"> {lang.t('signIn.register')} diff --git a/plugins/coral-plugin-auth/client/components/SignUpContent.js b/plugins/coral-plugin-auth/client/components/SignUpContent.js index 921f045be..5f2dd36ea 100644 --- a/plugins/coral-plugin-auth/client/components/SignUpContent.js +++ b/plugins/coral-plugin-auth/client/components/SignUpContent.js @@ -1,39 +1,21 @@ -import React, {PropTypes} from 'react'; -import {Button, TextField, Spinner, Success, Alert} from 'coral-ui'; import styles from './styles.css'; -import I18n from 'coral-framework/modules/i18n/i18n'; +import React, {PropTypes} from 'react'; import translations from '../translations'; +import I18n from 'coral-framework/modules/i18n/i18n'; +import {Button, TextField, Spinner, Success, Alert} from 'coral-ui'; + const lang = new I18n(translations); class SignUpContent extends React.Component { + constructor() { + super(); - constructor (props) { - super(props); - this.successfulSignup = false; + this.state = { + successfulSignup: false + }; } - static propTypes = { - emailVerificationEnabled: PropTypes.bool.isRequired, - fetchSignUpFacebook: PropTypes.func.isRequired, - changeView: PropTypes.func.isRequired, - handleSignUp: PropTypes.func.isRequired, - showErrors: PropTypes.bool, - errors: PropTypes.shape({ - email: PropTypes.string, - username: PropTypes.string, - password: PropTypes.string, - confirmPassword: PropTypes.string, - }), - formData: PropTypes.shape({ - email: PropTypes.string, - username: PropTypes.string, - password: PropTypes.string, - confirmPassword: PropTypes.string - }) - } - - render () { - + render() { const { handleChange, formData, @@ -43,17 +25,20 @@ class SignUpContent extends React.Component { showErrors, changeView, handleSignUp, - fetchSignUpFacebook} = this.props; + fetchSignUpFacebook + } = this.props; const beforeSignup = !auth.isLoading && !auth.successSignUp; const successfulSignup = !auth.isLoading && auth.successSignUp; // the first time we render a successfulSignup, trigger a timer - if ((this.successfulSignup ^ successfulSignup) && !emailVerificationEnabled) { + if (this.successfulSignup ^ successfulSignup && !emailVerificationEnabled) { setTimeout(() => { changeView('SIGNIN'); }, 1000); - this.successfulSignup = true; + this.setState({ + successfulSignup: true + }); } return ( @@ -64,8 +49,8 @@ class SignUpContent extends React.Component {
- { auth.error && {auth.error} } - { beforeSignup && + {auth.error && {auth.error}} + {beforeSignup &&
- { auth.isLoading && } + {auth.isLoading && }
-
- } - { - successfulSignup && + } + {successfulSignup &&
- { - emailVerificationEnabled && -

{lang.t('signIn.verifyEmail')}

{lang.t('signIn.verifyEmail2')}

- } -
- } + {emailVerificationEnabled && +

+ {lang.t('signIn.verifyEmail')} +
+
+ {lang.t('signIn.verifyEmail2')} +

} + }
- {lang.t('signIn.alreadyHaveAnAccount')} changeView('SIGNIN')}> + {lang.t('signIn.alreadyHaveAnAccount')} changeView('SIGNIN')} + > {lang.t('signIn.signIn')}
diff --git a/plugins/coral-plugin-auth/client/index.js b/plugins/coral-plugin-auth/client/index.js index 3bf9e58f0..867849cac 100644 --- a/plugins/coral-plugin-auth/client/index.js +++ b/plugins/coral-plugin-auth/client/index.js @@ -1,6 +1,6 @@ +import UserBox from './components/UserBox'; import SignInButton from './components/SignInButton'; import SignInContainer from './components/SignInContainer'; -import UserBox from './components/UserBox'; import ChangeUserNameContainer from './components/ChangeUserNameContainer'; export default {