Add autocomplete to onboarding, cloud, and password change (#14040)

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

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(

src/data/selector.ts

@@ -232,6 +232,7 @@ export interface StringSelector {
       | "datetime-local"
       | "color";
     suffix?: string;
+    autofill?: string;
   };
 }
 

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" } },
   },
 ];
 

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}

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}

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",
       },
     },
   },

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