From 6e8b95f5c49fb9e33abdf7e2a8649b7444763875 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Tue, 25 Jun 2024 11:01:31 +0200 Subject: [PATCH 1/4] Improve user dialog --- src/panels/config/users/dialog-add-user.ts | 2 +- src/panels/config/users/dialog-user-detail.ts | 251 ++++++++++-------- src/translations/en.json | 19 +- 3 files changed, 142 insertions(+), 130 deletions(-) diff --git a/src/panels/config/users/dialog-add-user.ts b/src/panels/config/users/dialog-add-user.ts index e802ecdd514a..4b25de86c93f 100644 --- a/src/panels/config/users/dialog-add-user.ts +++ b/src/panels/config/users/dialog-add-user.ts @@ -158,7 +158,7 @@ export class DialogAddUser extends LitElement {
- ${this._error ? html`
${this._error}
` : ""} + ${this._error + ? html`
${this._error}
` + : nothing}
${this.hass.localize("ui.panel.config.users.editor.id")}: ${user.id}
- ${this.hass.localize("ui.panel.config.users.editor.username")}: - ${user.username}
${badges.length === 0 - ? "" + ? nothing : html`
${badges.map( @@ -90,74 +91,136 @@ class DialogUserDetail extends LitElement {
`}
- -
- + + + ${this.hass.localize( + "ui.panel.config.users.editor.username" + )} + + ${user.username} + ${this.hass.user?.is_owner + ? html` + + + ` + : nothing} + + ` + : nothing} + ${!user.system_generated && this.hass.user?.is_owner + ? html` + + + ${this.hass.localize( + "ui.panel.config.users.editor.password" + )} + + ************ + ${this.hass.user?.is_owner + ? html` + + + ` + : nothing} + + ` + : nothing} + + + + ${this.hass.localize("ui.panel.config.users.editor.active")} + + + ${this.hass.localize( + "ui.panel.config.users.editor.active_description" )} + + - - - -
-
- + + + + ${this.hass.localize( + "ui.panel.config.users.editor.local_access_only" )} - > - - - -
- ${!this._isAdmin - ? html` -
- ${this.hass.localize( - "ui.panel.config.users.users_privileges_note" - )} - ` - : ""} -
- + + ${this.hass.localize( + "ui.panel.config.users.editor.local_access_only_description" )} + + - - - - + + + + ${this.hass.localize("ui.panel.config.users.editor.admin")} + + + ${this.hass.localize( + "ui.panel.config.users.editor.admin_description" )} + + - -
+ + + ${!this._isAdmin && !user.system_generated + ? html` + + ${this.hass.localize( + "ui.panel.config.users.users_privileges_note" + )} + + ` + : nothing}
+ ${user.system_generated + ? html` + + ${this.hass.localize( + "ui.panel.config.users.editor.system_generated_read_only_users" + )} + + ` + : nothing}
- ${this.hass!.localize("ui.panel.config.users.editor.delete_user")} - - ${user.system_generated - ? html` - - ${this.hass.localize( - "ui.panel.config.users.editor.system_generated_users_not_removable" - )} - - ` - : ""} - ${!user.system_generated && this.hass.user?.is_owner - ? html` - ${this.hass.localize( - "ui.panel.config.users.editor.change_username" - )} - ${this.hass.localize( - "ui.panel.config.users.editor.change_password" - )} - ` - : ""} +
- ${this.hass!.localize("ui.panel.config.users.editor.update_user")} - - ${user.system_generated - ? html` - - ${this.hass.localize( - "ui.panel.config.users.editor.system_generated_users_not_editable" - )} - - ` - : ""} +
`; @@ -353,27 +387,8 @@ class DialogUserDetail extends LitElement { margin-inline-end: 4px; margin-inline-start: 0; } - .state { - background-color: rgba(var(--rgb-primary-text-color), 0.15); - border-radius: 16px; - padding: 4px 8px; - margin-top: 8px; - display: inline-block; - } - .state:not(:first-child) { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - } - .row { - display: flex; - padding: 8px 0; - } - ha-help-tooltip { - margin-left: 4px; - margin-inline-start: 4px; - margin-inline-end: initial; - position: relative; + ha-settings-row { + padding: 0; } `, ]; diff --git a/src/translations/en.json b/src/translations/en.json index 85882f0488d8..4187f7539471 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -419,11 +419,6 @@ "manual": "Manual Entry" } }, - "image": { - "select_image": "Select image", - "upload": "Upload picture", - "url": "Local path or web URL" - }, "text": { "show_password": "Show password", "hide_password": "Hide password" @@ -4145,7 +4140,7 @@ "update": "Update", "confirm_delete_user": "Are you sure you want to delete the user account for {name}? You can still track the user, but the person will no longer be able to login.", "admin": "[%key:ui::panel::config::users::editor::admin%]", - "local_only": "[%key:ui::panel::config::users::editor::local_only%]", + "local_only": "[%key:ui::panel::config::users::editor::local_access_only_description%]", "allow_login": "Allow person to login" } }, @@ -4386,6 +4381,7 @@ "caption": "View user", "name": "Display name", "username": "Username", + "password": "Password", "change_password": "Change password", "change_username": "Change username", "activate_user": "Activate user", @@ -4395,16 +4391,17 @@ "id": "ID", "owner": "Owner", "admin": "Administrator", + "admin_description": "Administrators can manage users, devices, automations and dashboards.", "group": "Group", "active": "Active", - "local_only": "Can only log in from the local network", + "active_description": "Controls if user can login", + "local_access_only": "Local access only", + "local_access_only_description": "Can only log in from the local network", "system_generated": "System user", - "system_generated_users_not_removable": "Unable to remove system users.", - "system_generated_users_not_editable": "Unable to update system users.", + "system_generated_read_only_users": "System users can not be updated.", "unnamed_user": "Unnamed User", "confirm_user_deletion_title": "Delete {name}?", - "confirm_user_deletion_text": "This user will be permanently deleted.", - "active_tooltip": "Controls if user can login" + "confirm_user_deletion_text": "This user will be permanently deleted." }, "add_user": { "caption": "Add user", From 4cf6853df2857cd799281ec1e554001c5f3b3a8e Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Tue, 25 Jun 2024 11:43:43 +0200 Subject: [PATCH 2/4] Update person dialog --- .../config/person/dialog-person-detail.ts | 166 ++++++++++++------ src/translations/en.json | 11 +- 2 files changed, 117 insertions(+), 60 deletions(-) diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts index c14deab0c281..7eac2e775eaa 100644 --- a/src/panels/config/person/dialog-person-detail.ts +++ b/src/panels/config/person/dialog-person-detail.ts @@ -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"; @@ -137,11 +140,17 @@ class DialogPersonDetail extends LitElement { @change=${this._pictureChanged} > - + + + ${this.hass!.localize( + "ui.panel.config.person.detail.allow_login" + )} + + + ${this.hass!.localize( + "ui.panel.config.person.detail.allow_login_description" + )} + - + - ${this._user - ? html` - - - - - - - ` - : ""} + ${this._renderUserFields()} ${this._deviceTrackersAvailable(this.hass) ? html`

@@ -235,7 +219,7 @@ class DialogPersonDetail extends LitElement {

${this._params.entry ? html` - ${this.hass!.localize("ui.panel.config.person.detail.delete")} - - ${this._user && this.hass.user?.is_owner - ? html` - ${this.hass.localize( - "ui.panel.config.users.editor.change_username" - )} - - - ${this.hass.localize( - "ui.panel.config.users.editor.change_password" - )} - ` - : ""} + ` : nothing} - + `; } + private _renderUserFields() { + const user = this._user; + if (!user) return nothing; + return html` + ${!user.system_generated + ? html` + + + ${this.hass.localize("ui.panel.config.person.detail.username")} + + ${user.username} + ${this.hass.user?.is_owner + ? html` + + + ` + : nothing} + + ` + : nothing} + ${!user.system_generated && this.hass.user?.is_owner + ? html` + + + ${this.hass.localize("ui.panel.config.person.detail.password")} + + ************ + ${this.hass.user?.is_owner + ? html` + + + ` + : nothing} + + ` + : nothing} + + + ${this.hass.localize( + "ui.panel.config.person.detail.local_access_only" + )} + + + ${this.hass.localize( + "ui.panel.config.person.detail.local_access_only_description" + )} + + + + + + + ${this.hass.localize("ui.panel.config.person.detail.admin")} + + + ${this.hass.localize( + "ui.panel.config.person.detail.admin_description" + )} + + + + + `; + } + private _closeDialog() { this._params = undefined; } @@ -488,9 +539,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); diff --git a/src/translations/en.json b/src/translations/en.json index 4187f7539471..3d84847ef0ac 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -4139,9 +4139,16 @@ "create": "Create", "update": "Update", "confirm_delete_user": "Are you sure you want to delete the user account for {name}? You can still track the user, but the person will no longer be able to login.", + "allow_login": "Allow login", + "allow_login_description": "Allow access using username and password.", + "username": "[%key:ui::panel::config::users::editor::username%]", + "password": "[%key:ui::panel::config::users::editor::password%]", "admin": "[%key:ui::panel::config::users::editor::admin%]", - "local_only": "[%key:ui::panel::config::users::editor::local_access_only_description%]", - "allow_login": "Allow person to login" + "admin_description": "[%key:ui::panel::config::users::editor::admin_description%]", + "local_access_only": "[%key:ui::panel::config::users::editor::local_access_only%]", + "local_access_only_description": "[%key:ui::panel::config::users::editor::local_access_only_description%]", + "change_username": "[%key:ui::panel::config::users::editor::change_username%]", + "change_password": "[%key:ui::panel::config::users::editor::change_password%]" } }, "zone": { From e9e75c2124e187fb8f75b2e5619fbcfd8ba97345 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Tue, 25 Jun 2024 11:55:41 +0200 Subject: [PATCH 3/4] Improve add user dialog --- .../config/person/dialog-person-detail.ts | 10 ++- src/panels/config/users/dialog-add-user.ts | 86 +++++++++++-------- src/translations/en.json | 3 +- 3 files changed, 57 insertions(+), 42 deletions(-) diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts index 7eac2e775eaa..550c0c67bbc8 100644 --- a/src/panels/config/person/dialog-person-detail.ts +++ b/src/panels/config/person/dialog-person-detail.ts @@ -368,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; diff --git a/src/panels/config/users/dialog-add-user.ts b/src/panels/config/users/dialog-add-user.ts index 4b25de86c93f..04b336c69768 100644 --- a/src/panels/config/users/dialog-add-user.ts +++ b/src/panels/config/users/dialog-add-user.ts @@ -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 { @@ -155,38 +158,44 @@ export class DialogAddUser extends LitElement { "ui.panel.config.users.add_user.password_not_match" )} > -
- + + ${this.hass.localize( "ui.panel.config.users.editor.local_access_only" )} + + + ${this.hass.localize( + "ui.panel.config.users.editor.local_access_only_description" + )} + + - - - -
-
- - - - -
+ + + + + ${this.hass.localize("ui.panel.config.users.editor.admin")} + + + ${this.hass.localize( + "ui.panel.config.users.editor.admin_description" + )} + + + + ${!this._isAdmin ? html` -
- ${this.hass.localize( - "ui.panel.config.users.users_privileges_note" - )} + + ${this.hass.localize( + "ui.panel.config.users.users_privileges_note" + )} + ` - : ""} + : nothing} ${this._loading ? html` @@ -195,7 +204,7 @@ export class DialogAddUser extends LitElement { ` : html` - ${this.hass.localize("ui.panel.config.users.add_user.create")} - + `} `; @@ -299,7 +308,10 @@ export class DialogAddUser extends LitElement { } ha-textfield { display: block; - margin-bottom: 16px; + margin-bottom: 8px; + } + ha-settings-row { + padding: 0; } `, ]; diff --git a/src/translations/en.json b/src/translations/en.json index 3d84847ef0ac..cf5213c2f340 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -4138,7 +4138,8 @@ "delete": "Delete", "create": "Create", "update": "Update", - "confirm_delete_user": "Are you sure you want to delete the user account for {name}? You can still track the user, but the person will no longer be able to login.", + "confirm_delete_user_title": "Delete user account", + "confirm_delete_user_text": "The user account for ''{name}'' will be permanently deleted. You can still track the user, but the person will no longer be able to login.", "allow_login": "Allow login", "allow_login_description": "Allow access using username and password.", "username": "[%key:ui::panel::config::users::editor::username%]", From e9bb6dc41131e56c246e2b45558f2f2cc28cd1f6 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Tue, 25 Jun 2024 13:58:38 +0200 Subject: [PATCH 4/4] Fix secondary option --- src/panels/config/users/dialog-admin-change-password.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/config/users/dialog-admin-change-password.ts b/src/panels/config/users/dialog-admin-change-password.ts index f012dc23e27e..71b5aa75ae4c 100644 --- a/src/panels/config/users/dialog-admin-change-password.ts +++ b/src/panels/config/users/dialog-admin-change-password.ts @@ -132,7 +132,7 @@ class DialogAdminChangePassword extends LitElement { @value-changed=${this._valueChanged} .disabled=${this._submitting} > - + ${this.hass.localize("ui.common.cancel")}