Remove the pterodactyl directory when handling assets

This supports moving away from multiple-theme support in the Panel since that is no longer going to be offered.

resources/assets/scripts/app.js

@@ -0,0 +1,54 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import vuexI18n from 'vuex-i18n';
+import VuexFlash from 'vuex-flash';
+import { createFlashStore } from 'vuex-flash';
+import VueRouter from 'vue-router';
+
+// Helpers
+import { Ziggy } from './helpers/ziggy';
+import Locales from './../../../resources/lang/locales';
+
+// Base Vuejs Templates
+import Login from './components/auth/Login';
+import ResetPassword from './components/auth/ResetPassword';
+
+// Used for the route() helper.
+window.Ziggy = Ziggy;
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({ plugins: [createFlashStore()] });
+const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
+
+Vue.config.productionTip = false;
+Vue.mixin({ methods: { route } });
+
+Vue.use(VueRouter);
+Vue.use(vuexI18n.plugin, store);
+Vue.use(VuexFlash, { mixin: true, template: require('./components/errors/Flash.template') });
+
+Vue.i18n.add('en', Locales.en);
+Vue.i18n.set('en');
+
+const router = new VueRouter({
+    mode: 'history',
+    routes: [
+        { name: 'login', path: '/auth/login', component: Login },
+        { name: 'forgot-password', path: '/auth/password', component: Login },
+        { name: 'checkpoint', path: '/checkpoint', component: Login },
+        {
+            name: 'reset-password',
+            path: '/auth/password/reset/:token',
+            component: ResetPassword,
+            props: function (route) {
+                return { token: route.params.token, email: route.query.email || '' };
+            }
+        },
+        { path: '*', redirect: '/auth/login' }
+    ]
+});
+
+require('./bootstrap');
+
+const app = new Vue({ store, router }).$mount('#pterodactyl');

resources/assets/scripts/bootstrap.js

@@ -0,0 +1,36 @@
+window._ = require('lodash');
+
+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+try {
+    window.$ = window.jQuery = require('jquery');
+} catch (e) {}
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Next we will register the CSRF Token as a common header with Axios so that
+ * all outgoing HTTP requests automatically have it attached. This is just
+ * a simple convenience so we don't have to attach every token manually.
+ */
+
+let token = document.head.querySelector('meta[name="csrf-token"]');
+
+if (token) {
+    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
+    window.X_CSRF_TOKEN = token.content;
+} else {
+    console.error('CSRF token not found in document.');
+}

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

@@ -0,0 +1,96 @@
+<template>
+    <div>
+        <div class="pb-4" v-for="error in errors">
+            <div class="p-2 bg-red-dark border-red-darker border items-center text-red-lightest leading-normal rounded flex lg:inline-flex w-full text-sm"
+                 role="alert">
+                <span class="flex rounded-full bg-red uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Error</span>
+                <span class="mr-2 text-left flex-auto">{{ error }}</span>
+            </div>
+        </div>
+        <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" id="grid-email" type="email" aria-labelledby="grid-email" ref="email" required
+                           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">{{ $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"
+                             :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 = [];
+
+                window.axios.post(this.route('auth.forgot-password'), {
+                    email: this.$props.email,
+                })
+                    .then(function (response) {
+                        self.$data.submitDisabled = false;
+                        self.$data.showSpinner = false;
+                        self.flash({message: response.data.status, variant: 'success'});
+                        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)) {
+                            self.$data.errors.push(response.data.errors[0].detail);
+                        }
+                    });
+            }
+        }
+    }
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <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>
+    import LoginForm from "./LoginForm";
+    import ForgotPassword from "./ForgotPassword";
+    import TwoFactorForm from "./TwoFactorForm";
+
+    export default {
+        name: 'login',
+        data: function () {
+            return {
+                user: {
+                    email: ''
+                },
+            };
+        },
+        methods: {
+            onUpdateEmail: function (value) {
+                this.$data.user.email = value;
+            },
+        },
+        components: {
+            TwoFactorForm,
+            ForgotPassword,
+            LoginForm,
+        },
+    }
+</script>

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

@@ -0,0 +1,121 @@
+<template>
+    <div>
+        <flash-message variant="danger" />
+        <flash-message variant="success" />
+        <div class="pb-4" v-for="error in errors">
+            <div class="p-2 bg-red-dark border-red-darker border items-center text-red-lightest leading-normal rounded flex lg:inline-flex w-full text-sm"
+                 role="alert">
+                <span class="flex rounded-full bg-red uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Error</span>
+                <span class="mr-2 text-left flex-auto">{{ error }}</span>
+            </div>
+        </div>
+        <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" id="grid-username" type="text" name="user" aria-labelledby="grid-username" required
+                           ref="email"
+                           v-bind:readonly="showSpinner"
+                           v-bind:value="user.email"
+                           v-on:input="updateEmail($event)"
+                    />
+                    <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" id="grid-password" type="password" name="password"
+                           ref="password"
+                           v-bind:readonly="showSpinner"
+                           aria-labelledby="grid-password" required
+                           v-model="user.password"
+                    />
+                    <label for="grid-password">{{ $t('strings.password') }}</label>
+                </div>
+            </div>
+            <div>
+                <button class="btn btn-blue btn-jumbo" type="submit" v-bind:disabled="showSpinner">
+                    <span class="spinner white" v-bind:class="{ hidden: ! showSpinner }">&nbsp;</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"
+                             :to="{ name: 'forgot-password' }">
+                    {{ $t('auth.forgot_password.label') }}
+                </router-link>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'login-form',
+        props: {
+            user: {
+                type: Object,
+                required: false,
+                default: function () {
+                    return {
+                        email: '',
+                        password: '',
+                    };
+                },
+            }
+        },
+        data: function () {
+            return {
+                errors: [],
+                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;
+
+                axios.post(this.route('auth.login'), {
+                    user: this.$props.user.email,
+                    password: this.$props.user.password,
+                })
+                    .then(function (response) {
+                        if (response.data.complete) {
+                            return window.location = '/';
+                        }
+
+                        self.$props.user.password = '';
+                        self.$data.showSpinner = false;
+                        self.$router.push({name: 'checkpoint', query: {token: response.data.token}});
+                    })
+                    .catch(function (err) {
+                        self.$props.user.password = '';
+                        self.$data.showSpinner = false;
+                        if (!err.response) {
+                            return console.error(err);
+                        }
+
+                        const response = err.response;
+                        if (response.data && _.isObject(response.data.errors)) {
+                            self.$data.errors = [response.data.errors[0].detail];
+                            self.$refs.password.focus();
+                        }
+                    });
+            },
+
+            // 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>

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

@@ -0,0 +1,117 @@
+<template>
+    <div>
+        <div class="pb-4" v-for="error in errors">
+            <div class="p-2 bg-red-dark border-red-darker border items-center text-red-lightest leading-normal rounded flex lg:inline-flex w-full text-sm"
+                 role="alert">
+                <span class="flex rounded-full bg-red uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Error</span>
+                <span class="mr-2 text-left flex-auto">{{ error }}</span>
+            </div>
+        </div>
+        <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" id="grid-email" type="email" aria-labelledby="grid-email" required
+                           ref="email"
+                           v-bind:class="{ 'has-content': email.length > 0 }"
+                           v-bind: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" id="grid-password" type="password" aria-labelledby="grid-password" required
+                           ref="password"
+                           v-bind:readonly="showSpinner"
+                           v-model="password"
+                    />
+                    <label for="grid-password">{{ $t('strings.password') }}</label>
+                    <p class="text-grey-darker 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" id="grid-password-confirmation" type="password" aria-labelledby="grid-password-confirmation" required
+                           v-bind:readonly="showSpinner"
+                           v-model="passwordConfirmation"
+                    />
+                    <label for="grid-password-confirmation">{{ $t('strings.confirm_password') }}</label>
+                </div>
+            </div>
+            <div>
+                <button class="btn btn-blue btn-jumbo" type="submit" v-bind:class="{ disabled: showSpinner }">
+                    <span class="spinner white" v-bind:class="{ hidden: ! showSpinner }">&nbsp;</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-grey tracking-wide no-underline uppercase hover:text-grey-dark"
+                             :to="{ name: 'login' }"
+                >
+                    {{ $t('auth.go_to_login') }}
+                </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;
+
+                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) {
+                        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)) {
+                            self.$data.errors = [response.data.errors[0].detail];
+                            self.$refs.password.focus();
+                        }
+                    });
+            }
+        }
+    }
+</script>

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

@@ -0,0 +1,65 @@
+<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="submitToken"
+    >
+        <div class="flex flex-wrap -mx-3 mb-6">
+            <div class="input-open">
+                <input class="input" id="grid-code" type="number" name="token" aria-labelledby="grid-username" ref="code" required
+                       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 () {
+            this.$refs.code.focus();
+        },
+        methods: {
+            submitToken: function () {
+                const self = this;
+
+                axios.post(this.route('auth.login-checkpoint'), {
+                    confirmation_token: this.$route.query.token,
+                    authentication_code: this.$data.code,
+                })
+                    .then(function (response) {
+                        window.location = response.data.intended;
+                    })
+                    .catch(function (err) {
+                        if (!err.response) {
+                            return console.error(err);
+                        }
+
+                        const response = err.response;
+                        if (response.data && _.isObject(response.data.errors)) {
+                            self.flash({message: response.data.errors[0].detail, variant: 'danger'});
+                            self.$router.push({ name: 'login' });
+                        }
+                    });
+            }
+        }
+    }
+</script>

resources/assets/scripts/components/errors/Flash.template.js

@@ -0,0 +1,28 @@
+module.exports = `
+    <div class="pb-2" v-if="show">
+        <transition v-if="variant === 'success'">
+            <div class="p-2 bg-green-dark border-green-darker border items-center text-green-lightest leading-normal rounded flex lg:inline-flex w-full text-sm" role="alert">
+                <span class="flex rounded-full bg-green uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Success</span>
+                <span class="mr-2 text-left flex-auto">{{ message }}</span>
+            </div>
+        </transition>
+        <transition v-if="variant === 'danger'">
+            <div class="p-2 bg-red-dark border-red-darker border items-center text-red-lightest leading-normal rounded flex lg:inline-flex w-full text-sm" role="alert">
+                <span class="flex rounded-full bg-red uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Error</span>
+                <span class="mr-2 text-left flex-auto">{{ message }}</span>
+            </div>
+        </transition>
+        <transition v-if="variant === 'info'">
+            <div class="p-2 bg-blue-dark border-blue-darker border items-center text-blue-lightest leading-normal rounded flex lg:inline-flex w-full text-sm" role="alert">
+                <span class="flex rounded-full bg-blue uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Info</span>
+                <span class="mr-2 text-left flex-auto">{{ message }}</span>
+            </div>
+        </transition>
+        <transition v-if="variant === 'warning'">
+            <div class="p-2 bg-yellow-dark border-yellow-darker border items-center text-yellow-lightest leading-normal rounded flex lg:inline-flex w-full text-sm" role="alert">
+                <span class="flex rounded-full bg-yellow uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Warning</span>
+                <span class="mr-2 text-left flex-auto">{{ message }}</span>
+            </div>
+        </transition>
+    </div>
+`;

resources/assets/scripts/components/forms/CSRF.vue

@@ -0,0 +1,14 @@
+<template>
+    <input type="hidden" name="_token" v-bind:value="X_CSRF_TOKEN" />
+</template>
+
+<script>
+    export default {
+        name: 'csrf',
+        data: function () {
+            return {
+                X_CSRF_TOKEN: window.X_CSRF_TOKEN,
+            };
+        },
+    }
+</script>