regform

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

class RegistrationForm extends Component {

    constructor(props) {
        super(props)

        this.state = {
            firstname: '',
            lastname: '',
            email: '',
            password: '',
            addressline: '',
            zipcode: '',
            city: '',
            country: 'Kycklingfarmen',
            termsaccept: ''
        }
    }

    handleChange = (event) => {
        this.setState({ [event.target.id]: event.target.value })
    }

    handleSubmit = (e) => {
        e.preventDefault()

        http
            .post('http://localhost:3001/api/users/register', this.state)
            .then(res => console.log(res))
            .then(() => this.props.history.push('/login'))
            .catch(error => console.log(error))
    }

    render() {

        const { firstname, lastname, email, password, addressline, zipcode, city, country, termsaccept } = this.state

        return (
            <form noValidate onSubmit={this.handleSubmit}>

                <div className="form-row">
                    <div className="form-group col-md-6">
                        <label htmlFor="firstname">First Name</label>
                        <input type="text" className="form-control" id="firstname" placeholder="First Name" value={firstname}
                            onChange={this.handleChange} />
                    </div>

                    <div className="form-group col-md-6">
                        <label htmlFor="lastname">Last Name</label>
                        <input type="text" className="form-control" id="lastname" placeholder="Last Name" value={lastname}
                            onChange={this.handleChange} />
                    </div>
                </div>

                <div className="form-row">
                    <div className="form-group col-md-6">
                        <label htmlFor="email">Email</label>
                        <input type="email" className="form-control" id="email" placeholder="Email" value={email}
                            onChange={this.handleChange} />
                    </div>

                    <div className="form-group col-md-6">
                        <label htmlFor="password">Password</label>
                        <input type="password" className="form-control" id="password" placeholder="Password" value={password}
                            onChange={this.handleChange} />
                    </div>
                </div>


                <div className="form-group">
                    <label htmlFor="addressline">Address</label>
                    <input type="text" className="form-control" id="addressline" placeholder="1234 Main St" value={addressline}
                        onChange={this.handleChange} />
                </div>


                <div className="form-row">
                    <div className="form-group col-md-2">
                        <label htmlFor="zipcode">Zip</label>
                        <input type="text" className="form-control" id="zipcode" value={zipcode} onChange={this.handleChange} />
                    </div>

                    <div className="form-group col-md-6">
                        <label htmlFor="city">City</label>
                        <input type="text" className="form-control" id="city" value={city} onChange={this.handleChange} />
                    </div>

                    <div className="form-group col-md-4">
                        <label htmlFor="country">Country</label>
                        <select id="country" className="form-control" value={country} onChange={this.handleChange}>
                            <option value="Kycklingfarmen">Kycklingfarmen</option>
                            <option value="Sweeden">Sweeden</option>
                            <option value="Finneland">Finneland</option>
                            <option value="Norreway">Norreway</option>
                        </select>
                    </div>
                </div>


                <div className="form-group">
                    <div className="form-check">
                        <input className="form-check-input" type="checkbox" id="termsaccept" value={termsaccept}
                            onChange={this.handleChange} />
                        <label className="form-check-label" htmlFor="termsaccept">
                            Accept the user termites!
            </label>
                    </div>
                </div>


                <button type="submit" className="btn btn-primary">Sign Öp</button>

            </form>
        )
    }

}

export default RegistrationForm