Finish auth migration, now to make it work

resources/assets/scripts/bootstrap.ts

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

resources/assets/scripts/components/Flash.ts

@@ -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>
+    `,
+})

resources/assets/scripts/components/Flash.vue

@@ -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>

resources/assets/scripts/components/MessageBox.ts

@@ -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>
+    `,
+})

resources/assets/scripts/components/MessageBox.vue

@@ -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>

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

@@ -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>
+    `,
+})

resources/assets/scripts/components/auth/ForgotPassword.vue

@@ -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>

resources/assets/scripts/components/auth/Login.ts

@@ -1,5 +1,8 @@
 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 () {
@@ -10,7 +13,10 @@ export default Vue.component('login', {
         };
     },
     components: {
+        Flash,
         LoginForm,
+        ForgotPassword,
+        TwoFactorForm,
     },
     methods: {
         onUpdateEmail: function (value: string) {
@@ -19,18 +25,18 @@ export default Vue.component('login', {
     },
     template: `
         <div>
-            <!--<flash container="mb-2"/>-->
+            <flash container="mb-2"/>
             <login-form
                     v-if="this.$route.name === 'login'"
                     v-bind:user="user"
                     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>
     `,
 });

resources/assets/scripts/components/auth/ResetPassword.ts

@@ -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"
               v-on:submit.prevent="submitForm"
         >
@@ -52,73 +117,5 @@
                 </router-link>
             </div>
         </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>

resources/assets/scripts/components/auth/TwoFactorForm.ts

@@ -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>
+    `,
+});

resources/assets/scripts/components/auth/TwoFactorForm.vue

@@ -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>

resources/assets/scripts/pterodactyl-shims.d.ts

@@ -1,6 +1,19 @@
 import Vue from "vue";
 import {Store} from "vuex";
 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' {
     interface ComponentOptions<V extends Vue> {
@@ -16,6 +29,7 @@ declare module 'vue/types/options' {
 declare module 'vue/types/vue' {
     interface Vue {
         $store: Store<any>,
-        $flash: FlashInterface
+        $flash: FlashInterface,
+        route: (name: string, params?: object, absolute?: boolean) => string,
     }
 }

resources/assets/scripts/router.ts

@@ -7,7 +7,7 @@ const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
 import Login from './components/auth/Login';
 import Dashboard from './components/dashboard/Dashboard.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 {
     Server,