Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-20 02:38:53 +00:00
Code Activity

Migrate change/show backup encryption key to ha-wa-dialog (#28428)

Browse Source 
* Migrate dialog-change-backup-encryption-key.ts from ha-md-dialog to ha-wa-dialog

* Remove open render nothing, remove custom css size

* Migrate show backup key

* Apply suggestion from @MindFreeze

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
This commit is contained in:
Aidan Timson
2025-12-09 07:24:43 +00:00
committed by GitHub
parent e59e83fffe
commit 47d1fdf673
2 changed files with 101 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts
View File

@@ -1,15 +1,14 @@
import { mdiClose, mdiContentCopy, mdiDownload } from "@mdi/js"; import { mdiClose, mdiContentCopy, mdiDownload } from "@mdi/js";
import type { CSSResultGroup } from "lit"; import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import { copyToClipboard } from "../../../../common/util/copy-clipboard"; import { copyToClipboard } from "../../../../common/util/copy-clipboard";
import "../../../../components/ha-button"; import "../../../../components/ha-button";
import "../../../../components/ha-dialog-header"; import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-icon-button-prev"; import "../../../../components/ha-icon-button-prev";
import "../../../../components/ha-md-dialog"; import "../../../../components/ha-wa-dialog";
import type { HaMdDialog } from "../../../../components/ha-md-dialog";
import "../../../../components/ha-md-list"; import "../../../../components/ha-md-list";
import "../../../../components/ha-md-list-item"; import "../../../../components/ha-md-list-item";
import "../../../../components/ha-password-field"; import "../../../../components/ha-password-field";
@@ -31,20 +30,18 @@ type Step = (typeof STEPS)[number];
class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog { class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@state() private _opened = false; @state() private _open = false;
@state() private _step?: Step; @state() private _step?: Step;
@state() private _params?: ChangeBackupEncryptionKeyDialogParams; @state() private _params?: ChangeBackupEncryptionKeyDialogParams;
@query("ha-md-dialog") private _dialog!: HaMdDialog;
@state() private _newEncryptionKey?: string; @state() private _newEncryptionKey?: string;
public showDialog(params: ChangeBackupEncryptionKeyDialogParams): void { public showDialog(params: ChangeBackupEncryptionKeyDialogParams): void {
this._params = params; this._params = params;
this._step = STEPS[0]; this._step = STEPS[0];
this._opened = true; this._open = true;
this._newEncryptionKey = generateEncryptionKey(); this._newEncryptionKey = generateEncryptionKey();
} }
@@ -52,10 +49,10 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
if (this._params!.cancel) { if (this._params!.cancel) {
this._params!.cancel(); this._params!.cancel();
} }
if (this._opened) { if (this._open) {
fireEvent(this, "dialog-closed", { dialog: this.localName }); fireEvent(this, "dialog-closed", { dialog: this.localName });
} }
this._opened = false; this._open = false;
this._step = undefined; this._step = undefined;
this._params = undefined; this._params = undefined;
this._newEncryptionKey = undefined; this._newEncryptionKey = undefined;
@@ -64,7 +61,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
private _done() { private _done() {
this._params?.submit!(true); this._params?.submit!(true);
this._dialog.close(); this.closeDialog();
} }
private _previousStep() { private _previousStep() {
@@ -84,10 +81,6 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
} }
protected render() { protected render() {
if (!this._opened || !this._params) {
return nothing;
}
const dialogTitle = const dialogTitle =
this._step === "current" || this._step === "new" this._step === "current" || this._step === "new"
? this.hass.localize( ? this.hass.localize(
@@ -96,36 +89,40 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
: ""; : "";
return html` return html`
<ha-md-dialog disable-cancel-action open @closed=${this.closeDialog}> <ha-wa-dialog
<ha-dialog-header slot="headline"> .hass=${this.hass}
${this._step === "new" .open=${this._open}
? html` header-title=${dialogTitle}
<ha-icon-button-prev prevent-scrim-close
slot="navigationIcon" @closed=${this.closeDialog}
@click=${this._previousStep} >
></ha-icon-button-prev> ${this._step === "new"
` ? html`
: html` <ha-icon-button-prev
<ha-icon-button slot="headerNavigationIcon"
slot="navigationIcon" @click=${this._previousStep}
.label=${this.hass.localize("ui.common.close")} ></ha-icon-button-prev>
.path=${mdiClose} `
@click=${this.closeDialog} : html`
></ha-icon-button> <ha-icon-button
`} slot="headerNavigationIcon"
<span slot="title">${dialogTitle}</span> data-dialog="close"
</ha-dialog-header> .label=${this.hass.localize("ui.common.close")}
<div slot="content">${this._renderStepContent()}</div> .path=${mdiClose}
<div slot="actions"> ></ha-icon-button>
`}
${this._renderStepContent()}
<ha-dialog-footer slot="footer">
${this._step === "current" ${this._step === "current"
? html` ? html`
<ha-button @click=${this._nextStep}> <ha-button slot="primaryAction" @click=${this._nextStep}>
${this.hass.localize("ui.common.next")} ${this.hass.localize("ui.common.next")}
</ha-button> </ha-button>
` `
: this._step === "new" : this._step === "new"
? html` ? html`
<ha-button <ha-button
slot="primaryAction"
@click=${this._submit} @click=${this._submit}
.disabled=${!this._newEncryptionKey} .disabled=${!this._newEncryptionKey}
variant="danger" variant="danger"
@@ -136,14 +133,14 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
</ha-button> </ha-button>
` `
: html` : html`
<ha-button @click=${this._done}> <ha-button slot="primaryAction" @click=${this._done}>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.backup.dialogs.change_encryption_key.actions.done" "ui.panel.config.backup.dialogs.change_encryption_key.actions.done"
)} )}
</ha-button> </ha-button>
`} `}
</div> </ha-dialog-footer>
</ha-md-dialog> </ha-wa-dialog>
`; `;
} }
@@ -287,10 +284,8 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
haStyle, haStyle,
haStyleDialog, haStyleDialog,
css` css`
ha-md-dialog { ha-wa-dialog {
width: 90vw; --dialog-content-padding: var(--ha-space-2) var(--ha-space-6);
max-width: 560px;
--dialog-content-padding: 8px 24px;
} }
ha-md-list { ha-md-list {
background: none; background: none;
@@ -321,14 +316,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
flex: none; flex: none;
margin: -16px; 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 { p {
margin-top: 0; margin-top: 0;
} }

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

@@ -1,15 +1,14 @@
import { mdiClose, mdiContentCopy, mdiDownload } from "@mdi/js"; import { mdiClose, mdiContentCopy, mdiDownload } from "@mdi/js";
import type { CSSResultGroup } from "lit"; import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import { copyToClipboard } from "../../../../common/util/copy-clipboard"; import { copyToClipboard } from "../../../../common/util/copy-clipboard";
import "../../../../components/ha-button"; import "../../../../components/ha-button";
import "../../../../components/ha-dialog-header"; import "../../../../components/ha-dialog-footer";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import "../../../../components/ha-icon-button-prev"; import "../../../../components/ha-icon-button-prev";
import "../../../../components/ha-md-dialog"; import "../../../../components/ha-wa-dialog";
import type { HaMdDialog } from "../../../../components/ha-md-dialog";
import "../../../../components/ha-md-list"; import "../../../../components/ha-md-list";
import "../../../../components/ha-md-list-item"; import "../../../../components/ha-md-list-item";
import "../../../../components/ha-password-field"; import "../../../../components/ha-password-field";
@@ -24,89 +23,83 @@ import type { ShowBackupEncryptionKeyDialogParams } from "./show-dialog-show-bac
class DialogShowBackupEncryptionKey extends LitElement implements HassDialog { class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@state() private _params?: ShowBackupEncryptionKeyDialogParams; @state() private _open = false;
@query("ha-md-dialog") private _dialog!: HaMdDialog; @state() private _params?: ShowBackupEncryptionKeyDialogParams;
public showDialog(params: ShowBackupEncryptionKeyDialogParams): void { public showDialog(params: ShowBackupEncryptionKeyDialogParams): void {
this._params = params; this._params = params;
this._open = true;
} }
public closeDialog() { public closeDialog() {
if (this._open) {
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
this._open = false;
this._params = undefined; this._params = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
return true; return true;
} }
private _closeDialog() {
this._dialog.close();
}
protected render() { protected render() {
if (!this._params) { if (!this._params) {
return nothing; return nothing;
} }
return html` return html`
<ha-md-dialog disable-cancel-action open @closed=${this.closeDialog}> <ha-wa-dialog
<ha-dialog-header slot="headline"> .hass=${this.hass}
.open=${this._open}
header-title=${this.hass.localize(
"ui.panel.config.backup.dialogs.show_encryption_key.title"
)}
prevent-scrim-close
@closed=${this.closeDialog}
>
<ha-icon-button
slot="headerNavigationIcon"
data-dialog="close"
.label=${this.hass.localize("ui.common.close")}
.path=${mdiClose}
></ha-icon-button>
<p>
${this.hass.localize(
"ui.panel.config.backup.dialogs.show_encryption_key.description"
)}
</p>
<div class="encryption-key">
<p>${this._params?.currentKey}</p>
<ha-icon-button <ha-icon-button
slot="navigationIcon" .path=${mdiContentCopy}
.label=${this.hass.localize("ui.common.close")} @click=${this._copyKeyToClipboard}
.path=${mdiClose}
@click=${this._closeDialog}
></ha-icon-button> ></ha-icon-button>
<span slot="title">
${this.hass.localize(
"ui.panel.config.backup.dialogs.show_encryption_key.title"
)}
</span>
</ha-dialog-header>
<div slot="content">
<p>
${this.hass.localize(
"ui.panel.config.backup.dialogs.show_encryption_key.description"
)}
</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">
${this.hass.localize(
"ui.panel.config.backup.encryption_key.download_emergency_kit"
)}
</span>
<span slot="supporting-text">
${this.hass.localize(
"ui.panel.config.backup.encryption_key.download_emergency_kit_description"
)}
</span>
<ha-button
size="small"
appearance="plain"
slot="end"
@click=${this._download}
>
<ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.backup.encryption_key.download_emergency_kit_action"
)}
</ha-button>
</ha-md-list-item>
</ha-md-list>
</div> </div>
<div slot="actions"> <ha-md-list>
<ha-button @click=${this._closeDialog}> <ha-md-list-item>
<span slot="headline">
${this.hass.localize(
"ui.panel.config.backup.encryption_key.download_emergency_kit"
)}
</span>
<span slot="supporting-text">
${this.hass.localize(
"ui.panel.config.backup.encryption_key.download_emergency_kit_description"
)}
</span>
<ha-button slot="end" @click=${this._download}>
<ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.backup.encryption_key.download_emergency_kit_action"
)}
</ha-button>
</ha-md-list-item>
</ha-md-list>
<ha-dialog-footer slot="footer">
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")} ${this.hass.localize("ui.common.close")}
</ha-button> </ha-button>
</div> </ha-dialog-footer>
</ha-md-dialog> </ha-wa-dialog>
`; `;
} }
@@ -135,10 +128,8 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
haStyle, haStyle,
haStyleDialog, haStyleDialog,
css` css`
ha-md-dialog { ha-wa-dialog {
width: 90vw; --dialog-content-padding: var(--ha-space-2) var(--ha-space-6);
max-width: 560px;
--dialog-content-padding: 8px 24px;
} }
ha-md-list { ha-md-list {
background: none; background: none;
@@ -169,14 +160,7 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
flex: none; flex: none;
margin: -16px; 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 { p {
margin-top: 0; margin-top: 0;
} }