113 lines
3.5 KiB
Vue
113 lines
3.5 KiB
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>
|
|
<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>
|