<template>
    <div class="login-container">
        <div class="container inner">
            <div class="login-box box-container">
                <router-link to="/admin" class="admin-login">Login as Admin</router-link>
                <form class="login-form">
                    <div class="form-input">
                        <label for="Username">Username</label>
                        <input type="text" name="username" id="Username" v-model="username">
                    </div>
                    <div class="form-input">
                        <label for="Password">Password</label>
                        <input type="password" name="password" id="Password" v-model="password">
                    </div>
                    <div class="form-input">
                        <button class="button w-100 large" @click="login">Sign In</button>
                    </div>
                </form>
                <p class="text-center text-small">Don't have an account yet?</p>
                <p class="text-center register-link"><router-link to="/register">Register</router-link></p>
            </div>
            <div class="login-banner">
                <p class="large">Sign In</p>
                <p>or</p>
                <p class="large">Register</p>
            </div>
        </div>
    </div>    
</template>
<script>
import API from '../lib/API';
export default {
    data() {
        return {
            username: "",
            password: "",
            notice: "",
        }
    },
    mounted() {
        if(this.$store.state.apiKey != 0) {
            this.$router.push("/");
        }
    },
    methods: {
        login(e) {
            e.preventDefault();
            var formData = new FormData();
            formData.append("Name",this.username);
            formData.append("Password",this.password);
            API.post('/loginUser', formData, {
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(({ data }) => {                if(typeof data == "object") {
                    this.$store.commit("login",data[0]);
                    this.$router.push({ 
                        name: 'index'
                    })
                }  
            });
        }
    }
}
</script>
<style>

</style>
