Convert HaFormSchemas to use selectors (#11589)

gallery/src/pages/components/ha-selector.ts

@@ -50,7 +50,11 @@ const SCHEMAS: {
       action: { name: "Action", selector: { action: {} } },
       text: {
         name: "Text",
-        selector: { text: { multiline: false } },
+        selector: { text: {} },
+      },
+      password: {
+        name: "Password",
+        selector: { text: { type: "password" } },
       },
       text_multiline: {
         name: "Text multiline",

hassio/src/dialogs/registries/dialog-hassio-registries.ts

@@ -19,22 +19,21 @@ import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { RegistriesDialogParams } from "./show-dialog-registries";
 
-const SCHEMA = [
+const SCHEMA: HaFormSchema[] = [
   {
-    type: "string",
     name: "registry",
     required: true,
+    selector: { text: {} },
   },
   {
-    type: "string",
     name: "username",
     required: true,
+    selector: { text: {} },
   },
   {
-    type: "string",
     name: "password",
     required: true,
-    format: "password",
+    selector: { text: { type: "password" } },
   },
 ];
 

src/components/ha-selector/ha-selector-text.ts

@@ -1,10 +1,12 @@
+import "@material/mwc-textarea/mwc-textarea";
+import "@material/mwc-textfield/mwc-textfield";
+import { mdiEye, mdiEyeOff } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { StringSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
-import "@material/mwc-textfield/mwc-textfield";
+import "../ha-icon-button";
-import "@material/mwc-textarea/mwc-textarea";
 
 @customElement("ha-selector-text")
 export class HaTextSelector extends LitElement {
@@ -20,6 +22,8 @@ export class HaTextSelector extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @state() private _unmaskedPassword = false;
+
   protected render() {
     if (this.selector.text?.multiline) {
       return html`<mwc-textarea
@@ -38,10 +42,27 @@ export class HaTextSelector extends LitElement {
         .value=${this.value || ""}
         .placeholder=${this.placeholder || ""}
         .disabled=${this.disabled}
+        .type=${this._unmaskedPassword ? "text" : this.selector.text?.type}
         @input=${this._handleChange}
         .label=${this.label || ""}
+        .suffix=${this.selector.text?.type === "password"
+          ? // reserve some space for the icon.
+            html`<div style="width: 24px"></div>`
+          : this.selector.text?.suffix}
         required
-    ></mwc-textfield>`;
+      ></mwc-textfield>
+      ${this.selector.text?.type === "password"
+        ? html`<ha-icon-button
+            toggles
+            .label=${`${this._unmaskedPassword ? "Hide" : "Show"} password`}
+            @click=${this._toggleUnmaskedPassword}
+            .path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
+          ></ha-icon-button>`
+        : ""}`;
+  }
+
+  private _toggleUnmaskedPassword(): void {
+    this._unmaskedPassword = !this._unmaskedPassword;
   }
 
   private _handleChange(ev) {
@@ -54,10 +75,22 @@ export class HaTextSelector extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      :host {
+        display: block;
+        position: relative;
+      }
       mwc-textfield,
       mwc-textarea {
         width: 100%;
       }
+      ha-icon-button {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        --mdc-icon-button-size: 24px;
+        --mdc-icon-size: 20px;
+        color: var(--secondary-text-color);
+      }
     `;
   }
 }

src/data/selector.ts

@@ -95,7 +95,22 @@ export interface ActionSelector {
 
 export interface StringSelector {
   text: {
-    multiline: boolean;
+    multiline?: boolean;
+    type?:
+      | "number"
+      | "text"
+      | "search"
+      | "tel"
+      | "url"
+      | "email"
+      | "password"
+      | "date"
+      | "month"
+      | "week"
+      | "time"
+      | "datetime-local"
+      | "color";
+    suffix?: string;
   };
 }
 

src/onboarding/onboarding-create-user.ts

@@ -18,10 +18,18 @@ import { onboardUserStep } from "../data/onboarding";
 import { PolymerChangedEvent } from "../polymer-types";
 
 const CREATE_USER_SCHEMA: HaFormSchema[] = [
-  { type: "string", name: "name", required: true },
+  { name: "name", required: true, selector: { text: {} } },
-  { type: "string", name: "username", required: true },
+  { name: "username", required: true, selector: { text: {} } },
-  { type: "string", name: "password", required: true },
+  {
-  { type: "string", name: "password_confirm", required: true },
+    name: "password",
+    required: true,
+    selector: { text: { type: "password" } },
+  },
+  {
+    name: "password_confirm",
+    required: true,
+    selector: { text: { type: "password" } },
+  },
 ];
 
 @customElement("onboarding-create-user")

src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts

@@ -106,7 +106,7 @@ class ZHAConfigDashboard extends LitElement {
         </ha-card>
         ${this._configuration
           ? Object.entries(this._configuration.schemas).map(
-              ([section, schema]) => html` <ha-card
+              ([section, schema]) => html`<ha-card
                 header=${this.hass.localize(
                   `component.zha.config_panel.${section}.title`
                 )}

src/panels/profile/dialog-ha-mfa-module-setup-flow.ts

@@ -101,7 +101,7 @@ class HaMfaModuleSetupFlow extends LitElement {
                     )}
                   </p>`
                 : this._step.type === "form"
-                ? html` <ha-markdown
+                ? html`<ha-markdown
                       allowsvg
                       breaks
                       .content=${this.hass.localize(