Fix more of the console, add back support for arrow key command history

public/themes/pterodactyl/css/terminal.css

@@ -28,72 +28,26 @@
     padding: 1px 0;
 }
 
-@keyframes cursorblink {
-    0% {
-        background: transparent;
-    }
-    100% {
-        background: rgba(170, 170, 170, 0.9);
-    }
-}
-
-@-webkit-keyframes cursorblink {
-    0% {
-        background: transparent;
-    }
-    100% {
-        background: rgba(170, 170, 170, 0.9);
-    }
-}
-
 #terminal_input {
     width: 100%;
     background: rgb(26, 26, 26);
     border-radius: 0 0 5px 5px;
-    padding: 5px 10px;
+    padding: 0 0 0 10px !important;
 }
 
-.terminal_input--input {
+.terminal_input--input, .terminal_input--prompt {
-    height: 0;
-    width: 0;
-    position: absolute;
-    top: -20px;
-}
-
-.terminal_input--text, .terminal_input--prompt {
-    line-height: 14px;
-    width: 100%;
-    vertical-align: middle;
-    font-size: 12px;
     font-family: 'Source Code Pro', monospace;
     margin-bottom: 0;
-    background: transparent;
+    border: 0 !important;
+    background: transparent !important;
     color: rgb(223, 223, 223);
+    font-size: 12px;
+    padding: 1px 0 4px !important;
 }
-
-.terminal_input--text:before, .terminal_input--text:after {
-    content: "";
-    display: inline-block;
-    width: 7px;
-    height: 14px;
-    margin: 0 0 -12px -6px;
-    vertical-align: middle;
-}
-
-.terminal_input--text:after {
-    position: relative;
-    bottom: 8px;
-    left: 8px;
-    background: #ff00;
-    animation: cursorblink 0.6s linear infinite alternate;
-    -webkit-animation: cursorblink 0.6s linear infinite alternate;
-}
-
 .terminal_input--input {
-    color: transparent;
+    margin-left: 6px;
-    background-color: transparent;
+    line-height: 1;
-    border: 0;
+    outline: none !important;
-    outline: none;
 }
 
 .terminal-notify {

public/themes/pterodactyl/js/frontend/console.js

@@ -21,32 +21,98 @@ var CONSOLE_PUSH_COUNT = Pterodactyl.config.console_count || 50;
 var CONSOLE_PUSH_FREQ = Pterodactyl.config.console_freq || 200;
 var CONSOLE_OUTPUT_LIMIT = Pterodactyl.config.console_limit || 2000;
 
+var KEYCODE_UP_ARROW = 38;
+var KEYCODE_DOWN_ARROW = 40;
+
 var AnsiUp = new AnsiUp;
 AnsiUp.use_classes = true;
 
 var $terminal = $('#terminal');
-var $ghostInput = $('.terminal_input--input');
+var $terminalInput = $('.terminal_input--input');
-var $visibleInput = $('.terminal_input--text');
 var $scrollNotify = $('#terminalNotify');
 
 $(document).ready(function () {
-    $ghostInput.focus();
+    var storage = window.localStorage;
-    $('.terminal_input--text, #terminal_input, #terminal, #terminalNotify').on('click', function () {
+    var activeHx = [];
-        $ghostInput.focus();
+    var currentHxIndex = 0;
+    var currentKeyCount = 0;
+
+    var storedConsoleHistory = storage.getItem('console_hx_' + Pterodactyl.server.uuid);
+    try {
+        activeHx = JSON.parse(storedConsoleHistory) || [];
+        currentKeyCount = activeHx.length - 1;
+    } catch (ex) {
+        //
+    }
+
+    $terminalInput.focus();
+    $('.terminal_input--prompt, #terminal_input, #terminal, #terminalNotify').on('click', function () {
+        $terminalInput.focus();
     });
 
-    $ghostInput.on('input', function () {
+    $terminalInput.on('keyup', function (e) {
-        $visibleInput.html($(this).val());
+        if (e.which === KEYCODE_DOWN_ARROW || e.which === KEYCODE_UP_ARROW) {
-    });
+            var value = consoleHistory(e.which);
+
+            if (value !== false) {
+                $terminalInput.val(value);
+            }
+        }
+
+        if (e.which === 27) {
+            $(this).val('');
+        }
 
-    $ghostInput.on('keyup', function (e) {
         if (e.which === 13) {
+            saveToHistory($(this).val());
             Socket.emit((ConsoleServerStatus !== 0) ? 'send command' : 'set status', $(this).val());
 
             $(this).val('');
-            $visibleInput.html('');
         }
     });
+
+    function consoleHistory(key) {
+        // Get previous
+        if (key === KEYCODE_UP_ARROW) {
+            // currentHxIndex++;
+            var index = activeHx.length - (currentHxIndex + 1);
+
+            if (typeof activeHx[index - 1] === 'undefined') {
+                return activeHx[index];
+            }
+
+            currentHxIndex++;
+            return activeHx[index];
+        }
+
+        // Get more recent
+        if (key === KEYCODE_DOWN_ARROW) {
+            var index = activeHx.length - currentHxIndex;
+
+            if (typeof activeHx[index + 1] === 'undefined') {
+                return activeHx[index];
+            }
+
+            currentHxIndex--;
+            return activeHx[index];
+        }
+    }
+
+    function saveToHistory(command) {
+        if (command.length === 0) {
+            return;
+        }
+
+        if (activeHx.length >= 50) {
+            activeHx.pop();
+        }
+
+        currentHxIndex = 0;
+        currentKeyCount++;
+        activeHx[currentKeyCount] = command;
+
+        storage.setItem('console_hx_' + Pterodactyl.server.uuid, JSON.stringify(activeHx));
+    }
 });
 
 $terminal.on('scroll', function () {
@@ -137,7 +203,6 @@ function pushToTerminal(string) {
     });
 })();
 
-
 function updateServerPowerControls (data) {
     // Server is On or Starting
     if(data == 1 || data == 2) {

resources/themes/pterodactyl/server/console.blade.php

@@ -28,9 +28,11 @@
     </head>
     <body id="terminal-body">
         <div id="terminal" style="width:100%;max-height: none !important;"></div>
-        <div id="terminal_input">
+        <div id="terminal_input" class="form-group no-margin">
-            <span class="terminal_input--prompt">{{ $server->username }}:~$</span> <span class="terminal_input--text"></span>
+            <div class="input-group">
-            <input type="text" class="terminal_input--input" />
+                <div class="input-group-addon terminal_input--prompt">{{ $server->username }}:~$</div>
+                <input type="text" class="form-control terminal_input--input">
+            </div>
         </div>
         <div id="terminalNotify" class="terminal-notify hidden">
             <i class="fa fa-bell"></i>

resources/themes/pterodactyl/server/index.blade.php

@@ -42,9 +42,11 @@
         <div class="box">
             <div class="box-body position-relative">
                 <div id="terminal" style="width:100%;"></div>
-                <div id="terminal_input">
+                <div id="terminal_input" class="form-group no-margin">
-                    <span class="terminal_input--prompt">{{ $server->username }}:~$</span> <span class="terminal_input--text"></span>
+                    <div class="input-group">
-                    <input type="text" class="terminal_input--input" />
+                        <div class="input-group-addon terminal_input--prompt">{{ $server->username }}:~$</div>
+                        <input type="text" class="form-control terminal_input--input">
+                    </div>
                 </div>
                 <div id="terminalNotify" class="terminal-notify hidden">
                     <i class="fa fa-bell"></i>