Add option to deactivate a user (#7757)

hassio/src/dashboard/hassio-update.ts

@@ -74,9 +74,7 @@ export class HassioUpdate extends LitElement {
             "Supervisor",
             this.supervisor.supervisor,
             "hassio/supervisor/update",
-            `https://github.com//home-assistant/hassio/releases/tag/${
-              this.supervisor.supervisor.version_latest
-            }`
+            `https://github.com//home-assistant/hassio/releases/tag/${this.supervisor.supervisor.version_latest}`
           )}
           ${this.supervisor.host.features.includes("hassos")
             ? this._renderUpdateCard(

src/data/user.ts

@@ -20,6 +20,7 @@ export interface User {
 
 export interface UpdateUserParams {
   name?: User["name"];
+  is_active?: User["is_active"];
   group_ids?: User["group_ids"];
 }
 

src/panels/config/entities/ha-config-entities.ts

@@ -189,9 +189,11 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           ? (name, entity: any) =>
               html`
                 ${name}<br />
-                ${entity.entity_id} |
-                ${this.hass.localize(`component.${entity.platform}.title`) ||
-                entity.platform}
+                <div class="secondary">
+                  ${entity.entity_id} |
+                  ${this.hass.localize(`component.${entity.platform}.title`) ||
+                  entity.platform}
+                </div>
               `
           : undefined,
       },

src/panels/config/users/dialog-user-detail.ts

@@ -13,6 +13,7 @@ import {
 } from "lit-element";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-help-tooltip";
 import "../../../components/ha-formfield";
 import "../../../components/ha-switch";
 import { adminChangePassword } from "../../../data/auth";
@@ -37,6 +38,8 @@ class DialogUserDetail extends LitElement {
 
   @internalProperty() private _isAdmin?: boolean;
 
+  @internalProperty() private _isActive?: boolean;
+
   @internalProperty() private _error?: string;
 
   @internalProperty() private _params?: UserDetailDialogParams;
@@ -48,6 +51,7 @@ class DialogUserDetail extends LitElement {
     this._error = undefined;
     this._name = params.entry.name || "";
     this._isAdmin = params.entry.group_ids.includes(SYSTEM_GROUP_ID_ADMIN);
+    this._isActive = params.entry.is_active;
     await this.updateComplete;
   }
 
@@ -91,15 +95,6 @@ class DialogUserDetail extends LitElement {
                   </span>
                 `
               : ""}
-            ${user.is_active
-              ? html`
-                  <span class="state"
-                    >${this.hass.localize(
-                      "ui.panel.config.users.editor.active"
-                    )}</span
-                  >
-                `
-              : ""}
           </div>
           <div class="form">
             <paper-input
@@ -110,17 +105,21 @@ class DialogUserDetail extends LitElement {
                 "ui.panel.config.users.editor.name"
               )}"
             ></paper-input>
-            <ha-formfield
-              .label=${this.hass.localize("ui.panel.config.users.editor.admin")}
-              .dir=${computeRTLDirection(this.hass)}
-            >
-              <ha-switch
-                .disabled=${user.system_generated || user.is_owner}
-                .checked=${this._isAdmin}
-                @change=${this._adminChanged}
+            <div class="row">
+              <ha-formfield
+                .label=${this.hass.localize(
+                  "ui.panel.config.users.editor.admin"
+                )}
+                .dir=${computeRTLDirection(this.hass)}
               >
-              </ha-switch>
-            </ha-formfield>
+                <ha-switch
+                  .disabled=${user.system_generated || user.is_owner}
+                  .checked=${this._isAdmin}
+                  @change=${this._adminChanged}
+                >
+                </ha-switch>
+              </ha-formfield>
+            </div>
             ${!this._isAdmin
               ? html`
                   <br />
@@ -129,6 +128,27 @@ class DialogUserDetail extends LitElement {
                   )}
                 `
               : ""}
+            <div class="row">
+              <ha-formfield
+                .label=${this.hass.localize(
+                  "ui.panel.config.users.editor.active"
+                )}
+                .dir=${computeRTLDirection(this.hass)}
+              >
+                <ha-switch
+                  .disabled=${user.system_generated || user.is_owner}
+                  .checked=${this._isActive}
+                  @change=${this._activeChanged}
+                >
+                </ha-switch>
+              </ha-formfield>
+              <ha-help-tooltip
+                .label=${this.hass.localize(
+                  "ui.panel.config.users.editor.active_tooltip"
+                )}
+              >
+              </ha-help-tooltip>
+            </div>
           </div>
         </div>
 
@@ -192,11 +212,16 @@ class DialogUserDetail extends LitElement {
     this._isAdmin = ev.target.checked;
   }
 
+  private async _activeChanged(ev): Promise<void> {
+    this._isActive = ev.target.checked;
+  }
+
   private async _updateEntry() {
     this._submitting = true;
     try {
       await this._params!.updateEntry({
         name: this._name.trim(),
+        is_active: this._isActive,
         group_ids: [
           this._isAdmin ? SYSTEM_GROUP_ID_ADMIN : SYSTEM_GROUP_ID_USER,
         ],
@@ -293,8 +318,13 @@ class DialogUserDetail extends LitElement {
         .state:not(:first-child) {
           margin-left: 8px;
         }
-        ha-switch {
-          margin-top: 8px;
+        .row {
+          display: flex;
+          padding: 8px 0;
+        }
+        ha-help-tooltip {
+          margin-left: 4px;
+          position: relative;
         }
       `,
     ];

src/panels/config/users/ha-config-users.ts

@@ -46,10 +46,17 @@ export class HaConfigUsers extends LitElement {
           width: "25%",
           direction: "asc",
           grows: true,
-          template: (name) => html`
-            ${name ||
-            this.hass!.localize("ui.panel.config.users.editor.unnamed_user")}
-          `,
+          template: (name, user: any) =>
+            narrow
+              ? html` ${name}<br />
+                  <div class="secondary">
+                    ${user.username} |
+                    ${this.hass.localize(`groups.${user.group_ids[0]}`)}
+                  </div>`
+              : html` ${name ||
+                this.hass!.localize(
+                  "ui.panel.config.users.editor.unnamed_user"
+                )}`,
         },
         username: {
           title: this.hass.localize(
@@ -59,6 +66,7 @@ export class HaConfigUsers extends LitElement {
           filterable: true,
           width: "20%",
           direction: "asc",
+          hidden: narrow,
           template: (username) => html`
             ${username ||
             this.hass!.localize("ui.panel.config.users.editor.unnamed_user")}
@@ -71,13 +79,24 @@ export class HaConfigUsers extends LitElement {
           sortable: true,
           filterable: true,
           width: "20%",
+          direction: "asc",
+          hidden: narrow,
           template: (groupIds) => html`
             ${this.hass.localize(`groups.${groupIds[0]}`)}
           `,
         },
-      };
-      if (!narrow) {
-        columns.system_generated = {
+        is_active: {
+          title: this.hass.localize(
+            "ui.panel.config.users.picker.headers.is_active"
+          ),
+          type: "icon",
+          sortable: true,
+          filterable: true,
+          width: "80px",
+          template: (is_active) =>
+            is_active ? html`<ha-icon icon="hass:check"> </ha-icon>` : "",
+        },
+        system_generated: {
           title: this.hass.localize(
             "ui.panel.config.users.picker.headers.system"
           ),
@@ -87,8 +106,9 @@ export class HaConfigUsers extends LitElement {
           width: "160px",
           template: (generated) =>
             generated ? html`<ha-icon icon="hass:check"> </ha-icon>` : "",
-        };
-      }
+        },
+      };
+
       return columns;
     }
   );

src/translations/en.json

@@ -2032,7 +2032,8 @@
             "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}?"
+            "confirm_user_deletion": "Are you sure you want to delete {name}?",
+            "active_tooltip": "Controls if user can login"
           },
           "add_user": {
             "caption": "Add user",