Migrate profile dialog(s) to wa

src/panels/profile/dialog-ha-mfa-module-setup-flow.ts

@@ -1,8 +1,10 @@
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
+import { ifDefined } from "lit/directives/if-defined";
 import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-button";
-import "../../components/ha-dialog";
+import "../../components/ha-dialog-footer";
+import "../../components/ha-wa-dialog";
 import "../../components/ha-form/ha-form";
 import "../../components/ha-markdown";
 import "../../components/ha-spinner";
@@ -28,7 +30,7 @@ class HaMfaModuleSetupFlow extends LitElement {
 
   @state() private _loading = false;
 
-  @state() private _opened = false;
+  @state() private _open = false;
 
   @state() private _stepData: any = {};
 
@@ -39,7 +41,7 @@ class HaMfaModuleSetupFlow extends LitElement {
   public showDialog({ continueFlowId, mfaModuleId, dialogClosedCallback }) {
     this._instance = instance++;
     this._dialogClosedCallback = dialogClosedCallback;
-    this._opened = true;
+    this._open = true;
 
     const fetchStep = continueFlowId
       ? this.hass.callWS({
@@ -61,22 +63,29 @@ class HaMfaModuleSetupFlow extends LitElement {
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
     // Closed dialog by clicking on the overlay
     if (this._step) {
       this._flowDone();
+      return;
     }
-    this._opened = false;
+
+    this._resetDialogState();
   }
 
   protected render() {
-    if (!this._opened) {
+    if (this._instance === undefined) {
       return nothing;
     }
     return html`
-      <ha-dialog
-        open
-        .heading=${this._computeStepTitle()}
-        @closed=${this.closeDialog}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this._computeStepTitle()}
+        @closed=${this._dialogClosed}
       >
         <div>
           ${this._errorMessage
@@ -115,6 +124,7 @@ class HaMfaModuleSetupFlow extends LitElement {
                           )}
                         ></ha-markdown>
                         <ha-form
+                          autofocus
                           .hass=${this.hass}
                           .data=${this._stepData}
                           .schema=${autocompleteLoginFields(
@@ -127,31 +137,33 @@ class HaMfaModuleSetupFlow extends LitElement {
                         ></ha-form>`
                     : ""}`}
         </div>
-        <ha-button
-          slot="primaryAction"
-          @click=${this.closeDialog}
-          appearance=${["abort", "create_entry"].includes(
-            this._step?.type || ""
-          )
-            ? "accent"
-            : "plain"}
-          >${this.hass.localize(
-            ["abort", "create_entry"].includes(this._step?.type || "")
-              ? "ui.panel.profile.mfa_setup.close"
-              : "ui.common.cancel"
-          )}</ha-button
-        >
-        ${this._step?.type === "form"
-          ? html`<ha-button
-              slot="primaryAction"
-              .disabled=${this._loading}
-              @click=${this._submitStep}
-              >${this.hass.localize(
-                "ui.panel.profile.mfa_setup.submit"
-              )}</ha-button
-            >`
-          : nothing}
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot=${this._step?.type === "form"
+              ? "secondaryAction"
+              : "primaryAction"}
+            appearance=${ifDefined(
+              this._step?.type === "form" ? "plain" : undefined
+            )}
+            @click=${this.closeDialog}
+            >${this.hass.localize(
+              ["abort", "create_entry"].includes(this._step?.type || "")
+                ? "ui.panel.profile.mfa_setup.close"
+                : "ui.common.cancel"
+            )}</ha-button
+          >
+          ${this._step?.type === "form"
+            ? html`<ha-button
+                slot="primaryAction"
+                .disabled=${this._loading}
+                @click=${this._submitStep}
+                >${this.hass.localize(
+                  "ui.panel.profile.mfa_setup.submit"
+                )}</ha-button
+              >`
+            : nothing}
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -162,9 +174,6 @@ class HaMfaModuleSetupFlow extends LitElement {
         .error {
           color: red;
         }
-        ha-dialog {
-          max-width: 500px;
-        }
         ha-markdown {
           --markdown-svg-background-color: white;
           --markdown-svg-color: black;
@@ -251,12 +260,15 @@ class HaMfaModuleSetupFlow extends LitElement {
     this._dialogClosedCallback!({
       flowFinished,
     });
+    this._resetDialogState();
+  }
 
+  private _resetDialogState() {
     this._errorMessage = undefined;
     this._step = undefined;
     this._stepData = {};
     this._dialogClosedCallback = undefined;
-    this.closeDialog();
+    this._instance = undefined;
   }
 
   private _computeStepTitle() {

src/panels/profile/ha-long-lived-access-token-dialog.ts

@@ -3,10 +3,10 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 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-textfield";
 import "../../components/ha-button";
 import "../../components/ha-icon-button";
+import "../../components/ha-wa-dialog";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import type { LongLivedAccessTokenDialogParams } from "./show-long-lived-access-token-dialog";
@@ -24,11 +24,18 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
 
   @state() private _qrCode?: TemplateResult;
 
+  @state() private _open = false;
+
   public showDialog(params: LongLivedAccessTokenDialogParams): void {
     this._params = params;
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
     this._params = undefined;
     this._qrCode = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -40,15 +47,15 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
     }
 
     return html`
-      <ha-dialog
-        open
-        hideActions
-        .heading=${createCloseHeading(this.hass, this._params.name)}
-        @closed=${this.closeDialog}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this._params.name}
+        @closed=${this._dialogClosed}
       >
         <div>
           <ha-textfield
-            dialogInitialFocus
+            autofocus
             .value=${this._params.token}
             .label=${this.hass.localize(
               "ui.panel.profile.long_lived_access_tokens.prompt_copy_token"
@@ -79,7 +86,7 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
                 `}
           </div>
         </div>
-      </ha-dialog>
+      </ha-wa-dialog>
     `;
   }