Finish auth migration, now to make it work

This commit is contained in:
Dane Everitt 2018-12-30 12:13:10 -08:00
parent 3b553beac6
commit 75ba2eac39
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
13 changed files with 375 additions and 384 deletions

View file

@ -1,6 +1,5 @@
import axios from './helpers/axios'; import axios from './api/http';
// @ts-ignore
window._ = require('lodash'); window._ = require('lodash');
/** /**
@ -10,11 +9,9 @@ window._ = require('lodash');
*/ */
try { try {
// @ts-ignore
window.$ = window.jQuery = require('jquery'); window.$ = window.jQuery = require('jquery');
} catch (e) {} } catch (e) {}
// @ts-ignore
window.axios = axios; window.axios = axios;
/** /**
@ -28,7 +25,6 @@ let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) { if (token) {
// @ts-ignore // @ts-ignore
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
// @ts-ignore // @ts-ignore
window.X_CSRF_TOKEN = token.content; window.X_CSRF_TOKEN = token.content;
} else { } else {

View file

@ -0,0 +1,89 @@
import Vue from 'vue';
import MessageBox from "./MessageBox";
export default Vue.component('flash', {
components: {
MessageBox
},
props: {
container: {type: String, default: ''},
timeout: {type: Number, default: 0},
types: {
type: Object,
default: function () {
return {
base: 'alert',
success: 'alert success',
info: 'alert info',
warning: 'alert warning',
error: 'alert error',
}
}
}
},
data: function () {
return {
notifications: [],
};
},
/**
* Listen for flash events.
*/
created: function () {
const self = this;
window.events.$on('flash', function (data: any) {
self.flash(data.message, data.title, data.severity);
});
window.events.$on('clear-flashes', function () {
self.clear();
});
},
methods: {
/**
* Flash a message to the screen when a flash event is emitted over
* the global event stream.
*/
flash: function (message: string, title: string, severity: string) {
this.$data.notifications.push({
message, severity, title, class: this.$props.types[severity] || this.$props.types.base,
});
if (this.$props.timeout > 0) {
setTimeout(this.hide, this.$props.timeout);
}
},
/**
* Clear all of the flash messages from the screen.
*/
clear: function () {
this.notifications = [];
window.events.$emit('flashes-cleared');
},
/**
* Hide a notification after a given amount of time.
*/
hide: function (item?: number) {
let key = this.$data.notifications.indexOf(item || this.$data.notifications[0]);
this.$data.notifications.splice(key, 1);
},
},
template: `
<div v-if="notifications.length > 0" :class="this.container">
<transition-group tag="div" name="fade">
<div v-for="(item, index) in notifications" :key="index">
<message-box
:class="[item.class, {'mb-2': index < notifications.length - 1}]"
:title="item.title"
:message="item.message"
/>
</div>
</transition-group>
</div>
`,
})

View file

@ -1,102 +0,0 @@
<template>
<div v-if="notifications.length > 0" :class="this.container">
<transition-group tag="div" name="fade">
<div v-for="(item, index) in notifications" :key="index">
<message-box
:class="[item.class, {'mb-2': index < notifications.length - 1}]"
:title="item.title"
:message="item.message"
/>
</div>
</transition-group>
</div>
</template>
<script>
import MessageBox from './MessageBox.vue';
export default {
name: 'flash',
components: {MessageBox},
props: {
container: {
type: String,
default: '',
},
timeout: {
type: Number,
default: 0,
},
types: {
type: Object,
default: function () {
return {
base: 'alert',
success: 'alert success',
info: 'alert info',
warning: 'alert warning',
error: 'alert error',
}
}
}
},
data: function () {
return {
notifications: [],
};
},
/**
* Listen for flash events.
*/
created: function () {
const self = this;
window.events.$on('flash', function (data) {
self.flash(data.message, data.title, data.severity);
});
window.events.$on('clear-flashes', function () {
self.clear();
});
},
methods: {
/**
* Flash a message to the screen when a flash event is emitted over
* the global event stream.
*
* @param {string} message
* @param {string} title
* @param {string} severity
*/
flash: function (message, title, severity) {
this.notifications.push({
message, severity, title, class: this.types[severity] || this.types.base,
});
if (this.timeout > 0) {
setTimeout(this.hide, this.timeout);
}
},
/**
* Clear all of the flash messages from the screen.
*/
clear: function () {
this.notifications = [];
window.events.$emit('flashes-cleared');
},
/**
* Hide a notification after a given amount of time.
*
* @param {int} item
*/
hide: function (item = this.notifications[0]) {
let key = this.notifications.indexOf(item);
this.notifications.splice(key, 1);
},
}
};
</script>

View file

@ -0,0 +1,14 @@
import Vue from 'vue';
export default Vue.component('message-box', {
props: {
title: {type: String, required: false},
message: {type: String, required: true}
},
template: `
<div class="lg:inline-flex" role="alert">
<span class="title" v-html="title" v-if="title && title.length > 0"></span>
<span class="message" v-html="message"></span>
</div>
`,
})

View file

@ -1,16 +0,0 @@
<template>
<div class="lg:inline-flex" role="alert">
<span class="title" v-html="title" v-if="title && title.length > 0"></span>
<span class="message" v-html="message"></span>
</div>
</template>
<script>
export default {
name: 'message-box',
props: {
title: {type: String, required: false},
message: {type: String, required: true}
},
};
</script>

View file

@ -0,0 +1,93 @@
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-grey-darker text-xs">{{ $t('auth.forgot_password.label_help') }}</p>
</div>
</div>
<div>
<button class="btn btn-blue btn-jumbo" type="submit" v-bind:disabled="submitDisabled">
<span class="spinner white" v-bind:class="{ hidden: ! showSpinner }">&nbsp;</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-grey tracking-wide no-underline uppercase hover:text-grey-dark"
aria-label="Go to login"
:to="{ name: 'login' }"
>
{{ $t('auth.go_to_login') }}
</router-link>
</div>
</form>
`,
})

View file

@ -1,98 +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-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-grey-darker text-xs">{{ $t('auth.forgot_password.label_help') }}</p>
</div>
</div>
<div>
<button class="btn btn-blue btn-jumbo" type="submit" v-bind:disabled="submitDisabled">
<span class="spinner white" v-bind:class="{ hidden: ! showSpinner }">&nbsp;</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-grey tracking-wide no-underline uppercase hover:text-grey-dark"
aria-label="Go to login"
:to="{ name: 'login' }"
>
{{ $t('auth.go_to_login') }}
</router-link>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'forgot-password',
props: {
email: {type: String, required: true},
},
mounted: function () {
this.$refs.email.focus();
},
data: function () {
return {
X_CSRF_TOKEN: window.X_CSRF_TOKEN,
errors: [],
submitDisabled: false,
showSpinner: false,
};
},
methods: {
updateEmail: function (event) {
this.$data.submitDisabled = false;
this.$emit('update-email', event.target.value);
},
submitForm: function () {
const self = this;
this.$data.submitDisabled = true;
this.$data.showSpinner = true;
this.$data.errors = [];
this.clearFlashes();
window.axios.post(this.route('auth.forgot-password'), {
email: this.$props.email,
})
.then(function (response) {
if (!(response.data instanceof Object)) {
throw new Error('An error was encountered while processing this request.');
}
self.$data.submitDisabled = false;
self.$data.showSpinner = false;
self.success(response.data.status);
self.$router.push({name: 'login'});
})
.catch(function (err) {
self.$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(function (error) {
self.error(error.detail);
});
}
});
}
}
}
</script>

View file

@ -1,5 +1,8 @@
import Vue from 'vue'; import Vue from 'vue';
import LoginForm from "./LoginForm"; import LoginForm from "./LoginForm";
import ForgotPassword from "./ForgotPassword";
import TwoFactorForm from "./TwoFactorForm";
import Flash from "../Flash";
export default Vue.component('login', { export default Vue.component('login', {
data: function () { data: function () {
@ -10,7 +13,10 @@ export default Vue.component('login', {
}; };
}, },
components: { components: {
Flash,
LoginForm, LoginForm,
ForgotPassword,
TwoFactorForm,
}, },
methods: { methods: {
onUpdateEmail: function (value: string) { onUpdateEmail: function (value: string) {
@ -19,18 +25,18 @@ export default Vue.component('login', {
}, },
template: ` template: `
<div> <div>
<!--<flash container="mb-2"/>--> <flash container="mb-2"/>
<login-form <login-form
v-if="this.$route.name === 'login'" v-if="this.$route.name === 'login'"
v-bind:user="user" v-bind:user="user"
v-on:update-email="onUpdateEmail" v-on:update-email="onUpdateEmail"
/> />
<!--<forgot-password--> <forgot-password
<!--v-if="this.$route.name === 'forgot-password'"--> v-if="this.$route.name === 'forgot-password'"
<!--v-bind:email="user.email"--> v-bind:email="user.email"
<!--v-on:update-email="onUpdateEmail"--> v-on:update-email="onUpdateEmail"
<!--/>--> />
<!--<two-factor-form v-if="this.$route.name === 'checkpoint'" />--> <two-factor-form v-if="this.$route.name === 'checkpoint'" />
</div> </div>
`, `,
}); });

View file

@ -1,5 +1,70 @@
<template> import Vue from 'vue';
<div> 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" <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" v-on:submit.prevent="submitForm"
> >
@ -52,73 +117,5 @@
</router-link> </router-link>
</div> </div>
</form> </form>
</div> `,
</template> })
<script>
export default {
name: "ResetPassword",
props: {
token: {type: String, required: true},
email: {type: String, required: false},
},
mounted: function () {
if (this.$props.email.length > 0) {
this.$refs.email.value = this.$props.email;
return this.$refs.password.focus();
}
},
data: function () {
return {
errors: [],
showSpinner: false,
password: '',
passwordConfirmation: '',
};
},
methods: {
updateEmailField: function (event) {
this.$data.submitDisabled = event.target.value.length === 0;
},
submitForm: function () {
const self = this;
this.$data.showSpinner = true;
this.clearFlashes();
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(function (response) {
if (!(response.data instanceof Object)) {
throw new Error('An error was encountered while processing this login.');
}
if (response.data.send_to_login) {
self.success('Your password has been reset, please login to continue.');
return self.$router.push({ name: 'login' });
}
return window.location = response.data.redirect_to;
})
.catch(function (err) {
self.$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(function (error) {
self.error(error.detail);
});
self.$refs.password.focus();
}
});
}
}
}
</script>

View file

@ -0,0 +1,80 @@
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-grey-darker text-xs">{{ $t('auth.two_factor.label_help') }}</p>
</div>
</div>
<div>
<button class="btn btn-blue btn-jumbo" type="submit">
{{ $t('auth.sign_in') }}
</button>
</div>
<div class="pt-6 text-center">
<router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark"
:to="{ name: 'login' }"
>
Back to Login
</router-link>
</div>
</form>
`,
});

View file

@ -1,82 +0,0 @@
<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-grey-darker text-xs">{{ $t('auth.two_factor.label_help') }}</p>
</div>
</div>
<div>
<button class="btn btn-blue btn-jumbo" type="submit">
{{ $t('auth.sign_in') }}
</button>
</div>
<div class="pt-6 text-center">
<router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark"
:to="{ name: 'login' }"
>
Back to Login
</router-link>
</div>
</form>
</template>
<script>
export default {
name: "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.focus();
},
methods: {
submitToken: function () {
const self = this;
self.clearFlashes();
axios.post(this.route('auth.login-checkpoint'), {
confirmation_token: this.$route.query.token,
authentication_code: this.$data.code,
})
.then(function (response) {
if (!(response.data instanceof Object)) {
throw new Error('An error was encountered while processing this login.');
}
localStorage.setItem('token', response.data.token);
self.$store.dispatch('login');
window.location = response.data.intended;
})
.catch(function (err) {
self.$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(function (error) {
self.error(error.detail);
});
self.$router.push({ name: 'login' });
}
});
}
}
}
</script>

View file

@ -1,6 +1,19 @@
import Vue from "vue"; import Vue from "vue";
import {Store} from "vuex"; import {Store} from "vuex";
import {FlashInterface} from "./mixins/flash"; import {FlashInterface} from "./mixins/flash";
import {AxiosInstance} from "axios";
import {Vue as VueType} from "vue/types/vue";
declare global {
interface Window {
X_CSRF_TOKEN: string,
_: any,
$: any,
jQuery: any,
axios: AxiosInstance,
events: VueType,
}
}
declare module 'vue/types/options' { declare module 'vue/types/options' {
interface ComponentOptions<V extends Vue> { interface ComponentOptions<V extends Vue> {
@ -16,6 +29,7 @@ declare module 'vue/types/options' {
declare module 'vue/types/vue' { declare module 'vue/types/vue' {
interface Vue { interface Vue {
$store: Store<any>, $store: Store<any>,
$flash: FlashInterface $flash: FlashInterface,
route: (name: string, params?: object, absolute?: boolean) => string,
} }
} }

View file

@ -7,7 +7,7 @@ const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
import Login from './components/auth/Login'; import Login from './components/auth/Login';
import Dashboard from './components/dashboard/Dashboard.vue'; import Dashboard from './components/dashboard/Dashboard.vue';
import Account from './components/dashboard/Account.vue'; import Account from './components/dashboard/Account.vue';
import ResetPassword from './components/auth/ResetPassword.vue'; import ResetPassword from './components/auth/ResetPassword';
import User from './models/user'; import User from './models/user';
import { import {
Server, Server,