From 3a042213032447a0100c84a694944e2009869e0e Mon Sep 17 00:00:00 2001
From: oskar-kupski-elpassion <oskar.kupski@elpassion.pl>
Date: Wed, 2 Oct 2019 14:47:33 +0200
Subject: [PATCH 1/2] Optional config to require a login to access the
 terminal.

---
 index.html         |  10 ++-
 js/src/terminal.js | 197 ++++++++++++++++++++++++++++++++++-----------
 terminal.css       |  13 +++
 3 files changed, 169 insertions(+), 51 deletions(-)

diff --git a/index.html b/index.html
index cf6c4ab..294aed9 100644
--- a/index.html
+++ b/index.html
@@ -37,24 +37,28 @@
     <h1><a href="https://github.com/syntaxseed/terminalfaker">Terminal Faker Demo</a></h1>
 
     <div id="terminal">
+      <div id="login">
+
+      </div>
         <p class="hidden">
             <span class="prompt"></span>
            <span contenteditable="true" class="input" autocorrect="off" autocapitalize="none" autocomplete="off"> </span>
         </p>
     </div>
 
-    <script src="js/bundle.min.js"></script>
-    <!-- The above minified bundle contains:
+<!--    <script src="js/bundle.min.js"></script>-->
+    <!-- The above minified bundle contains:-->
     <script src="js/src/terminal.js"></script>
     <script src="js/src/boot.js"></script>
     <script src="js/src/crypto.js"></script>
-    <script src="js/src/system.js"></script>-->
+    <script src="js/src/system.js"></script>
     <script src="js/filesystem.js"></script>
     <script src="js/commands.js"></script>
 
     <script>
         // Whether to use the longer boot load screen. If this is missing, defaults to true.
         var useBootLoader = true;
+        var useLoginProtection = true;
 
         // Set the command prompt style:
         var customPrompt = function () { return "guest@TermFake ("+Terminal.path+") $ ";};
diff --git a/js/src/terminal.js b/js/src/terminal.js
index 162199b..d646faa 100644
--- a/js/src/terminal.js
+++ b/js/src/terminal.js
@@ -128,6 +128,8 @@ var Terminal = (function () {
     var KEY_UP = 38,
         KEY_DOWN = 40,
         KEY_TAB = 9,
+        KEY_ENTER = 13,
+        KEY_BACKSPACE = 8,
         MAX_HISTORY = 20;
 
     //var path ="/";
@@ -221,6 +223,91 @@ var Terminal = (function () {
 
     // Terminal functions
 
+    self.loginToTerminal = function (terminal) {
+        if (!self.useLoginProtection) return;
+
+        setTimeout(function() {
+            var loginElement = document.getElementById("login");
+            var usernameContainerElement = document.createElement('div');
+            var passwordContainerElement = document.createElement('div');
+
+            function createLabeledInput(baseId, label, value = '') {
+                var labelElement = document.createElement('span');
+                labelElement.setAttribute('id', baseId + '-label');
+                labelElement.innerHTML = label;
+
+                var inputElement = document.createElement('input');
+                inputElement.setAttribute('id', baseId);
+                inputElement.classList.add('labeled-input');
+                inputElement.value = value;
+
+                return [labelElement, inputElement];
+            }
+
+            var [usernameLabelElement, usernameElement] = createLabeledInput('login-username', 'Login: ');
+            var [passwordLabelElement, passwordElement] = createLabeledInput('login-password', 'Password: ', '');
+
+            usernameElement.addEventListener('keypress', function (e) {
+                if (self.isLoggedIn || e.keyCode != KEY_ENTER) return;
+
+                e.preventDefault();
+
+                var password = [];
+
+                document.getElementById('login-username').setAttribute('disabled', 'true');
+
+                passwordElement.addEventListener('keydown', function(e) {
+                    if (self.isLoggedIn) return;
+                    if (e.which === KEY_BACKSPACE) {
+                        password.pop();
+                    }
+                });
+
+                passwordElement.addEventListener('keypress', function(e) {
+                    if (self.isLoggedIn) return;
+
+                    e.preventDefault();
+
+                    if (e.keyCode != KEY_ENTER) {
+                        password.push(String.fromCharCode(e.which));
+                    } else {
+                        var username = document.getElementById('login-username').value;
+                        var passwordString = password.join('');
+
+                        var loginWelcomeMessageElement = document.createElement('p');
+                        loginElement.append(loginWelcomeMessageElement);
+                        /* TODO validate username and password */
+                        if (username === 'admin' && passwordString === 'admin') {
+                            loginWelcomeMessageElement.innerText = 'You are logged in as ' + username;
+
+                            setTimeout(function() {
+                                self.isLoggedIn = true;
+                                self.initPrompt(terminal);
+                            }, 0)
+                        } else {
+                            loginWelcomeMessageElement.innerText = 'Failed to log in. Refresh the page and try again';
+                        }
+                    }
+                });
+
+                passwordContainerElement.append(passwordLabelElement);
+                passwordContainerElement.append(passwordElement);
+
+                loginElement.append(passwordContainerElement);
+
+                passwordElement.focus();
+            });
+
+            usernameContainerElement.append(usernameLabelElement);
+            usernameContainerElement.append(usernameElement);
+
+            loginElement.append(usernameContainerElement);
+            loginElement.append(passwordContainerElement);
+
+            usernameElement.focus();
+        },  useBootLoader? bootMessageLines.length * 500 : 500);
+    };
+
     self.bootTerminalStart = function (terminal) {
 
         var defaultLine = "Type 'help' to get started.";
@@ -391,84 +478,98 @@ var Terminal = (function () {
         return true;
     };
 
+    self.initPrompt = function(elem) {
+        if (self.useLoginProtection && !self.isLoggedIn) return;
+
+        elem.querySelector(".prompt").innerHTML = self.customPrompt();
+        elem.querySelector(".input").focus();
+    };
 
     self.init = function (elem, commands, customPrompt) {
         self.commands = commands;
         self.customPrompt = customPrompt;
+        self.useLoginProtection = typeof useLoginProtection !== 'undefined' && useLoginProtection;
+        self.isLoggedIn = false;
 
         self.initSession();
 
         elem.addEventListener("keydown", function (event) {
-            if (event.keyCode == KEY_TAB) {
-                var prompt = event.target;
-                var suggestions = autoCompleteInput(prompt.textContent.replace(/\s+/g, ""));
-
-                if (suggestions.length == 1) {
-                    prompt.textContent = suggestions[0];
-                    var range = document.createRange();
-                    var sel = window.getSelection();
-                    range.setStart(prompt.childNodes[0], suggestions[0].length);
-                    range.collapse(true);
-                    sel.removeAllRanges();
-                    sel.addRange(range);
+            if ((self.useLoginProtection && self.isLoggedIn) || !self.useLoginProtection) {
+                if (event.keyCode == KEY_TAB) {
+                    var prompt = event.target;
+                    var suggestions = autoCompleteInput(prompt.textContent.replace(/\s+/g, ""));
+
+                    if (suggestions.length == 1) {
+                        prompt.textContent = suggestions[0];
+                        var range = document.createRange();
+                        var sel = window.getSelection();
+                        range.setStart(prompt.childNodes[0], suggestions[0].length);
+                        range.collapse(true);
+                        sel.removeAllRanges();
+                        sel.addRange(range);
+                    }
+
+                    event.preventDefault(true);
+                    return false;
                 }
-
-                event.preventDefault(true);
-                return false;
             }
         });
 
         elem.addEventListener("keyup", function (event) {
-            if (self.historyIndex < 0) return;
-            browseHistory(event.target, event.keyCode);
+            if ((self.useLoginProtection && self.isLoggedIn) || !self.useLoginProtection) {
+                if (self.historyIndex < 0) return;
+                browseHistory(event.target, event.keyCode);
+            }
         });
 
         elem.addEventListener("keypress", function (event) {
-            var prompt = event.target;
-            if (event.keyCode != 13) return false;
+            if ((self.useLoginProtection && self.isLoggedIn) || !self.useLoginProtection) {
+                var prompt = event.target;
+                if (event.keyCode != 13) return false;
 
-            var enteredComand = prompt.textContent.trim();
+                var enteredComand = prompt.textContent.trim();
 
-            // Split entered command by spaces, but not spaces in quotes.
-            var input = enteredComand.match(/(?=\S)[^"\s]*(?:"[^\\"]*(?:\\[\s\S][^\\"]*)*"[^"\s]*)*/g);
+                // Split entered command by spaces, but not spaces in quotes.
+                var input = enteredComand.match(/(?=\S)[^"\s]*(?:"[^\\"]*(?:\\[\s\S][^\\"]*)*"[^"\s]*)*/g);
 
-            if (input == null) {
-                resetPrompt(elem, prompt, false);
-                event.preventDefault();
-                return;
-            }
-
-            // Remove surrounding quotes if any.
-            input = input.map(function (e) {
-                if (e.charAt(0) === '"' && e.charAt(e.length - 1) === '"') {
-                    return e.substr(1, e.length - 2);
-                } else {
-                    return e;
+                if (input == null) {
+                    resetPrompt(elem, prompt, false);
+                    event.preventDefault();
+                    return;
                 }
-            });
 
-            if (input[0]) {
-                if (input[0].toLowerCase() in self.commands) {
-                    runCommand(elem, input[0].toLowerCase(), input);
-                    updateHistory(prompt.textContent);
-                } else {
-                    elem.innerHTML += input[0] + ": command not found";
+                // Remove surrounding quotes if any.
+                input = input.map(function (e) {
+                    if (e.charAt(0) === '"' && e.charAt(e.length - 1) === '"') {
+                        return e.substr(1, e.length - 2);
+                    } else {
+                        return e;
+                    }
+                });
+
+                if (input[0]) {
+                    if (input[0].toLowerCase() in self.commands) {
+                        runCommand(elem, input[0].toLowerCase(), input);
+                        updateHistory(prompt.textContent);
+                    } else {
+                        elem.innerHTML += input[0] + ": command not found";
+                    }
                 }
-            }
 
-            // Reset the prompt, and the given array of command also clear the screen.
-            resetPrompt(elem, prompt, (['clear', 'reboot'].indexOf(input[0].toLowerCase()) >= 0));
-            event.preventDefault();
+                // Reset the prompt, and the given array of command also clear the screen.
+                resetPrompt(elem, prompt, (['clear', 'reboot'].indexOf(input[0].toLowerCase()) >= 0));
+                event.preventDefault();
+            }
         });
 
-        elem.querySelector(".prompt").innerHTML = self.customPrompt();
-        elem.querySelector(".input").focus();
+        self.loginToTerminal(elem);
+        self.initPrompt(elem);
 
         self.term = elem;
 
         // Run the custom boot loader, unless disabled.
         //if ((typeof useBootLoader === 'undefined') || useBootLoader) {
-        self.bootTerminalStart(document.getElementById("terminal"));
+        self.bootTerminalStart(elem);
         //}
 
         return self;
diff --git a/terminal.css b/terminal.css
index 35163b1..c2d5253 100644
--- a/terminal.css
+++ b/terminal.css
@@ -28,6 +28,19 @@ the font size as it's quite small.
     display:        inline-block;
 }
 
+#terminal .labeled-input {
+    height:         1em;
+    min-width:      3em;
+    outline-color:  transparent;
+    border:         none;
+    display:        inline-block;
+    font-size: inherit;
+    font-weight: inherit;
+    font-family: inherit;
+    color: inherit;
+    background: transparent;
+}
+
 #terminal .prompt{
     color:#00ff99;
 }

From 1e340c1ca4cbc732bfcd3b8bc6a261deef71d6af Mon Sep 17 00:00:00 2001
From: oskar-kupski-elpassion <oskar.kupski@elpassion.pl>
Date: Thu, 3 Oct 2019 10:14:33 +0200
Subject: [PATCH 2/2] username and password moved to index.html configuration

---
 index.html         | 2 ++
 js/src/terminal.js | 8 +++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 294aed9..e954d9c 100644
--- a/index.html
+++ b/index.html
@@ -59,6 +59,8 @@ <h1><a href="https://github.com/syntaxseed/terminalfaker">Terminal Faker Demo</a
         // Whether to use the longer boot load screen. If this is missing, defaults to true.
         var useBootLoader = true;
         var useLoginProtection = true;
+        var validUsername = 'admin';
+        var validPassword = 'admin';
 
         // Set the command prompt style:
         var customPrompt = function () { return "guest@TermFake ("+Terminal.path+") $ ";};
diff --git a/js/src/terminal.js b/js/src/terminal.js
index d646faa..ceb6897 100644
--- a/js/src/terminal.js
+++ b/js/src/terminal.js
@@ -277,7 +277,7 @@ var Terminal = (function () {
                         var loginWelcomeMessageElement = document.createElement('p');
                         loginElement.append(loginWelcomeMessageElement);
                         /* TODO validate username and password */
-                        if (username === 'admin' && passwordString === 'admin') {
+                        if (username === self.validUsername && passwordString === self.validPassword) {
                             loginWelcomeMessageElement.innerText = 'You are logged in as ' + username;
 
                             setTimeout(function() {
@@ -489,8 +489,14 @@ var Terminal = (function () {
         self.commands = commands;
         self.customPrompt = customPrompt;
         self.useLoginProtection = typeof useLoginProtection !== 'undefined' && useLoginProtection;
+        self.validUsername = typeof validUsername !== 'undefined' && validUsername ? validUsername : '';
+        self.validPassword = typeof validPassword !== 'undefined' && validPassword ? validPassword : '';
         self.isLoggedIn = false;
 
+        if (self.useLoginProtection && (!self.validUsername || !self.validPassword)) {
+            throw new Error('Valid username or valid password are not defined in index.html!');
+        }
+
         self.initSession();
 
         elem.addEventListener("keydown", function (event) {