112 lines
4.6 KiB
TypeScript
112 lines
4.6 KiB
TypeScript
import Vue from 'vue';
|
|
import {isObject} from 'lodash';
|
|
|
|
export default Vue.component('login-form', {
|
|
props: {
|
|
user: {
|
|
type: Object,
|
|
required: false,
|
|
default: function () {
|
|
return {
|
|
email: '',
|
|
password: '',
|
|
};
|
|
},
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
showSpinner: false,
|
|
}
|
|
},
|
|
mounted: function () {
|
|
(this.$refs.email as HTMLElement).focus();
|
|
},
|
|
methods: {
|
|
// Handle a login request eminating from the form. If 2FA is required the
|
|
// user will be presented with the 2FA modal window.
|
|
submitForm: function () {
|
|
const self = this;
|
|
this.$data.showSpinner = true;
|
|
|
|
this.$flash.clear();
|
|
this.$store.dispatch('auth/login', {user: this.$props.user.email, password: this.$props.user.password})
|
|
.then(response => {
|
|
if (response.complete) {
|
|
return window.location = response.intended;
|
|
}
|
|
|
|
this.$props.user.password = '';
|
|
this.$data.showSpinner = false;
|
|
this.$router.push({name: 'checkpoint', query: {token: response.token}});
|
|
})
|
|
.catch(err => {
|
|
this.$props.user.password = '';
|
|
this.$data.showSpinner = false;
|
|
(this.$refs.password as HTMLElement).focus();
|
|
this.$store.commit('auth/logout');
|
|
|
|
if (!err.response) {
|
|
return console.error(err);
|
|
}
|
|
|
|
const response = err.response;
|
|
if (response.data && isObject(response.data.errors)) {
|
|
response.data.errors.forEach(function (error: any) {
|
|
self.$flash.error(error.detail);
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
// Update the email address associated with the login form
|
|
// so that it is populated in the parent model automatically.
|
|
updateEmail: function (event: { target: HTMLInputElement }) {
|
|
this.$emit('update-email', event.target.value);
|
|
}
|
|
},
|
|
template: `
|
|
<form class="login-box" method="post"
|
|
v-on:submit.prevent="submitForm"
|
|
>
|
|
<div class="flex flex-wrap -mx-3 mb-6">
|
|
<div class="input-open">
|
|
<input class="input open-label" id="grid-username" type="text" name="user" aria-labelledby="grid-username-label" required
|
|
ref="email"
|
|
:class="{ 'has-content' : user.email.length > 0 }"
|
|
:readonly="showSpinner"
|
|
:value="user.email"
|
|
v-on:input="updateEmail($event)"
|
|
/>
|
|
<label id="grid-username-label" for="grid-username">{{ $t('strings.user_identifier') }}</label>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap -mx-3 mb-6">
|
|
<div class="input-open">
|
|
<input class="input open-label" id="grid-password" type="password" name="password" aria-labelledby="grid-password-label" required
|
|
ref="password"
|
|
:class="{ 'has-content' : user.password && user.password.length > 0 }"
|
|
:readonly="showSpinner"
|
|
v-model="user.password"
|
|
/>
|
|
<label id="grid-password-label" for="grid-password">{{ $t('strings.password') }}</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button id="grid-login-button" class="btn btn-blue btn-jumbo" type="submit" aria-label="Log in"
|
|
v-bind:disabled="showSpinner">
|
|
<span class="spinner white" v-bind:class="{ hidden: ! showSpinner }"> </span>
|
|
<span v-bind:class="{ hidden: showSpinner }">
|
|
{{ $t('auth.sign_in') }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="pt-6 text-center">
|
|
<router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark" aria-label="Forgot password"
|
|
:to="{ name: 'forgot-password' }">
|
|
{{ $t('auth.forgot_password.label') }}
|
|
</router-link>
|
|
</div>
|
|
</form>
|
|
`,
|
|
});
|