<template>
    <div class="container">
        <div class="card card-container">
            <img id="profile-img" class="img-login" src="/images/logo2.png" />
            <br>
            <h4 style="text-align: center">Sign In</h4>
            <br>
            <div class="form-signin">
                <div class="div-inputs">
                    <div class="disp-style-row div-input-container">
                        <input type="text" id="txtuser" class="form-control" placeholder="Email" @keypress="_keypressEnter($event, () => { Login() })" required autofocus>
                        <span class="fa fa-envelope" aria-hidden="true"></span>
                    </div>
                    <div class="disp-style-row div-input-container">
                        <input type="password" id="txtpass" class="form-control" placeholder="Password" @keypress="_keypressEnter($event, () => { Login() })" required>
                        <span class="fa fa-unlock-alt" aria-hidden="true"></span>
                    </div>
                </div>
                <div id="remember" class="disp-style-row">
                    <label>
                        <input type="checkbox" value="remember-me"> Remember me
                    </label>
                    <button class="btn btn-lg btn-primary btn-signin" @click="Login()">Sign in</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        data() {
            return {
                user: '',
                pass: ''
            }
        },
        mounted() {
        },
        methods: {
            Login() {
                this.$loading(true);
                this._vueGETfromParam(
                    'user_credentials',
                    'authenticate',
                    {
                        user: $('#txtuser').val(),
                        pass: $('#txtpass').val()
                    },
                response => {
                    try {
                        response = JSON.parse(response);
                    } catch { }

                    if (response.result === 'success') {
                        this.$cookies.set('logged', true);
                        this.$cookies.set('level', parseInt(response.data.level));
                        this.$cookies.set('uid', response.data.uid);
                        this.$cookies.set('email', response.data.email);
                        this.$cookies.set('logintype', response.data.realname);
                        this.$router.go(0); 
                    }
                    else if (response.result === 'error') {
                        this.showErrorMsg({
                            title: 'Error!',
                            message: 'Invalid user credentials!'
                        });
                        this.$loading(false);
                    }
                        else {
                        this.showErrorMsg({
                            title: 'Error!',
                            message: JSON.stringify(response)
                        });
                        this.$loading(false);
                    }
                });
            }
        }
    }
</script>
<style lang="css" scoped>
    @import "/css/forms/login.css";
</style>    