From 236bc6aefa555f26da6d03077f16298290a69852 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 1 Apr 2020 17:38:22 +0200 Subject: [PATCH] Change user dialog (#5397) * Change user dialog * Update --- src/panels/config/users/dialog-add-user.ts | 55 +++--- src/panels/config/users/dialog-user-detail.ts | 164 ++++++++++-------- src/panels/config/users/ha-config-users.ts | 2 +- src/translations/en.json | 2 + 4 files changed, 127 insertions(+), 96 deletions(-) diff --git a/src/panels/config/users/dialog-add-user.ts b/src/panels/config/users/dialog-add-user.ts index e30d00eca3..f4f62402af 100644 --- a/src/panels/config/users/dialog-add-user.ts +++ b/src/panels/config/users/dialog-add-user.ts @@ -1,8 +1,7 @@ import "@material/mwc-button"; import "@polymer/paper-spinner/paper-spinner"; - +import "../../../components/ha-switch"; import "../../../components/ha-dialog"; -import "../../../resources/ha-style"; import { LitElement, html, @@ -10,6 +9,8 @@ import { customElement, property, PropertyValues, + CSSResult, + css, } from "lit-element"; import { HomeAssistant } from "../../../types"; import { PolymerChangedEvent } from "../../../polymer-types"; @@ -17,11 +18,12 @@ import { AddUserDialogParams } from "./show-dialog-add-user"; import { User, SYSTEM_GROUP_ID_USER, - GROUPS, createUser, deleteUser, + SYSTEM_GROUP_ID_ADMIN, } from "../../../data/user"; import { createAuthForUser } from "../../../data/auth"; +import { haStyleDialog } from "../../../resources/styles"; @customElement("dialog-add-user") export class DialogAddUser extends LitElement { @@ -33,14 +35,14 @@ export class DialogAddUser extends LitElement { @property() private _name?: string; @property() private _username?: string; @property() private _password?: string; - @property() private _group?: string; + @property() private _isAdmin?: boolean; public showDialog(params: AddUserDialogParams) { this._params = params; this._name = ""; this._username = ""; this._password = ""; - this._group = SYSTEM_GROUP_ID_USER; + this._isAdmin = false; this._error = undefined; this._loading = false; } @@ -106,25 +108,10 @@ export class DialogAddUser extends LitElement { @value-changed=${this._passwordChanged} error-message="Required" > - - - ${GROUPS.map( - (groupId) => html` - - ${this.hass.localize(`groups.${groupId}`)} - - ` - )} - - - ${this._group === SYSTEM_GROUP_ID_USER + + ${this.hass.localize("ui.panel.config.users.editor.admin")} + + ${!this._isAdmin ? html`
The users group is a work in progress. The user will be unable @@ -191,8 +178,8 @@ export class DialogAddUser extends LitElement { this._password = ev.detail.value; } - private async _handleGroupChange(ev): Promise { - this._group = ev.detail.item.getAttribute("group-id"); + private async _adminChanged(ev): Promise { + this._isAdmin = ev.target.checked; } private async _createUser(ev) { @@ -207,7 +194,7 @@ export class DialogAddUser extends LitElement { let user: User; try { const userResponse = await createUser(this.hass, this._name, [ - this._group!, + this._isAdmin ? SYSTEM_GROUP_ID_ADMIN : SYSTEM_GROUP_ID_USER, ]); user = userResponse.user; } catch (err) { @@ -233,6 +220,20 @@ export class DialogAddUser extends LitElement { this._params!.userAddedCallback(user); this._close(); } + + static get styles(): CSSResult[] { + return [ + haStyleDialog, + css` + ha-dialog { + --mdc-dialog-max-width: 500px; + } + ha-switch { + margin-top: 8px; + } + `, + ]; + } } declare global { diff --git a/src/panels/config/users/dialog-user-detail.ts b/src/panels/config/users/dialog-user-detail.ts index b9ef3de155..7cc23b449b 100644 --- a/src/panels/config/users/dialog-user-detail.ts +++ b/src/panels/config/users/dialog-user-detail.ts @@ -10,20 +10,22 @@ import { TemplateResult, css, } from "lit-element"; -import "../../../components/entity/ha-entities-picker"; -import "../../../components/user/ha-user-picker"; import { PolymerChangedEvent } from "../../../polymer-types"; import { haStyleDialog } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; import { UserDetailDialogParams } from "./show-dialog-user-detail"; +import "../../../components/ha-switch"; import { createCloseHeading } from "../../../components/ha-dialog"; -import { GROUPS, SYSTEM_GROUP_ID_USER } from "../../../data/user"; +import { + SYSTEM_GROUP_ID_ADMIN, + SYSTEM_GROUP_ID_USER, +} from "../../../data/user"; @customElement("dialog-user-detail") class DialogUserDetail extends LitElement { @property() public hass!: HomeAssistant; @property() private _name!: string; - @property() private _group?: string; + @property() private _isAdmin?: boolean; @property() private _error?: string; @property() private _params?: UserDetailDialogParams; @property() private _submitting: boolean = false; @@ -32,7 +34,7 @@ class DialogUserDetail extends LitElement { this._params = params; this._error = undefined; this._name = params.entry.name || ""; - this._group = params.entry.group_ids[0]; + this._isAdmin = params.entry.group_ids[0] === SYSTEM_GROUP_ID_ADMIN; await this.updateComplete; } @@ -55,31 +57,55 @@ class DialogUserDetail extends LitElement {
${this._error}
` : ""} +
+ ${this.hass.localize("ui.panel.config.users.editor.id")}: ${user.id} +
+
+ ${user.is_owner + ? html` + ${this.hass.localize( + "ui.panel.config.users.editor.owner" + )} + ` + : ""} + ${user.system_generated + ? html` + + ${this.hass.localize( + "ui.panel.config.users.editor.system_generated" + )} + + ` + : ""} + ${user.is_active + ? html` + ${this.hass.localize( + "ui.panel.config.users.editor.active" + )} + ` + : ""} +
- - - ${GROUPS.map( - (groupId) => html` - - ${this.hass.localize(`groups.${groupId}`)} - - ` - )} - - - ${this._group === SYSTEM_GROUP_ID_USER + ${this.hass.localize("ui.panel.config.users.editor.admin")} + + ${!this._isAdmin ? html`
The users group is a work in progress. The user will be unable @@ -88,34 +114,6 @@ class DialogUserDetail extends LitElement { limit access to administrators. ` : ""} - - - - - - - - - - - - - - - - - -
- ${this.hass.localize("ui.panel.config.users.editor.id")} - ${user.id}
- ${this.hass.localize("ui.panel.config.users.editor.owner")} - ${user.is_owner}
- ${this.hass.localize("ui.panel.config.users.editor.active")} - ${user.is_active}
- ${this.hass.localize( - "ui.panel.config.users.editor.system_generated" - )} - ${user.system_generated}
@@ -129,21 +127,33 @@ class DialogUserDetail extends LitElement { ${user.system_generated ? html` - ${this.hass.localize( + + ${this.hass.localize( "ui.panel.config.users.editor.system_generated_users_not_removable" - )} + )} + + ` + : ""} + +
+ + ${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" + )} + ` : ""}
- - ${this.hass!.localize("ui.panel.config.users.editor.update_user")} - `; } @@ -153,8 +163,8 @@ class DialogUserDetail extends LitElement { this._name = ev.detail.value; } - private async _handleGroupChange(ev): Promise { - this._group = ev.detail.item.getAttribute("group-id"); + private async _adminChanged(ev): Promise { + this._isAdmin = ev.target.checked; } private async _updateEntry() { @@ -162,7 +172,9 @@ class DialogUserDetail extends LitElement { try { await this._params!.updateEntry({ name: this._name.trim(), - group_ids: [this._group!], + group_ids: [ + this._isAdmin ? SYSTEM_GROUP_ID_ADMIN : SYSTEM_GROUP_ID_USER, + ], }); this._close(); } catch (err) { @@ -194,8 +206,24 @@ class DialogUserDetail extends LitElement { ha-dialog { --mdc-dialog-min-width: 500px; } - table { - width: 100%; + .form { + padding-top: 16px; + } + .secondary { + color: var(--secondary-text-color); + } + .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; + } + ha-switch { + margin-top: 8px; } `, ]; diff --git a/src/panels/config/users/ha-config-users.ts b/src/panels/config/users/ha-config-users.ts index 2609d7a1b3..13776ea117 100644 --- a/src/panels/config/users/ha-config-users.ts +++ b/src/panels/config/users/ha-config-users.ts @@ -157,7 +157,7 @@ export class HaConfigUsers extends LitElement { showAddUserDialog(this, { userAddedCallback: async (user: User) => { if (user) { - this._users = { ...this._users, ...user }; + this._users = [...this._users, user]; } }, }); diff --git a/src/translations/en.json b/src/translations/en.json index a7ce1d3cf7..89f9780538 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1679,10 +1679,12 @@ "update_user": "Update", "id": "ID", "owner": "Owner", + "admin": "Administrator", "group": "Group", "active": "Active", "system_generated": "System generated", "system_generated_users_not_removable": "Unable to remove system generated users.", + "system_generated_users_not_editable": "Unable to update system generated users.", "unnamed_user": "Unnamed User", "confirm_user_deletion": "Are you sure you want to delete {name}?" },