Improve password change card (#7756)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/profile/ha-change-password-card.js

@@ -1,154 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-dialog/paper-dialog";
-import "../../components/ha-circular-progress";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../components/ha-card";
-import LocalizeMixin from "../../mixins/localize-mixin";
-import "../../styles/polymer-ha-style";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HaChangePasswordCard extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="ha-style">
-        .error {
-          color: red;
-        }
-        .status {
-          color: var(--primary-color);
-        }
-        .error,
-        .status {
-          position: absolute;
-          top: -4px;
-        }
-        .currentPassword {
-          margin-top: -4px;
-        }
-      </style>
-      <div>
-        <ha-card
-          header="[[localize('ui.panel.profile.change_password.header')]]"
-        >
-          <div class="card-content">
-            <template is="dom-if" if="[[_errorMsg]]">
-              <div class="error">[[_errorMsg]]</div>
-            </template>
-            <template is="dom-if" if="[[_statusMsg]]">
-              <div class="status">[[_statusMsg]]</div>
-            </template>
-            <paper-input
-              class="currentPassword"
-              label="[[localize('ui.panel.profile.change_password.current_password')]]"
-              type="password"
-              value="{{_currentPassword}}"
-              required
-              auto-validate
-              error-message="[[localize('ui.panel.profile.change_password.error_required')]]"
-            ></paper-input>
-            <template is="dom-if" if="[[_currentPassword]]">
-              <paper-input
-                label="[[localize('ui.panel.profile.change_password.new_password')]]"
-                type="password"
-                value="{{_password1}}"
-                required
-                auto-validate
-                error-message="[[localize('ui.panel.profile.change_password.error_required')]]"
-              ></paper-input>
-              <paper-input
-                label="[[localize('ui.panel.profile.change_password.confirm_new_password')]]"
-                type="password"
-                value="{{_password2}}"
-                required
-                auto-validate
-                error-message="[[localize('ui.panel.profile.change_password.error_required')]]"
-              ></paper-input>
-            </template>
-          </div>
-          <div class="card-actions">
-            <template is="dom-if" if="[[_loading]]">
-              <div><ha-circular-progress active></ha-circular-progress></div>
-            </template>
-            <template is="dom-if" if="[[!_loading]]">
-              <mwc-button on-click="_changePassword"
-                >[[localize('ui.panel.profile.change_password.submit')]]</mwc-button
-              >
-            </template>
-          </div>
-        </ha-card>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-
-      _loading: {
-        type: Boolean,
-        value: false,
-      },
-
-      // Error message when can't talk to server etc
-      _statusMsg: String,
-      _errorMsg: String,
-
-      _currentPassword: String,
-      _password1: String,
-      _password2: String,
-    };
-  }
-
-  ready() {
-    super.ready();
-    this.addEventListener("keypress", (ev) => {
-      this._statusMsg = null;
-      if (ev.keyCode === 13) {
-        this._changePassword();
-      }
-    });
-  }
-
-  async _changePassword() {
-    this._statusMsg = null;
-    if (!this._currentPassword || !this._password1 || !this._password2) return;
-
-    if (this._password1 !== this._password2) {
-      this._errorMsg = "New password confirmation doesn't match";
-      return;
-    }
-
-    if (this._currentPassword === this._password1) {
-      this._errorMsg = "New password must be different than current password";
-      return;
-    }
-
-    this._loading = true;
-    this._errorMsg = null;
-
-    try {
-      await this.hass.callWS({
-        type: "config/auth_provider/homeassistant/change_password",
-        current_password: this._currentPassword,
-        new_password: this._password1,
-      });
-
-      this.setProperties({
-        _statusMsg: "Password changed successfully",
-        _currentPassword: null,
-        _password1: null,
-        _password2: null,
-      });
-    } catch (err) {
-      this._errorMsg = err.message;
-    }
-
-    this._loading = false;
-  }
-}
-
-customElements.define("ha-change-password-card", HaChangePasswordCard);

src/panels/profile/ha-change-password-card.ts

@@ -0,0 +1,195 @@
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-dialog/paper-dialog";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+  PropertyValues,
+  TemplateResult,
+} from "lit-element";
+import "@material/mwc-button";
+import "../../components/ha-circular-progress";
+import "../../components/ha-card";
+import { haStyle } from "../../resources/styles";
+import type { HomeAssistant } from "../../types";
+
+@customElement("ha-change-password-card")
+class HaChangePasswordCard extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @internalProperty() private _loading = false;
+
+  @internalProperty() private _statusMsg?: string;
+
+  @internalProperty() private _errorMsg?: string;
+
+  @internalProperty() private _currentPassword?: string;
+
+  @internalProperty() private _password?: string;
+
+  @internalProperty() private _passwordConfirm?: string;
+
+  protected render(): TemplateResult {
+    return html`
+      <div>
+        <ha-card
+          .header=${this.hass.localize(
+            "ui.panel.profile.change_password.header"
+          )}
+        >
+          <div class="card-content">
+            ${this._errorMsg
+              ? html` <div class="error">${this._errorMsg}</div> `
+              : ""}
+            ${this._statusMsg
+              ? html` <div class="status">${this._statusMsg}</div> `
+              : ""}
+
+            <paper-input
+              id="currentPassword"
+              .label=${this.hass.localize(
+                "ui.panel.profile.change_password.current_password"
+              )}
+              type="password"
+              .value=${this._currentPassword}
+              @value-changed=${this._currentPasswordChanged}
+              required
+            ></paper-input>
+
+            ${this._currentPassword
+              ? html` <paper-input
+                    .label=${this.hass.localize(
+                      "ui.panel.profile.change_password.new_password"
+                    )}
+                    name="password"
+                    type="password"
+                    .value=${this._password}
+                    @value-changed=${this._newPasswordChanged}
+                    required
+                    auto-validate
+                  ></paper-input>
+                  <paper-input
+                    .label=${this.hass.localize(
+                      "ui.panel.profile.change_password.confirm_new_password"
+                    )}
+                    name="passwordConfirm"
+                    type="password"
+                    .value=${this._passwordConfirm}
+                    @value-changed=${this._newPasswordConfirmChanged}
+                    required
+                    auto-validate
+                  ></paper-input>`
+              : ""}
+          </div>
+
+          <div class="card-actions">
+            ${this._loading
+              ? html`<div>
+                  <ha-circular-progress active></ha-circular-progress>
+                </div>`
+              : html`<mwc-button
+                  @click=${this._changePassword}
+                  .disabled=${!this._passwordConfirm}
+                  >${this.hass.localize(
+                    "ui.panel.profile.change_password.submit"
+                  )}</mwc-button
+                >`}
+          </div>
+        </ha-card>
+      </div>
+    `;
+  }
+
+  private _currentPasswordChanged(ev: CustomEvent) {
+    this._currentPassword = ev.detail.value;
+  }
+
+  private _newPasswordChanged(ev: CustomEvent) {
+    this._password = ev.detail.value;
+  }
+
+  private _newPasswordConfirmChanged(ev: CustomEvent) {
+    this._passwordConfirm = ev.detail.value;
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this.addEventListener("keypress", (ev) => {
+      this._statusMsg = undefined;
+      if (ev.keyCode === 13) {
+        this._changePassword();
+      }
+    });
+  }
+
+  private async _changePassword() {
+    this._statusMsg = undefined;
+    if (!this._currentPassword || !this._password || !this._passwordConfirm) {
+      return;
+    }
+
+    if (this._password !== this._passwordConfirm) {
+      this._errorMsg = this.hass.localize(
+        "ui.panel.profile.change_password.error_new_mismatch"
+      );
+      return;
+    }
+
+    if (this._currentPassword === this._password) {
+      this._errorMsg = this.hass.localize(
+        "ui.panel.profile.change_password.error_new_is_old"
+      );
+      return;
+    }
+
+    this._loading = true;
+    this._errorMsg = undefined;
+
+    try {
+      await this.hass.callWS({
+        type: "config/auth_provider/homeassistant/change_password",
+        current_password: this._currentPassword,
+        new_password: this._password,
+      });
+    } catch (err) {
+      this._errorMsg = err.message;
+      return;
+    } finally {
+      this._loading = false;
+    }
+
+    this._statusMsg = this.hass.localize(
+      "ui.panel.profile.change_password.success"
+    );
+    this._currentPassword = undefined;
+    this._password = undefined;
+    this._passwordConfirm = undefined;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .error {
+          color: var(--error-color);
+        }
+        .status {
+          color: var(--primary-color);
+        }
+        #currentPassword {
+          margin-top: -8px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-change-password-card": HaChangePasswordCard;
+  }
+}

src/translations/en.json

@@ -2897,7 +2897,10 @@
           "new_password": "New Password",
           "confirm_new_password": "Confirm New Password",
           "error_required": "Required",
-          "submit": "Submit"
+          "submit": "Submit",
+          "error_new_mismatch": "Entered new password values do not match",
+          "error_new_is_old": "New password must be different than current password",
+          "success": "Password changed successfully"
         },
         "mfa": {
           "header": "Multi-factor Authentication Modules",