Localize show_password in auth form (#19300)

* Localize show_password in auth form

* changes from review

src/auth/ha-auth-flow.ts

@@ -222,6 +222,7 @@ export class HaAuthFlow extends LitElement {
           </h1>
           ${this._computeStepDescription(step)}
           <ha-auth-form
+            .localize=${this.localize}
             .data=${this._stepData!}
             .schema=${autocompleteLoginFields(step.data_schema)}
             .error=${step.errors}

src/auth/ha-auth-form.ts

@@ -1,11 +1,23 @@
 /* eslint-disable lit/prefer-static-styles */
 import { html } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { HaForm } from "../components/ha-form/ha-form";
 import "./ha-auth-form-string";
+import { LocalizeFunc } from "../common/translations/localize";
+
+const localizeBaseKey = "ui.panel.page-authorize.form";
 
 @customElement("ha-auth-form")
 export class HaAuthForm extends HaForm {
+  @property({ attribute: false }) public localize?: LocalizeFunc;
+
+  protected getFormProperties(): Record<string, any> {
+    return {
+      localize: this.localize,
+      localizeBaseKey,
+    };
+  }
+
   protected fieldElementName(type: string): string {
     if (type === "string") {
       return `ha-auth-form-${type}`;

src/components/ha-form/ha-form-string.ts

@@ -19,13 +19,15 @@ import type {
   HaFormStringData,
   HaFormStringSchema,
 } from "./types";
-import { HomeAssistant } from "../../types";
+import { LocalizeFunc, LocalizeKeys } from "../../common/translations/localize";
 
 const MASKED_FIELDS = ["password", "secret", "token"];
 
 @customElement("ha-form-string")
 export class HaFormString extends LitElement implements HaFormElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
+  @property({ attribute: false }) public localize?: LocalizeFunc;
+
+  @property() public localizeBaseKey = "ui.components.selectors.text";
 
   @property() public schema!: HaFormStringSchema;
 
@@ -81,11 +83,11 @@ export class HaFormString extends LitElement implements HaFormElement {
     return html`
       <ha-icon-button
         toggles
-        .label=${this.hass?.localize(
-          this.unmaskedPassword
-            ? "ui.components.selectors.text.hide_password"
-            : "ui.components.selectors.text.show_password"
-        ) || (this.unmaskedPassword ? "Hide password" : "Show password")}
+        .label=${this.localize?.(
+          `${this.localizeBaseKey}.${
+            this.unmaskedPassword ? "hide_password" : "show_password"
+          }` as LocalizeKeys
+        )}
         @click=${this.toggleUnmaskedPassword}
         .path=${this.unmaskedPassword ? mdiEyeOff : mdiEye}
       ></ha-icon-button>

src/components/ha-form/ha-form.ts

@@ -39,7 +39,7 @@ const getWarning = (obj, item) => (obj && item.name ? obj[item.name] : null);
 
 @customElement("ha-form")
 export class HaForm extends LitElement implements HaFormElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public data!: HaFormDataContainer;
 
@@ -64,6 +64,10 @@ export class HaForm extends LitElement implements HaFormElement {
 
   @property() public localizeValue?: (key: string) => string;
 
+  protected getFormProperties(): Record<string, any> {
+    return {};
+  }
+
   public async focus() {
     await this.updateComplete;
     const root = this.renderRoot.querySelector(".root");
@@ -143,9 +147,11 @@ export class HaForm extends LitElement implements HaFormElement {
                   helper: this._computeHelper(item),
                   disabled: this.disabled || item.disabled || false,
                   hass: this.hass,
+                  localize: this.hass?.localize,
                   computeLabel: this.computeLabel,
                   computeHelper: this.computeHelper,
                   context: this._generateContext(item),
+                  ...this.getFormProperties(),
                 })}
           `;
         })}