<template>
    <div>
        <v-alert
                :value="true"
                type="error"
                v-if="errorMessage"
        >
            {{ errorMessage }}
        </v-alert>
        <p>Login to your <span v-if="loginToService">{{ serviceName }}</span><span v-if="!loginToService">{{nameBig}}{{nameSmall}}</span> with your credentials.</p>
        <v-text-field
                label="Username"
                value=""
                v-model="username"
                v-on:keyup.enter="login"
        ></v-text-field>
        <v-text-field
                label="Password"
                value=""
                type="password"
                v-model="password"
                v-on:keyup.enter="login"
        ></v-text-field>
        <div v-if="recaptcha"><vue-recaptcha @verify="onCaptchaVerified" :sitekey="captchaCode"></vue-recaptcha></div>
        <v-checkbox
                v-model="logintoMainAccount"
                :label="loginText"
                v-if="loginToService"
                disabled="true"
        ></v-checkbox>
        <v-checkbox
                v-model="allowSpaces"
                label="Permanent Login at this Device"
                v-if="showPermanentLogin()"
        ></v-checkbox>
        <v-btn
                color="success"
                @click="login"
        >
            Login
        </v-btn>
    </div>
</template>

<script>
    import UserService from '../services/User'
    import VueRecaptcha from 'vue-recaptcha';

    export default {
        data () {
            return {
                username: '',
                password: '',
                errorMessage: '',
                nameBig: '',
                nameSmall: '',
                loginText: '',
                logintoMainAccount: true,
                recaptcha: false,
                captchaCode: '',
                recaptchaToken: ''
            }
        },
        props: [
            'loginToService',
            'serviceName'
        ],
        components: {
            VueRecaptcha
        },
        methods: {
            'login': function () {
                UserService.login(this.username, this.password, this.recaptchaToken).then((res) => {
                    this.errorMessage = '';
                    UserService.setAccessToken(res.data.data["access_token"]);
                    console.log("Login ok, dispatch event");
                    this.$store.dispatch('checkAccount');
                    this.$emit('loggedIn')
                }, (res) => {
                    this.errorMessage = res.response.data.msg;
                });
            },
            showPermanentLogin: function () {
                return false;
                if(this.loginToService && this.logintoMainAccount) {
                    return true;
                }
                if(!this.loginToService) {
                    return true;
                }
                return false;
            },
            onCaptchaVerified: function (recaptchaToken) {
                this.recaptchaToken = recaptchaToken;
            }
        },
        mounted: function() {
            this.nameBig = this.$store.getters.getSettingValue("name_big");
            this.nameSmall = this.$store.getters.getSettingValue("name_small");
            this.recaptcha = this.$store.getters.getSettingValue("");
            this.loginText = "Login to "+this.nameBig+this.nameSmall+" too"

            UserService.getCaptchaSettings().then((res) => {
                this.captchaCode = res.data.data.key;
                this.recaptcha = res.data.data.login;
            });
        }
    }
</script>


<style>

</style>
