mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-14 04:46:34 +00:00
Add show encryption key dialog (#23552)
This commit is contained in:
parent
fcc9da6d85
commit
4a16d9bd44
@ -9,6 +9,7 @@ import { showChangeBackupEncryptionKeyDialog } from "../../dialogs/show-dialog-c
|
|||||||
import { showSetBackupEncryptionKeyDialog } from "../../dialogs/show-dialog-set-backup-encryption-key";
|
import { showSetBackupEncryptionKeyDialog } from "../../dialogs/show-dialog-set-backup-encryption-key";
|
||||||
|
|
||||||
import { downloadEmergencyKit } from "../../../../../data/backup";
|
import { downloadEmergencyKit } from "../../../../../data/backup";
|
||||||
|
import { showShowBackupEncryptionKeyDialog } from "../../dialogs/show-dialog-show-backup-encryption-key";
|
||||||
|
|
||||||
@customElement("ha-backup-config-encryption-key")
|
@customElement("ha-backup-config-encryption-key")
|
||||||
class HaBackupConfigEncryptionKey extends LitElement {
|
class HaBackupConfigEncryptionKey extends LitElement {
|
||||||
@ -34,7 +35,13 @@ class HaBackupConfigEncryptionKey extends LitElement {
|
|||||||
Download
|
Download
|
||||||
</ha-button>
|
</ha-button>
|
||||||
</ha-md-list-item>
|
</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>
|
<ha-md-list-item>
|
||||||
<span slot="headline">Change encryption key</span>
|
<span slot="headline">Change encryption key</span>
|
||||||
<span slot="supporting-text">
|
<span slot="supporting-text">
|
||||||
@ -68,6 +75,10 @@ class HaBackupConfigEncryptionKey extends LitElement {
|
|||||||
downloadEmergencyKit(this.hass, this._value);
|
downloadEmergencyKit(this.hass, this._value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _show() {
|
||||||
|
showShowBackupEncryptionKeyDialog(this, { currentKey: this._value });
|
||||||
|
}
|
||||||
|
|
||||||
private _change() {
|
private _change() {
|
||||||
showChangeBackupEncryptionKeyDialog(this, {
|
showChangeBackupEncryptionKeyDialog(this, {
|
||||||
currentKey: this._value,
|
currentKey: this._value,
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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,
|
||||||
|
});
|
Loading…
x
Reference in New Issue
Block a user