StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Jakob Schrettenbrunner 2018-06-11 21:06:12 +02:00
commit 05478e3277
29 changed files with 2997 additions and 16217 deletions
Download patch file Download diff file Expand all files Collapse all files

18
resources/assets/index.html Normal file
View file

@ -0,0 +1,18 @@
<html>
<head>
<title>Pterodactyl Dev</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<body>
<div id="pterodactyl">
<router-view></router-view>
<div class="w-full m-auto mt-0 container">
<p class="text-right text-grey-dark text-xs">
</p>
</div>
</div>
</body>
</html>

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

@ -3,16 +3,13 @@ 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 fontawesome from '@fortawesome/fontawesome';
import faSolid from '@fortawesome/fontawesome-free-solid';
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
fontawesome.library.add(faSolid);
import { routes } from './routes';
import createStore from './store';
@ -27,9 +24,10 @@ const router = new VueRouter({
Vue.use(Vuex);
const store = createStore(router);
Vue.config.productionTip = false;
const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
Vue.config.productionTip = false;
Vue.mixin({ methods: { route } });
Vue.mixin(flash);
@ -38,9 +36,8 @@ Vue.use(vuexI18n.plugin, store);
Vue.i18n.add('en', Locales.en);
Vue.i18n.set('en');
Vue.component('font-awesome-icon', FontAwesomeIcon);
require('./bootstrap');
if (module.hot) {
module.hot.accept();
}
const app = new Vue({ store, router }).$mount('#pterodactyl');

21
resources/assets/scripts/bootstrap.js vendored
View file

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

35
resources/assets/scripts/components/auth/LoginForm.vue
View file

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

2
resources/assets/scripts/components/dashboard/Dashboard.vue
View file

@ -29,6 +29,7 @@
<script>
import { DateTime } from 'luxon';
import Server from '../../models/server';
import _ from 'lodash';
import Flash from '../Flash';
import ServerBox from './ServerBox';
@ -75,7 +76,6 @@
},
methods: {
/**
* Handle a search for servers but only call the search function every 500ms
* at the fastest.

2
resources/assets/scripts/components/dashboard/ServerBox.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="server-box animate fadein">
<router-link :to="{ name: 'server', params: { id: server.identifier }}" class="content">
<router-link :to="{ name: 'server', params: { serverID: server.identifier }}" class="content">
<div class="float-right">
<div class="indicator" :class="status"></div>
</div>

22
resources/assets/scripts/components/server/Server.vue
View file

@ -38,32 +38,32 @@
</div>
</div>
<div class="sidenav">
<router-link :to="{ name: 'server' }">
<font-awesome-icon class="mr-2" fixed-with icon="terminal"/>
<router-link :to="{ name: 'server', params: { serverID: this.$route.params.serverID } }">
<terminal-icon style="height: 1em;"></terminal-icon>
Console
</router-link>
<router-link :to="{ name: 'server-files' }">
<font-awesome-icon class="mr-2" fixed-with icon="folder-open"/>
<folder-icon style="height: 1em;"></folder-icon>
Files
</router-link>
<router-link :to="{ name: 'server-subusers' }">
<font-awesome-icon class="mr-2" fixed-with icon="users"/>
<users-icon style="height: 1em;"></users-icon>
Subusers
</router-link>
<router-link :to="{ name: 'server-schedules' }">
<font-awesome-icon class="mr-2" fixed-with icon="calendar-alt"/>
<calendar-icon style="height: 1em;"></calendar-icon>
Schedules
</router-link>
<router-link :to="{ name: 'server-databases' }">
<font-awesome-icon class="mr-2" fixed-with icon="database"/>
<database-icon style="height: 1em;"></database-icon>
Databases
</router-link>
<router-link :to="{ name: 'server-allocations' }">
<font-awesome-icon class="mr-2" fixed-with icon="globe"/>
<globe-icon style="height: 1em;"></globe-icon>
Allocations
</router-link>
<router-link :to="{ name: 'server-settings' }">
<font-awesome-icon class="mr-2" fixed-with icon="cog"/>
<settings-icon style="height: 1em;"></settings-icon>
Settings
</router-link>
</div>
@ -77,10 +77,14 @@
</template>
<script>
import { TerminalIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon } from 'vue-feather-icons'
import ServerConsole from "./ServerConsole";
import Navigation from '../core/Navigation';
export default {
components: {Navigation, ServerConsole}
components: {
Navigation, ServerConsole, TerminalIcon, FolderIcon, UsersIcon,
CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon
}
}
</script>

1
resources/assets/scripts/helpers/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
ziggy.js

22
resources/assets/scripts/helpers/axios.js Normal file
View file

@ -0,0 +1,22 @@
import User from './../models/user';
/**
* 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';
axios.defaults.headers.common['Authorization'] = `Bearer ${User.getToken()}`;
if (typeof phpdebugbar !== 'undefined') {
axios.interceptors.response.use(function (response) {
phpdebugbar.ajaxHandler.handle(response.request);
return response;
});
}
export default axios;

2
resources/assets/scripts/helpers/ziggy.js
View file

File diff suppressed because one or more lines are too long

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

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

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

@ -1,48 +1,63 @@
import { Collection, Model } from 'vue-mc';
import JwtDecode from 'jwt-decode';
import isString from 'lodash/isString';
import jwtDecode from 'jwt-decode';
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 from the JWT.
*
* @return {User | null}
*/
static fromToken(token) {
if (!isString(token)) {
token = localStorage.getItem('token');
}
if (!isString(token) || token.length < 1) {
return null;
}
const data = jwtDecode(token);
if (data.user) {
return new User(data.user);
}
return null;
}
static mutations() {
return {
id: Number,
uuid: String,
username: String,
email: String,
name_first: String,
name_last: String,
language: String,
root_admin: Boolean,
}
/**
* Return the JWT for the authenticated user.
*
* @returns {string | null}
*/
static getToken()
{
return localStorage.getItem('token');
}
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;
}
}

6
resources/assets/scripts/store/index.js
View file

@ -1,14 +1,16 @@
import Vuex from 'vuex';
import { sync } from 'vuex-router-sync';
import { serverModule } from "./modules/server";
import { userModule } from './modules/user'
import { userModule } from './modules/user';
import { authModule } from "./modules/auth";
const createStore = (router) => {
const store = new Vuex.Store({
//strict: process.env.NODE_ENV !== 'production',
strict: process.env.NODE_ENV !== 'production',
modules: {
userModule,
serverModule,
authModule,
},
});
sync(store, router);

71
resources/assets/scripts/store/modules/auth.js Normal file
View file

@ -0,0 +1,71 @@
import User from './../../models/user';
const route = require('./../../../../../vendor/tightenco/ziggy/src/js/route').default;
export const authModule = {
namespaced: true,
state: {
user: User.fromToken(),
},
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', {jwt: response.data.jwt});
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, {jwt}) {
localStorage.setItem('token', jwt);
state.user = User.fromToken(jwt);
},
logout: function (state) {
localStorage.removeItem('token');
state.user = null;
},
},
};

4
resources/themes/pterodactyl/templates/wrapper.blade.php
View file

@ -19,7 +19,7 @@
@show
@section('assets')
{!! $asset->css('assets/css/bundle.css') !!}
{!! $asset->css('main.css') !!}
@show
@include('layouts.scripts')
@ -33,7 +33,7 @@
@yield('below-container')
@show
@section('scripts')
{!! $asset->js('assets/scripts/app.js') !!}
{!! $asset->js('main.js') !!}
@show
</body>
</html>