From 5d2dfc26fa9c813326dca0f4d9cafebbfa38b1ff Mon Sep 17 00:00:00 2001
From: Alessio Perugini <alessioper.98@gmail.com>
Date: Mon, 11 Dec 2023 10:03:58 +0100
Subject: [PATCH 1/2] fix regression on encoded html attributes

---
 home.html | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/home.html b/home.html
index 7f4ffb6b9..81eb2ce73 100644
--- a/home.html
+++ b/home.html
@@ -33,18 +33,27 @@
                 if (jsonMsg.Ports) {
                     const validKeys = ['Name', 'SerialNumber', 'IsOpen', 'VendorID', 'ProductID'];
                     if (jsonMsg.Network) {
-                        printMsg = "<b>Network Ports</b>:<br>"+JSON.stringify(jsonMsg.Ports, validKeys, 2);
+                        printMsg = "Network Ports:\n"+JSON.stringify(jsonMsg.Ports, validKeys, 2);
                     } else {
-                        printMsg = "<b>Serial Ports</b>:<br>"+JSON.stringify(jsonMsg.Ports, validKeys, 2);
+                        printMsg = "Serial Ports:\n"+JSON.stringify(jsonMsg.Ports, validKeys, 2);
                     }
                 } else if (Object.keys(jsonMsg).length !== 0) {
                     printMsg = JSON.stringify(jsonMsg, undefined, 2);
                 }
+
+                // when parsing JSON we're escaping some html charaters like "&<>", we want to show their
+                // original value in the log
+                function decode(str) {
+                    let txt = new DOMParser().parseFromString(str, "text/html");
+                    return txt.documentElement.textContent;
+                }
+                printMsg = decode(printMsg);
+
                 messages.push(printMsg);
                 if (messages.length > MESSAGES_MAX_COUNT) {
                     messages.shift();
                 }
-                log.textContent = messages.join('<br><br>');
+                log.textContent = messages.join('\n\n');
                 if (autoscroll.checked) {
                     log.scrollTop = log.scrollHeight - log.clientHeight;
                 }
@@ -65,8 +74,7 @@
 	    $('#export').click(function() {
 	    	var link = document.createElement('a');
 	    	link.setAttribute('download', 'agent-log.txt');
-	    	var text = log.innerHTML.replace(/<br>/g, '\n');
-	    	text = text.replace(/<b>|<\/b>/g, '');
+	    	var text = log.textContent;
 	    	link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
     		link.click();
     	});
@@ -83,13 +91,13 @@
 	            socket = io('http://{{$}}');
 	        }
 	        socket.on('disconnect', function(evt) {
-	            appendLog($('<div><b>Connection closed.</b></div>'))
+	            appendLog('Connection closed.')
 	        });
 	        socket.on('message', function(evt) {
 	            appendLog(evt);
 	        });
 	    } else {
-	        appendLog($('<div><b>Your browser does not support WebSockets.</b></div>'))
+	        appendLog('Your browser does not support WebSockets.')
         }
         
         $("#input").focus();

From 79c54ee939022fb8a2965f533ae8d13e299cb8f4 Mon Sep 17 00:00:00 2001
From: Alessio Perugini <alessioper.98@gmail.com>
Date: Mon, 11 Dec 2023 10:05:12 +0100
Subject: [PATCH 2/2] clean input when sending a command

---
 home.html | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/home.html b/home.html
index 81eb2ce73..61cade73d 100644
--- a/home.html
+++ b/home.html
@@ -69,6 +69,7 @@
 	            return false;
 	        }
 	        socket.emit('command', input.val());
+            input.val('');
 	    });
 
 	    $('#export').click(function() {
@@ -99,7 +100,7 @@
 	    } else {
 	        appendLog('Your browser does not support WebSockets.')
         }
-        
+
         $("#input").focus();
 	});
 </script>
@@ -109,7 +110,7 @@
     height: 100%;
 }
 
-body {    
+body {
     margin: 0px;
     padding: 0px;
     background: #F8F9F9;
@@ -119,7 +120,7 @@
 
 #container {
     display: flex;
-    flex-direction: column;    
+    flex-direction: column;
     height: 100vh;
     width: 100%;
 }
@@ -134,15 +135,15 @@
     overflow-y: auto;
 }
 
-#footer {    
-    display: flex;    
+#footer {
+    display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
     justify-content: space-between;
-    margin: 0px 15px 0px;    
+    margin: 0px 15px 0px;
 }
 
-#form {    
+#form {
     display: flex;
     flex-grow: 1;
     margin-bottom: 15px;
@@ -153,8 +154,8 @@
 }
 
 #secondary-controls div {
-    display: inline-block;        
-    padding: 10px 15px;    
+    display: inline-block;
+    padding: 10px 15px;
 }
 
 #autoscroll,
@@ -177,7 +178,7 @@
     box-shadow: 0 4px #95a5a6;
     margin-bottom: 4px;
     color: #000;
-    cursor: pointer;    
+    cursor: pointer;
     font-size: 14px;
     letter-spacing: 1.28px;
     line-height: normal;
@@ -189,20 +190,20 @@
 }
 
 .button:hover {
-    box-shadow: 0 2px #95a5a6;    
+    box-shadow: 0 2px #95a5a6;
     outline: none;
     transform: translateY(2px);
 }
 
 .button:active {
-    box-shadow: none;    
+    box-shadow: none;
     transform: translateY(4px);
 }
 
 .textfield {
     background-color: #dae3e3;
     width: auto;
-    height: auto;    
+    height: auto;
     padding: 10px 8px;
     margin-left: 8px;
     vertical-align: top;