93 lines
2.5 KiB
Vue
93 lines
2.5 KiB
Vue
<template lang='pug'>
|
|
v-container.pa-0.pa-md-3
|
|
v-row.mt-md-5.ma-0(align='center' justify='center')
|
|
v-col.pa-0.pa-md-3(cols='12' md="6" lg="5" xl="4")
|
|
v-form(v-model='valid' ref='form' lazy-validation @submit.prevent='submit')
|
|
v-card
|
|
v-card-title {{$t('common.login')}}
|
|
v-card-subtitle(v-text="$t('login.description')")
|
|
|
|
v-card-text
|
|
v-text-field(v-model='email' type='email'
|
|
validate-on-blur
|
|
:rules='$validators.email' autofocus
|
|
:label='$t("common.email")'
|
|
ref='email')
|
|
|
|
v-text-field(v-model='password'
|
|
:rules='$validators.password'
|
|
type='password'
|
|
:label='$t("common.password")')
|
|
|
|
v-card-actions
|
|
v-btn(text
|
|
tabindex="1"
|
|
@click='forgot' small) {{$t('login.forgot_password')}}
|
|
|
|
v-card-actions
|
|
v-spacer
|
|
|
|
v-btn(v-if='settings.allow_registration'
|
|
to='/register'
|
|
text
|
|
color='orange') {{$t('login.not_registered')}}
|
|
|
|
v-btn(color='success'
|
|
type='submit' outlined
|
|
:disabled='!valid || loading' :loading='loading') {{$t('common.login')}}
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
|
|
export default {
|
|
name: 'Login',
|
|
data () {
|
|
return {
|
|
password: '',
|
|
email: '',
|
|
loading: false,
|
|
valid: false
|
|
}
|
|
},
|
|
computed: mapState(['settings']),
|
|
methods: {
|
|
async forgot () {
|
|
if (!this.email) {
|
|
this.$refs.email.focus()
|
|
return
|
|
}
|
|
this.loading = true
|
|
await this.$axios.$post('/user/recover', { email: this.email })
|
|
this.loading = false
|
|
this.$root.$message('login.check_email', { color: 'success' })
|
|
},
|
|
async submit (e) {
|
|
if (!this.$refs.form.validate()) return
|
|
try {
|
|
this.loading = true
|
|
const data = new URLSearchParams()
|
|
data.append('username', this.email)
|
|
data.append('password', this.password)
|
|
data.append('grant_type', 'password')
|
|
data.append('client_id', 'self')
|
|
await this.$auth.loginWith('local', { data })
|
|
this.loading = false
|
|
this.$root.$message('login.ok',{ color: 'success' })
|
|
} catch (e) {
|
|
this.$root.$message('login.error',{ color: 'error' })
|
|
this.loading = false
|
|
return
|
|
}
|
|
this.email = this.password = ''
|
|
}
|
|
},
|
|
head () {
|
|
return {
|
|
title: this.settings.title + ' - ' + this.$t('common.login')
|
|
}
|
|
}
|
|
}
|
|
</script>
|