Get things into a somewhat working state on the login form

Author: DaneEveritt

app/Http/ViewComposers/AssetComposer.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace Pterodactyl\Http\ViewComposers;
+
+use Illuminate\View\View;
+use Pterodactyl\Services\Helpers\AssetHashService;
+
+class AssetComposer
+{
+    /**
+     * @var \Pterodactyl\Services\Helpers\AssetHashService
+     */
+    private $assetHashService;
+
+    /**
+     * AssetComposer constructor.
+     *
+     * @param \Pterodactyl\Services\Helpers\AssetHashService $assetHashService
+     */
+    public function __construct(AssetHashService $assetHashService)
+    {
+        $this->assetHashService = $assetHashService;
+    }
+
+    /**
+     * Provide access to the asset service in the views.
+     *
+     * @param \Illuminate\View\View $view
+     */
+    public function compose(View $view)
+    {
+        $view->with('asset', $this->assetHashService);
+    }
+}

app/Providers/ViewComposerServiceProvider.php

@@ -3,6 +3,7 @@
 namespace Pterodactyl\Providers;
 
 use Illuminate\Support\ServiceProvider;
+use Pterodactyl\Http\ViewComposers\AssetComposer;
 use Pterodactyl\Http\ViewComposers\ServerListComposer;
 use Pterodactyl\Http\ViewComposers\Server\ServerDataComposer;
 
@@ -13,6 +14,8 @@ class ViewComposerServiceProvider extends ServiceProvider
      */
     public function boot()
     {
+        $this->app->make('view')->composer('*', AssetComposer::class);
+
         $this->app->make('view')->composer('server.*', ServerDataComposer::class);
 
         // Add data to make the sidebar work when viewing a server.

app/Services/Helpers/AssetHashService.php

@@ -2,7 +2,6 @@
 
 namespace Pterodactyl\Services\Helpers;
 
-use Illuminate\Container\Container;
 use Illuminate\Filesystem\FilesystemManager;
 use Illuminate\Contracts\Foundation\Application;
 use Illuminate\Contracts\Cache\Repository as CacheRepository;
@@ -56,73 +55,63 @@ public function __construct(Application $application, CacheRepository $cache, Fi
      *
      * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
      */
-    public function getUrl(string $resource): string
+    public function url(string $resource): string
     {
         $file = last(explode('/', $resource));
 
-        return '/' . ltrim(str_replace($file, array_get($this->getManifest(), $file, $file), $resource), '/');
+        return '/' . ltrim(str_replace($file, array_get($this->manifest(), $file, $file), $resource), '/');
     }
 
     /**
-     * Get the asset manifest and store it in the cache for quicker lookups.
+     * Return a built CSS import using the provided URL.
+     *
+     * @param string $resource
+     * @return string
      *
-     * @return array
      * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
      */
-    public function getManifest(): array
+    public function css(string $resource): string
     {
-        if (! is_null(self::$manifest)) {
-            return self::$manifest;
-        }
-
-        // Skip checking the cache if we are not in production.
-        if ($this->application->environment() === 'production') {
-            $stored = $this->cache->get('Core:AssetManifest');
-            if (! is_null($stored)) {
-                return self::$manifest = $stored;
-            }
-        }
-
-        $contents = json_decode($this->filesystem->get(self::MANIFEST_PATH), true);
-        $this->cache->put('Core:AssetManifest', $contents, 1440);
-
-        return self::$manifest = $contents;
+        return '<link href="' . $this->url($resource) . '" rel="stylesheet preload" crossorigin="anonymous" referrerpolicy="no-referrer">';
     }
 
     /**
-     * Get the URL for a resource in a static context.
+     * Return a built JS import using the provided URL.
      *
      * @param string $resource
      * @return string
      *
      * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
      */
-    public static function url(string $resource): string
+    public function js(string $resource): string
     {
-        return Container::getInstance()->make(self::class)->getUrl($resource);
+        return '<script src="' . $this->url($resource) . '" crossorigin="anonymous"></script>';
     }
 
     /**
-     * @param string $resource
-     * @return string
+     * Get the asset manifest and store it in the cache for quicker lookups.
+     *
+     * @return array
+     *
      * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
      */
-    public static function css(string $resource): string
+    protected function manifest(): array
     {
-        $path = self::url($resource);
+        if (! is_null(self::$manifest)) {
+            return self::$manifest;
+        }
 
-        return '<link href="' . $path . '" rel="stylesheet preload" crossorigin="anonymous" referrerpolicy="no-referrer">';
-    }
+        // Skip checking the cache if we are not in production.
+        if ($this->application->environment() === 'production') {
+            $stored = $this->cache->get('Core:AssetManifest');
+            if (! is_null($stored)) {
+                return self::$manifest = $stored;
+            }
+        }
 
-    /**
-     * @param string $resource
-     * @return string
-     * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
-     */
-    public static function js(string $resource): string
-    {
-        $path = self::url($resource);
+        $contents = json_decode($this->filesystem->get(self::MANIFEST_PATH), true);
+        $this->cache->put('Core:AssetManifest', $contents, 1440);
 
-        return '<script src="' . $path . '" crossorigin="anonymous">';
+        return self::$manifest = $contents;
     }
 }

resources/assets/pterodactyl/css/main.css

@@ -0,0 +1,46 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import { Ziggy } from './helpers/ziggy';
+
+// Base Vuejs Templates
+import Login from './components/auth/Login';
+
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes Vue and other libraries. It is a great starting point when
+ * building robust, powerful web applications using Vue and Laravel.
+ */
+
+require('./bootstrap');
+
+window.Ziggy = Ziggy;
+
+/**
+ * Next, we will create a fresh Vue application instance and attach it to
+ * the page. Then, you may begin adding components to this application
+ * or customize the JavaScript scaffolding to fit your unique needs.
+ */
+
+const route = require('./../../../../vendor/tightenco/ziggy/src/js/route').default;
+
+Vue.config.productionTip = false;
+Vue.mixin({
+    methods: {
+        route: route,
+    },
+});
+
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+    routes: [
+        {
+            path: '/:action?',
+            component: Login,
+        }
+    ]
+});
+
+const app = new Vue({
+    router,
+}).$mount('#pterodactyl');

resources/assets/pterodactyl/scripts/app.js

@@ -0,0 +1,35 @@
+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;
+} else {
+    console.error('CSRF token not found in document.');
+}

resources/assets/pterodactyl/scripts/bootstrap.js

@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" method="post">
+            <div class="flex flex-wrap -mx-3 mb-6">
+                <div class="input-open">
+                    <input class="input" id="grid-email" type="text" aria-labelledby="grid-email" required
+                           v-bind:value="email"
+                           v-on:input="updateEmail($event)"
+                    />
+                    <label for="grid-email">Email</label>
+                    <p class="text-grey-darker text-xs">Enter your account email address to recive instructions on resetting your password.</p>
+                </div>
+            </div>
+            <div>
+                <button class="bg-blue hover:bg-blue-dark hover:border-blue-darker border-blue-dark border text-white p-4 rounded w-full uppercase tracking-wide text-sm"
+                        type="submit">
+                    Recover Account
+                </button>
+            </div>
+            <div class="pt-6 text-center">
+                <router-link to="/" class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark">
+                    Go to Login
+                </router-link>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'forgot-password',
+        props: {
+            email: {type: String, required: true},
+        },
+        methods: {
+            updateEmail: function (event) {
+                this.$emit('update-email', event.target.value);
+            }
+        }
+    }
+</script>

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

@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <login-form
+                v-if="this.$route.path === '/'"
+                v-bind:email="email"
+                v-on:update-email="onEmailUpdate"
+        />
+        <forgot-password
+                v-if="this.$route.path === '/forgot-password'"
+                v-bind:email="email"
+                v-on:update-email="onEmailUpdate"
+        />
+    </div>
+</template>
+
+<script>
+    import LoginForm from "./LoginForm";
+    import ForgotPassword from "./ForgotPassword";
+
+    export default {
+        name: 'login',
+        data: function () {
+            return {
+                email: '',
+            };
+        },
+        methods: {
+            onEmailUpdate: function (value) {
+                this.$data.email = value;
+            },
+        },
+        components: {
+            ForgotPassword,
+            LoginForm
+        },
+    }
+</script>

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

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" :action="route('auth.login')" method="post">
+            <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
+                           v-bind:value="email"
+                           v-on:input="updateEmail($event)"
+                    />
+                    <label for="grid-username">Username or 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" name="password" aria-labelledby="grid-password" required>
+                    <label for="grid-password">Password</label>
+                </div>
+            </div>
+            <div>
+                <button class="bg-blue hover:bg-blue-dark hover:border-blue-darker border-blue-dark border text-white p-4 rounded w-full uppercase tracking-wide text-sm" type="submit">
+                    Sign In
+                </button>
+            </div>
+            <div class="pt-6 text-center">
+                <router-link to="/forgot-password" class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark">
+                    Forgot Password?
+                </router-link>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'login-form',
+        props: {
+            email: { type: String, required: true },
+        },
+        methods: {
+            updateEmail: function (event) {
+                this.$emit('update-email', event.target.value);
+            }
+        }
+    }
+</script>