keksAccountGUI/src/components/Login.vue

<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-text-field>
        <v-text-field
                label="Password"
                value=""
                type="password"
                v-model="password"
        ></v-text-field>
        <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'

    export default {
        data () {
            return {
                username: '',
                password: '',
                errorMessage: '',
                nameBig: '',
                nameSmall: '',
                loginText: '',
                logintoMainAccount: true
            }
        },
        props: [
            'loginToService',
            'serviceName'
        ],
        methods: {
            'login': function () {
                UserService.login(this.username, this.password).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;
            }
        },
        mounted: function() {
            this.nameBig = this.$store.getters.getSettingValue("name_big");
            this.nameSmall = this.$store.getters.getSettingValue("name_small");
            this.loginText = "Login to "+this.nameBig+this.nameSmall+" too"
        }
    }
</script>


<style>

</style>