Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Begin transfering things to TS

Browse source
This commit is contained in:
Dane Everitt 2018-12-16 15:29:44 -08:00
parent 81f5e49768
commit 3ad4422a94
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
17 changed files with 280 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -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",

2
resources/assets/scripts/app.js
View file

@ -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();

2
resources/assets/scripts/components/server/components/PowerButtons.vue
View file

@ -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';

0
resources/assets/scripts/helpers/statuses.js → resources/assets/scripts/helpers/statuses.ts
View file

21
resources/assets/scripts/models/server.js
View file

@ -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;
}
}

88
resources/assets/scripts/models/server.ts Normal file
View file

@ -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;
}
}

28
resources/assets/scripts/models/user.js
View file

@ -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;
}
}

53
resources/assets/scripts/models/user.ts Normal file
View file

@ -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;
}
}

31
resources/assets/scripts/router.js → resources/assets/scripts/router.ts
View file

@ -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-files', path: 'files/:path(.*)?', component: FileManagerPage },
{ name: 'server-subusers', path: 'subusers', component: ServerSubusers },
{ name: 'server-schedules', path: 'schedules', component: ServerSchedules },
{ name: 'server-databases', path: 'databases', component: DatabasesPage },
{ name: 'server-allocations', path: 'allocations', component: ServerAllocations },
{ name: 'server-settings', path: 'settings', component: ServerSettings },
]
}
{name: 'server', path: '', component: ConsolePage},
{name: 'server-files', path: 'files/:path(.*)?', component: FileManagerPage},
{name: 'server-subusers', path: 'subusers', component: ServerSubusers},
{name: 'server-schedules', path: 'schedules', component: ServerSchedules},
{name: 'server-databases', path: 'databases', component: DatabasesPage},
{name: 'server-allocations', path: 'allocations', component: ServerAllocations},
{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

15
resources/assets/scripts/store/index.js → resources/assets/scripts/store/index.ts
View file

@ -1,12 +1,19 @@
import Vue from 'vue';
import Vuex from 'vuex';
import auth from './modules/auth';
import dashboard from './modules/dashboard';
import server from './modules/server';
import socket from './modules/socket';
import auth, {AuthenticationState} from './modules/auth';
import dashboard, {DashboardState} from './modules/dashboard';
import server, {ServerState} from './modules/server';
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},

57
resources/assets/scripts/store/modules/auth.js → resources/assets/scripts/store/modules/auth.ts
View file

@ -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) {
state.user.email = email;
setEmail: function (state: AuthenticationState, email: string) {
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;
},
},

34
resources/assets/scripts/store/modules/dashboard.js → resources/assets/scripts/store/modules/dashboard.ts
View file

@ -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) {
state.servers.push(new Server(data));
addServer: function (state: DashboardState, data: ServerData) {
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;
},
},

37
resources/assets/scripts/store/modules/server.js → resources/assets/scripts/store/modules/server.ts
View file

@ -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: {
/**
*
* @param commit
* @param {String} server
* @returns {Promise<any>}
* Fetches the active server from the API and stores it in vuex.
*/
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);
},
},

20
resources/assets/scripts/store/modules/socket.js → resources/assets/scripts/store/modules/socket.ts
View file

@ -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;
}
},

4
resources/assets/scripts/vue-shims.d.ts vendored Normal file
View file

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

4
tsconfig.json
View file

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

19
yarn.lock
View file

@ -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"