Add autocomplete to login and MFA setup (#14065)

src/auth/ha-auth-flow.ts

@@ -15,7 +15,7 @@ import { computeInitialHaFormData } from "../components/ha-form/compute-initial-
 import "../components/ha-form/ha-form";
 import "../components/ha-formfield";
 import "../components/ha-markdown";
-import { AuthProvider } from "../data/auth";
+import { AuthProvider, autocompleteLoginFields } from "../data/auth";
 import {
   DataEntryFlowStep,
   DataEntryFlowStepForm,
@@ -204,7 +204,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
             : html``}
           <ha-form
             .data=${this._stepData}
-            .schema=${step.data_schema}
+            .schema=${autocompleteLoginFields(step.data_schema)}
             .error=${step.errors}
             .disabled=${this._submitting}
             .computeLabel=${this._computeLabelCallback(step)}

src/auth/ha-password-manager-polyfill.ts

@@ -3,6 +3,7 @@ import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HaFormSchema } from "../components/ha-form/types";
+import { autocompleteLoginFields } from "../data/auth";
 import type { DataEntryFlowStep } from "../data/data_entry_flow";
 
 declare global {
@@ -69,7 +70,9 @@ export class HaPasswordManagerPolyfill extends LitElement {
           aria-hidden="true"
           @submit=${this._handleSubmit}
         >
-          ${this.step.data_schema.map((input) => this.render_input(input))}
+          ${autocompleteLoginFields(this.step.data_schema).map((input) =>
+            this.render_input(input)
+          )}
           <input type="submit" />
           <style>
             ${this.styles}
@@ -91,6 +94,7 @@ export class HaPasswordManagerPolyfill extends LitElement {
         .id=${schema.name}
         .type=${inputType}
         .value=${this.stepData[schema.name] || ""}
+        .autocomplete=${schema.autocomplete}
         @input=${this._valueChanged}
       />
     `;

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

@@ -60,6 +60,7 @@ export class HaFormString extends LitElement implements HaFormElement {
         .disabled=${this.disabled}
         .required=${this.schema.required}
         .autoValidate=${this.schema.required}
+        .autocomplete=${this.schema.autocomplete}
         .suffix=${isPassword
           ? // reserve some space for the icon.
             html`<div style="width: 24px"></div>`

src/components/ha-form/types.ts

@@ -71,6 +71,7 @@ export interface HaFormFloatSchema extends HaFormBaseSchema {
 export interface HaFormStringSchema extends HaFormBaseSchema {
   type: "string";
   format?: string;
+  autocomplete?: string;
 }
 
 export interface HaFormBooleanSchema extends HaFormBaseSchema {

src/data/auth.ts

@@ -1,3 +1,4 @@
+import { HaFormSchema } from "../components/ha-form/types";
 import { HomeAssistant } from "../types";
 
 export interface AuthUrlSearchParams {
@@ -22,6 +23,21 @@ export interface SignedPath {
 
 export const hassUrl = `${location.protocol}//${location.host}`;
 
+export const autocompleteLoginFields = (schema: HaFormSchema[]) =>
+  schema.map((field) => {
+    if (field.type !== "string") return field;
+    switch (field.name) {
+      case "username":
+        return { ...field, autocomplete: "username" };
+      case "password":
+        return { ...field, autocomplete: "current-password" };
+      case "code":
+        return { ...field, autocomplete: "one-time-code" };
+      default:
+        return field;
+    }
+  });
+
 export const getSignedPath = (
   hass: HomeAssistant,
   path: string

src/dialogs/config-flow/step-flow-form.ts

@@ -16,6 +16,7 @@ import { computeInitialHaFormData } from "../../components/ha-form/compute-initi
 import "../../components/ha-form/ha-form";
 import type { HaFormSchema } from "../../components/ha-form/types";
 import "../../components/ha-markdown";
+import { autocompleteLoginFields } from "../../data/auth";
 import type { DataEntryFlowStepForm } from "../../data/data_entry_flow";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
@@ -51,7 +52,7 @@ class StepFlowForm extends LitElement {
           .data=${stepData}
           .disabled=${this._loading}
           @value-changed=${this._stepDataChanged}
-          .schema=${step.data_schema}
+          .schema=${autocompleteLoginFields(step.data_schema)}
           .error=${step.errors}
           .computeLabel=${this._labelCallback}
           .computeHelper=${this._helperCallback}

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

@@ -5,6 +5,7 @@ import "../../components/ha-circular-progress";
 import "../../components/ha-dialog";
 import "../../components/ha-form/ha-form";
 import "../../components/ha-markdown";
+import { autocompleteLoginFields } from "../../data/auth";
 import {
   DataEntryFlowStep,
   DataEntryFlowStepForm,
@@ -114,7 +115,7 @@ class HaMfaModuleSetupFlow extends LitElement {
                     <ha-form
                       .hass=${this.hass}
                       .data=${this._stepData}
-                      .schema=${this._step.data_schema}
+                      .schema=${autocompleteLoginFields(this._step.data_schema)}
                       .error=${this._step.errors}
                       .computeLabel=${this._computeLabel}
                       .computeError=${this._computeError}