content: import React, { Component } from 'react';
  import SignUpForm from './SignUpForm';
  import { Auth } from '../../services';
  
  class SignUpPage extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        username: '',
        password: '',
        error: null
      }
    }
  
    handleChange = (event) => {
      let state = this.state;
      state[event.target.name] = event.target.value;
      this.setState(state)
    }
  
    handleSubmit = async (event) => {
      event.preventDefault();
      this.setState({ error: null })
  
      const username = event.target.username.value;
      const password = event.target.password.value;
  
      const user = { username, password };
  
      const response = await Auth.signUp(user);
      if (response.status === 200) {
        alert('Success');
      } else {
        const json = await response.json();
        console.log(json);
        const error = {
          summary: json.message,
          errors: json.errors
        }
        this.setState({ error })
      }
    }
    
    render() {
      const error = this.state.error;
      return (
        <div>
          {error &&
            <div>
              <div>{error.summary}</div>
              {Object.entries(error.errors).map((error, index) => {
                return <div key={index}>{error[0]}: {error[1]}</div>
              })}
            </div>
          }
          <SignUpForm
            onSubmit={this.handleSubmit}
            onChange={this.handleChange}
            username={this.state.username}
            password={this.state.password}
          />
        </div>
      )
    }
  }
  
  export default SignUpPage;