<template>
    <v-card width="500" min-height="350" 
                        class="mx-auto my-12" 
                        id="login-box"
                        title="Welcome!"
                        subtitle="Please Log In">
        <v-form>
            <v-responsive class="mx-auto" max-width="475">
                <v-text-field label="Username" 
                              @keyup.enter="submitLogin" 
                              clearable 
                              v-model="user.email"></v-text-field>
                <v-text-field label="Password" 
                              @keyup.enter="submitLogin" 
                              v-model="user.password" clearable
                              type="password"></v-text-field>
                <v-btn color="blue" :loading="logging_in" @click="submitLogin">Login</v-btn>
                <v-banner v-if="show_error" color="error" icon="mdi-exclamation-thick" theme="dark">
                    <v-banner-text>{{ error_message }}</v-banner-text>
                </v-banner>
            </v-responsive>
        </v-form>
    </v-card>
</template>

<script>
import axios from 'axios'

export default {
    name: 'LoginPage',
    data() {
        return {
            user: {
                email: "",
                password: ""
            },
            show_error: false,
            error_message: "",
            error_count: 0,
            logging_in: false
        }
    },
    methods: {
        submitLogin() {
            this.error_message = ""
            this.show_error = false
            let url = this.$api_url + "/users/login"
            this.logging_in = true
            console.log("Logging in...")
            axios
                .post(url, {
                    email: this.user.email,
                    password: this.user.password
                })
                .then(resp => {
                    let data = resp.data
                    console.log(data)
                    if (data.logged_in) {
                        let token = data.token
                        localStorage.setItem('access_token', token.content)
                        let tok = localStorage.getItem('access_token')
                        if (tok.content != "") {
                            this.user.logged_in = true
                            console.log("Logged in")
                            window.location.href = '/'
                        }
                    } else {
                        this.error_message = "Login failed. Invalid username or password."
                        this.error_count += 1
                    }
                })
                .catch(error => { 
                    console.log(error) 
                    this.error_message = "Login failed. Invalid username or password."
                    this.error_count += 1
                })
                .finally(() => {
                    setTimeout(() => {
                        if (this.error_message != ""){
                            this.show_error = true
                        }
                        this.logging_in = false
                        if (this.error_count > 2) {
                            let box = document.getElementById("login-box")
                            box.classList.add("animate__animated")
                            box.classList.add("animate__hinge")
                            setTimeout(() => {
                                box.classList.add("animate__fadeInUp")
                                box.classList.remove("animate__hinge")
                            },5000)
                            this.error_count = 0
                        }
                    },2000)
                })
        }
    }
}
</script>
