Merge branch 'feature/vuejs-serverlist' into feature/vue-serverview

resources/assets/scripts/app.js

@@ -13,19 +13,14 @@ import faSolid from '@fortawesome/fontawesome-free-solid';
 import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
 fontawesome.library.add(faSolid);
 
-// Base Vuejs Templates
-import Login from './components/auth/Login';
-import Dashboard from './components/dashboard/Dashboard';
-import Account from './components/dashboard/Account';
-import ResetPassword from './components/auth/ResetPassword';
-import { Server, ServerConsole, ServerAllocations, ServerDatabases, ServerFiles, ServerSchedules, ServerSettings, ServerSubusers } from './components/server';
+import { routes } from './routes';
+import { storeData } from './store';
 
 window.events = new Vue;
 window.Ziggy = Ziggy;
 
 Vue.use(Vuex);
-
-const store = new Vuex.Store();
+const store = new Vuex.Store(storeData);
 const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
 
 Vue.config.productionTip = false;
@@ -41,35 +36,7 @@ Vue.i18n.set('en');
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 
 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 || '' };
-            }
-        },
-        { name : 'index', path: '/', component: Dashboard },
-        { name : 'account', path: '/account', component: Account },
-        { name : 'account-api', path: '/account/api', component: Account },
-        { name : 'account-security', path: '/account/security', component: Account },
-        { path: '/server/:id', component: Server,
-            children: [
-                { name: 'server', path: '', component: ServerConsole },
-                { name: 'server-files', path: 'files', component: ServerFiles },
-                { name: 'server-subusers', path: 'subusers', component: ServerSubusers },
-                { name: 'server-schedules', path: 'schedules', component: ServerSchedules },
-                { name: 'server-databases', path: 'databases', component: ServerDatabases },
-                { name: 'server-allocations', path: 'allocations', component: ServerAllocations },
-                { name: 'server-settings', path: 'settings', component: ServerSettings },
-            ]
-        }
-    ]
+    mode: 'history', routes
 });
 
 require('./bootstrap');

resources/assets/scripts/bootstrap.js

@@ -19,6 +19,15 @@ try {
 window.axios = require('axios');
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+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;
+    });
+}
 
 /**
  * Next we will register the CSRF Token as a common header with Axios so that

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

@@ -82,16 +82,20 @@
                 })
                     .then(function (response) {
                         if (response.data.complete) {
-                            return window.location = '/';
+                            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.token}});
+                        self.$router.push({name: 'checkpoint', query: {token: response.data.login_token}});
                     })
                     .catch(function (err) {
                         self.$props.user.password = '';
                         self.$data.showSpinner = false;
+                        self.$store.dispatch('logout');
+
                         if (!err.response) {
                             return console.error(err);
                         }

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

@@ -49,9 +49,12 @@
                     authentication_code: this.$data.code,
                 })
                     .then(function (response) {
+                        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);
                         }

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

@@ -7,11 +7,19 @@
                    ref="search"
             />
         </div>
-        <transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start">
-            <router-link class="server-box" :to="{name: 'server', params: { id: server.uuidShort }}" :key="index" v-for="(server, index) in servers">
-                    <div class="content">
-                        <div class="float-right">
-                            <div class="indicator online"></div>
+        <transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start"><div class="server-box" :key="index" v-for="(server, index) in servers.models">
+                <router-link :to="{ name: 'server', params: { id: server.identifier }}" class="content">
+                    <div class="float-right">
+                        <div class="indicator"></div>
+                    </div>
+                    <div class="mb-4">
+                        <div class="text-black font-bold text-xl">
+                            {{ server.name }}
+                        </div>
+                    </div>
+                    <div class="mb-0 flex">
+                        <div class="usage">
+                            <div class="indicator-title">CPU</div>
                         </div>
                         <div class="mb-4">
                             <div class="text-black font-bold text-xl">{{ server.name }}</div>
@@ -34,19 +42,21 @@
                                 <span class="font-light text-sm">Mb</span>
                             </div>
                         </div>
-                        <div class="flex items-center">
-                            <div class="text-sm">
-                                <p class="text-grey">{{ server.node_name }}</p>
-                                <p class="text-grey-dark">{{ server.allocation.ip }}:{{ server.allocation.port }}</p>
-                            </div>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="text-sm">
+                            <p class="text-grey">{{ server.node }}</p>
+                            <p class="text-grey-dark">{{ server.allocation.ip }}:{{ server.allocation.port }}</p>
                         </div>
                     </div>
-            </router-link>
+                </router-link>
+            </div>
         </transition-group>
     </div>
 </template>
 
 <script>
+    import { ServerCollection } from '../../models/server';
     import _ from 'lodash';
 
     export default {
@@ -54,7 +64,7 @@
         data: function () {
             return {
                 search: '',
-                servers: [],
+                servers: new ServerCollection,
             }
         },
 
@@ -69,15 +79,16 @@
              * @param {string} query
              */
             loadServers: function (query = '') {
-                const self = this;
-
-                window.axios.get(this.route('dashboard.servers'), {
+                window.axios.get(this.route('api.client.index'), {
                     params: { query },
                 })
-                    .then(function (response) {
-                        self.servers = response.data;
+                    .then(response => {
+                        this.servers = new ServerCollection;
+                        response.data.data.forEach(obj => {
+                            this.servers.add(obj.attributes);
+                        });
                     })
-                    .catch(function (error) {
+                    .catch(error => {
                         console.error(error);
                     });
             },

resources/assets/scripts/models/allocation.js

@@ -0,0 +1,19 @@
+const Allocation = function () {
+    this.ip = null;
+    this.port = null;
+};
+
+/**
+ * Return a new allocation model.
+ *
+ * @param obj
+ * @returns {Allocation}
+ */
+Allocation.prototype.fill = function (obj) {
+    this.ip = obj.ip || null;
+    this.port = obj.port || null;
+
+    return this;
+};
+
+export default Allocation;

resources/assets/scripts/models/server.js

@@ -0,0 +1,114 @@
+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;
+    }
+}

resources/assets/scripts/models/user.js

@@ -0,0 +1,33 @@
+import JwtDecode from 'jwt-decode';
+
+const User = function () {
+    this.id = 0;
+    this.admin = false;
+    this.email = '';
+};
+
+/**
+ * Return a new instance of the user model using a JWT.
+ *
+ * @param {string} token
+ * @returns {User}
+ */
+User.prototype.fromJwt = function (token) {
+    return this.newModel(JwtDecode(token));
+};
+
+/**
+ * Return an instance of this user model with the properties set on it.
+ *
+ * @param {object} obj
+ * @returns {User}
+ */
+User.prototype.newModel = function (obj) {
+    this.id = obj.id;
+    this.admin = obj.admin;
+    this.email = obj.email;
+
+    return this;
+};
+
+export default User;

resources/assets/scripts/routes.js

@@ -0,0 +1,46 @@
+// Base Vuejs Templates
+import Login from './components/auth/Login';
+import Dashboard from './components/dashboard/Dashboard';
+import Account from './components/dashboard/Account';
+import ResetPassword from './components/auth/ResetPassword';
+import { Server, ServerConsole, ServerAllocations, ServerDatabases, ServerFiles, ServerSchedules, ServerSettings, ServerSubusers } from './components/server';
+
+import {
+    Server, ServerAllocations, ServerConsole,
+    ServerDatabases,
+    ServerFiles,
+    ServerSchedules,
+    ServerSettings,
+    ServerSubusers
+} from "./components/server";
+
+export const 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 || '' };
+        }
+    },
+
+    { name : 'index', path: '/', component: Dashboard },
+    { name : 'account', path: '/account', component: Account },
+    { name : 'account.api', path: '/account/api', component: Account },
+    { name : 'account.security', path: '/account/security', component: Account },
+
+    { path: '/server/:id', component: Server,
+        children: [
+            { name: 'server', path: '', component: ServerConsole },
+            { name: 'server-files', path: 'files', component: ServerFiles },
+            { name: 'server-subusers', path: 'subusers', component: ServerSubusers },
+            { name: 'server-schedules', path: 'schedules', component: ServerSchedules },
+            { name: 'server-databases', path: 'databases', component: ServerDatabases },
+            { name: 'server-allocations', path: 'allocations', component: ServerAllocations },
+            { name: 'server-settings', path: 'settings', component: ServerSettings },
+        ]
+    }
+];

resources/assets/scripts/store.js

@@ -0,0 +1,28 @@
+import User from './models/user';
+
+export const storeData = {
+    state: {
+        user: null,
+    },
+    actions: {
+        login: function ({ commit }) {
+            commit('login');
+        },
+        logout: function ({ commit }) {
+            commit('logout');
+        },
+    },
+    getters: {
+        user: function (state) {
+            return state.user;
+        },
+    },
+    mutations: {
+        login: function (state) {
+            state.user = new User().fromJwt(localStorage.getItem('token'));
+        },
+        logout: function (state) {
+            state.user = null;
+        }
+    }
+};

resources/assets/styles/components/miscellaneous.css

@@ -65,7 +65,11 @@ code {
     }
 
     & > .content {
-        @apply .border .border-grey-light .bg-white .rounded .p-4 .justify-between .leading-normal;
+        @apply .border .border-grey-light .bg-white .rounded .p-4 .justify-between .leading-normal .no-underline .block .text-black;
+
+        &:visited {
+            @apply .text-black;
+        }
     }
 }