Skip to content

Commit

Permalink
Improve user and person dialogs (#21162)
Browse files Browse the repository at this point in the history 
* Improve user dialog

* Update person dialog

* Improve add user dialog

* Fix secondary option
  • Loading branch information
@piitaya
piitaya authored Jun 26, 2024
1 parent 128dbbc commit 1acada6
Show file tree
Hide file tree
Showing 5 changed files with 316 additions and 232 deletions.
176 changes: 114 additions & 62 deletions src/panels/config/person/dialog-person-detail.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import "@material/mwc-button";
import { mdiPencil } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import "../../../components/entity/ha-entities-picker";
import "../../../components/ha-button";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-formfield";
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 { adminChangeUsername } from "../../../data/auth";
import { PersonMutableParams } from "../../../data/person";
Expand Down Expand Up @@ -137,11 +140,17 @@ class DialogPersonDetail extends LitElement {
@change=${this._pictureChanged}
></ha-picture-upload>
<ha-formfield
.label=${`${this.hass!.localize(
"ui.panel.config.person.detail.allow_login"
)}${this._user ? ` (${this._user.username})` : ""}`}
>
<ha-settings-row>
<span slot="heading">
${this.hass!.localize(
"ui.panel.config.person.detail.allow_login"
)}
</span>
<span slot="description">
${this.hass!.localize(
"ui.panel.config.person.detail.allow_login_description"
)}
</span>
<ha-switch
@change=${this._allowLoginChanged}
.disabled=${this._user &&
Expand All @@ -150,34 +159,9 @@ class DialogPersonDetail extends LitElement {
this._user.is_owner)}
.checked=${this._userId}
></ha-switch>
</ha-formfield>
</ha-settings-row>
${this._user
? html`<ha-formfield
.label=${this.hass.localize(
"ui.panel.config.person.detail.local_only"
)}
>
<ha-switch
.checked=${this._localOnly}
@change=${this._localOnlyChanged}
>
</ha-switch>
</ha-formfield>
<ha-formfield
.label=${this.hass.localize(
"ui.panel.config.person.detail.admin"
)}
>
<ha-switch
.disabled=${this._user.system_generated ||
this._user.is_owner}
.checked=${this._isAdmin}
@change=${this._adminChanged}
>
</ha-switch>
</ha-formfield>`
: ""}
${this._renderUserFields()}
${this._deviceTrackersAvailable(this.hass)
? html`
<p>
Expand Down Expand Up @@ -235,48 +219,115 @@ class DialogPersonDetail extends LitElement {
</div>
${this._params.entry
? html`
<mwc-button
<ha-button
slot="secondaryAction"
class="warning"
@click=${this._deleteEntry}
.disabled=${(this._user && this._user.is_owner) ||
this._submitting}
>
${this.hass!.localize("ui.panel.config.person.detail.delete")}
</mwc-button>
${this._user && this.hass.user?.is_owner
? html`<mwc-button
slot="secondaryAction"
@click=${this._changeUsername}
>
${this.hass.localize(
"ui.panel.config.users.editor.change_username"
)}
</mwc-button>
<mwc-button
slot="secondaryAction"
@click=${this._changePassword}
>
${this.hass.localize(
"ui.panel.config.users.editor.change_password"
)}
</mwc-button>`
: ""}
</ha-button>
`
: nothing}
<mwc-button
<ha-button
slot="primaryAction"
@click=${this._updateEntry}
.disabled=${nameInvalid || this._submitting}
>
${this._params.entry
? this.hass!.localize("ui.panel.config.person.detail.update")
: this.hass!.localize("ui.panel.config.person.detail.create")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

private _renderUserFields() {
const user = this._user;
if (!user) return nothing;
return html`
${!user.system_generated
? html`
<ha-settings-row>
<span slot="heading">
${this.hass.localize("ui.panel.config.person.detail.username")}
</span>
<span slot="description">${user.username}</span>
${this.hass.user?.is_owner
? html`
<ha-icon-button
.path=${mdiPencil}
@click=${this._changeUsername}
.label=${this.hass.localize(
"ui.panel.config.person.detail.change_username"
)}
>
</ha-icon-button>
`
: nothing}
</ha-settings-row>
`
: nothing}
${!user.system_generated && this.hass.user?.is_owner
? html`
<ha-settings-row>
<span slot="heading">
${this.hass.localize("ui.panel.config.person.detail.password")}
</span>
<span slot="description">************</span>
${this.hass.user?.is_owner
? html`
<ha-icon-button
.path=${mdiPencil}
@click=${this._changePassword}
.label=${this.hass.localize(
"ui.panel.config.person.detail.change_password"
)}
>
</ha-icon-button>
`
: nothing}
</ha-settings-row>
`
: nothing}
<ha-settings-row>
<span slot="heading">
${this.hass.localize(
"ui.panel.config.person.detail.local_access_only"
)}
</span>
<span slot="description">
${this.hass.localize(
"ui.panel.config.person.detail.local_access_only_description"
)}
</span>
<ha-switch
.disabled=${user.system_generated}
.checked=${this._localOnly}
@change=${this._localOnlyChanged}
>
</ha-switch>
</ha-settings-row>
<ha-settings-row>
<span slot="heading">
${this.hass.localize("ui.panel.config.person.detail.admin")}
</span>
<span slot="description">
${this.hass.localize(
"ui.panel.config.person.detail.admin_description"
)}
</span>
<ha-switch
.disabled=${user.system_generated || user.is_owner}
.checked=${this._isAdmin}
@change=${this._adminChanged}
>
</ha-switch>
</ha-settings-row>
`;
}

private _closeDialog() {
this._params = undefined;
}
Expand Down Expand Up @@ -317,14 +368,16 @@ class DialogPersonDetail extends LitElement {
} else if (this._userId) {
if (
!(await showConfirmationDialog(this, {
title: this.hass!.localize(
"ui.panel.config.person.detail.confirm_delete_user_title"
),
text: this.hass!.localize(
"ui.panel.config.person.detail.confirm_delete_user",
"ui.panel.config.person.detail.confirm_delete_user_text",
{ name: this._name }
),
confirmText: this.hass!.localize(
"ui.panel.config.person.detail.delete"
),
confirmText: this.hass!.localize("ui.common.delete"),
dismissText: this.hass!.localize("ui.common.cancel"),
destructive: true,
}))
) {
target.checked = true;
Expand Down Expand Up @@ -488,9 +541,8 @@ class DialogPersonDetail extends LitElement {
margin-bottom: 16px;
--file-upload-image-border-radius: 50%;
}
ha-formfield {
display: block;
padding: 16px 0;
ha-settings-row {
padding: 0;
}
a {
color: var(--primary-color);
Expand Down
88 changes: 50 additions & 38 deletions src/panels/config/users/dialog-add-user.ts
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,34 @@
import "@material/mwc-button";
import {
css,
CSSResultGroup,
html,
LitElement,
PropertyValues,
css,
html,
nothing,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-alert";
import "../../../components/ha-button";
import "../../../components/ha-circular-progress";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-formfield";
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 { createAuthForUser } from "../../../data/auth";
import {
createUser,
deleteUser,
SYSTEM_GROUP_ID_ADMIN,
SYSTEM_GROUP_ID_USER,
User,
createUser,
deleteUser,
} from "../../../data/user";
import { ValueChangedEvent, HomeAssistant } from "../../../types";
import { haStyleDialog } from "../../../resources/styles";
import { HomeAssistant, ValueChangedEvent } from "../../../types";
import { AddUserDialogParams } from "./show-dialog-add-user";
import "../../../components/ha-textfield";
import type { HaTextField } from "../../../components/ha-textfield";

@customElement("dialog-add-user")
export class DialogAddUser extends LitElement {
Expand Down Expand Up @@ -155,38 +158,44 @@ export class DialogAddUser extends LitElement {
"ui.panel.config.users.add_user.password_not_match"
)}
></ha-textfield>
<div class="row">
<ha-formfield
.label=${this.hass.localize(
"ui.panel.config.users.editor.local_only"
<ha-settings-row>
<span slot="heading">
${this.hass.localize(
"ui.panel.config.users.editor.local_access_only"
)}
</span>
<span slot="description">
${this.hass.localize(
"ui.panel.config.users.editor.local_access_only_description"
)}
</span>
<ha-switch
.checked=${this._localOnly}
@change=${this._localOnlyChanged}
>
<ha-switch
.checked=${this._localOnly}
@change=${this._localOnlyChanged}
>
</ha-switch>
</ha-formfield>
</div>
<div class="row">
<ha-formfield
.label=${this.hass.localize("ui.panel.config.users.editor.admin")}
>
<ha-switch
.checked=${this._isAdmin}
@change=${this._adminChanged}
>
</ha-switch>
</ha-formfield>
</div>
</ha-switch>
</ha-settings-row>
<ha-settings-row>
<span slot="heading">
${this.hass.localize("ui.panel.config.users.editor.admin")}
</span>
<span slot="description">
${this.hass.localize(
"ui.panel.config.users.editor.admin_description"
)}
</span>
<ha-switch .checked=${this._isAdmin} @change=${this._adminChanged}>
</ha-switch>
</ha-settings-row>
${!this._isAdmin
? html`
<br />
${this.hass.localize(
"ui.panel.config.users.users_privileges_note"
)}
<ha-alert alert-type="info">
${this.hass.localize(
"ui.panel.config.users.users_privileges_note"
)}
</ha-alert>
`
: ""}
: nothing}
</div>
${this._loading
? html`
Expand All @@ -195,7 +204,7 @@ export class DialogAddUser extends LitElement {
</div>
`
: html`
<mwc-button
<ha-button
slot="primaryAction"
.disabled=${!this._name ||
!this._username ||
Expand All @@ -204,7 +213,7 @@ export class DialogAddUser extends LitElement {
@click=${this._createUser}
>
${this.hass.localize("ui.panel.config.users.add_user.create")}
</mwc-button>
</ha-button>
`}
</ha-dialog>
`;
Expand Down Expand Up @@ -299,7 +308,10 @@ export class DialogAddUser extends LitElement {
}
ha-textfield {
display: block;
margin-bottom: 16px;
margin-bottom: 8px;
}
ha-settings-row {
padding: 0;
}
`,
];
Expand Down
Loading

0 comments on commit 1acada6

Please sign in to comment.