82 lines
2.0 KiB
Vue
82 lines
2.0 KiB
Vue
<template>
|
|
<div id="container">
|
|
<div class="content">
|
|
<div id="login">
|
|
<div class="logo">
|
|
<img src="/images/logo.png">
|
|
</div>
|
|
|
|
<form class="pure-form pure-form-stacked" @submit.prevent="login">
|
|
<fieldset class="pure-group">
|
|
<input type="text" class="pure-input-1-2" v-model="username" :placeholder="$t('admin.login.usernamePlaceholder')" autofocus>
|
|
<input type="password" class="pure-input-1-2" v-model="password" :placeholder="$t('admin.login.passwordPlaceholder')">
|
|
</fieldset>
|
|
|
|
<button type="submit" class="pure-button pure-button-primary" :disabled="username.trim() == '' || password.trim() == '' || checking">{{ $t(checking ? 'admin.login.buttonChecking' : 'admin.login.button') }} <span v-if="checking"><i class="fas fa-spinner fa-pulse"></i></span></button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: () =>
|
|
{
|
|
return {
|
|
username: '',
|
|
password: '',
|
|
checking: false
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
login()
|
|
{
|
|
var self = this;
|
|
if (self.checking)
|
|
return;
|
|
|
|
self.checking = true;
|
|
|
|
axios.post('/token/login', {
|
|
username: self.username,
|
|
password: self.password
|
|
})
|
|
.then((response) =>
|
|
{
|
|
shared.token = response.data;
|
|
self.$router.push({ path: '/admin/codes' });
|
|
})
|
|
.catch((error) =>
|
|
{
|
|
if (error.response && error.response.status == 403)
|
|
shared.$emit('showNotification', self.$i18n.t('notification.invalidCode'), false);
|
|
else
|
|
shared.$emit('showNotification', error.message);
|
|
})
|
|
.then(() =>
|
|
{
|
|
self.checking = false;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
#login
|
|
{
|
|
text-align: center;
|
|
|
|
input
|
|
{
|
|
display: inline-block;
|
|
}
|
|
|
|
.login
|
|
{
|
|
margin-top: 5em;
|
|
}
|
|
}
|
|
</style> |