content: import React, { Component } from 'react';
  import { reduxForm } from 'redux-form';
  import * as actions from '../../actions';
  import styles from '../../css/signin.css';
  
  class Signup extends Component {
    handleFormSubmit(formProps) {
      // Call action creator to sign up the user!
      this.props.signupUser(formProps);
    }
  
    renderAlert() {
      if (this.props.errorMessage) {
        return (
          <div className="alert alert-danger">
            <strong>Oops!</strong> {this.props.errorMessage}
          </div>
        );
      }
    }
  
    render() {
      const { handleSubmit, fields: { email, password, passwordConfirm } } = this.props;
      return (
        <div className={styles.signin}>
          <div className={styles.form}>
            <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
              <fieldset className="form-group">
                <label>User ID:</label>
                <input className="form-control" {...email} />
                {email.touched && email.error && <div className="error">{email.error}</div>}
              </fieldset>
              <fieldset className="form-group">
                <label>Password:</label>
                <input className="form-control" {...password} type="password" />
                {password.touched && password.error && <div className="error">{password.error}</div>}
              </fieldset>
              <fieldset className="form-group">
                <label>Confirm Password:</label>
                <input className="form-control" {...passwordConfirm} type="password" />
                {passwordConfirm.touched && passwordConfirm.error && <div className="error">{passwordConfirm.error}</div>}
              </fieldset>
              {this.renderAlert()}
              <button action="submit" className="btn btn-primary">Sign Up!</button>
            </form>
          </div>
        </div>
      );
    }
  }
  
  function validate(formProps) {
    const errors = {};
  
    if (!formProps.email) {
      errors.email = 'Please enter an email';
    }
  
    if (!formProps.password) {
      errors.password = 'Please enter a password';
    }
  
    if (!formProps.passwordConfirm) {
      errors.passwordConfirm = 'Please enter password confirmation';
    }  
  
    if (formProps.password !== formProps.passwordConfirm) {
      errors.password = 'Passwords must match';
    }
  
    console.log(formProps);
  
    return errors;
  }
  
  function mapStateToProps(state) {
    return {
      errorMessage: state.auth.error
    };
  }
  
  export default reduxForm({
    form: 'signup',
    fields: ['email', 'password', 'passwordConfirm'], 
    validate
  }, mapStateToProps, actions)(Signup);
  
  