Add xterm for console support (holy shit this is speedy)

Author: DaneEveritt

package.json

@@ -1,6 +1,7 @@
 {
     "name": "pterodactyl-panel",
     "dependencies": {
+        "cssnano": "^4.0.3",
         "date-fns": "^1.29.0",
         "socket.io-client": "^2.1.1",
         "vee-validate": "^2.1.0-beta.2",
@@ -9,7 +10,8 @@
         "vue-router": "^3.0.1",
         "vuex": "^3.0.1",
         "vuex-i18n": "^1.10.5",
-        "vuex-router-sync": "^5.0.0"
+        "vuex-router-sync": "^5.0.0",
+        "xterm": "^3.5.1"
     },
     "devDependencies": {
         "@babel/core": "^7.0.0-beta.49",

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

@@ -55,7 +55,7 @@
                     </router-link>
                 </div>
             </div>
-            <div class="bg-white p-6 rounded border border-grey-light h-full">
+            <div class="bg-white p-6 rounded border border-grey-light h-full w-full">
                 <router-view></router-view>
             </div>
         </div>
@@ -83,6 +83,10 @@
 
         mounted: function () {
             this.loadServer();
+
+            this.$on('send-command', data => {
+                this.socket.emit('send command', data);
+            });
         },
 
         data: function () {
@@ -109,7 +113,6 @@
             },
 
             initalizeWebsocket: function () {
-                this.$store.commit('server/CONSOLE_DATA', 'Connecting to ' + this.credentials.node + '...');
                 this.socket = io(this.credentials.node + '/v1/ws/' + this.server.uuid, {
                     query: 'token=' + this.credentials.key,
                 });
@@ -123,34 +126,29 @@
             },
 
             _socket_error: function (err) {
-                this.$store.commit('server/CONSOLE_DATA', 'There was a socket error: ' + err);
                 console.error('there was a socket error:', err);
             },
 
             _socket_connect: function () {
-                this.$store.commit('server/CONSOLE_DATA', 'Connected to socket.');
                 this.socket.emit('send server log');
-                console.log('connected');
             },
 
             _socket_status: function (data) {
-                this.$store.commit('server/CONSOLE_DATA', 'Server state has changed.');
-                console.warn(data);
             },
 
             _socket_serverLog: function (data) {
                 data.split(/\n/g).forEach(item => {
-                    this.$store.commit('server/CONSOLE_DATA', item);
+                    this.$emit('console', item);
                 });
             },
 
             _socket_consoleLine: function (data) {
                 if(data.line) {
-                    data.line.split(/\n/g).forEach((item) => {
-                        this.$store.commit('server/CONSOLE_DATA', item);
+                    data.line.split(/\n/g).forEach(item => {
+                        this.$emit('console', item);
                     });
                 }
-            }
+            },
         },
     }
 </script>

resources/assets/scripts/components/server/subpages/ConsolePage.vue

@@ -1,31 +1,68 @@
 <template>
     <div>
         <div class="text-xs font-mono">
-            <div class="rounded-t p-2 bg-black overflow-scroll w-full" style="min-height: 16rem;max-height:32rem;">
-                <div class="mb-2">
-                    <span class="block text-grey-light" v-for="line in console" v-text="line"></span>
-                </div>
+            <div class="rounded-t p-2 bg-black overflow-scroll w-full" style="min-height: 16rem;max-height:64rem;">
+                <div class="mb-2 text-grey-light" ref="terminal"></div>
             </div>
             <div class="rounded-b bg-grey-darkest text-white flex">
                 <div class="flex-no-shrink p-2">
                     <span class="font-bold">$</span>
                 </div>
                 <div class="w-full">
-                    <input type="text" aria-label="Send console command" class="bg-transparent text-white p-2 pl-0 w-full" placeholder="enter command and press enter to send">
+                    <input type="text" aria-label="Send console command" class="bg-transparent text-white p-2 pl-0 w-full" placeholder="enter command and press enter to send"
+                           ref="command"
+                           v-model="command"
+                           v-on:keyup.enter="sendCommand"
+                    >
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-    import {mapState} from 'vuex';
+    import { Terminal } from 'xterm';
+    import * as TerminalFit from 'xterm/lib/addons/fit/fit';
+
+    Terminal.applyAddon(TerminalFit);
 
     export default {
         name: 'console-page',
 
-        computed: {
-            ...mapState('server', ['console']),
+        mounted: function () {
+            this.terminal.open(this.$refs.terminal);
+            this.terminal.fit();
+
+            this.$parent.$on('console', data => {
+                this.terminal.writeln(data);
+            });
         },
+
+        data: function () {
+            return {
+                terminal: new Terminal({
+                    disableStdin: true,
+                    allowTransparency: true,
+                    fontSize: 12,
+                    fontFamily: 'Menlo,Monaco,Consolas,monospace',
+                    rows: 30,
+                    theme: {
+                        background: 'transparent',
+                    }
+                }),
+                command: '',
+            };
+        },
+
+        methods: {
+            sendCommand: function () {
+                this.$parent.$emit('send-command', this.command);
+                this.command = '';
+            }
+        }
     };
 </script>
+
+<style lang="postcss">
+    @import "~xterm/src/xterm.css";
+</style>

tailwind.js

@@ -916,4 +916,8 @@ module.exports = {
         separator: ':',
     },
 
+    experiments: {
+        shadowLookup: true,
+    },
+
 };