import React, { Component } from 'react';

export default class Login extends Component{
    constructor(props){
        super(props);

        this.state={
            username:"",
            password:""
        }

        this.tryLogin = this.tryLogin.bind(this);
    }

    render(){
        return(
            <div>
                <div className="logo"></div>
                <div className="login-block">
                    <form action="">
                        <h1>Login</h1>
                        <input type="text" value={this.state.username} placeholder="Username" id="username" onChange={(e)=>{this.setState({username:e.target.value})}}/>
                        <input type="password" value={this.state.password} placeholder="Password" id="password" onChange={(e)=>{this.setState({password:e.target.value})}} />
                        <button onClick={this.tryLogin}>Submit</button>
                    </form>
                </div>
            </div>
        );
    }

    tryLogin(e){
        e.preventDefault();
        if(this.state.username !== "" && this.state.password !== ""){
            fetch('http://dev.api.solution404.io/login/login', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    username: this.state.username,
                    password: this.state.password
                })
            }).then((res)=>{
                if(res.status === 200){
                    res.json().then((resjson)=>{
                        if(resjson === 'true'){
                            localStorage.setItem("user", this.state.username);
                            console.log(window.location.assign("/"))
                        }
                    });
                }
            })
        }
    }
}