diff --git a/src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts b/src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts index 0298a6c5bfeb..4254215d55c0 100644 --- a/src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts +++ b/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 - + + Show my encryption key + + Please keep your encryption key private. + + Show + Change encryption key @@ -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, diff --git a/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts b/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts new file mode 100644 index 000000000000..5861ad35a72f --- /dev/null +++ b/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` + + + + Encryption key + +
+

+ Make sure you save the encryption key in a secure place so always + have access to your backups. +

+
+

${this._params?.currentKey}

+ +
+ + + Download emergency kit + + We recommend saving this encryption key file somewhere secure. + + + + Download + + + +
+
+ Close +
+ + `; + } + + 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; + } +} diff --git a/src/panels/config/backup/dialogs/show-dialog-show-backup-encryption-key.ts b/src/panels/config/backup/dialogs/show-dialog-show-backup-encryption-key.ts new file mode 100644 index 000000000000..e69d7ae774f8 --- /dev/null +++ b/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, + });