Update change password dialog (#13888)

* Update change password dialog

* Improve wording

* Update modal for people page

* Remove useless async

src/panels/config/person/dialog-person-detail.ts

@@ -5,10 +5,9 @@ import memoizeOne from "memoize-one";
 import "../../../components/entity/ha-entities-picker";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-formfield";
-import "../../../components/ha-textfield";
 import "../../../components/ha-picture-upload";
 import type { HaPictureUpload } from "../../../components/ha-picture-upload";
-import { adminChangePassword } from "../../../data/auth";
+import "../../../components/ha-textfield";
 import { PersonMutableParams } from "../../../data/person";
 import {
   deleteUser,
@@ -20,7 +19,6 @@ import {
 import {
   showAlertDialog,
   showConfirmationDialog,
-  showPromptDialog,
 } from "../../../dialogs/generic/show-dialog-box";
 import { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog";
 import { PolymerChangedEvent } from "../../../polymer-types";
@@ -28,6 +26,7 @@ import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showAddUserDialog } from "../users/show-dialog-add-user";
+import { showAdminChangePasswordDialog } from "../users/show-dialog-admin-change-password";
 import { PersonDetailDialogParams } from "./show-dialog-person-detail";
 
 const includeDomains = ["device_tracker"];
@@ -350,40 +349,7 @@ class DialogPersonDetail extends LitElement {
       });
       return;
     }
-    const newPassword = await showPromptDialog(this, {
-      title: this.hass.localize("ui.panel.config.users.editor.change_password"),
-      inputType: "password",
-      inputLabel: this.hass.localize(
-        "ui.panel.config.users.editor.new_password"
-      ),
-    });
-    if (!newPassword) {
-      return;
-    }
-    const confirmPassword = await showPromptDialog(this, {
-      title: this.hass.localize("ui.panel.config.users.editor.change_password"),
-      inputType: "password",
-      inputLabel: this.hass.localize(
-        "ui.panel.config.users.add_user.password_confirm"
-      ),
-    });
-    if (!confirmPassword) {
-      return;
-    }
-    if (newPassword !== confirmPassword) {
-      showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.config.users.add_user.password_not_match"
-        ),
-      });
-      return;
-    }
-    await adminChangePassword(this.hass, this._user.id, newPassword);
-    showAlertDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.users.editor.password_changed"
-      ),
-    });
+    showAdminChangePasswordDialog(this, { userId: this._user.id });
   }
 
   private async _updateEntry() {

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

@@ -0,0 +1,183 @@
+import "@material/mwc-button";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } 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-form/ha-form";
+import { SchemaUnion } from "../../../components/ha-form/types";
+import "../../../components/ha-textfield";
+import { adminChangePassword } from "../../../data/auth";
+import { haStyleDialog } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
+import { showToast } from "../../../util/toast";
+import { AdminChangePasswordDialogParams } from "./show-dialog-admin-change-password";
+
+const SCHEMA = [
+  {
+    name: "new_password",
+    required: true,
+    selector: {
+      text: {
+        type: "password",
+      },
+    },
+  },
+  {
+    name: "password_confirm",
+    required: true,
+    selector: {
+      text: {
+        type: "password",
+      },
+    },
+  },
+] as const;
+
+type FormData = { new_password?: string; password_confirm?: string };
+
+@customElement("dialog-admin-change-password")
+class DialogAdminChangePassword extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: AdminChangePasswordDialogParams;
+
+  @state() private _userId?: string;
+
+  @state() private _data?: FormData;
+
+  @state() private _error?: Record<string, string>;
+
+  @state() private _submitting = false;
+
+  @state() private _success = false;
+
+  public showDialog(params: AdminChangePasswordDialogParams): void {
+    this._params = params;
+    this._userId = params.userId;
+  }
+
+  public closeDialog(): void {
+    this._params = undefined;
+    this._data = undefined;
+    this._submitting = false;
+    this._success = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  private _computeLabel = (schema: SchemaUnion<typeof SCHEMA>) =>
+    this.hass.localize(`ui.panel.config.users.change_password.${schema.name}`);
+
+  private _computeError = (error: string) =>
+    this.hass.localize(
+      `ui.panel.config.users.change_password.${error}` as any
+    ) || error;
+
+  private _validate() {
+    if (
+      this._data &&
+      this._data.new_password &&
+      this._data.password_confirm &&
+      this._data.new_password !== this._data.password_confirm
+    ) {
+      this._error = {
+        password_confirm: "password_no_match",
+      };
+    } else {
+      this._error = undefined;
+    }
+  }
+
+  protected render(): TemplateResult {
+    if (!this._params) {
+      return html``;
+    }
+
+    const canSubmit = Boolean(
+      this._data?.new_password && this._data?.password_confirm && !this._error
+    );
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        scrimClickAction
+        escapeKeyAction
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize("ui.panel.config.users.change_password.caption")
+        )}
+      >
+        ${this._success
+          ? html`
+              <p>
+                ${this.hass.localize(
+                  "ui.panel.config.users.change_password.password_changed"
+                )}
+              </p>
+              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+                ${this.hass.localize("ui.dialogs.generic.ok")}
+              </mwc-button>
+            `
+          : html`
+              <ha-form
+                .hass=${this.hass}
+                .data=${this._data}
+                .error=${this._error}
+                .schema=${SCHEMA}
+                .computeLabel=${this._computeLabel}
+                .computeError=${this._computeError}
+                @value-changed=${this._valueChanged}
+                .disabled=${this._submitting}
+              ></ha-form>
+              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+                ${this.hass.localize("ui.common.cancel")}
+              </mwc-button>
+              <mwc-button
+                slot="primaryAction"
+                @click=${this._changePassword}
+                .disabled=${this._submitting || !canSubmit}
+              >
+                ${this.hass.localize(
+                  "ui.panel.config.users.change_password.change"
+                )}
+              </mwc-button>
+            `}
+      </ha-dialog>
+    `;
+  }
+
+  private _valueChanged(ev) {
+    this._data = ev.detail.value;
+    this._validate();
+  }
+
+  private async _changePassword(): Promise<void> {
+    if (!this._userId || !this._data?.new_password) return;
+    try {
+      this._submitting = true;
+      await adminChangePassword(
+        this.hass,
+        this._userId!,
+        this._data.new_password
+      );
+      this._success = true;
+    } catch (err: any) {
+      showToast(this, {
+        message: err.body?.message || err.message || err,
+      });
+    } finally {
+      this._submitting = false;
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [haStyleDialog, css``];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-admin-change-password": DialogAdminChangePassword;
+  }
+}

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

@@ -4,26 +4,23 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
+import "../../../components/ha-chip";
+import "../../../components/ha-chip-set";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-formfield";
 import "../../../components/ha-help-tooltip";
-import "../../../components/ha-chip-set";
-import "../../../components/ha-chip";
 import "../../../components/ha-svg-icon";
-import "../../../components/ha-textfield";
 import "../../../components/ha-switch";
-import { adminChangePassword } from "../../../data/auth";
+import "../../../components/ha-textfield";
 import {
   computeUserBadges,
   SYSTEM_GROUP_ID_ADMIN,
   SYSTEM_GROUP_ID_USER,
 } from "../../../data/user";
-import {
-  showAlertDialog,
-  showPromptDialog,
-} from "../../../dialogs/generic/show-dialog-box";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
+import { showAdminChangePasswordDialog } from "./show-dialog-admin-change-password";
 import { UserDetailDialogParams } from "./show-dialog-user-detail";
 
 @customElement("dialog-user-detail")
@@ -268,40 +265,8 @@ class DialogUserDetail extends LitElement {
       });
       return;
     }
-    const newPassword = await showPromptDialog(this, {
-      title: this.hass.localize("ui.panel.config.users.editor.change_password"),
-      inputType: "password",
-      inputLabel: this.hass.localize(
-        "ui.panel.config.users.editor.new_password"
-      ),
-    });
-    if (!newPassword) {
-      return;
-    }
-    const confirmPassword = await showPromptDialog(this, {
-      title: this.hass.localize("ui.panel.config.users.editor.change_password"),
-      inputType: "password",
-      inputLabel: this.hass.localize(
-        "ui.panel.config.users.add_user.password_confirm"
-      ),
-    });
-    if (!confirmPassword) {
-      return;
-    }
-    if (newPassword !== confirmPassword) {
-      showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.config.users.add_user.password_not_match"
-        ),
-      });
-      return;
-    }
-    await adminChangePassword(this.hass, this._params!.entry.id, newPassword);
-    showAlertDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.users.editor.password_changed"
-      ),
-    });
+
+    showAdminChangePasswordDialog(this, { userId: this._params!.entry.id });
   }
 
   private _close(): void {

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

@@ -0,0 +1,19 @@
+import { fireEvent } from "../../../common/dom/fire_event";
+
+export interface AdminChangePasswordDialogParams {
+  userId: string;
+}
+
+export const loadAdminChangePasswordDialog = () =>
+  import("./dialog-admin-change-password");
+
+export const showAdminChangePasswordDialog = (
+  element: HTMLElement,
+  dialogParams: AdminChangePasswordDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-admin-change-password",
+    dialogImport: loadAdminChangePasswordDialog,
+    dialogParams,
+  });
+};

src/translations/en.json

@@ -2988,8 +2988,6 @@
             "name": "Display name",
             "username": "Username",
             "change_password": "Change password",
-            "new_password": "New Password",
-            "password_changed": "Password was changed successfully",
             "activate_user": "Activate user",
             "deactivate_user": "Deactivate user",
             "delete_user": "Delete user",
@@ -3015,6 +3013,14 @@
             "password_not_match": "Passwords don't match",
             "local_only": "Local only",
             "create": "Create"
+          },
+          "change_password": {
+            "caption": "Change password",
+            "new_password": "New Password",
+            "password_confirm": "Confirm Password",
+            "change": "Change",
+            "password_no_match": "Passwords don't match",
+            "password_changed": "The password has been changed successfully."
           }
         },
         "application_credentials": {