Add show encryption key dialog (#23552)

src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts

@@ -9,6 +9,7 @@ import { showChangeBackupEncryptionKeyDialog } from "../../dialogs/show-dialog-c
 import { showSetBackupEncryptionKeyDialog } from "../../dialogs/show-dialog-set-backup-encryption-key";
 
 import { downloadEmergencyKit } from "../../../../../data/backup";
+import { showShowBackupEncryptionKeyDialog } from "../../dialogs/show-dialog-show-backup-encryption-key";
 
 @customElement("ha-backup-config-encryption-key")
 class HaBackupConfigEncryptionKey extends LitElement {
@@ -34,7 +35,13 @@ class HaBackupConfigEncryptionKey extends LitElement {
               Download
             </ha-button>
           </ha-md-list-item>
-
+          <ha-md-list-item>
+            <span slot="headline">Show my encryption key</span>
+            <span slot="supporting-text">
+              Please keep your encryption key private.
+            </span>
+            <ha-button slot="end" @click=${this._show}>Show</ha-button>
+          </ha-md-list-item>
           <ha-md-list-item>
             <span slot="headline">Change encryption key</span>
             <span slot="supporting-text">
@@ -68,6 +75,10 @@ class HaBackupConfigEncryptionKey extends LitElement {
     downloadEmergencyKit(this.hass, this._value);
   }
 
+  private _show() {
+    showShowBackupEncryptionKeyDialog(this, { currentKey: this._value });
+  }
+
   private _change() {
     showChangeBackupEncryptionKeyDialog(this, {
       currentKey: this._value,

src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts

@@ -0,0 +1,174 @@
+import { mdiClose, mdiContentCopy, mdiDownload } from "@mdi/js";
+import type { CSSResultGroup } from "lit";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { copyToClipboard } from "../../../../common/util/copy-clipboard";
+import "../../../../components/ha-button";
+import "../../../../components/ha-dialog-header";
+import "../../../../components/ha-icon-button";
+import "../../../../components/ha-icon-button-prev";
+import "../../../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../../../components/ha-md-dialog";
+import "../../../../components/ha-md-list";
+import "../../../../components/ha-md-list-item";
+import "../../../../components/ha-password-field";
+import { downloadEmergencyKit } from "../../../../data/backup";
+import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
+import { haStyle, haStyleDialog } from "../../../../resources/styles";
+import type { HomeAssistant } from "../../../../types";
+import { showToast } from "../../../../util/toast";
+import type { ShowBackupEncryptionKeyDialogParams } from "./show-dialog-show-backup-encryption-key";
+
+@customElement("ha-dialog-show-backup-encryption-key")
+class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: ShowBackupEncryptionKeyDialogParams;
+
+  @query("ha-md-dialog") private _dialog!: HaMdDialog;
+
+  public showDialog(params: ShowBackupEncryptionKeyDialogParams): void {
+    this._params = params;
+  }
+
+  public closeDialog(): void {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  private _closeDialog() {
+    this._dialog.close();
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    return html`
+      <ha-md-dialog disable-cancel-action open @closed=${this.closeDialog}>
+        <ha-dialog-header slot="headline">
+          <ha-icon-button
+            slot="navigationIcon"
+            .label=${this.hass.localize("ui.dialogs.generic.close")}
+            .path=${mdiClose}
+            @click=${this._closeDialog}
+          ></ha-icon-button>
+          <span slot="title">Encryption key</span>
+        </ha-dialog-header>
+        <div slot="content">
+          <p>
+            Make sure you save the encryption key in a secure place so always
+            have access to your backups.
+          </p>
+          <div class="encryption-key">
+            <p>${this._params?.currentKey}</p>
+            <ha-icon-button
+              .path=${mdiContentCopy}
+              @click=${this._copyKeyToClipboard}
+            ></ha-icon-button>
+          </div>
+          <ha-md-list>
+            <ha-md-list-item>
+              <span slot="headline">Download emergency kit</span>
+              <span slot="supporting-text">
+                We recommend saving this encryption key file somewhere secure.
+              </span>
+              <ha-button slot="end" @click=${this._download}>
+                <ha-svg-icon .path=${mdiDownload} slot="icon"></ha-svg-icon>
+                Download
+              </ha-button>
+            </ha-md-list-item>
+          </ha-md-list>
+        </div>
+        <div slot="actions">
+          <ha-button @click=${this._closeDialog}>Close</ha-button>
+        </div>
+      </ha-md-dialog>
+    `;
+  }
+
+  private async _copyKeyToClipboard() {
+    if (!this._params?.currentKey) {
+      return;
+    }
+    await copyToClipboard(
+      this._params?.currentKey,
+      this.renderRoot.querySelector("div")!
+    );
+    showToast(this, {
+      message: this.hass.localize("ui.common.copied_clipboard"),
+    });
+  }
+
+  private _download() {
+    if (!this._params?.currentKey) {
+      return;
+    }
+    downloadEmergencyKit(this.hass, this._params.currentKey, "old");
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        ha-md-dialog {
+          width: 90vw;
+          max-width: 560px;
+          --dialog-content-padding: 8px 24px;
+        }
+        ha-md-list {
+          background: none;
+          --md-list-item-leading-space: 0;
+          --md-list-item-trailing-space: 0;
+        }
+        ha-button.danger {
+          --mdc-theme-primary: var(--error-color);
+        }
+        .encryption-key {
+          border: 1px solid var(--divider-color);
+          background-color: var(--primary-background-color);
+          border-radius: 8px;
+          padding: 16px;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          gap: 24px;
+        }
+        .encryption-key p {
+          margin: 0;
+          flex: 1;
+          font-family: "Roboto Mono", "Consolas", "Menlo", monospace;
+          font-size: 20px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 28px;
+          text-align: center;
+        }
+        .encryption-key ha-icon-button {
+          flex: none;
+          margin: -16px;
+        }
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          ha-md-dialog {
+            max-width: none;
+          }
+          div[slot="content"] {
+            margin-top: 0;
+          }
+        }
+        p {
+          margin-top: 0;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-dialog-show-backup-encryption-key": DialogShowBackupEncryptionKey;
+  }
+}

src/panels/config/backup/dialogs/show-dialog-show-backup-encryption-key.ts

@@ -0,0 +1,17 @@
+import { fireEvent } from "../../../../common/dom/fire_event";
+
+export interface ShowBackupEncryptionKeyDialogParams {
+  currentKey: string;
+}
+
+const loadDialog = () => import("./dialog-show-backup-encryption-key");
+
+export const showShowBackupEncryptionKeyDialog = (
+  element: HTMLElement,
+  params?: ShowBackupEncryptionKeyDialogParams
+) =>
+  fireEvent(element, "show-dialog", {
+    dialogTag: "ha-dialog-show-backup-encryption-key",
+    dialogImport: loadDialog,
+    dialogParams: params,
+  });