Undo the ts setting in vue components, begin migration to Vue.component setup
This commit is contained in:
Dane Everitt
parent
0e1d35c8a0
commit
6330d6579f
35 changed files with 179 additions and 198 deletions
|
|
@ -36,7 +36,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script>
|
||||
export default {
|
||||
name: 'forgot-password',
|
||||
props: {
|
||||
|
|
|
|||
36
resources/assets/scripts/components/auth/Login.ts
Normal file
36
resources/assets/scripts/components/auth/Login.ts
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import Vue from 'vue';
|
||||
import LoginForm from "./LoginForm";
|
||||
|
||||
export default Vue.component('login', {
|
||||
data: function () {
|
||||
return {
|
||||
user: {
|
||||
email: ''
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
LoginForm,
|
||||
},
|
||||
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>
|
||||
`,
|
||||
});
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<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>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Flash from '../Flash.vue';
|
||||
import ForgotPassword from "./ForgotPassword.vue";
|
||||
import LoginForm from "./LoginForm.vue";
|
||||
import TwoFactorForm from "./TwoFactorForm.vue";
|
||||
import Vue from 'vue';
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'login',
|
||||
data: function () {
|
||||
return {
|
||||
user: {
|
||||
email: ''
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onUpdateEmail: function (value) {
|
||||
this.$data.user.email = value;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Flash,
|
||||
TwoFactorForm,
|
||||
ForgotPassword,
|
||||
LoginForm,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
112
resources/assets/scripts/components/auth/LoginForm.ts
Normal file
112
resources/assets/scripts/components/auth/LoginForm.ts
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
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>
|
||||
`,
|
||||
});
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'login-form',
|
||||
props: {
|
||||
user: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: function () {
|
||||
return {
|
||||
email: '',
|
||||
password: '',
|
||||
};
|
||||
},
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
showSpinner: false,
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.$refs.email.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.clearFlashes();
|
||||
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.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) {
|
||||
self.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) {
|
||||
this.$emit('update-email', event.target.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script>
|
||||
export default {
|
||||
name: "ResetPassword",
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
</form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script>
|
||||
export default {
|
||||
name: "two-factor-form",
|
||||
data: function () {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue