Implement missing function for password field

home-assistant · Sep 27, 2024 · 7ab1133 · 7ab1133
1 parent 77abfd3
commit 7ab1133
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/src/components/ha-password-field.ts b/src/components/ha-password-field.ts
@@ -1,10 +1,17 @@
 import { TextAreaCharCounter } from "@material/mwc-textfield/mwc-textfield-base";
 import { mdiEye, mdiEyeOff } from "@mdi/js";
 import { LitElement, css, html } from "lit";
-import { customElement, eventOptions, property, state } from "lit/decorators";
+import {
+  customElement,
+  eventOptions,
+  property,
+  query,
+  state,
+} from "lit/decorators";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
 import "./ha-textfield";
+import type { HaTextField } from "./ha-textfield";
 
 @customElement("ha-password-field")
 export class HaPasswordField extends LitElement {
@@ -75,6 +82,8 @@ export class HaPasswordField extends LitElement {
 
   @state() private _unmaskedPassword = false;
 
+  @query("ha-textfield") private _textField!: HaTextField;
+
   protected render() {
     return html`<ha-textfield
         .invalid=${this.invalid}
@@ -122,6 +131,22 @@ export class HaPasswordField extends LitElement {
       ></ha-icon-button>`;
   }
 
+  public checkValidity(): boolean {
+    return this._textField.checkValidity();
+  }
+
+  public reportValidity(): boolean {
+    return this._textField.reportValidity();
+  }
+
+  public setCustomValidity(message: string): void {
+    return this._textField.setCustomValidity(message);
+  }
+
+  public layout(): Promise<void> {
+    return this._textField.layout();
+  }
+
   private _toggleUnmaskedPassword(): void {
     this._unmaskedPassword = !this._unmaskedPassword;
   }

diff --git a/src/panels/config/cloud/login/cloud-login.ts b/src/panels/config/cloud/login/cloud-login.ts
@@ -1,17 +1,20 @@
 import "@material/mwc-button";
 import "@material/mwc-list/mwc-list";
+import { mdiDeleteForever, mdiDotsVertical } from "@mdi/js";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { mdiDeleteForever, mdiDotsVertical } from "@mdi/js";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { navigate } from "../../../../common/navigate";
 import "../../../../components/buttons/ha-progress-button";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon-next";
 import "../../../../components/ha-list-item";
-import type { HaTextField } from "../../../../components/ha-textfield";
+import "../../../../components/ha-password-field";
+import type { HaPasswordField } from "../../../../components/ha-password-field";
 import "../../../../components/ha-textfield";
+import type { HaTextField } from "../../../../components/ha-textfield";
+import { setAssistPipelinePreferred } from "../../../../data/assist_pipeline";
 import { cloudLogin, removeCloudData } from "../../../../data/cloud";
 import {
   showAlertDialog,
@@ -21,8 +24,6 @@ import "../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import "../../ha-config-section";
-import { setAssistPipelinePreferred } from "../../../../data/assist_pipeline";
-import "../../../../components/ha-password-field";
 
 @customElement("cloud-login")
 export class CloudLogin extends LitElement {
@@ -44,7 +45,7 @@ export class CloudLogin extends LitElement {
 
   @query("#email", true) private _emailField!: HaTextField;
 
-  @query("#password", true) private _passwordField!: HaTextField;
+  @query("#password", true) private _passwordField!: HaPasswordField;
 
   protected render(): TemplateResult {
     return html`