import React, { Component } from 'react'


class Form extends Component {

    constructor(props){
        super(props);
        this.state = {username: '', password: '', logged: false};
    }

    onUsernameChange = (event) => {
        this.setState({username: event.target.value});
    };

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

    handleSubmit = (event) => {
        event.preventDefault();
        const formData = new FormData();
        formData.append('username', this.state.username);
        formData.append('password', this.state.password);
        fetch('http://localhost:8080/login', {
            method: 'POST',
            credentials: 'include',
            redirect: 'follow',
            body: formData
        }).then((response) =>{
                if(response && response.redirected)
                    this.setState({logged: false});
                else {
                    this.setState({logged: true});
                    return response;
                }
            });
    };

    render() {
        let msg = <label>Not Logged</label>
        if(this.state.logged)
            msg = <label>Logged</label>
       return (<form className='f' onSubmit={this.handleSubmit}>
            <input id = 'username' type='text' value={this.state.username} onChange={this.onUsernameChange}/>
            <input id = 'password' type='text' value={this.state.password} onChange={this.onPasswordChange}/>
           {msg}
           <input id = 'submit' type='submit'/>
       </form>);
    }
}


export default Form