Merge branch 'feature/vuejs' into feature/move-to-webpack

resources/assets/scripts/app.js

@@ -3,21 +3,24 @@ import Vuex from 'vuex';
 import vuexI18n from 'vuex-i18n';
 import VueRouter from 'vue-router';
 
+require('./bootstrap');
+
 // Helpers
 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);
 
@@ -31,6 +34,4 @@ const router = new VueRouter({
     mode: 'history', routes
 });
 
-require('./bootstrap');
-
 const app = new Vue({ store, router }).$mount('#pterodactyl');

resources/assets/scripts/bootstrap.js

@@ -1,3 +1,5 @@
+import axios from './helpers/axios';
+
 window._ = require('lodash');
 
 /**
@@ -10,24 +12,7 @@ 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';
-window.axios.defaults.headers.common['Accept'] = 'application/json';
-window.axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.token || '';
-
-if (typeof phpdebugbar !== 'undefined') {
-    window.axios.interceptors.response.use(function (response) {
-        phpdebugbar.ajaxHandler.handle(response.request);
-
-        return response;
-    });
-}
+window.axios = axios;
 
 /**
  * Next we will register the CSRF Token as a common header with Axios so that

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

@@ -77,32 +77,21 @@
                 this.$data.showSpinner = true;
 
                 this.clearFlashes();
-                axios.post(this.route('auth.login'), {
-                    user: this.$props.user.email,
-                    password: this.$props.user.password,
-                })
-                    .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.');
+                this.$store.dispatch('auth/login', { user: this.$props.user.email, password: this.$props.user.password })
+                    .then(response => {
+                        if (response.complete) {
+                            return window.location = response.intended;
                         }
 
-                        if (response.data.complete) {
-                            localStorage.setItem('token', response.data.token);
-                            self.$store.dispatch('login');
-                            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}});
+                        this.$props.user.password = '';
+                        this.$data.showSpinner = false;
+                        this.$router.push({name: 'checkpoint', query: {token: response.login_token}});
                     })
-                    .catch(function (err) {
-                        self.$props.user.password = '';
-                        self.$data.showSpinner = false;
-                        self.$refs.password.focus();
-                        self.$store.dispatch('logout');
+                    .catch(err => {
+                        this.$props.user.password = '';
+                        this.$data.showSpinner = false;
+                        this.$refs.password.focus();
+                        this.$store.dispatch('auth/logout');
 
                         if (!err.response) {
                             return console.error(err);

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

@@ -18,7 +18,7 @@
             </div>
             <transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start" v-else>
                 <server-box
-                        v-for="(server, index) in servers.models"
+                        v-for="(server, index) in servers"
                         v-bind:key="index"
                         v-bind:server="server"
                 />
@@ -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(
-                                this.servers.add(obj.attributes)
-                            );
+                            const s = new Server(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/helpers/axios.js

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+
+let axios = require('axios');
+axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+axios.defaults.headers.common['Accept'] = 'application/json';
+
+if (typeof phpdebugbar !== 'undefined') {
+    axios.interceptors.response.use(function (response) {
+        phpdebugbar.ajaxHandler.handle(response.request);
+
+        return response;
+    });
+}
+
+export default axios;

resources/assets/scripts/models/server.js

@@ -1,114 +1,21 @@
-import { Collection, Model } from 'vue-mc';
-
-/**
- * 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;
+export default class Server {
+    constructor({
+        identifier,
+        uuid,
+        name,
+        node,
+        description,
+        allocation,
+        limits,
+        feature_limits
+    }) {
+        this.identifier = identifier;
+        this.uuid = uuid;
+        this.name = name;
+        this.node = node;
+        this.description = description;
+        this.allocation = allocation;
+        this.limits = limits;
+        this.feature_limits = feature_limits;
     }
 }

resources/assets/scripts/models/user.js

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

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,74 @@
+import User from './../../models/user';
+const route = require('./../../../../../vendor/tightenco/ziggy/src/js/route').default;
+
+export default {
+    namespaced: true,
+    state: {
+        user: null,
+    },
+    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;
+        },
+    },
+};