From a4fcb743fad7dd0d3ca26a31ff376874f30b5577 Mon Sep 17 00:00:00 2001
From: Steve Repsher <steverep@users.noreply.github.com>
Date: Mon, 10 Oct 2022 13:54:16 -0400
Subject: [PATCH] Add autocomplete to onboarding, cloud, and password change
 (#14040)

---
 src/components/ha-selector/ha-selector-text.ts       |  3 ++-
 src/components/ha-textfield.ts                       |  9 +++++++++
 src/data/selector.ts                                 |  1 +
 src/onboarding/onboarding-create-user.ts             | 12 ++++++++----
 src/panels/config/cloud/login/cloud-login.ts         |  2 ++
 src/panels/config/cloud/register/cloud-register.ts   |  2 ++
 .../config/users/dialog-admin-change-password.ts     |  2 ++
 src/panels/profile/ha-change-password-card.ts        |  3 +++
 8 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/ha-selector/ha-selector-text.ts b/src/components/ha-selector/ha-selector-text.ts
index dd47b2c27c7b..003775832d46 100644
--- a/src/components/ha-selector/ha-selector-text.ts
+++ b/src/components/ha-selector/ha-selector-text.ts
@@ -39,7 +39,7 @@ export class HaTextSelector extends LitElement {
         .disabled=${this.disabled}
         @input=${this._handleChange}
         autocapitalize="none"
-        autocomplete="off"
+        .autocomplete=${this.selector.text.autofill}
         spellcheck="false"
         .required=${this.required}
         autogrow
@@ -59,6 +59,7 @@ export class HaTextSelector extends LitElement {
             html`<div style="width: 24px"></div>`
           : this.selector.text?.suffix}
         .required=${this.required}
+        .autocomplete=${this.selector.text.autofill}
       ></ha-textfield>
       ${this.selector.text?.type === "password"
         ? html`<ha-icon-button
diff --git a/src/components/ha-textfield.ts b/src/components/ha-textfield.ts
index 0849270fd56e..dbfbc1cc38ec 100644
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@@ -15,6 +15,8 @@ export class HaTextField extends TextFieldBase {
   // @ts-ignore
   @property({ type: Boolean }) public iconTrailing?: boolean;
 
+  @property() public autocomplete?: string;
+
   override updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
     if (
@@ -27,6 +29,13 @@ export class HaTextField extends TextFieldBase {
       );
       this.reportValidity();
     }
+    if (changedProperties.has("autocomplete")) {
+      if (this.autocomplete) {
+        this.formElement.setAttribute("autocomplete", this.autocomplete);
+      } else {
+        this.formElement.removeAttribute("autocomplete");
+      }
+    }
   }
 
   protected override renderIcon(
diff --git a/src/data/selector.ts b/src/data/selector.ts
index c82a8e3a06ef..d687fad157f6 100644
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -232,6 +232,7 @@ export interface StringSelector {
       | "datetime-local"
       | "color";
     suffix?: string;
+    autofill?: string;
   };
 }
 
diff --git a/src/onboarding/onboarding-create-user.ts b/src/onboarding/onboarding-create-user.ts
index ed85129ffdb0..dc5082cba02a 100644
--- a/src/onboarding/onboarding-create-user.ts
+++ b/src/onboarding/onboarding-create-user.ts
@@ -18,17 +18,21 @@ import { onboardUserStep } from "../data/onboarding";
 import { PolymerChangedEvent } from "../polymer-types";
 
 const CREATE_USER_SCHEMA: HaFormSchema[] = [
-  { name: "name", required: true, selector: { text: {} } },
-  { name: "username", required: true, selector: { text: {} } },
+  { name: "name", required: true, selector: { text: { autofill: "name" } } },
+  {
+    name: "username",
+    required: true,
+    selector: { text: { autofill: "username" } },
+  },
   {
     name: "password",
     required: true,
-    selector: { text: { type: "password" } },
+    selector: { text: { type: "password", autofill: "new-password" } },
   },
   {
     name: "password_confirm",
     required: true,
-    selector: { text: { type: "password" } },
+    selector: { text: { type: "password", autofill: "new-password" } },
   },
 ];
 
diff --git a/src/panels/config/cloud/login/cloud-login.ts b/src/panels/config/cloud/login/cloud-login.ts
index a62d4c1366f4..c2e56e635a26 100644
--- a/src/panels/config/cloud/login/cloud-login.ts
+++ b/src/panels/config/cloud/login/cloud-login.ts
@@ -114,6 +114,7 @@ export class CloudLogin extends LitElement {
                   )}
                   id="email"
                   type="email"
+                  autocomplete="username"
                   required
                   .value=${this.email}
                   @keydown=${this._keyDown}
@@ -129,6 +130,7 @@ export class CloudLogin extends LitElement {
                   )}
                   .value=${this._password || ""}
                   type="password"
+                  autocomplete="current-password"
                   required
                   minlength="8"
                   @keydown=${this._keyDown}
diff --git a/src/panels/config/cloud/register/cloud-register.ts b/src/panels/config/cloud/register/cloud-register.ts
index 31ee472ff88d..319e557c999e 100644
--- a/src/panels/config/cloud/register/cloud-register.ts
+++ b/src/panels/config/cloud/register/cloud-register.ts
@@ -136,6 +136,7 @@ export class CloudRegister extends LitElement {
                     "ui.panel.config.cloud.register.email_address"
                   )}
                   type="email"
+                  autocomplete="email"
                   required
                   .value=${this.email}
                   @keydown=${this._keyDown}
@@ -148,6 +149,7 @@ export class CloudRegister extends LitElement {
                   label="Password"
                   .value=${this._password}
                   type="password"
+                  autocomplete="new-password"
                   minlength="8"
                   required
                   @keydown=${this._keyDown}
diff --git a/src/panels/config/users/dialog-admin-change-password.ts b/src/panels/config/users/dialog-admin-change-password.ts
index 227d4fb05799..c695d56230d8 100644
--- a/src/panels/config/users/dialog-admin-change-password.ts
+++ b/src/panels/config/users/dialog-admin-change-password.ts
@@ -20,6 +20,7 @@ const SCHEMA = [
     selector: {
       text: {
         type: "password",
+        autofill: "new-password",
       },
     },
   },
@@ -29,6 +30,7 @@ const SCHEMA = [
     selector: {
       text: {
         type: "password",
+        autofill: "new-password",
       },
     },
   },
diff --git a/src/panels/profile/ha-change-password-card.ts b/src/panels/profile/ha-change-password-card.ts
index e0ad18412a8d..a9ddfee225ae 100644
--- a/src/panels/profile/ha-change-password-card.ts
+++ b/src/panels/profile/ha-change-password-card.ts
@@ -55,6 +55,7 @@ class HaChangePasswordCard extends LitElement {
                 "ui.panel.profile.change_password.current_password"
               )}
               type="password"
+              autocomplete="current-password"
               .value=${this._currentPassword}
               @input=${this._currentPasswordChanged}
               required
@@ -67,6 +68,7 @@ class HaChangePasswordCard extends LitElement {
                     )}
                     name="password"
                     type="password"
+                    autocomplete="new-password"
                     .value=${this._password}
                     @change=${this._newPasswordChanged}
                     required
@@ -78,6 +80,7 @@ class HaChangePasswordCard extends LitElement {
                     )}
                     name="passwordConfirm"
                     type="password"
+                    autocomplete="new-password"
                     .value=${this._passwordConfirm}
                     @input=${this._newPasswordConfirmChanged}
                     required