import React from 'react';
import { Redirect } from 'react-router-dom';
import axios from 'axios';

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

        this.state = {
            logged: false
        }

        this.handleSubmit = this.handleSubmit.bind(this);
        this.login = this.login.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault();

        this.login(this.inputUsername.value, this.inputPassword.value);
    }

    async login(username, password) {
        try {
            const response = await axios.post('/api/login', {
                username: username,
                password: password
            });

            localStorage.setItem("token", response.data.error.token);
            this.setState({
                logged: true
            });
        } catch(e) {
            console.log(e.response);
        }
    }

    render() {

        const logged = this.state.logged;
        console.log(logged);
        if(logged) {
            return <Redirect to="/"/>;
        }

        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label htmlFor="username">Username</label>
                    <input type="text" id="usernme" ref={el => this.inputUsername = el}/>
                    <label htmlFor="password">Password</label>
                    <input type="text" id="password" ref={el => this.inputPassword = el}/>
                    <button type="submit">Log In</button>
                </form>
            </div>
        );
    }
}