Fix regression showing escaped charaters (#871)

Author: alessio-perugini

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;
                 }
@@ -60,13 +69,13 @@
 	            return false;
 	        }
 	        socket.emit('command', input.val());
+            input.val('');
 	    });
 
 	    $('#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,15 +92,15 @@
 	            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();
 	});
 </script>
@@ -101,7 +110,7 @@
     height: 100%;
 }
 
-body {    
+body {
     margin: 0px;
     padding: 0px;
     background: #F8F9F9;
@@ -111,7 +120,7 @@
 
 #container {
     display: flex;
-    flex-direction: column;    
+    flex-direction: column;
     height: 100vh;
     width: 100%;
 }
@@ -126,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;
@@ -145,8 +154,8 @@
 }
 
 #secondary-controls div {
-    display: inline-block;        
-    padding: 10px 15px;    
+    display: inline-block;
+    padding: 10px 15px;
 }
 
 #autoscroll,
@@ -169,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;
@@ -181,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;