content: import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { Field, reduxForm } from 'redux-form';
  import { Link } from 'react-router-dom';
  
  import { registerUser } from '../actions/authActions';
  
  class Register extends Component {
    componentWillMount() {
      const { authenticated } = this.props.auth;
      if (authenticated) this.props.history.push('/login');
    }
    componentWillReceiveProps(nextProps) {
      const { authenticated } = nextProps.auth;
      if (authenticated) this.props.history.push('/dashboard');
    }
    renderField(field) {
      const { label, type, input, meta: { touched, error } } = field;
      const cLassName = `form-control ${touched && error ? 'is-invalid' : ''}`;
      return (
        <div className="form-group">
          <label>{label}</label>
          <input className={cLassName} type={type} {...input} />
          <div className="invalid-feedback">{touched ? error : ''}</div>
        </div>
      );
    }
    onSubmit(values) {
      this.props.registerUser(values);
    }
    renderResponse() {
      const { registered, message } = this.props.auth;
      if (!message) return;
      const className = `alert ${registered ? 'alert-success' : 'alert-danger'}`;
      return (
        <div className={className} role="alert">
          {message}
        </div>
      );
    }
    render() {
      const { handleSubmit } = this.props;
      return (
        <div className="col-4 mx-auto">
          {this.renderResponse()}
          <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
            <Field label="Email" name="email" type="text" component={this.renderField} />
            <Field label="Password" name="password" type="password" component={this.renderField} />
            <Field label="Confirm Password" name="confirmPassword" type="password" component={this.renderField} />
            <button type="submit" className="btn btn-secondary btn-block">
              Register
            </button>
            <div className="text-center">
              Already registred? <Link to="/login">Login now!</Link>
            </div>
          </form>
        </div>
      );
    }
  }
  
  function validate(values) {
    const errors = {};
    if (!values.email) {
      errors.email = 'The email is required';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
      errors.email = 'The email must be valid';
    }
    if (!values.password) {
      errors.password = 'The password is required';
    } else if (values.password.length < 6) {
      errors.password = 'The password must be at least 6 characters long.';
    }
    if (values.confirmPassword !== values.password) {
      errors.confirmPassword = 'The password confirmation does not match the password';
    }
  
    return errors;
  }
  
  function mapStateToProps(state) {
    return {
      auth: state.auth
    };
  }
  
  export default reduxForm({
    form: 'Register',
    validate
  })(connect(mapStateToProps, { registerUser })(Register));
  