<template>
    <div class="login-container">
        <div class="container inner flex-center">
            <div class="login-box box-container">
                <form class="login-form" method="POST" > 
                    <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">Login as Admin</button>
                    </div>
                </form>
            </div>
        </div>
    </div>    
</template>
<script>
import API from "../lib/API";

export default {
    data() {
        return {
            username: "",
            password: "",
        }
    },
    methods: {
        login(e) {
            e.preventDefault();
            var formData = new FormData();
            formData.append("Name",this.username);
            formData.append("Password",this.password);
            API.post('/loginAdmin', formData, {
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(({ data }) => {
                if(typeof data == "object") {
                    this.$store.commit("adminLogin",data[0].AdminID);
                    this.$router.push({ 
                        name: 'admin-index'
                    })
                }  
            });
        }
    }
}
</script>
<style>

</style>