Migrate config-users dialog(s) to wa

src/panels/config/cloud/account/dialog-cloud-tts-try.ts

@@ -8,7 +8,7 @@ import { computeStateDomain } from "../../../../common/entity/compute_state_doma
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import { supportsFeature } from "../../../../common/entity/supports-feature";
 import "../../../../components/ha-button";
-import "../../../../components/ha-dialog-footer";
+import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-select";
 import type {
   HaSelectOption,
@@ -16,7 +16,6 @@ import type {
 } from "../../../../components/ha-select";
 import "../../../../components/ha-textarea";
 import type { HaTextArea } from "../../../../components/ha-textarea";
-import "../../../../components/ha-wa-dialog";
 import { showAutomationEditor } from "../../../../data/automation";
 import { MediaPlayerEntityFeature } from "../../../../data/media-player";
 import { convertTextToSpeech } from "../../../../data/tts";
@@ -31,8 +30,6 @@ export class DialogTryTts extends LitElement {
 
   @state() private _loadingExample = false;
 
-  @state() private _open = false;
-
   @state() private _params?: TryTtsDialogParams;
 
   @query("#message") private _messageInput?: HaTextArea;
@@ -53,14 +50,9 @@ export class DialogTryTts extends LitElement {
 
   public showDialog(params: TryTtsDialogParams) {
     this._params = params;
-    this._open = true;
   }
 
   public closeDialog() {
-    this._open = false;
-  }
-
-  private _dialogClosed() {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -90,20 +82,20 @@ export class DialogTryTts extends LitElement {
     });
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this.hass.localize(
-          "ui.panel.config.cloud.account.tts.dialog.header"
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        scrimClickAction
+        escapeKeyAction
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize("ui.panel.config.cloud.account.tts.dialog.header")
         )}
-        width="medium"
-        @closed=${this._dialogClosed}
       >
         <div>
           <ha-textarea
             autogrow
             id="message"
-            autofocus
             .label=${this.hass.localize(
               "ui.panel.config.cloud.account.tts.dialog.message"
             )}
@@ -126,33 +118,26 @@ export class DialogTryTts extends LitElement {
           >
           </ha-select>
         </div>
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            appearance="plain"
-            slot="secondaryAction"
-            .disabled=${target === "browser"}
-            @click=${this._createAutomation}
-          >
-            <ha-svg-icon slot="start" .path=${mdiRobot}></ha-svg-icon>
-            ${this.hass.localize(
-              "ui.panel.config.cloud.account.tts.dialog.create_automation"
-            )}
-          </ha-button>
-          <ha-button
-            slot="primaryAction"
-            @click=${this._playExample}
-            .disabled=${this._loadingExample}
-          >
-            <ha-svg-icon
-              slot="start"
-              .path=${mdiPlayCircleOutline}
-            ></ha-svg-icon>
-            ${this.hass.localize(
-              "ui.panel.config.cloud.account.tts.dialog.play"
-            )}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        <ha-button
+          slot="primaryAction"
+          @click=${this._playExample}
+          .disabled=${this._loadingExample}
+        >
+          <ha-svg-icon slot="start" .path=${mdiPlayCircleOutline}></ha-svg-icon>
+          ${this.hass.localize("ui.panel.config.cloud.account.tts.dialog.play")}
+        </ha-button>
+        <ha-button
+          appearance="plain"
+          slot="secondaryAction"
+          .disabled=${target === "browser"}
+          @click=${this._createAutomation}
+        >
+          <ha-svg-icon slot="start" .path=${mdiRobot}></ha-svg-icon>
+          ${this.hass.localize(
+            "ui.panel.config.cloud.account.tts.dialog.create_automation"
+          )}
+        </ha-button>
+      </ha-dialog>
     `;
   }
 
@@ -238,6 +223,9 @@ export class DialogTryTts extends LitElement {
     return [
       haStyleDialog,
       css`
+        ha-dialog {
+          --mdc-dialog-max-width: 500px;
+        }
         ha-textarea,
         ha-select {
           display: block;

src/panels/config/cloud/dialog-cloud-already-connected/dialog-cloud-already-connected.ts

@@ -6,9 +6,8 @@ import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
-import "../../../../components/ha-dialog-footer";
+import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-icon-button";
-import "../../../../components/ha-wa-dialog";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import { obfuscateUrl } from "../../../../util/url";
@@ -20,21 +19,13 @@ class DialogCloudAlreadyConnected extends LitElement {
 
   @state() private _params?: CloudAlreadyConnectedDialogParams;
 
-  @state() private _open = false;
-
   @state() private _obfuscateIp = true;
 
   public showDialog(params: CloudAlreadyConnectedDialogParams) {
     this._params = params;
-    this._open = true;
   }
 
   public closeDialog() {
-    this._open = false;
-  }
-
-  private _dialogClosed() {
-    this._open = false;
     this._params?.closeDialog?.();
     this._params = undefined;
     this._obfuscateIp = true;
@@ -48,14 +39,15 @@ class DialogCloudAlreadyConnected extends LitElement {
     const { details } = this._params;
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this.hass.localize(
-          "ui.panel.config.cloud.dialog_already_connected.heading"
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize(
+            "ui.panel.config.cloud.dialog_already_connected.heading"
+          )
         )}
-        @closed=${this._dialogClosed}
-        width="medium"
       >
         <div class="intro">
           <span>
@@ -139,21 +131,19 @@ class DialogCloudAlreadyConnected extends LitElement {
           )}
         </ha-alert>
 
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            slot="secondaryAction"
-            appearance="plain"
-            @click=${this.closeDialog}
-          >
-            ${this.hass!.localize("ui.common.cancel")}
-          </ha-button>
-          <ha-button slot="primaryAction" @click=${this._logInHere}>
-            ${this.hass!.localize(
-              "ui.panel.config.cloud.dialog_already_connected.login_here"
-            )}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        <ha-button
+          appearance="plain"
+          @click=${this.closeDialog}
+          slot="secondaryAction"
+        >
+          ${this.hass!.localize("ui.common.cancel")}
+        </ha-button>
+        <ha-button @click=${this._logInHere} slot="primaryAction">
+          ${this.hass!.localize(
+            "ui.panel.config.cloud.dialog_already_connected.login_here"
+          )}
+        </ha-button>
+      </ha-dialog>
     `;
   }
 
@@ -170,6 +160,9 @@ class DialogCloudAlreadyConnected extends LitElement {
     return [
       haStyleDialog,
       css`
+        ha-dialog {
+          --mdc-dialog-max-width: 535px;
+        }
         .intro b {
           display: block;
           margin-top: 16px;

src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts

@@ -3,11 +3,10 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-dialog-footer";
+import { createCloseHeading } from "../../../../components/ha-dialog";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "../../../../components/ha-button";
-import "../../../../components/ha-wa-dialog";
 import type { CloudCertificateParams as CloudCertificateDialogParams } from "./show-dialog-cloud-certificate";
 
 @customElement("dialog-cloud-certificate")
@@ -16,19 +15,11 @@ class DialogCloudCertificate extends LitElement {
 
   @state() private _params?: CloudCertificateDialogParams;
 
-  @state() private _open = false;
-
   public showDialog(params: CloudCertificateDialogParams) {
     this._params = params;
-    this._open = true;
   }
 
   public closeDialog() {
-    this._open = false;
-  }
-
-  private _dialogClosed() {
-    this._open = false;
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -40,14 +31,16 @@ class DialogCloudCertificate extends LitElement {
     const { certificateInfo } = this._params;
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this.hass.localize(
-          "ui.panel.config.cloud.dialog_certificate.certificate_information"
+      <ha-dialog
+        open
+        hideActions
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize(
+            "ui.panel.config.cloud.dialog_certificate.certificate_information"
+          )
         )}
-        @closed=${this._dialogClosed}
-        width="medium"
       >
         <div>
           <p>
@@ -81,14 +74,12 @@ class DialogCloudCertificate extends LitElement {
           </ul>
         </div>
 
-        <ha-dialog-footer slot="footer">
-          <ha-button slot="primaryAction" @click=${this.closeDialog}>
-            ${this.hass!.localize(
-              "ui.panel.config.cloud.dialog_certificate.close"
-            )}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        <ha-button @click=${this.closeDialog} slot="primaryAction">
+          ${this.hass!.localize(
+            "ui.panel.config.cloud.dialog_certificate.close"
+          )}
+        </ha-button>
+      </ha-dialog>
     `;
   }
 
@@ -96,6 +87,9 @@ class DialogCloudCertificate extends LitElement {
     return [
       haStyleDialog,
       css`
+        ha-dialog {
+          --mdc-dialog-max-width: 535px;
+        }
         .break-word {
           overflow-wrap: break-word;
         }

src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts

@@ -3,7 +3,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-dialog-footer";
+import { createCloseHeading } from "../../../../components/ha-dialog";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
@@ -12,7 +12,6 @@ import type { WebhookDialogParams } from "./show-dialog-manage-cloudhook";
 
 import "../../../../components/ha-button";
 import "../../../../components/ha-copy-textfield";
-import "../../../../components/ha-wa-dialog";
 
 @customElement("dialog-manage-cloudhook")
 export class DialogManageCloudhook extends LitElement {
@@ -20,19 +19,11 @@ export class DialogManageCloudhook extends LitElement {
 
   @state() private _params?: WebhookDialogParams;
 
-  @state() private _open = false;
-
   public showDialog(params: WebhookDialogParams) {
     this._params = params;
-    this._open = true;
   }
 
   public closeDialog() {
-    this._open = false;
-  }
-
-  private _dialogClosed() {
-    this._open = false;
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -50,15 +41,17 @@ export class DialogManageCloudhook extends LitElement {
           )
         : documentationUrl(this.hass!, `/integrations/${webhook.domain}/`);
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this.hass!.localize(
-          "ui.panel.config.cloud.dialog_cloudhook.webhook_for",
-          { name: webhook.name }
+      <ha-dialog
+        open
+        hideActions
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass!,
+          this.hass!.localize(
+            "ui.panel.config.cloud.dialog_cloudhook.webhook_for",
+            { name: webhook.name }
+          )
         )}
-        @closed=${this._dialogClosed}
-        width="large"
       >
         <div>
           <p>
@@ -94,25 +87,21 @@ export class DialogManageCloudhook extends LitElement {
           ></ha-copy-textfield>
         </div>
 
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            slot="secondaryAction"
-            href=${docsUrl}
-            target="_blank"
-            rel="noreferrer"
-            appearance="plain"
-          >
-            ${this.hass!.localize(
-              "ui.panel.config.cloud.dialog_cloudhook.view_documentation"
-            )}
-          </ha-button>
-          <ha-button slot="primaryAction" @click=${this.closeDialog}>
-            ${this.hass!.localize(
-              "ui.panel.config.cloud.dialog_cloudhook.close"
-            )}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        <ha-button
+          href=${docsUrl}
+          target="_blank"
+          rel="noreferrer"
+          slot="secondaryAction"
+          appearance="plain"
+        >
+          ${this.hass!.localize(
+            "ui.panel.config.cloud.dialog_cloudhook.view_documentation"
+          )}
+        </ha-button>
+        <ha-button @click=${this.closeDialog} slot="primaryAction">
+          ${this.hass!.localize("ui.panel.config.cloud.dialog_cloudhook.close")}
+        </ha-button>
+      </ha-dialog>
     `;
   }
 
@@ -140,6 +129,9 @@ export class DialogManageCloudhook extends LitElement {
       haStyle,
       haStyleDialog,
       css`
+        ha-dialog {
+          width: 650px;
+        }
         button.link {
           color: var(--primary-color);
           text-decoration: none;

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

@@ -1,16 +1,17 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import "../../../components/ha-spinner";
-import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-dialog-footer";
 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 "../../../components/ha-wa-dialog";
 import { createAuthForUser } from "../../../data/auth";
 import type { User } from "../../../data/user";
 import {
@@ -35,6 +36,8 @@ export class DialogAddUser extends LitElement {
 
   @state() private _params?: AddUserDialogParams;
 
+  @state() private _open = false;
+
   @state() private _name?: string;
 
   @state() private _username?: string;
@@ -66,6 +69,8 @@ export class DialogAddUser extends LitElement {
     } else {
       this._allowChangeName = true;
     }
+
+    this._open = true;
   }
 
   protected firstUpdated(changedProperties: PropertyValues) {
@@ -83,15 +88,14 @@ export class DialogAddUser extends LitElement {
     }
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this._close}
-        scrimClickAction
-        escapeKeyAction
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.panel.config.users.add_user.caption")
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.users.add_user.caption"
         )}
+        width="medium"
+        @closed=${this._dialogClosed}
       >
         <div>
           ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
@@ -109,7 +113,7 @@ export class DialogAddUser extends LitElement {
                 )}
                 @input=${this._handleValueChanged}
                 @blur=${this._maybePopulateUsername}
-                dialogInitialFocus
+                autofocus
               ></ha-textfield>`
             : ""}
           <ha-textfield
@@ -122,7 +126,7 @@ export class DialogAddUser extends LitElement {
             required
             @input=${this._handleValueChanged}
             .validationMessage=${this.hass.localize("ui.common.error_required")}
-            dialogInitialFocus
+            ?autofocus=${!this._allowChangeName}
           ></ha-textfield>
 
           <ha-password-field
@@ -191,30 +195,37 @@ export class DialogAddUser extends LitElement {
             : nothing}
         </div>
 
-        <ha-button
-          slot="primaryAction"
-          appearance="plain"
-          @click=${this._close}
-        >
-          ${this.hass!.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          slot="primaryAction"
-          .disabled=${!this._name ||
-          !this._username ||
-          !this._password ||
-          this._password !== this._passwordConfirm}
-          @click=${this._createUser}
-          .loading=${this._loading}
-        >
-          ${this.hass.localize("ui.panel.config.users.add_user.create")}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this._close}
+          >
+            ${this.hass!.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            slot="primaryAction"
+            .disabled=${!this._name ||
+            !this._username ||
+            !this._password ||
+            this._password !== this._passwordConfirm}
+            @click=${this._createUser}
+            .loading=${this._loading}
+          >
+            ${this.hass.localize("ui.panel.config.users.add_user.create")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
   private _close() {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   private _maybePopulateUsername() {
@@ -297,8 +308,7 @@ export class DialogAddUser extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-dialog {
-          --mdc-dialog-max-width: 500px;
+        ha-wa-dialog {
           --dialog-z-index: 10;
         }
         .row {

src/panels/config/users/dialog-admin-change-password.ts

@@ -3,11 +3,12 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 
 import { fireEvent } from "../../../common/dom/fire_event";
-import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-dialog-footer";
 import "../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../components/ha-form/types";
 import "../../../components/ha-textfield";
 import "../../../components/ha-button";
+import "../../../components/ha-wa-dialog";
 import { adminChangePassword } from "../../../data/auth";
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
@@ -48,6 +49,8 @@ class DialogAdminChangePassword extends LitElement {
 
   @state() private _params?: AdminChangePasswordDialogParams;
 
+  @state() private _open = false;
+
   @state() private _userId?: string;
 
   @state() private _data?: FormData;
@@ -61,13 +64,24 @@ class DialogAdminChangePassword extends LitElement {
   public showDialog(params: AdminChangePasswordDialogParams): void {
     this._params = params;
     this._userId = params.userId;
+    this._data = undefined;
+    this._error = undefined;
+    this._submitting = false;
+    this._success = false;
+    this._open = true;
   }
 
   public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this._params = undefined;
+    this._userId = undefined;
     this._data = undefined;
     this._submitting = false;
     this._success = false;
+    this._error = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -104,15 +118,13 @@ class DialogAdminChangePassword extends LitElement {
     );
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        scrimClickAction
-        escapeKeyAction
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.panel.config.users.change_password.caption")
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.users.change_password.caption"
         )}
+        @closed=${this._dialogClosed}
       >
         ${this._success
           ? html`
@@ -121,12 +133,15 @@ class DialogAdminChangePassword extends LitElement {
                   "ui.panel.config.users.change_password.password_changed"
                 )}
               </p>
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.ok")}
-              </ha-button>
+              <ha-dialog-footer slot="footer">
+                <ha-button slot="primaryAction" @click=${this.closeDialog}>
+                  ${this.hass.localize("ui.common.ok")}
+                </ha-button>
+              </ha-dialog-footer>
             `
           : html`
               <ha-form
+                autofocus
                 .hass=${this.hass}
                 .data=${this._data}
                 .error=${this._error}
@@ -136,24 +151,26 @@ class DialogAdminChangePassword extends LitElement {
                 @value-changed=${this._valueChanged}
                 .disabled=${this._submitting}
               ></ha-form>
-              <ha-button
-                appearance="plain"
-                slot="primaryAction"
-                @click=${this.closeDialog}
-              >
-                ${this.hass.localize("ui.common.cancel")}
-              </ha-button>
-              <ha-button
-                slot="primaryAction"
-                @click=${this._changePassword}
-                .disabled=${this._submitting || !canSubmit}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.users.change_password.change"
-                )}
-              </ha-button>
+              <ha-dialog-footer slot="footer">
+                <ha-button
+                  slot="secondaryAction"
+                  appearance="plain"
+                  @click=${this.closeDialog}
+                >
+                  ${this.hass.localize("ui.common.cancel")}
+                </ha-button>
+                <ha-button
+                  slot="primaryAction"
+                  @click=${this._changePassword}
+                  .disabled=${this._submitting || !canSubmit}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.users.change_password.change"
+                  )}
+                </ha-button>
+              </ha-dialog-footer>
             `}
-      </ha-dialog>
+      </ha-wa-dialog>
     `;
   }
 

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

@@ -2,15 +2,17 @@ import { mdiPencil } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-dialog-footer";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-label";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-switch";
 import "../../../components/ha-textfield";
+import "../../../components/ha-wa-dialog";
 import { adminChangeUsername } from "../../../data/auth";
 import {
   computeUserBadges,
@@ -42,6 +44,8 @@ class DialogUserDetail extends LitElement {
 
   @state() private _params?: UserDetailDialogParams;
 
+  @state() private _open = false;
+
   @state() private _submitting = false;
 
   public async showDialog(params: UserDetailDialogParams): Promise<void> {
@@ -51,6 +55,7 @@ class DialogUserDetail extends LitElement {
     this._isAdmin = params.entry.group_ids.includes(SYSTEM_GROUP_ID_ADMIN);
     this._localOnly = params.entry.local_only;
     this._isActive = params.entry.is_active;
+    this._open = true;
     await this.updateComplete;
   }
 
@@ -61,12 +66,12 @@ class DialogUserDetail extends LitElement {
     const user = this._params.entry;
     const badges = computeUserBadges(this.hass, user, true);
     return html`
-      <ha-dialog
-        open
-        @closed=${this._close}
-        scrimClickAction
-        escapeKeyAction
-        .heading=${createCloseHeading(this.hass, user.name)}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${user.name}
+        width="medium"
+        @closed=${this._dialogClosed}
       >
         <div>
           ${this._error
@@ -94,7 +99,7 @@ class DialogUserDetail extends LitElement {
             ${!user.system_generated
               ? html`
                   <ha-textfield
-                    dialogInitialFocus
+                    autofocus
                     .value=${this._name}
                     @input=${this._nameChanged}
                     .label=${this.hass!.localize(
@@ -219,32 +224,36 @@ class DialogUserDetail extends LitElement {
             : nothing}
         </div>
 
-        <ha-button
-          slot="secondaryAction"
-          variant="danger"
-          appearance="plain"
-          @click=${this._deleteEntry}
-          .disabled=${this._submitting ||
-          user.system_generated ||
-          user.is_owner}
-        >
-          ${this.hass!.localize("ui.panel.config.users.editor.delete_user")}
-        </ha-button>
-        <ha-button
-          slot="primaryAction"
-          appearance="plain"
-          @click=${this._close}
-        >
-          ${this.hass!.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          slot="primaryAction"
-          @click=${this._updateEntry}
-          .disabled=${!this._name || this._submitting || user.system_generated}
-        >
-          ${this.hass!.localize("ui.common.save")}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            variant="danger"
+            appearance="plain"
+            @click=${this._deleteEntry}
+            .disabled=${this._submitting ||
+            user.system_generated ||
+            user.is_owner}
+          >
+            ${this.hass!.localize("ui.panel.config.users.editor.delete_user")}
+          </ha-button>
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this._close}
+          >
+            ${this.hass!.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            slot="primaryAction"
+            @click=${this._updateEntry}
+            .disabled=${!this._name ||
+            this._submitting ||
+            user.system_generated}
+          >
+            ${this.hass!.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -288,7 +297,7 @@ class DialogUserDetail extends LitElement {
     this._submitting = true;
     try {
       if (await this._params!.removeEntry()) {
-        this._params = undefined;
+        this._close();
       }
     } finally {
       this._submitting = false;
@@ -360,16 +369,18 @@ class DialogUserDetail extends LitElement {
   }
 
   private _close(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
-        ha-dialog {
-          --mdc-dialog-max-width: 500px;
-        }
         .form {
           padding-top: 16px;
         }