talk/plugins/talk-plugin-auth/client/components/SignUpContent.js

import styles from './styles.css';
import React from 'react';
import {Button, TextField, Spinner, Success, Alert} from 'plugin-api/beta/client/components/ui';
import t from 'coral-framework/services/i18n';

class SignUpContent extends React.Component {

  componentWillReceiveProps(next) {
    if (
      !this.props.emailVerificationEnabled &&
      !this.props.auth.successSignUp &&
      next.auth.successSignUp
    ) {
      setTimeout(() => {
        this.props.changeView('SIGNIN');
      }, 2000);
    }
  }

  render() {
    const {
      handleChange,
      formData,
      emailVerificationEnabled,
      auth,
      errors,
      showErrors,
      changeView,
      handleSignUp,
      fetchSignUpFacebook
    } = this.props;

    return (
      <div>
        <div className={styles.header}>
          <h1>
            {t('sign_in.sign_up')}
          </h1>
        </div>

        {auth.error && <Alert>{auth.error}</Alert>}
        {!auth.successSignUp &&
          <div>
            <div className={styles.socialConnections}>
              <Button cStyle="facebook" onClick={fetchSignUpFacebook} full>
                {t('sign_in.facebook_sign_up')}
              </Button>
            </div>
            <div className={styles.separator}>
              <h1>
                {t('sign_in.or')}
              </h1>
            </div>
            <form onSubmit={handleSignUp}>
              <TextField
                id="email"
                type="email"
                label={t('sign_in.email')}
                value={formData.email}
                style={{fontSize: 16}}
                showErrors={showErrors}
                errorMsg={errors.email}
                onChange={handleChange}
              />
              <TextField
                id="username"
                type="text"
                label={t('sign_in.username')}
                value={formData.username}
                showErrors={showErrors}
                style={{fontSize: 16}}
                errorMsg={errors.username}
                onChange={handleChange}
              />
              <TextField
                id="password"
                type="password"
                label={t('sign_in.password')}
                value={formData.password}
                showErrors={showErrors}
                style={{fontSize: 16}}
                errorMsg={errors.password}
                onChange={handleChange}
                minLength="8"
              />
              {errors.password &&
                <span className={styles.hint}>
                  {' '}Password must be at least 8 characters.{' '}
                </span>}
              <TextField
                id="confirmPassword"
                type="password"
                label={t('sign_in.confirm_password')}
                value={formData.confirmPassword}
                style={{fontSize: 16}}
                showErrors={showErrors}
                errorMsg={errors.confirmPassword}
                onChange={handleChange}
                minLength="8"
              />
              <div className={styles.action}>
                <Button
                  type="submit"
                  cStyle="black"
                  id="coralSignUpButton"
                  className={styles.signInButton}
                  full
                >
                  {t('sign_in.sign_up')}
                </Button>
                {auth.isLoading && <Spinner />}
              </div>
            </form>
          </div>}
        {auth.successSignUp &&
          <div>
            <Success />
            {emailVerificationEnabled &&
              <p>
                {t('sign_in.verify_email')}
                <br />
                <br />
                {t('sign_in.verify_email2')}
              </p>}
          </div>}
        <div className={styles.footer}>
          {t('sign_in.already_have_an_account')} <a
            id="coralSignInViewTrigger"
            onClick={() => changeView('SIGNIN')}
          >
            {t('sign_in.sign_in')}
          </a>
        </div>
      </div>
    );
  }
}

export default SignUpContent;