Move everything back to vue SFCs
This commit is contained in:
Dane Everitt
parent
761704408e
commit
5bff8d99cc
58 changed files with 2558 additions and 2518 deletions
|
|
@ -1,93 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
import {isObject} from 'lodash';
|
||||
import {AxiosError, AxiosResponse} from "axios";
|
||||
|
||||
export default Vue.component('forgot-password', {
|
||||
props: {
|
||||
email: {type: String, required: true},
|
||||
},
|
||||
mounted: function () {
|
||||
(this.$refs.email as HTMLElement).focus();
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
X_CSRF_TOKEN: window.X_CSRF_TOKEN,
|
||||
errors: [],
|
||||
submitDisabled: false,
|
||||
showSpinner: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateEmail: function (event: { target: HTMLInputElement }) {
|
||||
this.$data.submitDisabled = false;
|
||||
this.$emit('update-email', event.target.value);
|
||||
},
|
||||
|
||||
submitForm: function () {
|
||||
this.$data.submitDisabled = true;
|
||||
this.$data.showSpinner = true;
|
||||
this.$data.errors = [];
|
||||
this.$flash.clear();
|
||||
|
||||
window.axios.post(this.route('auth.forgot-password'), {
|
||||
email: this.$props.email,
|
||||
})
|
||||
.then((response: AxiosResponse) => {
|
||||
if (!(response.data instanceof Object)) {
|
||||
throw new Error('An error was encountered while processing this request.');
|
||||
}
|
||||
|
||||
this.$data.submitDisabled = false;
|
||||
this.$data.showSpinner = false;
|
||||
this.$flash.success(response.data.status);
|
||||
this.$router.push({name: 'login'});
|
||||
})
|
||||
.catch((err: AxiosError) => {
|
||||
this.$data.showSpinner = false;
|
||||
if (!err.response) {
|
||||
return console.error(err);
|
||||
}
|
||||
|
||||
const response = err.response;
|
||||
if (response.data && isObject(response.data.errors)) {
|
||||
response.data.errors.forEach((error: any) => {
|
||||
this.$flash.error(error.detail);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
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-email" type="email" aria-labelledby="grid-email-label" required
|
||||
ref="email"
|
||||
v-bind:class="{ 'has-content': email.length > 0 }"
|
||||
v-bind:readonly="showSpinner"
|
||||
v-bind:value="email"
|
||||
v-on:input="updateEmail($event)"
|
||||
/>
|
||||
<label for="grid-email" id="grid-email-label">{{ $t('strings.email') }}</label>
|
||||
<p class="text-neutral-800 text-xs">{{ $t('auth.forgot_password.label_help') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-jumbo" type="submit" v-bind:disabled="submitDisabled">
|
||||
<span class="spinner white" v-bind:class="{ hidden: ! showSpinner }"> </span>
|
||||
<span v-bind:class="{ hidden: showSpinner }">
|
||||
{{ $t('auth.forgot_password.button') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="pt-6 text-center">
|
||||
<router-link class="text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600"
|
||||
aria-label="Go to login"
|
||||
:to="{ name: 'login' }"
|
||||
>
|
||||
{{ $t('auth.go_to_login') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</form>
|
||||
`,
|
||||
})
|
||||
100
resources/assets/scripts/components/auth/ForgotPassword.vue
Normal file
100
resources/assets/scripts/components/auth/ForgotPassword.vue
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<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-email" type="email" aria-labelledby="grid-email-label" required
|
||||
ref="email"
|
||||
v-bind:class="{ 'has-content': email.length > 0 }"
|
||||
v-bind:readonly="showSpinner"
|
||||
v-bind:value="email"
|
||||
v-on:input="updateEmail($event)"
|
||||
/>
|
||||
<label for="grid-email" id="grid-email-label">{{ $t('strings.email') }}</label>
|
||||
<p class="text-neutral-800 text-xs">{{ $t('auth.forgot_password.label_help') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-jumbo" type="submit" v-bind:disabled="submitDisabled">
|
||||
<span class="spinner white" v-bind:class="{ hidden: ! showSpinner }"> </span>
|
||||
<span v-bind:class="{ hidden: showSpinner }">
|
||||
{{ $t('auth.forgot_password.button') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="pt-6 text-center">
|
||||
<router-link class="text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600"
|
||||
aria-label="Go to login"
|
||||
:to="{ name: 'login' }"
|
||||
>
|
||||
{{ $t('auth.go_to_login') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import {isObject} from 'lodash';
|
||||
import {AxiosError, AxiosResponse} from "axios";
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'ForgotPassword',
|
||||
|
||||
mounted: function () {
|
||||
if (this.$refs.email) {
|
||||
(this.$refs.email as HTMLElement).focus();
|
||||
}
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
X_CSRF_TOKEN: window.X_CSRF_TOKEN,
|
||||
errors: [],
|
||||
submitDisabled: false,
|
||||
showSpinner: false,
|
||||
email: '',
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateEmail: function (event: { target: HTMLInputElement }) {
|
||||
this.submitDisabled = false;
|
||||
this.$emit('update-email', event.target.value);
|
||||
},
|
||||
|
||||
submitForm: function () {
|
||||
this.submitDisabled = true;
|
||||
this.showSpinner = true;
|
||||
this.errors = [];
|
||||
this.$flash.clear();
|
||||
|
||||
window.axios.post(this.route('auth.forgot-password'), {
|
||||
email: this.email,
|
||||
})
|
||||
.then((response: AxiosResponse) => {
|
||||
if (!(response.data instanceof Object)) {
|
||||
throw new Error('An error was encountered while processing this request.');
|
||||
}
|
||||
|
||||
this.submitDisabled = false;
|
||||
this.showSpinner = false;
|
||||
this.$flash.success(response.data.status);
|
||||
this.$router.push({name: 'login'});
|
||||
})
|
||||
.catch((err: AxiosError) => {
|
||||
this.showSpinner = false;
|
||||
if (!err.response) {
|
||||
return console.error(err);
|
||||
}
|
||||
|
||||
const response = err.response;
|
||||
if (response.data && isObject(response.data.errors)) {
|
||||
response.data.errors.forEach((error: any) => {
|
||||
this.$flash.error(error.detail);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
import LoginForm from "./LoginForm";
|
||||
import ForgotPassword from "./ForgotPassword";
|
||||
import TwoFactorForm from "./TwoFactorForm";
|
||||
import Flash from "../Flash";
|
||||
|
||||
export default Vue.component('login', {
|
||||
data: function () {
|
||||
return {
|
||||
user: {
|
||||
email: ''
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Flash,
|
||||
LoginForm,
|
||||
ForgotPassword,
|
||||
TwoFactorForm,
|
||||
},
|
||||
methods: {
|
||||
onUpdateEmail: function (value: string) {
|
||||
this.$data.user.email = value;
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<flash container="mb-2"/>
|
||||
<login-form
|
||||
v-if="this.$route.name === 'login'"
|
||||
v-bind:user="user"
|
||||
v-on:update-email="onUpdateEmail"
|
||||
/>
|
||||
<forgot-password
|
||||
v-if="this.$route.name === 'forgot-password'"
|
||||
v-bind:email="user.email"
|
||||
v-on:update-email="onUpdateEmail"
|
||||
/>
|
||||
<two-factor-form v-if="this.$route.name === 'checkpoint'" />
|
||||
</div>
|
||||
`,
|
||||
});
|
||||
18
resources/assets/scripts/components/auth/Login.vue
Normal file
18
resources/assets/scripts/components/auth/Login.vue
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<Flash container="mb-2"/>
|
||||
<div>
|
||||
<router-view/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import Flash from "../Flash.vue";
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'Login',
|
||||
components: {Flash},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
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 () {
|
||||
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) {
|
||||
this.$flash.error('There was an error with the network request. Please try again.');
|
||||
return console.error(err);
|
||||
}
|
||||
|
||||
const response = err.response;
|
||||
if (response.data && isObject(response.data.errors)) {
|
||||
response.data.errors.forEach((error: any) => {
|
||||
this.$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-primary 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-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600" aria-label="Forgot password"
|
||||
:to="{ name: 'forgot-password' }">
|
||||
{{ $t('auth.forgot_password.label') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</form>
|
||||
`,
|
||||
});
|
||||
104
resources/assets/scripts/components/auth/LoginForm.vue
Normal file
104
resources/assets/scripts/components/auth/LoginForm.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<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"
|
||||
v-model="user.email"
|
||||
/>
|
||||
<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-primary 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-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600" aria-label="Forgot password"
|
||||
:to="{ name: 'forgot-password' }">
|
||||
{{ $t('auth.forgot_password.label') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import {isObject} from 'lodash';
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'LoginForm',
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
showSpinner: false,
|
||||
user: {
|
||||
email: '',
|
||||
password: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
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 () {
|
||||
this.showSpinner = true;
|
||||
|
||||
this.$flash.clear();
|
||||
this.$store.dispatch('auth/login', {user: this.user.email, password: this.user.password})
|
||||
.then(response => {
|
||||
if (response.complete) {
|
||||
return window.location = response.intended;
|
||||
}
|
||||
|
||||
this.user.password = '';
|
||||
this.showSpinner = false;
|
||||
this.$router.push({name: 'checkpoint', query: {token: response.token}});
|
||||
})
|
||||
.catch(err => {
|
||||
this.user.password = '';
|
||||
this.showSpinner = false;
|
||||
(this.$refs.password as HTMLElement).focus();
|
||||
this.$store.commit('auth/logout');
|
||||
|
||||
if (!err.response) {
|
||||
this.$flash.error('There was an error with the network request. Please try again.');
|
||||
return console.error(err);
|
||||
}
|
||||
|
||||
const response = err.response;
|
||||
if (response.data && isObject(response.data.errors)) {
|
||||
response.data.errors.forEach((error: any) => {
|
||||
this.$flash.error(error.detail);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
import {isObject} from 'lodash';
|
||||
import {AxiosError, AxiosResponse} from "axios";
|
||||
|
||||
export default Vue.component('reset-password', {
|
||||
props: {
|
||||
token: {type: String, required: true},
|
||||
email: {type: String, required: false},
|
||||
},
|
||||
mounted: function () {
|
||||
if (this.$props.email.length > 0) {
|
||||
(this.$refs.email as HTMLElement).setAttribute('value', this.$props.email);
|
||||
(this.$refs.password as HTMLElement).focus();
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
errors: [],
|
||||
showSpinner: false,
|
||||
password: '',
|
||||
passwordConfirmation: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateEmailField: function (event: { target: HTMLInputElement }) {
|
||||
this.$data.submitDisabled = event.target.value.length === 0;
|
||||
},
|
||||
|
||||
submitForm: function () {
|
||||
this.$data.showSpinner = true;
|
||||
|
||||
this.$flash.clear();
|
||||
window.axios.post(this.route('auth.reset-password'), {
|
||||
email: this.$props.email,
|
||||
password: this.$data.password,
|
||||
password_confirmation: this.$data.passwordConfirmation,
|
||||
token: this.$props.token,
|
||||
})
|
||||
.then((response: AxiosResponse) => {
|
||||
if (!(response.data instanceof Object)) {
|
||||
throw new Error('An error was encountered while processing this login.');
|
||||
}
|
||||
|
||||
if (response.data.send_to_login) {
|
||||
this.$flash.success('Your password has been reset, please login to continue.');
|
||||
return this.$router.push({ name: 'login' });
|
||||
}
|
||||
|
||||
return window.location = response.data.redirect_to;
|
||||
})
|
||||
.catch((err: AxiosError) => {
|
||||
this.$data.showSpinner = false;
|
||||
if (!err.response) {
|
||||
return console.error(err);
|
||||
}
|
||||
|
||||
const response = err.response;
|
||||
if (response.data && isObject(response.data.errors)) {
|
||||
response.data.errors.forEach((error: any) => {
|
||||
this.$flash.error(error.detail);
|
||||
});
|
||||
(this.$refs.password as HTMLElement).focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" 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-email" type="email" aria-labelledby="grid-email" required
|
||||
ref="email"
|
||||
:class="{ 'has-content': email.length > 0 }"
|
||||
:readonly="showSpinner"
|
||||
v-on:input="updateEmailField"
|
||||
/>
|
||||
<label for="grid-email">{{ $t('strings.email') }}</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" aria-labelledby="grid-password" required
|
||||
ref="password"
|
||||
:class="{ 'has-content' : password.length > 0 }"
|
||||
:readonly="showSpinner"
|
||||
v-model="password"
|
||||
/>
|
||||
<label for="grid-password">{{ $t('strings.password') }}</label>
|
||||
<p class="text-neutral-800 text-xs">{{ $t('auth.password_requirements') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap -mx-3 mb-6">
|
||||
<div class="input-open">
|
||||
<input class="input open-label" id="grid-password-confirmation" type="password" aria-labelledby="grid-password-confirmation" required
|
||||
:class="{ 'has-content' : passwordConfirmation.length > 0 }"
|
||||
:readonly="showSpinner"
|
||||
v-model="passwordConfirmation"
|
||||
/>
|
||||
<label for="grid-password-confirmation">{{ $t('strings.confirm_password') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-jumbo" type="submit" v-bind:class="{ disabled: showSpinner }">
|
||||
<span class="spinner white" v-bind:class="{ hidden: ! showSpinner }"> </span>
|
||||
<span v-bind:class="{ hidden: showSpinner }">
|
||||
{{ $t('auth.reset_password.button') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="pt-6 text-center">
|
||||
<router-link class="text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600"
|
||||
:to="{ name: 'login' }"
|
||||
>
|
||||
{{ $t('auth.go_to_login') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</form>
|
||||
`,
|
||||
})
|
||||
128
resources/assets/scripts/components/auth/ResetPassword.vue
Normal file
128
resources/assets/scripts/components/auth/ResetPassword.vue
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" 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-email" type="email" aria-labelledby="grid-email" required
|
||||
ref="email"
|
||||
:class="{ 'has-content': email.length > 0 }"
|
||||
:readonly="showSpinner"
|
||||
v-on:input="updateEmailField"
|
||||
/>
|
||||
<label for="grid-email">{{ $t('strings.email') }}</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" aria-labelledby="grid-password" required
|
||||
ref="password"
|
||||
:class="{ 'has-content' : password.length > 0 }"
|
||||
:readonly="showSpinner"
|
||||
v-model="password"
|
||||
/>
|
||||
<label for="grid-password">{{ $t('strings.password') }}</label>
|
||||
<p class="text-neutral-800 text-xs">{{ $t('auth.password_requirements') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap -mx-3 mb-6">
|
||||
<div class="input-open">
|
||||
<input class="input open-label" id="grid-password-confirmation" type="password" aria-labelledby="grid-password-confirmation" required
|
||||
:class="{ 'has-content' : passwordConfirmation.length > 0 }"
|
||||
:readonly="showSpinner"
|
||||
v-model="passwordConfirmation"
|
||||
/>
|
||||
<label for="grid-password-confirmation">{{ $t('strings.confirm_password') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-jumbo" type="submit" v-bind:class="{ disabled: showSpinner }">
|
||||
<span class="spinner white" v-bind:class="{ hidden: ! showSpinner }"> </span>
|
||||
<span v-bind:class="{ hidden: showSpinner }">
|
||||
{{ $t('auth.reset_password.button') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="pt-6 text-center">
|
||||
<router-link class="text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600"
|
||||
:to="{ name: 'login' }"
|
||||
>
|
||||
{{ $t('auth.go_to_login') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import {isObject} from 'lodash';
|
||||
import {AxiosError, AxiosResponse} from "axios";
|
||||
|
||||
export default Vue.component('reset-password', {
|
||||
props: {
|
||||
token: {type: String, required: true},
|
||||
email: {type: String, required: false},
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
if (this.$props.email.length > 0) {
|
||||
(this.$refs.email as HTMLElement).setAttribute('value', this.$props.email);
|
||||
(this.$refs.password as HTMLElement).focus();
|
||||
}
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
errors: [],
|
||||
showSpinner: false,
|
||||
password: '',
|
||||
passwordConfirmation: '',
|
||||
submitDisabled: true,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateEmailField: function (event: { target: HTMLInputElement }) {
|
||||
this.submitDisabled = event.target.value.length === 0;
|
||||
},
|
||||
|
||||
submitForm: function () {
|
||||
this.showSpinner = true;
|
||||
|
||||
this.$flash.clear();
|
||||
window.axios.post(this.route('auth.reset-password'), {
|
||||
email: this.$props.email,
|
||||
password: this.password,
|
||||
password_confirmation: this.passwordConfirmation,
|
||||
token: this.$props.token,
|
||||
})
|
||||
.then((response: AxiosResponse) => {
|
||||
if (!(response.data instanceof Object)) {
|
||||
throw new Error('An error was encountered while processing this login.');
|
||||
}
|
||||
|
||||
if (response.data.send_to_login) {
|
||||
this.$flash.success('Your password has been reset, please login to continue.');
|
||||
return this.$router.push({ name: 'login' });
|
||||
}
|
||||
|
||||
return window.location = response.data.redirect_to;
|
||||
})
|
||||
.catch((err: AxiosError) => {
|
||||
this.showSpinner = false;
|
||||
if (!err.response) {
|
||||
return console.error(err);
|
||||
}
|
||||
|
||||
const response = err.response;
|
||||
if (response.data && isObject(response.data.errors)) {
|
||||
response.data.errors.forEach((error: any) => {
|
||||
this.$flash.error(error.detail);
|
||||
});
|
||||
(this.$refs.password as HTMLElement).focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
import {AxiosError, AxiosResponse} from "axios";
|
||||
import {isObject} from 'lodash';
|
||||
|
||||
export default Vue.component('two-factor-form', {
|
||||
data: function () {
|
||||
return {
|
||||
code: '',
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
if ((this.$route.query.token || '').length < 1) {
|
||||
return this.$router.push({ name: 'login' });
|
||||
}
|
||||
|
||||
(this.$refs.code as HTMLElement).focus();
|
||||
},
|
||||
methods: {
|
||||
submitToken: function () {
|
||||
this.$flash.clear();
|
||||
window.axios.post(this.route('auth.login-checkpoint'), {
|
||||
confirmation_token: this.$route.query.token,
|
||||
authentication_code: this.$data.code,
|
||||
})
|
||||
.then((response: AxiosResponse) => {
|
||||
if (!(response.data instanceof Object)) {
|
||||
throw new Error('An error was encountered while processing this login.');
|
||||
}
|
||||
|
||||
localStorage.setItem('token', response.data.token);
|
||||
this.$store.dispatch('login');
|
||||
|
||||
window.location = response.data.intended;
|
||||
})
|
||||
.catch((err: AxiosError) => {
|
||||
this.$store.dispatch('logout');
|
||||
if (!err.response) {
|
||||
return console.error(err);
|
||||
}
|
||||
|
||||
const response = err.response;
|
||||
if (response.data && isObject(response.data.errors)) {
|
||||
response.data.errors.forEach((error: any) => {
|
||||
this.$flash.error(error.detail);
|
||||
});
|
||||
this.$router.push({ name: 'login' });
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<form class="login-box" method="post"
|
||||
v-on:submit.prevent="submitToken"
|
||||
>
|
||||
<div class="flex flex-wrap -mx-3 mb-6">
|
||||
<div class="input-open">
|
||||
<input class="input open-label" id="grid-code" type="number" name="token" aria-labelledby="grid-username" required
|
||||
ref="code"
|
||||
:class="{ 'has-content' : code.length > 0 }"
|
||||
v-model="code"
|
||||
/>
|
||||
<label for="grid-code">{{ $t('auth.two_factor.label') }}</label>
|
||||
<p class="text-neutral-800 text-xs">{{ $t('auth.two_factor.label_help') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-jumbo" type="submit">
|
||||
{{ $t('auth.sign_in') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="pt-6 text-center">
|
||||
<router-link class="text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600"
|
||||
:to="{ name: 'login' }"
|
||||
>
|
||||
Back to Login
|
||||
</router-link>
|
||||
</div>
|
||||
</form>
|
||||
`,
|
||||
});
|
||||
87
resources/assets/scripts/components/auth/TwoFactorForm.vue
Normal file
87
resources/assets/scripts/components/auth/TwoFactorForm.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<form class="login-box" method="post"
|
||||
v-on:submit.prevent="submitToken"
|
||||
>
|
||||
<div class="flex flex-wrap -mx-3 mb-6">
|
||||
<div class="input-open">
|
||||
<input class="input open-label" id="grid-code" type="number" name="token" aria-labelledby="grid-username" required
|
||||
ref="code"
|
||||
:class="{ 'has-content' : code.length > 0 }"
|
||||
v-model="code"
|
||||
/>
|
||||
<label for="grid-code">{{ $t('auth.two_factor.label') }}</label>
|
||||
<p class="text-neutral-800 text-xs">{{ $t('auth.two_factor.label_help') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-jumbo" type="submit">
|
||||
{{ $t('auth.sign_in') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="pt-6 text-center">
|
||||
<router-link class="text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600"
|
||||
:to="{ name: 'login' }"
|
||||
>
|
||||
Back to Login
|
||||
</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import {AxiosError, AxiosResponse} from "axios";
|
||||
import {isObject} from 'lodash';
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'TwoFactorForm',
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
code: '',
|
||||
};
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
if ((this.$route.query.token || '').length < 1) {
|
||||
return this.$router.push({name: 'login'});
|
||||
}
|
||||
|
||||
(this.$refs.code as HTMLElement).focus();
|
||||
},
|
||||
|
||||
methods: {
|
||||
submitToken: function () {
|
||||
this.$flash.clear();
|
||||
window.axios.post(this.route('auth.login-checkpoint'), {
|
||||
confirmation_token: this.$route.query.token,
|
||||
authentication_code: this.$data.code,
|
||||
})
|
||||
.then((response: AxiosResponse) => {
|
||||
if (!(response.data instanceof Object)) {
|
||||
throw new Error('An error was encountered while processing this login.');
|
||||
}
|
||||
|
||||
localStorage.setItem('token', response.data.token);
|
||||
this.$store.dispatch('login');
|
||||
|
||||
window.location = response.data.intended;
|
||||
})
|
||||
.catch((err: AxiosError) => {
|
||||
this.$store.dispatch('logout');
|
||||
if (!err.response) {
|
||||
return console.error(err);
|
||||
}
|
||||
|
||||
const response = err.response;
|
||||
if (response.data && isObject(response.data.errors)) {
|
||||
response.data.errors.forEach((error: any) => {
|
||||
this.$flash.error(error.detail);
|
||||
});
|
||||
this.$router.push({name: 'login'});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue