{"size": 2378, "ext": "js", "max_stars_repo_path": "src/components/auth/signup.js", "max_stars_repo_name": "sprazzeus/client-authentication-tutorial", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/auth/signup.js", "max_issues_repo_name": "sprazzeus/client-authentication-tutorial", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/auth/signup.js", "max_forks_repo_name": "sprazzeus/client-authentication-tutorial", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.0202020202, "max_line_length": 76, "alphanum_fraction": 0.590412111}
import React, { Component } from 'react'
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux'
import * as actions from '../../actions'

class Signup extends Component {
  handleSignup (formData) {
    // call action creator to sign up the user
    this.props.signupUser(formData)
  }

  renderAlert () {
    if (this.props.errorMessage) {
      return (
        <div className="alert alert-danger">
          <strong>Oops!</strong> {this.props.errorMessage}
        </div>
      )
    }
  }

  render () {
    const { handleSubmit } = this.props
    return (
      <form onSubmit={handleSubmit(this.handleSignup.bind(this))}>
        <fieldset className="form-group">
          <label>Email:</label>
          <Field
            name="email"
            component={renderInput}
          />
        </fieldset>
        <fieldset className="form-group">
          <label>Password:</label>
          <Field
            name="password"
            type="password"
            component={renderInput}
          />
        </fieldset>
        <fieldset className="form-group">
          <label>Confirm password:</label>
          <Field
            name="passwordConfirm"
            type="password"
            component={renderInput}
          />
        </fieldset>
        {this.renderAlert()}
        <button action="submit" className="btn btn-primary">Sign up</button>
      </form>
    )
  }
}

const renderInput = field => {
  const { input, type, meta: { error, touched } } = field
  return (
    <div>
      <input {...input} type={type} className="form-control" />
      { error && touched && <div className="error">{error}</div> }
    </div>
  )
}

function validate (formData) {
  const errors = {}
  const { email, password, passwordConfirm } = formData

  if (!email) {
    errors.email = 'Please enter an email'
  }

  if (!password) {
    errors.password = 'Please enter a password'
  }

  if (!passwordConfirm) {
    errors.passwordConfirm = 'Please confirm your password'
  }

  if (password !== passwordConfirm) {
    errors.passwordConfirm = 'Passwords must match'
  }
  return errors
}

function mapStateToProps (state) {
  return { errorMessage: state.auth.error }
}

Signup = connect(mapStateToProps, actions)(Signup)
Signup = reduxForm({
  form: 'signup',
  validate
}, mapStateToProps, actions)(Signup)

export default Signup
