content: import React, { Component } from 'react';
  import { Field, reduxForm } from 'redux-form';
  import { connect } from 'react-redux';
  
  import * as Auth from '../../actions/auth';
  
  class Register extends Component {
    handleFormSubmit({ email }) {
      this.props.addmoderator({ email });
    }
  
    renderError() {
      if (this.props.errorMessage) {
        if (this.props.errorMessage.error) {
          return <div className="alert alert-danger">{this.props.errorMessage.error}</div>;
        } else {
          return <div className="alert alert-danger">Error: {this.props.errorMessage}</div>;
        }
      }
    }
  
    renderField({ input, label, type, meta: { error } }) {
      return (
        <div>
          <label>{label}</label>
          <div>
            <input className="form-control" {...input} placeholder={label} type={type} />
            {error && <span className="text-danger">{error}</span>}
          </div>
        </div>
      );
    }
  
    render() {
      const { handleSubmit } = this.props;
      return (
        <div>
          <div>Add new moderator</div>
          <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
            <fieldset className="form-group">
              <Field name="email" label="Email" component={this.renderField} type="text" />
            </fieldset>
            {this.renderError()}
            <button action="submit" className="btn btn-primary">
              Add new moderator
            </button>
          </form>
        </div>
      );
    }
  }
  
  const validate = values => {
    const errors = {};
    if (values.email && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
      errors.email = 'Invalid email';
    }
    return errors;
  };
  
  const mapStateToProps = state => {
    return { errorMessage: state.auth.error };
  };
  
  export default reduxForm({
    form: 'register',
    validate
  })(connect(mapStateToProps, Auth)(Register));
  