Account.jsx

import React from 'react';
import CSSModules from 'react-css-modules';
import { Button } from 'react-toolbox/lib/button';
import Checkbox from 'react-toolbox/lib/checkbox';
import Dialog from 'react-toolbox/lib/dialog';
import Input from 'react-toolbox/lib/input';

import TOS from '../TOS';
import styles from './Signup.sass';

const US_PHONE_LENGTH = 10;

class SignupAccount extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: '',
      lastName: '',
      email: '',
      password: '',
      phone: '',
      newsletter: true,
      terms: false,
      termsDialogActive: false,
    };
  }

  handleChange(name, value) {
    this.setState({...this.state, [name]: value});
  }

  handleChangePhone(phone) {
    let sanitizedPhone = phone.replace(/[^\d]/g, '');
    this.setState({...this.state, phone: sanitizedPhone});
  }

  validForm() {
    if (!this.state.terms) {
      this.props.snackbarShowError('You must accept the EVmatch Terms of Service to continue');
      return false;
    }
    if (this.state.phone.length !== US_PHONE_LENGTH) {
      this.props.snackbarShowError('Phone number not valid');
      return false;
    }
    // Password validation regex sourced from: http://stackoverflow.com/a/19605207/1133340
    if (!/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{12,}$/.test(this.state.password)) {
      this.props.snackbarShowError('Invalid password, see requirements above');
      return false;
    }

    return true;
  }

  handleSubmit(e) {
    e.preventDefault();
    if (this.validForm()) {
      this.props.onSubmit({
        firstName: this.state.firstName,
        lastName: this.state.lastName,
        email: this.state.email,
        password: this.state.password,
        phone: this.state.phone,
      });
    }
  }

  handleToggleDialog(e) {
    e.preventDefault();
    this.setState({termsDialogActive: !this.state.termsDialogActive});
  }

  renderDialog() {
    let actions = [
      { label: 'Close', onClick: this.handleToggleDialog.bind(this) }
    ];
    return (
      <Dialog actions={ actions }
              active={ this.state.termsDialogActive }
              onEscKeyDown={ this.handleToggleDialog.bind(this) }
              onOverlayClick={ this.handleToggleDialog.bind(this) }
              title="Terms & Conditions">
        <TOS />
      </Dialog>
    );
  }

  render() {
    let TOSLink = (
      <span>
        I agree to EVmatch
        <a href="#"
           className="link"
           onClick={ this.handleToggleDialog.bind(this) }>
          Terms & Conditions
        </a>
      </span>
    );

    return (
      <div>
        <form onSubmit={ this.handleSubmit.bind(this) }>
          <Input type="text"
                 label="First Name"
                 name="firstName"
                 onChange={ this.handleChange.bind(this, 'firstName') }
                 required
                 value={ this.state.firstName } />
          <Input type="text"
                 label="Last Name"
                 name="lastName"
                 onChange={ this.handleChange.bind(this, 'lastName') }
                 required
                 value={ this.state.lastName } />
          <Input type="email"
                 label="Email address"
                 name="email"
                 onChange={ this.handleChange.bind(this, 'email') }
                 required
                 value={ this.state.email } />
          <Input type="tel"
                 label="Phone"
                 name="phone"
                 onChange={ this.handleChangePhone.bind(this) }
                 required
                 maxLength={ US_PHONE_LENGTH }
                 value={ this.state.phone } />
          <Input type="password"
                 label="Password"
                 name="password"
                 onChange={ this.handleChange.bind(this, 'password') }
                 required
                 value={ this.state.password } />
               <span>Password must be betwen 12-24 characters, and include at least one number, on capital letter, and one special symbol.</span>

          <div className="space--top-2" />
          <Checkbox checked={this.state.newsletter}
                    label="I'd like to receive EVmatch updates"
                    required
                    onChange={this.handleChange.bind(this, 'newsletter')} />
          <Checkbox checked={this.state.terms}
                    label={ TOSLink }
                    required
                    onChange={this.handleChange.bind(this, 'terms')} />

          { this.renderDialog() }

          <div className="align--right">
            <Button onClick={this.handleSubmit.bind(this)} label="Next" accent raised
                    className="space--both-2" />
          </div>
        </form>
      </div>
    );
  }
}

SignupAccount.propTypes = {
  onSubmit: React.PropTypes.func.isRequired
};

export default CSSModules(SignupAccount, styles);