Skip to content

Commit 75ba2ea

Browse files
DaneEverittDaneEveritt
committed
Finish auth migration, now to make it work
1 parent 3b553be commit 75ba2ea

File tree

13 files changed

+375
-384
lines changed

13 files changed

+375
-384
lines changed

‎resources/assets/scripts/bootstrap.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import axios from './helpers/axios';
1+
import axios from './api/http';
22

3-
// @ts-ignore
43
window._ = require('lodash');
54

65
/**
@@ -10,11 +9,9 @@ window._ = require('lodash');
109
*/
1110

1211
try {
13-
// @ts-ignore
1412
window.$ = window.jQuery = require('jquery');
1513
} catch (e) {}
1614

17-
// @ts-ignore
1815
window.axios = axios;
1916

2017
/**
@@ -28,7 +25,6 @@ let token = document.head.querySelector('meta[name="csrf-token"]');
2825
if (token) {
2926
// @ts-ignore
3027
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
31-
3228
// @ts-ignore
3329
window.X_CSRF_TOKEN = token.content;
3430
} else {

‎resources/assets/scripts/components/Flash.ts‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import Vue from 'vue';
2+
import MessageBox from "./MessageBox";
3+
4+
export default Vue.component('flash', {
5+
components: {
6+
MessageBox
7+
},
8+
props: {
9+
container: {type: String, default: ''},
10+
timeout: {type: Number, default: 0},
11+
types: {
12+
type: Object,
13+
default: function () {
14+
return {
15+
base: 'alert',
16+
success: 'alert success',
17+
info: 'alert info',
18+
warning: 'alert warning',
19+
error: 'alert error',
20+
}
21+
}
22+
}
23+
},
24+
25+
data: function () {
26+
return {
27+
notifications: [],
28+
};
29+
},
30+
31+
/**
32+
* Listen for flash events.
33+
*/
34+
created: function () {
35+
const self = this;
36+
window.events.$on('flash', function (data: any) {
37+
self.flash(data.message, data.title, data.severity);
38+
});
39+
40+
window.events.$on('clear-flashes', function () {
41+
self.clear();
42+
});
43+
},
44+
45+
methods: {
46+
/**
47+
* Flash a message to the screen when a flash event is emitted over
48+
* the global event stream.
49+
*/
50+
flash: function (message: string, title: string, severity: string) {
51+
this.$data.notifications.push({
52+
message, severity, title, class: this.$props.types[severity] || this.$props.types.base,
53+
});
54+
55+
if (this.$props.timeout > 0) {
56+
setTimeout(this.hide, this.$props.timeout);
57+
}
58+
},
59+
60+
/**
61+
* Clear all of the flash messages from the screen.
62+
*/
63+
clear: function () {
64+
this.notifications = [];
65+
window.events.$emit('flashes-cleared');
66+
},
67+
68+
/**
69+
* Hide a notification after a given amount of time.
70+
*/
71+
hide: function (item?: number) {
72+
let key = this.$data.notifications.indexOf(item || this.$data.notifications[0]);
73+
this.$data.notifications.splice(key, 1);
74+
},
75+
},
76+
template: `
77+
<div v-if="notifications.length > 0" :class="this.container">
78+
<transition-group tag="div" name="fade">
79+
<div v-for="(item, index) in notifications" :key="index">
80+
<message-box
81+
:class="[item.class, {'mb-2': index < notifications.length - 1}]"
82+
:title="item.title"
83+
:message="item.message"
84+
/>
85+
</div>
86+
</transition-group>
87+
</div>
88+
`,
89+
})

‎resources/assets/scripts/components/Flash.vue‎

Lines changed: 0 additions & 102 deletions
This file was deleted.

‎resources/assets/scripts/components/MessageBox.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Vue from 'vue';
2+
3+
export default Vue.component('message-box', {
4+
props: {
5+
title: {type: String, required: false},
6+
message: {type: String, required: true}
7+
},
8+
template: `
9+
<div class="lg:inline-flex" role="alert">
10+
<span class="title" v-html="title" v-if="title && title.length > 0"></span>
11+
<span class="message" v-html="message"></span>
12+
</div>
13+
`,
14+
})

‎resources/assets/scripts/components/MessageBox.vue‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎resources/assets/scripts/components/auth/ForgotPassword.ts‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import Vue from 'vue';
2+
import {isObject} from 'lodash';
3+
import {AxiosError, AxiosResponse} from "axios";
4+
5+
export default Vue.component('forgot-password', {
6+
props: {
7+
email: {type: String, required: true},
8+
},
9+
mounted: function () {
10+
(this.$refs.email as HTMLElement).focus();
11+
},
12+
data: function () {
13+
return {
14+
X_CSRF_TOKEN: window.X_CSRF_TOKEN,
15+
errors: [],
16+
submitDisabled: false,
17+
showSpinner: false,
18+
};
19+
},
20+
methods: {
21+
updateEmail: function (event: { target: HTMLInputElement }) {
22+
this.$data.submitDisabled = false;
23+
this.$emit('update-email', event.target.value);
24+
},
25+
26+
submitForm: function () {
27+
this.$data.submitDisabled = true;
28+
this.$data.showSpinner = true;
29+
this.$data.errors = [];
30+
this.$flash.clear();
31+
32+
window.axios.post(this.route('auth.forgot-password'), {
33+
email: this.$props.email,
34+
})
35+
.then((response: AxiosResponse) => {
36+
if (!(response.data instanceof Object)) {
37+
throw new Error('An error was encountered while processing this request.');
38+
}
39+
40+
this.$data.submitDisabled = false;
41+
this.$data.showSpinner = false;
42+
this.$flash.success(response.data.status);
43+
this.$router.push({name: 'login'});
44+
})
45+
.catch((err: AxiosError) => {
46+
this.$data.showSpinner = false;
47+
if (!err.response) {
48+
return console.error(err);
49+
}
50+
51+
const response = err.response;
52+
if (response.data && isObject(response.data.errors)) {
53+
response.data.errors.forEach((error: any) => {
54+
this.$flash.error(error.detail);
55+
});
56+
}
57+
});
58+
}
59+
},
60+
template: `
61+
<form class="login-box" method="post" v-on:submit.prevent="submitForm">
62+
<div class="flex flex-wrap -mx-3 mb-6">
63+
<div class="input-open">
64+
<input class="input open-label" id="grid-email" type="email" aria-labelledby="grid-email-label" required
65+
ref="email"
66+
v-bind:class="{ 'has-content': email.length > 0 }"
67+
v-bind:readonly="showSpinner"
68+
v-bind:value="email"
69+
v-on:input="updateEmail($event)"
70+
/>
71+
<label for="grid-email" id="grid-email-label">{{ $t('strings.email') }}</label>
72+
<p class="text-grey-darker text-xs">{{ $t('auth.forgot_password.label_help') }}</p>
73+
</div>
74+
</div>
75+
<div>
76+
<button class="btn btn-blue btn-jumbo" type="submit" v-bind:disabled="submitDisabled">
77+
<span class="spinner white" v-bind:class="{ hidden: ! showSpinner }">&nbsp;</span>
78+
<span v-bind:class="{ hidden: showSpinner }">
79+
{{ $t('auth.forgot_password.button') }}
80+
</span>
81+
</button>
82+
</div>
83+
<div class="pt-6 text-center">
84+
<router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark"
85+
aria-label="Go to login"
86+
:to="{ name: 'login' }"
87+
>
88+
{{ $t('auth.go_to_login') }}
89+
</router-link>
90+
</div>
91+
</form>
92+
`,
93+
})

0 commit comments

Comments
 (0)