Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-02-14 23:18:21 +00:00
Code Activity

Migrate person and user dialogs to wa (#29569)

Browse Source
This commit is contained in:
Aidan Timson
2026-02-11 11:07:55 +00:00
committed by GitHub
parent 8ca169fc23
commit 7beadb8108
4 changed files with 190 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/panels/config/person/dialog-person-detail.ts
View File

@@ -6,12 +6,13 @@ import memoizeOne from "memoize-one";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/entity/ha-entities-picker";
import "../../../components/ha-button";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-dialog-footer";
import "../../../components/ha-icon-button";
import "../../../components/ha-picture-upload";
import type { HaPictureUpload } from "../../../components/ha-picture-upload";
import "../../../components/ha-settings-row";
import "../../../components/ha-textfield";
import "../../../components/ha-wa-dialog";
import { adminChangeUsername } from "../../../data/auth";
import type { PersonMutableParams } from "../../../data/person";
import type { User } from "../../../data/user";
@@ -69,6 +70,8 @@ class DialogPersonDetail extends LitElement implements HassDialog {
@state() private _personExists = false;
@state() private _open = false;
private _deviceTrackersAvailable = memoizeOne((hass) =>
Object.keys(hass.states).some(
(entityId) =>
@@ -100,10 +103,16 @@ class DialogPersonDetail extends LitElement implements HassDialog {
this._deviceTrackers = [];
this._picture = null;
}
this._open = true;
await this.updateComplete;
}
public closeDialog() {
this._open = false;
return true;
}
private _dialogClosed() {
// If we do not have a person ID yet (= person creation dialog was just cancelled), but
// we already created a user ID for it, delete it now to not have it "free floating".
if (!this._personExists && this._userId) {
@@ -115,7 +124,6 @@ class DialogPersonDetail extends LitElement implements HassDialog {
}
this._params = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
return true;
}
protected render() {
@@ -124,23 +132,20 @@ class DialogPersonDetail extends LitElement implements HassDialog {
}
const nameInvalid = this._name.trim() === "";
return html`
<ha-dialog
open
@closed=${this.closeDialog}
scrimClickAction
escapeKeyAction
.heading=${createCloseHeading(
this.hass,
this._params.entry
? this._params.entry.name
: this.hass!.localize("ui.panel.config.person.detail.new_person")
)}
<ha-wa-dialog
.hass=${this.hass}
.open=${this._open}
prevent-scrim-close
header-title=${this._params.entry
? this._params.entry.name
: this.hass!.localize("ui.panel.config.person.detail.new_person")}
@closed=${this._dialogClosed}
>
<div>
${this._error ? html` <div class="error">${this._error}</div> ` : ""}
<div class="form">
<ha-textfield
dialogInitialFocus
autofocus
.value=${this._name}
@input=${this._nameChanged}
label=${this.hass!.localize("ui.panel.config.person.detail.name")}
@@ -233,37 +238,39 @@ class DialogPersonDetail extends LitElement implements HassDialog {
`}
</div>
</div>
${this._params.entry
? html`
<ha-button
slot="secondaryAction"
variant="danger"
appearance="plain"
@click=${this._deleteEntry}
.disabled=${(this._user && this._user.is_owner) ||
this._submitting}
>
${this.hass!.localize("ui.panel.config.person.detail.delete")}
</ha-button>
`
: nothing}
<ha-button
slot="primaryAction"
appearance="plain"
@click=${this.closeDialog}
>
${this.hass!.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
@click=${this._updateEntry}
.disabled=${nameInvalid || this._submitting}
>
<ha-dialog-footer slot="footer">
${this._params.entry
? this.hass!.localize("ui.common.save")
: this.hass!.localize("ui.common.add")}
</ha-button>
</ha-dialog>
? html`
<ha-button
slot="secondaryAction"
variant="danger"
appearance="plain"
@click=${this._deleteEntry}
.disabled=${(this._user && this._user.is_owner) ||
this._submitting}
>
${this.hass!.localize("ui.panel.config.person.detail.delete")}
</ha-button>
`
: nothing}
<ha-button
slot="secondaryAction"
appearance="plain"
@click=${this.closeDialog}
>
${this.hass!.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
@click=${this._updateEntry}
.disabled=${nameInvalid || this._submitting}
>
${this._params.entry
? this.hass!.localize("ui.common.save")
: this.hass!.localize("ui.common.add")}
</ha-button>
</ha-dialog-footer>
</ha-wa-dialog>
`;
}

77
src/panels/config/users/dialog-add-user.ts
View File

@@ -1,16 +1,17 @@
import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-alert";
import "../../../components/ha-button";
import "../../../components/ha-spinner";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-dialog-footer";
import "../../../components/ha-icon-button";
import "../../../components/ha-settings-row";
import "../../../components/ha-switch";
import type { HaSwitch } from "../../../components/ha-switch";
import "../../../components/ha-textfield";
import type { HaTextField } from "../../../components/ha-textfield";
import "../../../components/ha-wa-dialog";
import { createAuthForUser } from "../../../data/auth";
import type { User } from "../../../data/user";
import {
@@ -35,6 +36,8 @@ export class DialogAddUser extends LitElement {
@state() private _params?: AddUserDialogParams;
@state() private _open = false;
@state() private _name?: string;
@state() private _username?: string;
@@ -66,6 +69,8 @@ export class DialogAddUser extends LitElement {
} else {
this._allowChangeName = true;
}
this._open = true;
}
protected firstUpdated(changedProperties: PropertyValues) {
@@ -83,15 +88,15 @@ export class DialogAddUser extends LitElement {
}
return html`
<ha-dialog
open
@closed=${this._close}
scrimClickAction
escapeKeyAction
.heading=${createCloseHeading(
this.hass,
this.hass.localize("ui.panel.config.users.add_user.caption")
<ha-wa-dialog
.hass=${this.hass}
.open=${this._open}
prevent-scrim-close
header-title=${this.hass.localize(
"ui.panel.config.users.add_user.caption"
)}
width="medium"
@closed=${this._dialogClosed}
>
<div>
${this._error ? html` <div class="error">${this._error}</div> ` : ""}
@@ -109,7 +114,7 @@ export class DialogAddUser extends LitElement {
)}
@input=${this._handleValueChanged}
@blur=${this._maybePopulateUsername}
dialogInitialFocus
autofocus
></ha-textfield>`
: ""}
<ha-textfield
@@ -122,7 +127,7 @@ export class DialogAddUser extends LitElement {
required
@input=${this._handleValueChanged}
.validationMessage=${this.hass.localize("ui.common.error_required")}
dialogInitialFocus
?autofocus=${!this._allowChangeName}
></ha-textfield>
<ha-password-field
@@ -191,30 +196,37 @@ export class DialogAddUser extends LitElement {
: nothing}
</div>
<ha-button
slot="primaryAction"
appearance="plain"
@click=${this._close}
>
${this.hass!.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
.disabled=${!this._name ||
!this._username ||
!this._password ||
this._password !== this._passwordConfirm}
@click=${this._createUser}
.loading=${this._loading}
>
${this.hass.localize("ui.panel.config.users.add_user.create")}
</ha-button>
</ha-dialog>
<ha-dialog-footer slot="footer">
<ha-button
slot="secondaryAction"
appearance="plain"
@click=${this._close}
>
${this.hass!.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
.disabled=${!this._name ||
!this._username ||
!this._password ||
this._password !== this._passwordConfirm}
@click=${this._createUser}
.loading=${this._loading}
>
${this.hass.localize("ui.panel.config.users.add_user.create")}
</ha-button>
</ha-dialog-footer>
</ha-wa-dialog>
`;
}
private _close() {
this._open = false;
}
private _dialogClosed(): void {
this._params = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
private _maybePopulateUsername() {
@@ -297,8 +309,7 @@ export class DialogAddUser extends LitElement {
return [
haStyleDialog,
css`
ha-dialog {
--mdc-dialog-max-width: 500px;
ha-wa-dialog {
--dialog-z-index: 10;
}
.row {

74
src/panels/config/users/dialog-admin-change-password.ts
View File

@@ -3,11 +3,12 @@ import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-dialog-footer";
import "../../../components/ha-form/ha-form";
import type { SchemaUnion } from "../../../components/ha-form/types";
import "../../../components/ha-textfield";
import "../../../components/ha-button";
import "../../../components/ha-wa-dialog";
import { adminChangePassword } from "../../../data/auth";
import { haStyleDialog } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
@@ -48,6 +49,8 @@ class DialogAdminChangePassword extends LitElement {
@state() private _params?: AdminChangePasswordDialogParams;
@state() private _open = false;
@state() private _userId?: string;
@state() private _data?: FormData;
@@ -61,11 +64,20 @@ class DialogAdminChangePassword extends LitElement {
public showDialog(params: AdminChangePasswordDialogParams): void {
this._params = params;
this._userId = params.userId;
this._data = undefined;
this._error = undefined;
this._open = true;
}
public closeDialog(): void {
this._open = false;
}
private _dialogClosed(): void {
this._params = undefined;
this._userId = undefined;
this._data = undefined;
this._error = undefined;
this._submitting = false;
this._success = false;
fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -104,15 +116,14 @@ class DialogAdminChangePassword extends LitElement {
);
return html`
<ha-dialog
open
@closed=${this.closeDialog}
scrimClickAction
escapeKeyAction
.heading=${createCloseHeading(
this.hass,
this.hass.localize("ui.panel.config.users.change_password.caption")
<ha-wa-dialog
.hass=${this.hass}
.open=${this._open}
prevent-scrim-close
header-title=${this.hass.localize(
"ui.panel.config.users.change_password.caption"
)}
@closed=${this._dialogClosed}
>
${this._success
? html`
@@ -121,12 +132,15 @@ class DialogAdminChangePassword extends LitElement {
"ui.panel.config.users.change_password.password_changed"
)}
</p>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.ok")}
</ha-button>
<ha-dialog-footer slot="footer">
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.ok")}
</ha-button>
</ha-dialog-footer>
`
: html`
<ha-form
autofocus
.hass=${this.hass}
.data=${this._data}
.error=${this._error}
@@ -136,24 +150,26 @@ class DialogAdminChangePassword extends LitElement {
@value-changed=${this._valueChanged}
.disabled=${this._submitting}
></ha-form>
<ha-button
appearance="plain"
slot="primaryAction"
@click=${this.closeDialog}
>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
@click=${this._changePassword}
.disabled=${this._submitting || !canSubmit}
>
${this.hass.localize(
"ui.panel.config.users.change_password.change"
)}
</ha-button>
<ha-dialog-footer slot="footer">
<ha-button
slot="secondaryAction"
appearance="plain"
@click=${this.closeDialog}
>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
@click=${this._changePassword}
.disabled=${this._submitting || !canSubmit}
>
${this.hass.localize(
"ui.panel.config.users.change_password.change"
)}
</ha-button>
</ha-dialog-footer>
`}
</ha-dialog>
</ha-wa-dialog>
`;
}

88
src/panels/config/users/dialog-user-detail.ts
View File

@@ -2,15 +2,17 @@ import { mdiPencil } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-alert";
import "../../../components/ha-button";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-dialog-footer";
import "../../../components/ha-icon-button";
import "../../../components/ha-label";
import "../../../components/ha-settings-row";
import "../../../components/ha-svg-icon";
import "../../../components/ha-switch";
import "../../../components/ha-textfield";
import "../../../components/ha-wa-dialog";
import { adminChangeUsername } from "../../../data/auth";
import {
computeUserBadges,
@@ -42,6 +44,8 @@ class DialogUserDetail extends LitElement {
@state() private _params?: UserDetailDialogParams;
@state() private _open = false;
@state() private _submitting = false;
public async showDialog(params: UserDetailDialogParams): Promise<void> {
@@ -51,6 +55,7 @@ class DialogUserDetail extends LitElement {
this._isAdmin = params.entry.group_ids.includes(SYSTEM_GROUP_ID_ADMIN);
this._localOnly = params.entry.local_only;
this._isActive = params.entry.is_active;
this._open = true;
await this.updateComplete;
}
@@ -61,12 +66,13 @@ class DialogUserDetail extends LitElement {
const user = this._params.entry;
const badges = computeUserBadges(this.hass, user, true);
return html`
<ha-dialog
open
@closed=${this._close}
scrimClickAction
escapeKeyAction
.heading=${createCloseHeading(this.hass, user.name)}
<ha-wa-dialog
.hass=${this.hass}
.open=${this._open}
prevent-scrim-close
header-title=${user.name}
width="medium"
@closed=${this._dialogClosed}
>
<div>
${this._error
@@ -94,7 +100,7 @@ class DialogUserDetail extends LitElement {
${!user.system_generated
? html`
<ha-textfield
dialogInitialFocus
autofocus
.value=${this._name}
@input=${this._nameChanged}
.label=${this.hass!.localize(
@@ -219,32 +225,36 @@ class DialogUserDetail extends LitElement {
: nothing}
</div>
<ha-button
slot="secondaryAction"
variant="danger"
appearance="plain"
@click=${this._deleteEntry}
.disabled=${this._submitting ||
user.system_generated ||
user.is_owner}
>
${this.hass!.localize("ui.panel.config.users.editor.delete_user")}
</ha-button>
<ha-button
slot="primaryAction"
appearance="plain"
@click=${this._close}
>
${this.hass!.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
@click=${this._updateEntry}
.disabled=${!this._name || this._submitting || user.system_generated}
>
${this.hass!.localize("ui.common.save")}
</ha-button>
</ha-dialog>
<ha-dialog-footer slot="footer">
<ha-button
slot="secondaryAction"
variant="danger"
appearance="plain"
@click=${this._deleteEntry}
.disabled=${this._submitting ||
user.system_generated ||
user.is_owner}
>
${this.hass!.localize("ui.panel.config.users.editor.delete_user")}
</ha-button>
<ha-button
slot="secondaryAction"
appearance="plain"
@click=${this._close}
>
${this.hass!.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
@click=${this._updateEntry}
.disabled=${!this._name ||
this._submitting ||
user.system_generated}
>
${this.hass!.localize("ui.common.save")}
</ha-button>
</ha-dialog-footer>
</ha-wa-dialog>
`;
}
@@ -288,7 +298,7 @@ class DialogUserDetail extends LitElement {
this._submitting = true;
try {
if (await this._params!.removeEntry()) {
this._params = undefined;
this._close();
}
} finally {
this._submitting = false;
@@ -360,16 +370,18 @@ class DialogUserDetail extends LitElement {
}
private _close(): void {
this._open = false;
}
private _dialogClosed(): void {
this._params = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
static get styles(): CSSResultGroup {
return [
haStyleDialog,
css`
ha-dialog {
--mdc-dialog-max-width: 500px;
}
.form {
padding-top: 16px;
}