Begin transfering things to TS

package.json

@@ -20,6 +20,8 @@
         "@babel/plugin-transform-async-to-generator": "^7.0.0-beta.49",
         "@babel/plugin-transform-runtime": "^7.0.0-beta.49",
         "@babel/preset-env": "^7.0.0-beta.49",
+        "@types/node": "^10.12.15",
+        "@types/webpack-env": "^1.13.6",
         "autoprefixer": "^8.2.0",
         "axios": "^0.18.0",
         "babel-cli": "6.18.0",
@@ -36,7 +38,6 @@
         "css-loader": "^0.28.11",
         "eslint": "^5.6.0",
         "eslint-config-vue": "^2.0.2",
-        "eslint-plugin-flowtype-errors": "^3.6.0",
         "eslint-plugin-html": "^4.0.6",
         "eslint-plugin-vue": "^4.7.1",
         "extract-text-webpack-plugin": "^4.0.0-beta.0",

resources/assets/scripts/app.js

@@ -11,7 +11,7 @@ require('./bootstrap');
 import { Ziggy } from './helpers/ziggy';
 import Locales from './../../../resources/lang/locales';
 import { flash } from './mixins/flash';
-import store from './store/index.js';
+import store from './store/index';
 import router from './router';
 
 window.events = new Vue();

resources/assets/scripts/components/server/components/PowerButtons.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-    import Status from './../../../helpers/statuses';
+    import Status from '../../../helpers/statuses';
     import { Socketio } from './../../../mixins/socketio';
     import { mapState } from 'vuex';
 

resources/assets/scripts/models/server.js

@@ -1,21 +0,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/server.ts

@@ -0,0 +1,88 @@
+
+type ServerAllocation = {
+    ip: string,
+    port: number,
+};
+
+type ServerLimits = {
+    memory: number,
+    swap: number,
+    disk: number,
+    io: number,
+    cpu: number,
+}
+
+type ServerFeatureLimits = {
+    databases: number,
+    allocations: number,
+};
+
+export type ServerData = {
+    identifier: string,
+    uuid: string,
+    name: string,
+    node: string,
+    description: string,
+    allocation: ServerAllocation,
+    limits: ServerLimits,
+    feature_limits: ServerFeatureLimits,
+};
+
+/**
+ * A model representing a server returned by the client API.
+ */
+export default class Server {
+    /**
+     * The server identifier, generally the 8-character representation of the server UUID.
+     */
+    identifier: string;
+
+    /**
+     * The long form identifier for this server.
+     */
+    uuid: string;
+
+    /**
+     * The human friendy name for this server.
+     */
+    name: string;
+
+    /**
+     * The name of the node that this server belongs to.
+     */
+    node: string;
+
+    /**
+     * A description of this server.
+     */
+    description: string;
+
+    /**
+     * The primary allocation details for this server.
+     */
+    allocation: ServerAllocation;
+
+    /**
+     * The base limits for this server when it comes to the actual docker container.
+     */
+    limits: ServerLimits;
+
+    /**
+     * The feature limits for this server, database & allocations currently.
+     */
+    featureLimits: ServerFeatureLimits;
+
+    /**
+     * Construct a new server model instance.
+     */
+    constructor (data: ServerData) {
+        this.identifier = data.identifier;
+        this.uuid = data.uuid;
+        this.name = data.name;
+        this.node = data.node;
+        this.description = data.description;
+        this.allocation = data.allocation;
+        this.limits = data.limits;
+        this.featureLimits = data.feature_limits;
+    }
+}

resources/assets/scripts/models/user.js

@@ -1,28 +0,0 @@
-export default class User {
-    /**
-     * 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({
-        root_admin,
-        username,
-        email,
-        first_name,
-        last_name,
-        language,
-    }) {
-        this.admin = root_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/models/user.ts

@@ -0,0 +1,53 @@
+export type UserData = {
+    root_admin: boolean,
+    username: string,
+    email: string,
+    first_name: string,
+    last_name: string,
+    language: string,
+};
+
+/**
+ * A user model that represents an user in Pterodactyl.
+ */
+export default class User {
+    /**
+     * Determines wether or not the user is an admin.
+     */
+    admin: boolean;
+
+    /**
+     * The username for the currently authenticated user.
+     */
+    username: string;
+
+    /**
+     * The currently authenticated users email address.
+     */
+    email: string;
+
+    /**
+     * The full name of the logged in user.
+     */
+    name: string;
+    first_name: string;
+    last_name: string;
+
+    /**
+     * The language the user has selected to use.
+     */
+    language: string;
+
+    /**
+     * Create a new user model.
+     */
+    constructor(data: UserData) {
+        this.admin = data.root_admin;
+        this.username = data.username;
+        this.email = data.email;
+        this.name = `${data.first_name} ${data.last_name}`;
+        this.first_name = data.first_name;
+        this.last_name = data.last_name;
+        this.language = data.language;
+    }
+}

resources/assets/scripts/router.ts

@@ -1,4 +1,4 @@
-import VueRouter from 'vue-router';
+import VueRouter, {Route} from 'vue-router';
 import store from './store/index';
 
 const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
@@ -17,7 +17,7 @@ import {
     DatabasesPage,
     ServerSchedules,
     ServerSettings,
-    ServerSubusers
+    ServerSubusers,
 } from './components/server';
 
 const routes = [
@@ -28,9 +28,9 @@ const routes = [
         name: 'reset-password',
         path: '/auth/password/reset/:token',
         component: ResetPassword,
-        props: function (route) {
+        props: function (route: Route) {
             return {token: route.params.token, email: route.query.email || ''};
-        }
+        },
     },
 
     {name: 'dashboard', path: '/', component: Dashboard},
@@ -38,21 +38,22 @@ const routes = [
     {name: 'account.api', path: '/account/api', component: Account},
     {name: 'account.security', path: '/account/security', component: Account},
 
-    { path: '/server/:id', component: Server,
+    {
+        path: '/server/:id', component: Server,
         children: [
-            { name: 'server', path: '', component: ConsolePage },
+            {name: 'server', path: '', component: ConsolePage},
-            { name: 'server-files', path: 'files/:path(.*)?', component: FileManagerPage },
+            {name: 'server-files', path: 'files/:path(.*)?', component: FileManagerPage},
-            { name: 'server-subusers', path: 'subusers', component: ServerSubusers },
+            {name: 'server-subusers', path: 'subusers', component: ServerSubusers},
-            { name: 'server-schedules', path: 'schedules', component: ServerSchedules },
+            {name: 'server-schedules', path: 'schedules', component: ServerSchedules},
-            { name: 'server-databases', path: 'databases', component: DatabasesPage },
+            {name: 'server-databases', path: 'databases', component: DatabasesPage},
-            { name: 'server-allocations', path: 'allocations', component: ServerAllocations },
+            {name: 'server-allocations', path: 'allocations', component: ServerAllocations},
-            { name: 'server-settings', path: 'settings', component: ServerSettings },
+            {name: 'server-settings', path: 'settings', component: ServerSettings},
-        ]
+        ],
-    }
+    },
 ];
 
 const router = new VueRouter({
-    mode: 'history', routes
+    mode: 'history', routes,
 });
 
 // Redirect the user to the login page if they try to access a protected route and

resources/assets/scripts/store/index.ts

@@ -1,12 +1,19 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import auth from './modules/auth';
+import auth, {AuthenticationState} from './modules/auth';
-import dashboard from './modules/dashboard';
+import dashboard, {DashboardState} from './modules/dashboard';
-import server from './modules/server';
+import server, {ServerState} from './modules/server';
-import socket from './modules/socket';
+import socket, {SocketState} from './modules/socket';
 
 Vue.use(Vuex);
 
+export type ApplicationState = {
+    socket: SocketState,
+    server: ServerState,
+    auth: AuthenticationState,
+    dashboard: DashboardState,
+}
+
 const store = new Vuex.Store({
     strict: process.env.NODE_ENV !== 'production',
     modules: {auth, dashboard, server, socket},

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

@@ -1,20 +1,35 @@
-import User from './../../models/user';
+import User, {UserData} from '../../models/user';
+import {ActionContext} from "vuex";
 
 const route = require('./../../../../../vendor/tightenco/ziggy/src/js/route').default;
 
+type LoginAction = {
+    type: 'login',
+    user: string,
+    password: string,
+}
+
+type UpdateEmailAction = {
+    type: 'updateEmail',
+    email: string,
+    password: string,
+}
+
+export type AuthenticationState = {
+    user: null | User,
+}
+
 export default {
     namespaced: true,
     state: {
+        // @ts-ignore
         user: typeof window.PterodactylUser === 'object' ? new User(window.PterodactylUser) : null,
     },
     getters: {
         /**
          * Return the currently authenticated user.
-         *
-         * @param state
-         * @returns {User|null}
          */
-        getUser: function (state) {
+        getUser: function (state: AuthenticationState): null | User {
             return state.user;
         },
     },
@@ -22,15 +37,16 @@ export default {
     actions: {
         /**
          * Log a user into the Panel.
-         *
-         * @param commit
-         * @param {String} user
-         * @param {String} password
-         * @returns {Promise<any>}
          */
-        login: ({commit}, {user, password}) => {
+        login: ({commit}: ActionContext<AuthenticationState, any>, {user, password}: LoginAction): Promise<{
+            complete: boolean,
+            intended?: string,
+            token?: string,
+        }> => {
             return new Promise((resolve, reject) => {
+                // @ts-ignore
                 window.axios.post(route('auth.login'), {user, password})
+                    // @ts-ignore
                     .then(response => {
                         commit('logout');
 
@@ -59,15 +75,12 @@ export default {
 
         /**
          * Update a user's email address on the Panel and store the updated result in Vuex.
-         *
-         * @param commit
-         * @param {String} email
-         * @param {String} password
-         * @return {Promise<any>}
          */
-        updateEmail: function ({commit}, {email, password}) {
+        updateEmail: function ({commit}: ActionContext<AuthenticationState, any>, {email, password}: UpdateEmailAction): Promise<void> {
             return new Promise((resolve, reject) => {
+                // @ts-ignore
                 window.axios.put(route('api.client.account.update-email'), {email, password})
+                    // @ts-ignore
                     .then(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.
@@ -83,13 +96,15 @@ export default {
         },
     },
     mutations: {
-        setEmail: function (state, email) {
+        setEmail: function (state: AuthenticationState, email: string) {
-            state.user.email = email;
+            if (state.user) {
+                state.user.email = email;
+            }
         },
-        login: function (state, data) {
+        login: function (state: AuthenticationState, data: UserData) {
             state.user = new User(data);
         },
-        logout: function (state) {
+        logout: function (state: AuthenticationState) {
             state.user = null;
         },
     },

resources/assets/scripts/store/modules/dashboard.ts

@@ -1,6 +1,12 @@
-import Server from './../../models/server';
+import Server, {ServerData} from '../../models/server';
+import {ActionContext} from "vuex";
 const route = require('./../../../../../vendor/tightenco/ziggy/src/js/route').default;
 
+export type DashboardState = {
+    searchTerm: string,
+    servers: Array<Server>,
+};
+
 export default {
     namespaced: true,
     state: {
@@ -8,23 +14,21 @@ export default {
         searchTerm: '',
     },
     getters: {
-        getSearchTerm: function (state) {
+        getSearchTerm: function (state: DashboardState): string {
             return state.searchTerm;
-        }
+        },
     },
     actions: {
         /**
          * Retrieve all of the servers for a user matching the query.
-         *
-         * @param commit
-         * @param {String} query
-         * @returns {Promise<any>}
          */
-        loadServers: ({commit, state}) => {
+        loadServers: ({commit, state}: ActionContext<DashboardState, any>): Promise<void> => {
             return new Promise((resolve, reject) => {
+                // @ts-ignore
                 window.axios.get(route('api.client.index'), {
                     params: { query: state.searchTerm },
                 })
+                    // @ts-ignore
                     .then(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 request processing.
@@ -35,7 +39,7 @@ export default {
                         // Remove all of the existing servers.
                         commit('clearServers');
 
-                        response.data.data.forEach(obj => {
+                        response.data.data.forEach((obj: { attributes: ServerData }) => {
                             commit('addServer', obj.attributes);
                         });
 
@@ -45,18 +49,20 @@ export default {
             });
         },
 
-        setSearchTerm: ({commit}, term) => {
+        setSearchTerm: ({commit}: ActionContext<DashboardState, any>, term: string) => {
             commit('setSearchTerm', term);
         },
     },
     mutations: {
-        addServer: function (state, data) {
+        addServer: function (state: DashboardState, data: ServerData) {
-            state.servers.push(new Server(data));
+            state.servers.push(
+                new Server(data)
+            );
         },
-        clearServers: function (state) {
+        clearServers: function (state: DashboardState) {
             state.servers = [];
         },
-        setSearchTerm: function (state, term) {
+        setSearchTerm: function (state: DashboardState, term: string) {
             state.searchTerm = term;
         },
     },

resources/assets/scripts/store/modules/server.ts

@@ -1,4 +1,18 @@
+// @ts-ignore
 import route from '../../../../../vendor/tightenco/ziggy/src/js/route';
+import {ActionContext} from "vuex";
+import {ServerData} from "../../models/server";
+
+type ServerApplicationCredentials = {
+    node: string,
+    key: string,
+};
+
+export type ServerState = {
+    server: ServerData,
+    credentials: ServerApplicationCredentials,
+    console: Array<string>,
+};
 
 export default {
     namespaced: true,
@@ -11,14 +25,13 @@ export default {
     },
     actions: {
         /**
-         *
+         * Fetches the active server from the API and stores it in vuex.
-         * @param commit
-         * @param {String} server
-         * @returns {Promise<any>}
          */
-        getServer: ({commit}, {server}) => {
+        getServer: ({commit}: ActionContext<ServerState, any>, {server}: { server: string }): Promise<void> => {
             return new Promise((resolve, reject) => {
+                // @ts-ignore
                 window.axios.get(route('api.client.servers.view', { server }))
+                    // @ts-ignore
                     .then(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.
@@ -39,14 +52,12 @@ export default {
         /**
          * Get authentication credentials that the client should use when connecting to the daemon to
          * retrieve server information.
-         *
-         * @param commit
-         * @param {String} server
-         * @returns {Promise<any>}
          */
-        getCredentials: ({commit}, {server}) => {
+        getCredentials: ({commit}: ActionContext<ServerState, any>, {server}: { server: string }) => {
             return new Promise((resolve, reject) => {
+                // @ts-ignore
                 window.axios.get(route('server.credentials', {server}))
+                    // @ts-ignore
                     .then(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.
@@ -65,13 +76,13 @@ export default {
         },
     },
     mutations: {
-        SERVER_DATA: function (state, data) {
+        SERVER_DATA: function (state: ServerState, data: ServerData) {
             state.server = data;
         },
-        SERVER_CREDENTIALS: function (state, credentials) {
+        SERVER_CREDENTIALS: function (state: ServerState, credentials: ServerApplicationCredentials) {
             state.credentials = credentials;
         },
-        CONSOLE_DATA: function (state, data) {
+        CONSOLE_DATA: function (state: ServerState, data: string) {
             state.console.push(data);
         },
     },

resources/assets/scripts/store/modules/socket.ts

@@ -1,4 +1,10 @@
-import Status from './../../helpers/statuses';
+import Status from '../../helpers/statuses';
+
+export type SocketState = {
+    connected: boolean,
+    connectionError: boolean | Error,
+    status: number,
+}
 
 export default {
     namespaced: true,
@@ -7,29 +13,27 @@ export default {
         connectionError: false,
         status: Status.STATUS_OFF,
     },
-    actions: {
-    },
     mutations: {
-        SOCKET_CONNECT: (state) => {
+        SOCKET_CONNECT: (state: SocketState) => {
             state.connected = true;
             state.connectionError = false;
         },
 
-        SOCKET_ERROR: (state, err) => {
+        SOCKET_ERROR: (state: SocketState, err : Error) => {
             state.connected = false;
             state.connectionError = err;
         },
 
-        SOCKET_CONNECT_ERROR: (state, err) => {
+        SOCKET_CONNECT_ERROR: (state: SocketState, err : Error) => {
             state.connected = false;
             state.connectionError = err;
         },
 
-        'SOCKET_INITIAL STATUS': (state, data) => {
+        'SOCKET_INITIAL STATUS': (state: SocketState, data: { status: number }) => {
             state.status = data.status;
         },
 
-        SOCKET_STATUS: (state, data) => {
+        SOCKET_STATUS: (state: SocketState, data: { status: number }) => {
             state.status = data.status;
         }
     },

resources/assets/scripts/vue-shims.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+    import Vue from 'vue';
+    export default Vue;
+}

tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
     "target": "es5",
+    "lib": [
+      "es2015",
+      "dom"
+    ],
     "strict": true,
     "moduleResolution": "node",
     "module": "es2015"

yarn.lock

@@ -778,6 +778,14 @@
     "@shellscape/koa-send" "^4.1.0"
     debug "^2.6.8"
 
+"@types/node@^10.12.15":
+  version "10.12.15"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.15.tgz#20e85651b62fd86656e57c9c9bc771ab1570bc59"
+
+"@types/webpack-env@^1.13.6":
+  version "1.13.6"
+  resolved "http://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.13.6.tgz#128d1685a7c34d31ed17010fc87d6a12c1de6976"
+
 "@webassemblyjs/ast@1.5.9":
   version "1.5.9"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.5.9.tgz#b2770182678691ab4949d593105c15d4074fedb6"
@@ -2873,13 +2881,6 @@ eslint-config-vue@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/eslint-config-vue/-/eslint-config-vue-2.0.2.tgz#a3ab1004899e49327a94c63e24d47a396b2f4848"
 
-eslint-plugin-flowtype-errors@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype-errors/-/eslint-plugin-flowtype-errors-3.6.0.tgz#5782994261e925aed1320630146636e88e4ad553"
-  dependencies:
-    babel-runtime "^6.26.0"
-    slash "^2.0.0"
-
 eslint-plugin-html@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/eslint-plugin-html/-/eslint-plugin-html-4.0.6.tgz#724bb9272efb4df007dfee8dfb269ed83577e5b4"
@@ -6631,10 +6632,6 @@ slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
 
-slash@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
-
 slice-ansi@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"