import React from 'react';
import './App.css';
import './bootstrap.min.css';

class LoginForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {user: '', password: ''};
    }

    handleUserChange = (event) => {
        this.setState({user: event.target.value});
    }

    handlePasswordChange = (event) => {
        this.setState({password: event.target.value})
    }

    handleSubmit = (event) => {
        event.preventDefault();
        const data = new FormData(event.target);

        fetch(this.props.targetUrl + '/login', {
            method: 'POST',
            body: data,
        })
    }

    render() {
        return (
            <form className="form-vertical" id="main-form" onSubmit={this.handleSubmit}>
            <div className="control-group">
            <label className="sr-only" for="username">Name</label>
            <div className="controls">
            <input type="text" id="user" name="user" className="input-xlarge" placeholder="Username" value={this.state.user} onChange={this.handleUserChange} />
            </div>
            </div>

            <div className="control-group">
            <label className="sr-only" for="password">Password</label>
            <div className="controls">
            <input type="password" id="password" name="password" className="input-xlarge" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange} />
            </div>
            </div>

            <div className="control-group">
            <div className="controls">
            <input type="submit" value="Submit" />
            </div>
            </div>
            </form>
        );
    }
}

export default LoginForm;