content: import React from 'react';
  import RegisterForm from '../components/RegisterForm'
  import { Redirect } from 'react-router-dom'
  
  class RegisterPage extends React.Component {
  
    constructor(props, context) {
      super(props, context);
  
      // set the initial component state
      this.state = {
        errors: {},
        user: {
          email: '',
          name: '',
          password: ''
        },
        successfulRegistration: false
      };
  
      this.processForm = this.processForm.bind(this);
      this.changeUser = this.changeUser.bind(this);
    }
  
    /**
     * Process the form.
     *
     * @param {object} event - the JavaScript event object
     */
    processForm(event) {
      // prevent default action. in this case, action is the form submission event
      event.preventDefault();
  
      // create a string for an HTTP body message
      const name = encodeURIComponent(this.state.user.name);
      const email = encodeURIComponent(this.state.user.email);
      const password = encodeURIComponent(this.state.user.password);
      const formData = `name=${name}&email=${email}&password=${password}`;
  
      // create an AJAX request
      const xhr = new XMLHttpRequest();
      xhr.open('post', '/auth/register');
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhr.responseType = 'json';
      xhr.addEventListener('load', () => {
        if (xhr.status === 200) {
  
          // change the component-container state
          this.setState({
            errors: {}
          });
  
          // set a message
          localStorage.setItem('successMessage', xhr.response.message);
  
          // make a redirect
          this.setState({
            successfulRegistration: true
          })
        } else {
  
          const errors = xhr.response.errors ? xhr.response.errors : {};
          errors.summary = xhr.response.message;
  
          this.setState({
            errors
          });
        }
      });
      xhr.send(formData);
    }
  
    changeUser(event) {
      const field = event.target.name;
      const user = this.state.user;
      user[field] = event.target.value;
  
      this.setState({
        user
      });
    }
  
    render() {
      return this.state.successfulRegistration ?
      (
        <Redirect to='/login' push />
      ) :
      (
        <RegisterForm
          onSubmit={this.processForm}
          onChange={this.changeUser}
          errors={this.state.errors}
          user={this.state.user}
        />
      );
    }
  
  }
  
  export default RegisterPage;
  
  
  
  