Base attempt at using vuex to handle logins

app/Http/Controllers/Api/Client/AccountController.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace Pterodactyl\Http\Controllers\Api\Client;
+
+use Illuminate\Http\Request;
+use Pterodactyl\Transformers\Api\Client\AccountTransformer;
+
+class AccountController extends ClientApiController
+{
+    public function index(Request $request): array
+    {
+        return $this->fractal->item($request->user())
+            ->transformWith($this->getTransformer(AccountTransformer::class))
+            ->toArray();
+    }
+}

app/Http/Controllers/Auth/AbstractLoginController.php

@@ -2,7 +2,6 @@
 
 namespace Pterodactyl\Http\Controllers\Auth;
 
-use Cake\Chronos\Chronos;
 use Lcobucci\JWT\Builder;
 use Illuminate\Http\Request;
 use Pterodactyl\Models\User;
@@ -16,6 +15,7 @@ use Illuminate\Contracts\Auth\Authenticatable;
 use Illuminate\Contracts\Encryption\Encrypter;
 use Illuminate\Foundation\Auth\AuthenticatesUsers;
 use Pterodactyl\Traits\Helpers\ProvidesJWTServices;
+use Pterodactyl\Transformers\Api\Client\AccountTransformer;
 use Illuminate\Contracts\Cache\Repository as CacheRepository;
 use Pterodactyl\Contracts\Repository\UserRepositoryInterface;
 
@@ -137,24 +137,18 @@ abstract class AbstractLoginController extends Controller
         $request->session()->regenerate();
         $this->clearLoginAttempts($request);
 
-        $token = $this->builder->setIssuer(config('app.url'))
-            ->setAudience(config('app.url'))
-            ->setId(str_random(12), true)
-            ->setIssuedAt(Chronos::now()->getTimestamp())
-            ->setNotBefore(Chronos::now()->getTimestamp())
-            ->setExpiration(Chronos::now()->addSeconds(config('session.lifetime'))->getTimestamp())
-            ->set('user', $user->only([
-                'id', 'uuid', 'username', 'email', 'name_first', 'name_last', 'language', 'root_admin',
-            ]))
-            ->sign($this->getJWTSigner(), $this->getJWTSigningKey())
-            ->getToken();
-
         $this->auth->guard()->login($user, true);
 
+        debug($request->cookies->all());
+
         return response()->json([
             'complete' => true,
             'intended' => $this->redirectPath(),
-            'token' => $token->__toString(),
+            'cookie' => [
+                'name' => config('session.cookie'),
+                'value' => $this->encrypter->encrypt($request->cookie(config('session.cookie'))),
+            ],
+            'user' => (new AccountTransformer())->transform($user),
         ]);
     }
 

app/Transformers/Api/Client/AccountTransformer.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace Pterodactyl\Transformers\Api\Client;
+
+use Pterodactyl\Models\User;
+
+class AccountTransformer extends BaseClientTransformer
+{
+    /**
+     * Return the resource name for the JSONAPI output.
+     *
+     * @return string
+     */
+    public function getResourceName(): string
+    {
+        return 'user';
+    }
+
+    /**
+     * Return basic information about the currently logged in user.
+     *
+     * @param \Pterodactyl\Models\User $model
+     * @return array
+     */
+    public function transform(User $model)
+    {
+        return [
+            'admin' => $model->root_admin,
+            'username' => $model->username,
+            'email' => $model->email,
+            'first_name' => $model->name_first,
+            'last_name' => $model->name_last,
+            'language' => $model->language,
+        ];
+    }
+}

resources/assets/scripts/app.js

@@ -8,16 +8,17 @@ import { Ziggy } from './helpers/ziggy';
 import Locales from './../../../resources/lang/locales';
 import { flash } from './mixins/flash';
 import { routes } from './routes';
-import { storeData } from './store';
+import storeData from './store/index.js';
 
 window.events = new Vue;
 window.Ziggy = Ziggy;
 
+Vue.config.productionTip = false;
 Vue.use(Vuex);
+
 const store = new Vuex.Store(storeData);
 const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
 
-Vue.config.productionTip = false;
 Vue.mixin({ methods: { route } });
 Vue.mixin(flash);
 

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

@@ -77,32 +77,21 @@
                 this.$data.showSpinner = true;
 
                 this.clearFlashes();
-                axios.post(this.route('auth.login'), {
+                this.$store.dispatch('auth/login', { user: this.$props.user.email, password: this.$props.user.password })
-                    user: this.$props.user.email,
+                    .then(response => {
-                    password: this.$props.user.password,
+                        if (response.complete) {
-                })
+                            return window.location = response.intended;
-                    .then(function (response) {
-                        // If there is a 302 redirect or some other odd behavior (basically, response that isnt
-                        // in JSON format) throw an error and don't try to continue with the login.
-                        if (!(response.data instanceof Object)) {
-                            throw new Error('An error was encountered while processing this request.');
                         }
 
-                        if (response.data.complete) {
+                        this.$props.user.password = '';
-                            localStorage.setItem('token', response.data.token);
+                        this.$data.showSpinner = false;
-                            self.$store.dispatch('login');
+                        this.$router.push({name: 'checkpoint', query: {token: response.login_token}});
-                            return window.location = response.data.intended;
-                        }
-
-                        self.$props.user.password = '';
-                        self.$data.showSpinner = false;
-                        self.$router.push({name: 'checkpoint', query: {token: response.data.login_token}});
                     })
-                    .catch(function (err) {
+                    .catch(err => {
-                        self.$props.user.password = '';
+                        this.$props.user.password = '';
-                        self.$data.showSpinner = false;
+                        this.$data.showSpinner = false;
-                        self.$refs.password.focus();
+                        this.$refs.password.focus();
-                        self.$store.dispatch('logout');
+                        this.$store.dispatch('auth/logout');
 
                         if (!err.response) {
                             return console.error(err);

resources/assets/scripts/components/dashboard/Dashboard.vue

@@ -29,7 +29,7 @@
 
 <script>
     import { DateTime } from 'luxon';
-    import { ServerCollection } from '../../models/server';
+    import Server from '../../models/server';
     import _ from 'lodash';
     import Flash from '../Flash';
     import ServerBox from './ServerBox';
@@ -44,7 +44,7 @@
                 documentVisible: true,
                 loading: true,
                 search: '',
-                servers: new ServerCollection,
+                servers: [],
             }
         },
 
@@ -83,14 +83,14 @@
                         this.clearFlashes();
                     })
                     .then(response => {
-                        this.servers = new ServerCollection;
+                        this.servers = [];
                         response.data.data.forEach(obj => {
-                            this.getResourceUse(
+                            const s = new Server(obj.attributes);
-                                this.servers.add(obj.attributes)
+                            this.servers.push(s);
-                            );
+                            this.getResourceUse(s);
                         });
 
-                        if (this.servers.models.length === 0) {
+                        if (this.servers.length === 0) {
                             this.info(this.$t('dashboard.index.no_matches'));
                         }
                     })

resources/assets/scripts/models/server.js

@@ -1,114 +1,3 @@
-import { Collection, Model } from 'vue-mc';
+export default class Server {
 
-/**
- * A generic server model used throughout the code base.
- */
-export class Server extends Model {
-    /**
-     * Identifier the primary identifier for this model.
-     *
-     * @returns {{identifier: string}}
-     */
-    static options() {
-        return {
-            identifier: 'identifier',
-        };
-    }
-
-    /**
-     * Return the defaults for this model.
-     *
-     * @returns {object}
-     */
-    static defaults() {
-        return {
-            uuid: null,
-            identifier: null,
-            name: '',
-            description: '',
-            node: '',
-            limits: {
-                memory: 0,
-                swap: 0,
-                disk: 0,
-                io: 0,
-                cpu: 0,
-            },
-            allocation: {
-                ip: null,
-                port: null,
-            },
-            feature_limits: {
-                databases: 0,
-                allocations: 0,
-            },
-        };
-    }
-
-    /**
-     * Mutations to apply to items in this model.
-     *
-     * @returns {{name: StringConstructor, description: StringConstructor}}
-     */
-    static mutations() {
-        return {
-            uuid: String,
-            identifier: String,
-            name: String,
-            description: String,
-            node: String,
-            limits: {
-                memory: Number,
-                swap: Number,
-                disk: Number,
-                io: Number,
-                cpu: Number,
-            },
-            allocation: {
-                ip: String,
-                port: Number,
-            },
-            feature_limits: {
-                databases: Number,
-                allocations: Number,
-            }
-        };
-    }
-
-    /**
-     * Routes to use when building models.
-     *
-     * @returns {{fetch: string}}
-     */
-    static routes() {
-        return {
-            fetch: '/api/client/servers/{identifier}',
-        };
-    }
-}
-
-export class ServerCollection extends Collection {
-    static model() {
-        return Server;
-    }
-
-    static defaults() {
-        return {
-            orderBy: identifier,
-        };
-    }
-
-    static routes() {
-        return {
-            fetch: '/api/client',
-        };
-    }
-
-    get todo() {
-        return this.sum('done');
-    }
-
-    get done() {
-        return this.todo === 0;
-    }
 }

resources/assets/scripts/models/user.js

@@ -1,48 +1,51 @@
-import { Collection, Model } from 'vue-mc';
+export default class User {
-import JwtDecode from 'jwt-decode';
+    /**
-
+     * Get a new user model by hitting the Panel API using the authentication token
-export class User extends Model {
+     * provided. If no user can be retrieved null will be returned.
-    static defaults() {
+     *
-        return {
+     * @param {string} token
-            id: null,
+     * @param {string} cookie
-            uuid: '',
+     * @return {User|null}
-            username: '',
+     */
-            email: '',
+    static fromCookie(token, cookie = 'pterodactyl_session') {
-            name_first: '',
+        window.axios.get('/api/client/account', {
-            name_last: '',
+            headers: {
-            language: 'en',
+                Cookie: `${cookie}=${token}`,
-            root_admin: false,
+            }
-        }
+        })
+            .then(response => {
+                return new User(response.data.attributes);
+            })
+            .catch(err => {
+                console.error(err);
+                return null;
+            })
     }
 
-    static mutations() {
+    /**
-        return {
+     * Create a new user model.
-            id: Number,
+     *
-            uuid: String,
+     * @param {Boolean} admin
-            username: String,
+     * @param {String} username
-            email: String,
+     * @param {String} email
-            name_first: String,
+     * @param {String} first_name
-            name_last: String,
+     * @param {String} last_name
-            language: String,
+     * @param {String} language
-            root_admin: Boolean,
+     */
-        }
+    constructor({
-    }
+        admin,
-
+        username,
-    static fromJWT(token) {
+        email,
-        return new User(JwtDecode(token).user || {});
+        first_name,
-    }
+        last_name,
-}
+        language,
-
+    }) {
-export class UserCollection extends Collection {
+        this.admin = admin;
-    static model() {
+        this.username = username;
-        return User;
+        this.email = email;
-    }
+        this.name = `${first_name} ${last_name}`;
-
+        this.first_name = first_name;
-    get todo() {
+        this.last_name = last_name;
-        return this.sum('done');
+        this.language = language;
-    }
-
-    get done() {
-        return this.todo === 0;
     }
 }

resources/assets/scripts/store/index.js

@@ -0,0 +1,6 @@
+import auth from './modules/auth';
+
+export default {
+    // strict: process.env.NODE_ENV !== 'production',
+    modules: { auth },
+};

resources/assets/scripts/store/modules/auth.js

@@ -0,0 +1,78 @@
+import User from './../../models/user';
+const route = require('./../../../../../vendor/tightenco/ziggy/src/js/route').default;
+
+export default {
+    namespaced: true,
+    state: {
+        user: () => {
+            const data = JSON.parse(localStorage.getItem('token'));
+
+            return User.fromCookie(data.value, data.name);
+        }
+    },
+    getters: {
+        /**
+         * Return the currently authenticated user.
+         *
+         * @param state
+         * @returns {User|null}
+         */
+        currentUser: function (state) {
+            return state.user;
+        }
+    },
+    setters: {},
+    actions: {
+        login: ({commit}, {user, password}) => {
+            return new Promise((resolve, reject) => {
+                window.axios.post(route('auth.login'), {user, password})
+                    .then(response => {
+                        commit('logout');
+
+                        // If there is a 302 redirect or some other odd behavior (basically, response that isnt
+                        // in JSON format) throw an error and don't try to continue with the login.
+                        if (!(response.data instanceof Object)) {
+                            return reject(new Error('An error was encountered while processing this request.'));
+                        }
+
+                        if (response.data.complete) {
+                            commit('login', {cookie: response.data.cookie, user: response.data.user});
+                            return resolve({
+                                complete: true,
+                                intended: response.data.intended,
+                            });
+                        }
+
+                        return resolve({
+                            complete: false,
+                            token: response.data.login_token,
+                        });
+                    })
+                    .catch(reject);
+            });
+        },
+        logout: function ({commit}) {
+            return new Promise((resolve, reject) => {
+                window.axios.get(route('auth.logout'))
+                    .then(() => {
+                        commit('logout');
+                        return resolve();
+                    })
+                    .catch(reject);
+            })
+        },
+    },
+    mutations: {
+        login: function (state, {cookie, user}) {
+            state.user = new User(user);
+            localStorage.setItem('token', JSON.stringify({
+                name: cookie.name,
+                value: cookie.value,
+            }));
+        },
+        logout: function (state) {
+            localStorage.removeItem('token');
+            state.user = null;
+        },
+    },
+};

routes/api-client.php

@@ -12,6 +12,10 @@ use Pterodactyl\Http\Middleware\Api\Client\AuthenticateClientAccess;
 */
 Route::get('/', 'ClientController@index')->name('api.client.index');
 
+Route::group(['prefix' => '/account'], function () {
+    Route::get('/', 'AccountController@index')->name('api.client.account');
+});
+
 /*
 |--------------------------------------------------------------------------
 | Client Control API