content: import AuthActions from '../../../auth/actions.js';
  import UserActions from '../../actions.js';
  import UserStore from '../../store.js';
  import UserConstants from '../../constants.js';
  
  import React from 'react';
  
  require('./styles.scss');
  
  export default class UserSignupForm extends React.Component {
    constructor() {
      super();
  
      this.state = {
        email: '',
        password: '',
        message: ''
      };
    }
  
    componentWillMount() {
      UserStore.on(
          UserConstants.SIGNUP_USER_SUCCESS, this.handleSignupSuccess);
      UserStore.on(
          UserConstants.SIGNUP_USER_FAILURE, this.handleSignupFailure);
    }
  
    componentWillUnmount() {
      UserStore.removeListener(
          UserConstants.SIGNUP_USER_SUCCESS, this.handleSignupSuccess);
      UserStore.removeListener(
          UserConstants.SIGNUP_USER_FAILURE, this.handleSignupFailure);
    }
  
    handleSignupSuccess = () => {
      this.setState({message: ''});
      AuthActions.logUserIn(this.state.email, this.state.password);
    }
  
    handleSignupFailure = () => {
      let error = UserStore.getError().response;
      if (error && error.status === '400 Bad Request') {
        this.setState({message: error.message});
      } else {
        this.setState({message: 'Something went wrong...'});
      }
    }
  
    onFormChange = (e) => {
      this.setState({[e.target.name]: e.target.value});
    }
  
    signup = (e) => {
      let form = this.state;
      e.preventDefault();
  
      UserActions.signUserUp(form.email, form.password);
    }
  
    render() {
      let message = <p>{this.state.message}</p>;
      if (this.state.message === '') {
        message = null;
      }
  
      return (
        <div id="userSignupForm">
          <form onSubmit={this.signup}>
            <fieldset class="col-xs-12 form-group">
              <input required name="email" type="email" id="email"
                className="form-control" placeholder="Email"
                onChange={this.onFormChange}
              />
            </fieldset>
  
            <fieldset class="col-xs-12 form-group">
              <input required name="password" type="password" id="password"
                className="form-control" placeholder="Password"
                onChange={this.onFormChange}
              />
            </fieldset>
  
            <div className="col-xs-12">
              <button type="submit"
                className="col-xs-12 mdl-button mdl-js-button mdl-button-raised mdl-js-ripple-effect btn-submit"
              >Sign up</button>
            </div>
          </form>
          {message}
        </div>
      );
    }
  }
  