<template>
    <form v-on:submit.prevent="handleSubmit">
        <div v-if="error" class="alert alert-danger">
            {{ error }}
        </div>
        <div class="form-group">
            <label for="exampleInputEmail1">Username</label>
            <input type="text" v-model="username" class="form-control" id="username"
                   aria-describedby="emailHelp" placeholder="Enter email">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" v-model="password" class="form-control"
                   id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">I like cheese</label>
        </div>
        <button type="submit" class="btn btn-primary" v-bind:class="{ disabled: isLoading }">Log in</button>
    </form>
</template>

<script>
import axios from 'axios';

export default {
    name: 'Login',
    data() {
        return {
            username: '',
            password: '',
            error: '',
            isLoading: false
        }
    },
    props: ['user'],
    methods: {
        handleSubmit() {
            console.log("handle submit");
            this.isLoading = true
            this.error = ''

            axios
                .post('/login', {
                    username: this.username,
                    password: this.password
                })
                .then(response => {
                    console.log(response.headers);

                    this.$emit('user-authenticated', response.headers.location);
                    this.username = '';
                    this.password = '';
                }).catch(error => {
                    console.log(error.response.data);
                    if (error.response.data.error) {
                        this.error = error.response.data.error
                    } else {
                        this.error = 'Unknown error'
                    }
                }).finally(() => {
                    this.isLoading = false;
                })
        },
    },
}
</script>

<style scoped lang="scss">
</style>
