streamer mode fix

raw_package/index.template.html

@@ -8,6 +8,7 @@
 <esphome-main
   version="{{ version }}"
   docsLink="{{ docs_link }}"
+  {% if streamer_mode %}streamerMode="true"{% end %}
   {% if login_enabled %}logoutUrl="{{ relative_url }}logout"{% end %}
 ></esphome-main>
 {% end %}

src/components/remote-process.ts

@@ -28,7 +28,9 @@ class ESPHomeRemoteProcess extends HTMLElement {
         }
         ${coloredConsoleStyles}
       </style>
-      <div class="log"></div>
+      <div class="log${
+        ColoredConsole.blurSecrets ? " blur-secrets" : ""
+      }"></div>
     `;
 
     const coloredConsole = new ColoredConsole(shadowRoot.querySelector("div")!);

src/editor/esphome-editor.ts

@@ -1,6 +1,6 @@
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 import { LitElement, html } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import "@material/mwc-dialog";
 import "@material/mwc-button";
 import "@material/mwc-snackbar";
@@ -12,6 +12,7 @@ import type { Snackbar } from "@material/mwc-snackbar";
 import { fireEvent } from "../util/fire-event";
 import { debounce } from "../util/debounce";
 import "./monaco-provider";
+import { mdiIncognito } from "@mdi/js";
 
 // WebSocket URL Helper
 const loc = window.location;
@@ -34,19 +35,22 @@ class ESPHomeEditor extends LitElement {
   private editorActiveSecrets = false;
 
   @property() public fileName!: string;
+  @property({ type: Boolean }) streamerMode = false;
   @query("mwc-snackbar", true) private _snackbar!: Snackbar;
   @query("main", true) private container!: HTMLElement;
   @query(".esphome-header", true) private editor_header!: HTMLElement;
+  @state() private _showSecrets = false;
 
   createRenderRoot() {
     return this;
   }
 
-  protected render() {
-    const isSecrets =
-      this.fileName === "secrets.yaml" || this.fileName === "secrets.yml";
+  private _isSecrets() {
+    return this.fileName === "secrets.yaml" || this.fileName === "secrets.yml";
+  }
 
-    return html`
+  protected render() {
+    const commonStyle = html`
       <style>
         html,
         body {
@@ -59,7 +63,7 @@ class ESPHomeEditor extends LitElement {
           align-items: center;
           align-content: stretch;
         }
-        h2 {
+        .esphome-header h2 {
           line-height: 100%;
           /* this margin, padding stretches the container, offsetHeight does not calculate margin of .editor-header */
           padding: 0.8rem 0.5rem 1rem 0.5rem;
@@ -70,6 +74,60 @@ class ESPHomeEditor extends LitElement {
           white-space: nowrap;
           text-overflow: ellipsis;
         }
+      </style>
+    `;
+    const isSecrets = this._isSecrets();
+    if (isSecrets && this.streamerMode && !this._showSecrets) {
+      return html`
+        ${commonStyle}
+        <style>
+          .secrets-warning-container {
+            text-align: center;
+            padding: 40px;
+            color: var(--primary-text-color);
+          }
+          h1 {
+            font-size: 2.5rem;
+            line-height: 110%;
+            font-weight: 400;
+            margin: 1rem 0 0.65rem 0;
+          }
+          esphome-svg-icon {
+            --mdc-icon-size: 56px;
+          }
+        </style>
+        <div class="esphome-header">
+          <mwc-icon-button
+            icon="clear"
+            @click=${this._handleClose}
+            aria-label="close"
+          ></mwc-icon-button>
+          <h2>${this.fileName}</h2>
+        </div>
+        <main>
+          <div class="secrets-warning-container">
+            <esphome-svg-icon .path=${mdiIncognito}></esphome-svg-icon>
+            <h1>Show Secrets Warning</h1>
+            <p>
+              Streamer mode enabled, are you sure you want to disclose your
+              secrets?
+            </p>
+            <mwc-button
+              raised
+              label="Show My Secrets"
+              @click="${() => (this._showSecrets = true)}"
+            ></mwc-button>
+          </div>
+        </main>
+      `;
+    } else if (isSecrets && this.streamerMode && this._showSecrets) {
+      // as the 1st update was skipped, fire firstUpdated again
+      setTimeout(() => this.firstUpdated(), 50);
+    }
+
+    return html`
+      ${commonStyle}
+      <style>
         mwc-icon-button {
           --mdc-icon-button-size: 32px;
         }
@@ -137,6 +195,10 @@ class ESPHomeEditor extends LitElement {
   }
 
   firstUpdated() {
+    const isSecrets = this._isSecrets();
+    if (isSecrets && this.streamerMode && !this._showSecrets) {
+      return;
+    }
     // @ts-ignore
     self.MonacoEnvironment = {
       getWorkerUrl: function (moduleId: string, label: string) {
@@ -159,9 +221,6 @@ class ESPHomeEditor extends LitElement {
         'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
     });
 
-    const isSecrets =
-      this.fileName === "secrets.yaml" || this.fileName === "secrets.yml";
-
     getFile(this.fileName).then((response) => {
       if (response === null && isSecrets) {
         response = EMPTY_SECRETS;

src/esphome-main.ts

@@ -3,14 +3,14 @@ import "./components/esphome-header-menu";
 import "./components/esphome-fab";
 import { LitElement, html, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { ColoredConsole } from "./util/console-color";
 
 @customElement("esphome-main")
 class ESPHomeMainView extends LitElement {
   @property() version = "unknown";
-
   @property() docsLink = "";
-
   @property() logoutUrl?: string;
+  @property({ type: Boolean }) streamerMode = false;
 
   @state() private editing?: string;
 
@@ -27,6 +27,7 @@ class ESPHomeMainView extends LitElement {
         <esphome-editor
           @close=${this._handleEditorClose}
           fileName=${this.editing}
+          .streamerMode=${this.streamerMode}
         ></esphome-editor>
       `;
     }
@@ -61,6 +62,11 @@ class ESPHomeMainView extends LitElement {
     return this;
   }
 
+  connectedCallback() {
+    ColoredConsole.blurSecrets = this.streamerMode;
+    super.connectedCallback();
+  }
+
   protected firstUpdated(changedProps: PropertyValues): void {
     super.firstUpdated(changedProps);
     document.body.addEventListener<any>("edit-file", (ev) => {

src/util/console-color.ts

@@ -10,6 +10,8 @@ interface ConsoleState {
 }
 
 export class ColoredConsole {
+  public static blurSecrets = false;
+
   public state: ConsoleState = {
     bold: false,
     italic: false,
@@ -24,7 +26,9 @@ export class ColoredConsole {
   constructor(public targetElement: HTMLElement) {}
 
   logs(): string {
-    return this.targetElement.innerText;
+    const logs = this.targetElement.cloneNode(true) as HTMLElement;
+    logs.querySelectorAll(".log-secret").forEach((e) => (e.innerHTML = ""));
+    return logs.innerText;
   }
 
   addLine(line: string) {
@@ -228,9 +232,11 @@ export const coloredConsoleStyles = `
     -ms-user-select: none;
     user-select: none;
   }
+  .log.blur-secrets .log-secret {
+    filter: blur(5px);
+  }
   .log-secret-redacted {
     opacity: 0;
-    width: 1px;
     font-size: 1px;
   }
   .log-fg-black {
@@ -281,4 +287,13 @@ export const coloredConsoleStyles = `
   .log-bg-white {
     background-color: rgb(255, 255, 255);
   }
+  @media not screen {
+    .log-secret {
+      display: none;
+    }
+    .log-secret-redacted {
+      opacity: 0;
+      font-size: 12px;
+    }
+  }
 `;