Move auth components from shadow DOM to light DOM

src/auth/ha-auth-flow.ts

@@ -1,27 +1,20 @@
+/* eslint-disable lit/prefer-static-styles */
 import "@material/mwc-button";
 import { genClientId } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  nothing,
-  PropertyValues,
-} from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-alert";
 import "../components/ha-checkbox";
 import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
-import "../components/ha-form/ha-form";
 import "../components/ha-formfield";
 import "../components/ha-markdown";
 import { AuthProvider, autocompleteLoginFields } from "../data/auth";
 import {
   DataEntryFlowStep,
   DataEntryFlowStepForm,
 } from "../data/data_entry_flow";
-import "./ha-password-manager-polyfill";
+import "./ha-auth-form";
 
 type State = "loading" | "error" | "step";
 
@@ -49,6 +42,10 @@ export class HaAuthFlow extends LitElement {
 
   @state() private _storeToken = false;
 
+  createRenderRoot() {
+    return this;
+  }
+
   willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
 
@@ -79,13 +76,17 @@ export class HaAuthFlow extends LitElement {
 
   protected render() {
     return html`
+      <style>
+        .action {
+          margin: 24px 0 8px;
+          text-align: center;
+        }
+        .store-token {
+          margin-top: 10px;
+          margin-left: -16px;
+        }
+      </style>
       <form>${this._renderForm()}</form>
-      <ha-password-manager-polyfill
-        .step=${this._step}
-        .stepData=${this._stepData}
-        @form-submitted=${this._handleSubmit}
-        @value-changed=${this._stepDataChanged}
-      ></ha-password-manager-polyfill>
     `;
   }
 
@@ -128,12 +129,6 @@ export class HaAuthFlow extends LitElement {
         (form as any).focus();
       }
     }, 100);
-
-    setTimeout(() => {
-      this.renderRoot.querySelector(
-        "ha-password-manager-polyfill"
-      )!.boundingRect = this.getBoundingClientRect();
-    }, 500);
   }
 
   private _renderForm() {
@@ -205,15 +200,15 @@ export class HaAuthFlow extends LitElement {
                 ></ha-markdown>
               `
             : nothing}
-          <ha-form
+          <ha-auth-form
             .data=${this._stepData}
             .schema=${autocompleteLoginFields(step.data_schema)}
             .error=${step.errors}
             .disabled=${this._submitting}
             .computeLabel=${this._computeLabelCallback(step)}
             .computeError=${this._computeErrorCallback(step)}
             @value-changed=${this._stepDataChanged}
-          ></ha-form>
+          ></ha-auth-form>
           ${this.clientId === genClientId() &&
           !["select_mfa_module", "mfa"].includes(step.step_id)
             ? html`
@@ -395,20 +390,6 @@ export class HaAuthFlow extends LitElement {
       this._submitting = false;
     }
   }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      .action {
-        margin: 24px 0 8px;
-        text-align: center;
-      }
-      /* Align with the rest of the form. */
-      .store-token {
-        margin-top: 10px;
-        margin-left: -16px;
-      }
-    `;
-  }
 }
 
 declare global {

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

@@ -0,0 +1,69 @@
+/* eslint-disable lit/prefer-static-styles */
+import { TemplateResult, html } from "lit";
+import { customElement } from "lit/decorators";
+import { HaFormString } from "../components/ha-form/ha-form-string";
+import "../components/ha-icon-button";
+import "./ha-auth-textfield";
+
+@customElement("ha-auth-form-string")
+export class HaAuthFormString extends HaFormString {
+  protected createRenderRoot() {
+    // add parent style to light dom
+    const style = document.createElement("style");
+    style.innerHTML = HaFormString.elementStyles as unknown as string;
+    this.append(style);
+    return this;
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <style>
+        ha-auth-form-string {
+          display: block;
+          position: relative;
+        }
+        ha-auth-form-string[own-margin] {
+          margin-bottom: 5px;
+        }
+        ha-auth-textfield {
+          display: block !important;
+        }
+      </style>
+      <ha-auth-textfield
+      .type=${
+        !this.isPassword
+          ? this.stringType
+          : this.unmaskedPassword
+          ? "text"
+          : "password"
+      }
+        .label=${this.label}
+        .value=${this.data || ""}
+        .helper=${this.helper}
+        helperPersistent
+        .disabled=${this.disabled}
+        .required=${this.schema.required}
+        .autoValidate=${this.schema.required}
+        .name=${this.schema.name}
+        .autocomplete=${this.schema.autocomplete}
+        .suffix=${
+          this.isPassword
+            ? // reserve some space for the icon.
+              html`<div style="width: 24px"></div>`
+            : this.schema.description?.suffix
+        }
+        .validationMessage=${this.schema.required ? "Required" : undefined}
+        @input=${this._valueChanged}
+        @change=${this._valueChanged}
+        ></ha-auth-textfield> 
+        ${this.renderIcon()}
+      </ha-auth-textfield>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-auth-form-string": HaAuthFormString;
+  }
+}

src/auth/ha-auth-form.ts

@@ -0,0 +1,30 @@
+/* eslint-disable lit/prefer-static-styles */
+import { customElement } from "lit/decorators";
+import { HaForm } from "../components/ha-form/ha-form";
+import "./ha-auth-form-string";
+
+@customElement("ha-auth-form")
+export class HaAuthForm extends HaForm {
+  protected fieldElementName(type: string): string {
+    if (type === "string") {
+      return `ha-auth-form-${type}`;
+    }
+    return super.fieldElementName(type);
+  }
+
+  protected createRenderRoot() {
+    // add parent style to light dom
+    const style = document.createElement("style");
+    style.innerHTML = HaForm.elementStyles as unknown as string;
+    this.append(style);
+    // attach it as soon as possible to make sure we fetch all events.
+    this.addValueChangedListener(this);
+    return this;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-auth-form": HaAuthForm;
+  }
+}