From 6eb769e6d5a584ccb22d92dbb02175e3b74683ae Mon Sep 17 00:00:00 2001
From: Otto Winter <otto@otto-winter.com>
Date: Sun, 10 Feb 2019 20:30:05 +0100
Subject: [PATCH] Auto-Redact personal information from logs (#421)

---
 esphomeyaml/dashboard/static/esphomeyaml.css | 11 +++++++++++
 esphomeyaml/dashboard/static/esphomeyaml.js  | 16 ++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/esphomeyaml/dashboard/static/esphomeyaml.css b/esphomeyaml/dashboard/static/esphomeyaml.css
index bfd8d3b893..e24c4481e8 100644
--- a/esphomeyaml/dashboard/static/esphomeyaml.css
+++ b/esphomeyaml/dashboard/static/esphomeyaml.css
@@ -76,6 +76,17 @@ i.very-large {
 .log-underline { text-decoration: underline; }
 .log-strikethrough { text-decoration: line-through; }
 .log-underline.log-strikethrough { text-decoration: underline line-through; }
+.log-secret {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.log-secret-redacted {
+  opacity: 0;
+  width: 1px;
+  font-size: 1px;
+}
 .log-fg-black { color: rgb(128,128,128); }
 .log-fg-red { color: rgb(255,0,0); }
 .log-fg-green { color: rgb(0,255,0); }
diff --git a/esphomeyaml/dashboard/static/esphomeyaml.js b/esphomeyaml/dashboard/static/esphomeyaml.js
index f3f9b9c1c1..a5438d97fa 100644
--- a/esphomeyaml/dashboard/static/esphomeyaml.js
+++ b/esphomeyaml/dashboard/static/esphomeyaml.js
@@ -11,6 +11,7 @@ const initializeColorState = () => {
     foregroundColor: false,
     backgroundColor: false,
     carriageReturn: false,
+    secret: false,
   };
 };
 
@@ -43,10 +44,18 @@ const colorReplace = (pre, state, text) => {
     if (state.italic) span.classList.add("log-italic");
     if (state.underline) span.classList.add("log-underline");
     if (state.strikethrough) span.classList.add("log-strikethrough");
+    if (state.secret) span.classList.add("log-secret");
     if (state.foregroundColor !== null) span.classList.add(`log-fg-${state.foregroundColor}`);
     if (state.backgroundColor !== null) span.classList.add(`log-bg-${state.backgroundColor}`);
     span.appendChild(document.createTextNode(content));
     lineSpan.appendChild(span);
+
+    if (state.secret) {
+      const redacted = document.createElement("span");
+      redacted.classList.add("log-secret-redacted");
+      redacted.appendChild(document.createTextNode("[redacted]"));
+      lineSpan.appendChild(redacted);
+    }
   };
 
 
@@ -71,6 +80,7 @@ const colorReplace = (pre, state, text) => {
           state.strikethrough = false;
           state.foregroundColor = null;
           state.backgroundColor = null;
+          state.secret = false;
           break;
         case 1:
           state.bold = true;
@@ -81,6 +91,12 @@ const colorReplace = (pre, state, text) => {
         case 4:
           state.underline = true;
           break;
+        case 5:
+          state.secret = true;
+          break;
+        case 6:
+          state.secret = false;
+          break;
         case 9:
           state.strikethrough = true;
           break;