From 1b917a5b04e14f0ad19b4fdf4845f586865a150e Mon Sep 17 00:00:00 2001
From: Steve Repsher <steverep@users.noreply.github.com>
Date: Wed, 26 Oct 2022 10:10:19 -0400
Subject: [PATCH] Add autocomplete to login and MFA setup (#14065)

---
 src/auth/ha-auth-flow.ts                         |  4 ++--
 src/auth/ha-password-manager-polyfill.ts         |  6 +++++-
 src/components/ha-form/ha-form-string.ts         |  1 +
 src/components/ha-form/types.ts                  |  1 +
 src/data/auth.ts                                 | 16 ++++++++++++++++
 src/dialogs/config-flow/step-flow-form.ts        |  3 ++-
 .../profile/dialog-ha-mfa-module-setup-flow.ts   |  3 ++-
 7 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/auth/ha-auth-flow.ts b/src/auth/ha-auth-flow.ts
index 297eaeeb19..1fea597049 100644
--- a/src/auth/ha-auth-flow.ts
+++ b/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)}
diff --git a/src/auth/ha-password-manager-polyfill.ts b/src/auth/ha-password-manager-polyfill.ts
index a0f2488b78..2adb35c0e0 100644
--- a/src/auth/ha-password-manager-polyfill.ts
+++ b/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}
       />
     `;
diff --git a/src/components/ha-form/ha-form-string.ts b/src/components/ha-form/ha-form-string.ts
index 93d8c247c4..edc0a48754 100644
--- a/src/components/ha-form/ha-form-string.ts
+++ b/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>`
diff --git a/src/components/ha-form/types.ts b/src/components/ha-form/types.ts
index 6f0f2fd8b4..3e3c649670 100644
--- a/src/components/ha-form/types.ts
+++ b/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 {
diff --git a/src/data/auth.ts b/src/data/auth.ts
index aea90dd335..cf01f5990e 100644
--- a/src/data/auth.ts
+++ b/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
diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts
index 55996eb494..1a5581db86 100644
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/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}
diff --git a/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts b/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts
index f1fa578f8f..d1a6ec1937 100644
--- a/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts
+++ b/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}