import React, { Component } from 'react';
import axios from 'axios';

class Register extends Component {

    input(obj)
    {
        axios.post('http://localhost:3001/Register',
        {
            fullname: obj.fullname.value,
            username: obj.username.value,
            email: obj.email.value,
            password: obj.password.value
        })
        .then(function(response){});
    }

    render() {
    return (
      <div className="container">
        <form className="form-horizontal">
            <fieldset>
                <legend>Please Register</legend>
                <div className="form-group">
                    <label className="col-lg-2 control-label">Full Name</label>
                    <div className="col-lg-10">
                        <input type="text" ref="fullname" className="form-control" id="inputFullName" placeholder="Full Name" required="required"/>
                    </div>
                </div>
                <div className="form-group">
                    <label className="col-lg-2 control-label">Username</label>
                    <div className="col-lg-10">
                        <input type="text" ref="username" className="form-control" id="inputUsername" placeholder="Username" required="required"/>
                    </div>
                </div>
                <div className="form-group">
                    <label className="col-lg-2 control-label">Email</label>
                    <div className="col-lg-10">
                        <input type="email" ref="email" className="form-control" id="inputEmail" placeholder="Email" required="required"/>
                    </div>
                </div>
                <div className="form-group">
                    <label className="col-lg-2 control-label">Password</label>
                    <div className="col-lg-10">
                        <input type="password" ref="password" className="form-control" id="inputPassword" placeholder="Password" required="required"/>
                            <div className="checkbox">
                            <label>
                                <input type="checkbox"/> Show Password
                            </label>
                        </div>
                    </div>
                </div>
                <div className="form-group">
                    <div className="col-lg-10 col-lg-offset-2">
                        <button type="reset" className="btn btn-danger">Cancel</button>&nbsp;
                        <button onClick={()=> this.input(this.refs)} className="btn btn-primary">Submit</button>
                    </div>
                </div>
            </fieldset>
        </form>
      </div>
    );
  }
}
export default Register;