From a06c9d0cc67945638aed47894eb21e625bd5c1bf Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Tue, 16 Jan 2024 13:39:35 -0800
Subject: [PATCH] Localize show_password in auth form (#19300)

* Localize show_password in auth form

* changes from review
---
 src/auth/ha-auth-flow.ts                 |  1 +
 src/auth/ha-auth-form.ts                 | 14 +++++++++++++-
 src/components/ha-form/ha-form-string.ts | 16 +++++++++-------
 src/components/ha-form/ha-form.ts        |  8 +++++++-
 4 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/auth/ha-auth-flow.ts b/src/auth/ha-auth-flow.ts
index d8d18b4ef2..30b0e2176a 100644
--- a/src/auth/ha-auth-flow.ts
+++ b/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}
diff --git a/src/auth/ha-auth-form.ts b/src/auth/ha-auth-form.ts
index e2975f82af..7d8a99f31e 100644
--- a/src/auth/ha-auth-form.ts
+++ b/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}`;
diff --git a/src/components/ha-form/ha-form-string.ts b/src/components/ha-form/ha-form-string.ts
index ee433e3fa1..83b4c69f39 100644
--- a/src/components/ha-form/ha-form-string.ts
+++ b/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>
diff --git a/src/components/ha-form/ha-form.ts b/src/components/ha-form/ha-form.ts
index 9fcc82aff6..f4eed03d9a 100644
--- a/src/components/ha-form/ha-form.ts
+++ b/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(),
                 })}
           `;
         })}