Refactor

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

plugins/coral-plugin-auth/client/components/SignInContent.js

@@ -18,17 +18,17 @@ const SignInContent = ({
   auth,
   fetchSignInFacebook
 }) => {
-
   return (
     <div className="coral-sign-in">
       <div className={`${styles.header} header`}>
         <h1>
-          {auth.emailVerificationFailure ? lang.t('signIn.emailVerifyCTA') : lang.t('signIn.signIn')}
+          {auth.emailVerificationFailure
+            ? lang.t('signIn.emailVerifyCTA')
+            : lang.t('signIn.signIn')}
         </h1>
       </div>
-      { auth.error && <Alert>{auth.error}</Alert> }
-      {
-        auth.emailVerificationFailure
+      {auth.error && <Alert>{auth.error}</Alert>}
+      {auth.emailVerificationFailure
         ? <form onSubmit={handleResendVerification}>
             <p>{lang.t('signIn.requestNewVerifyEmail')}</p>
             <TextField
@@ -36,8 +36,11 @@ const SignInContent = ({
               type="email"
               label={lang.t('signIn.email')}
               value={emailToBeResent}
-              onChange={handleChangeEmail} />
-            <Button id='resendConfirmEmail' type='submit' cStyle='black' full>Send Email</Button>
+              onChange={handleChangeEmail}
+            />
+            <Button id="resendConfirmEmail" type="submit" cStyle="black" full>
+              Send Email
+            </Button>
             {emailVerificationLoading && <Spinner />}
             {emailVerificationSuccess && <Success />}
           </form>
@@ -70,23 +73,29 @@ const SignInContent = ({
                 onChange={handleChange}
               />
               <div className={styles.action}>
-                {
-                  !auth.isLoading ?
-                  <Button id='coralLogInButton' type="submit" cStyle="black" className={styles.signInButton} full>
-                    {lang.t('signIn.signIn')}
-                  </Button>
-                  :
-                  <Spinner />
-                }
+                {!auth.isLoading
+                  ? <Button
+                      id="coralLogInButton"
+                      type="submit"
+                      cStyle="black"
+                      className={styles.signInButton}
+                      full
+                    >
+                      {lang.t('signIn.signIn')}
+                    </Button>
+                  : <Spinner />}
               </div>
             </form>
-          </div>
-      }
+          </div>}
       <div className={`${styles.footer} footer`}>
-        <span><a onClick={() => changeView('FORGOT')}>{lang.t('signIn.forgotYourPass')}</a></span>
+        <span>
+          <a onClick={() => changeView('FORGOT')}>
+            {lang.t('signIn.forgotYourPass')}
+          </a>
+        </span>
         <span>
           {lang.t('signIn.needAnAccount')}
-          <a onClick={() => changeView('SIGNUP')} id='coralRegister'>
+          <a onClick={() => changeView('SIGNUP')} id="coralRegister">
             {lang.t('signIn.register')}
           </a>
         </span>

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 {
           </h1>
         </div>
 
-        { auth.error && <Alert>{auth.error}</Alert> }
-        { beforeSignup &&
+        {auth.error && <Alert>{auth.error}</Alert>}
+        {beforeSignup &&
           <div>
             <div className={styles.socialConnections}>
               <Button cStyle="facebook" onClick={fetchSignUpFacebook} full>
@@ -109,7 +94,10 @@ class SignUpContent extends React.Component {
                 onChange={handleChange}
                 minLength="8"
               />
-              { errors.password && <span className={styles.hint}> Password must be at least 8 characters. </span> }
+              {errors.password &&
+                <span className={styles.hint}>
+                  {' '}Password must be at least 8 characters.{' '}
+                </span>}
               <TextField
                 id="confirmPassword"
                 type="password"
@@ -122,26 +110,35 @@ class SignUpContent extends React.Component {
                 minLength="8"
               />
               <div className={styles.action}>
-                <Button type="submit" cStyle="black" id='coralSignUpButton' className={styles.signInButton} full>
+                <Button
+                  type="submit"
+                  cStyle="black"
+                  id="coralSignUpButton"
+                  className={styles.signInButton}
+                  full
+                >
                   {lang.t('signIn.signUp')}
                 </Button>
-                { auth.isLoading && <Spinner /> }
+                {auth.isLoading && <Spinner />}
               </div>
             </form>
-          </div>
-        }
-        {
-          successfulSignup &&
+          </div>}
+        {successfulSignup &&
           <div>
             <Success />
-            {
-              emailVerificationEnabled &&
-              <p>{lang.t('signIn.verifyEmail')}<br /><br />{lang.t('signIn.verifyEmail2')}</p>
-            }
-          </div>
-        }
+            {emailVerificationEnabled &&
+              <p>
+                {lang.t('signIn.verifyEmail')}
+                <br />
+                <br />
+                {lang.t('signIn.verifyEmail2')}
+              </p>}
+          </div>}
         <div className={styles.footer}>
-          {lang.t('signIn.alreadyHaveAnAccount')} <a id="coralSignInViewTrigger" onClick={() => changeView('SIGNIN')}>
+          {lang.t('signIn.alreadyHaveAnAccount')} <a
+            id="coralSignInViewTrigger"
+            onClick={() => changeView('SIGNIN')}
+          >
             {lang.t('signIn.signIn')}
           </a>
         </div>

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 {