import React from 'react';
import request from 'superagent';

import Button from 'react-bootstrap/lib/Button';
import FormControl from 'react-bootstrap/lib/FormControl';
import FormGroup from 'react-bootstrap/lib/FormGroup';
import ControlLabel from 'react-bootstrap/lib/ControlLabel';
import Alert from 'react-bootstrap/lib/Alert';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';

export default class RegisterComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      email: '',
      phone: ''
    };
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePhoneChange = this.handlePhoneChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleEmailChange(e) {
    this.setState({
      email: e.target.value
    });
  }

  handlePhoneChange(e) {
    this.setState({
      phone: e.target.value
    });
  }

  handleSubmit(event) {
    if (event)
      event.preventDefault();
    request.post('/api/register')
      .send(this.state)
      .then(response => {
        const data = response.body;
        this.setState({
          error: data.success,
          message: data.message
        })
    });
  }

  render() {
    let alert;
    let style = this.state.error ? 'danger' : 'success';
    if (this.state.message) {
      alert = (<Alert bsStyle={style}>
        <p>{this.state.message}</p>
      </Alert>);
    }
    return (
      <Row>
        <Col md={3}>
          <p>Please, fill out the registration form</p>
          <form className='registrationForm' onSubmit={this.handleSubmit}>
            <FormGroup controlId='email'>
              <ControlLabel>Email</ControlLabel>
              <FormControl
                type='text'
                value={this.state.email}
                onChange={this.handleEmailChange}
              />
            </FormGroup>
            <FormGroup controlId='tel'>
              <ControlLabel>Phone</ControlLabel>
              <FormControl
                type='phone'
                value={this.state.phone}
                onChange={this.handlePhoneChange}
              />
            </FormGroup>
            {alert}
            <Button type='submit' secondary>Register</Button>
          </form>
        </Col>
      </Row>
    );
  }
}

@@ -1497,9 +1497,9 @@
 md=%7B
-3
+4
 %7D%3E%0A 
@@ -1514,17 +1514,9 @@
  %3Cp%3E
-Please, f
+F
 ill 
@@ -1540,16 +1540,35 @@
 ion form
+ and click Sign Up.
 %3C/p%3E%0A   
@@ -2260,24 +2260,23 @@
 condary%3E
-Register
+Sign Up
 %3C/Button

change alerts