Update delete user dialog (#13761)

* Add destructive confirmation style

* Update delete user dialog

src/dialogs/generic/dialog-box.ts

@@ -2,6 +2,7 @@ import "@material/mwc-button/mwc-button";
 import { mdiAlertOutline } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-dialog";
@@ -96,6 +97,9 @@ class DialogBox extends LitElement {
           @click=${this._confirm}
           ?dialogInitialFocus=${!this._params.prompt}
           slot="primaryAction"
+          class=${classMap({
+            destructive: this._params.destructive || false,
+          })}
         >
           ${this._params.confirmText
             ? this._params.confirmText
@@ -153,6 +157,9 @@ class DialogBox extends LitElement {
       .secondary {
         color: var(--secondary-text-color);
       }
+      .destructive {
+        --mdc-theme-primary: var(--error-color);
+      }
       ha-dialog {
         --mdc-dialog-heading-ink-color: var(--primary-text-color);
         --mdc-dialog-content-ink-color: var(--primary-text-color);

src/dialogs/generic/show-dialog-box.ts

@@ -16,6 +16,7 @@ export interface ConfirmationDialogParams extends BaseDialogBoxParams {
   dismissText?: string;
   confirm?: () => void;
   cancel?: () => void;
+  destructive?: boolean;
 }
 
 export interface PromptDialogParams extends BaseDialogBoxParams {

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

@@ -207,12 +207,16 @@ export class HaConfigUsers extends LitElement {
         if (
           !(await showConfirmationDialog(this, {
             title: this.hass!.localize(
-              "ui.panel.config.users.editor.confirm_user_deletion",
+              "ui.panel.config.users.editor.confirm_user_deletion_title",
               "name",
               entry.name
             ),
+            text: this.hass!.localize(
+              "ui.panel.config.users.editor.confirm_user_deletion_text"
+            ),
             dismissText: this.hass!.localize("ui.common.cancel"),
             confirmText: this.hass!.localize("ui.common.delete"),
+            destructive: true,
           }))
         ) {
           return false;

src/translations/en.json

@@ -1293,7 +1293,7 @@
           },
           "delete": {
             "confirmation_title": "Are you sure you want to delete this area?",
-            "confirmation_text": "All devices in this area will become unassigned."
+            "confirmation_text": "This user will be permanently deleted."
           }
         },
         "backup": {
@@ -2974,7 +2974,8 @@
             "system_generated_users_not_removable": "Unable to remove system users.",
             "system_generated_users_not_editable": "Unable to update system users.",
             "unnamed_user": "Unnamed User",
-            "confirm_user_deletion": "Are you sure you want to delete {name}?",
+            "confirm_user_deletion_title": "Delete {name}?",
+            "confirm_user_deletion_text": "This user will be permanently deleted.",
             "active_tooltip": "Controls if user can login"
           },
           "add_user": {