Use ha-form for onboarding-create-user (#10604)

src/onboarding/onboarding-create-user.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
 import { genClientId } from "home-assistant-js-websocket";
 import {
   css,
@@ -9,168 +8,116 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { LocalizeFunc } from "../common/translations/localize";
+import "../components/ha-form/ha-form";
+import type { HaForm } from "../components/ha-form/ha-form";
+import { HaFormDataContainer, HaFormSchema } from "../components/ha-form/types";
 import { onboardUserStep } from "../data/onboarding";
 import { PolymerChangedEvent } from "../polymer-types";
 
+const CREATE_USER_SCHEMA: HaFormSchema[] = [
+  { type: "string", name: "name", required: true },
+  { type: "string", name: "username", required: true },
+  { type: "string", name: "password", required: true },
+  { type: "string", name: "password_confirm", required: true },
+];
+
 @customElement("onboarding-create-user")
 class OnboardingCreateUser extends LitElement {
   @property() public localize!: LocalizeFunc;
 
   @property() public language!: string;
 
-  @state() private _name = "";
-
-  @state() private _username = "";
-
-  @state() private _password = "";
-
-  @state() private _passwordConfirm = "";
-
   @state() private _loading = false;
 
-  @state() private _errorMsg?: string = undefined;
+  @state() private _errorMsg?: string;
+
+  @state() private _formError: Record<string, string> = {};
+
+  @state() private _newUser: HaFormDataContainer = {};
+
+  @query("ha-form", true) private _form?: HaForm;
 
   protected render(): TemplateResult {
     return html`
-    <p>
-      ${this.localize("ui.panel.page-onboarding.intro")}
-    </p>
+      <p>${this.localize("ui.panel.page-onboarding.intro")}</p>
+      <p>${this.localize("ui.panel.page-onboarding.user.intro")}</p>
 
-    <p>
-      ${this.localize("ui.panel.page-onboarding.user.intro")}
-    </p>
+      ${this._errorMsg
+        ? html`<ha-alert alert-type="error">${this._errorMsg}</ha-alert>`
+        : ""}
 
-    ${
-      this._errorMsg
-        ? html`
-            <p class="error">
-              ${this.localize(
-                `ui.panel.page-onboarding.user.error.${this._errorMsg}`
-              ) || this._errorMsg}
-            </p>
-          `
-        : ""
-    }
-
-    <form>
-      <paper-input
-        name="name"
-        label=${this.localize("ui.panel.page-onboarding.user.data.name")}
-        .value=${this._name}
+      <ha-form
+        .computeLabel=${this._computeLabel(this.localize)}
+        .data=${this._newUser}
+        .disabled=${this._loading}
+        .error=${this._formError}
+        .schema=${CREATE_USER_SCHEMA}
         @value-changed=${this._handleValueChanged}
-        required
-        auto-validate
-        autocapitalize='on'
-        .errorMessage=${this.localize(
-          "ui.panel.page-onboarding.user.required_field"
-        )}
-        @blur=${this._maybePopulateUsername}
-      ></paper-input>
+      ></ha-form>
 
-      <paper-input
-        name="username"
-        label=${this.localize("ui.panel.page-onboarding.user.data.username")}
-        value=${this._username}
-        @value-changed=${this._handleValueChanged}
-        required
-        auto-validate
-        autocapitalize='none'
-        .errorMessage=${this.localize(
-          "ui.panel.page-onboarding.user.required_field"
-        )}
-      ></paper-input>
-
-      <paper-input
-        name="password"
-        label=${this.localize("ui.panel.page-onboarding.user.data.password")}
-        value=${this._password}
-        @value-changed=${this._handleValueChanged}
-        required
-        type='password'
-        auto-validate
-        .errorMessage=${this.localize(
-          "ui.panel.page-onboarding.user.required_field"
-        )}
-      ></paper-input>
-
-      <paper-input
-        name="passwordConfirm"
-        label=${this.localize(
-          "ui.panel.page-onboarding.user.data.password_confirm"
-        )}
-        value=${this._passwordConfirm}
-        @value-changed=${this._handleValueChanged}
-        required
-        type='password'
-        .invalid=${
-          this._password !== "" &&
-          this._passwordConfirm !== "" &&
-          this._passwordConfirm !== this._password
-        }
-        .errorMessage=${this.localize(
-          "ui.panel.page-onboarding.user.error.password_not_match"
-        )}
-      ></paper-input>
-
-      <p class="action">
-        <mwc-button
-          raised
-          @click=${this._submitForm}
-          .disabled=${this._loading}
-        >
-          ${this.localize("ui.panel.page-onboarding.user.create_account")}
-        </mwc-button>
-      </p>
-    </div>
-  </form>
-`;
+      <mwc-button
+        raised
+        @click=${this._submitForm}
+        .disabled=${this._loading ||
+        !this._newUser.name ||
+        !this._newUser.username ||
+        !this._newUser.password}
+      >
+        ${this.localize("ui.panel.page-onboarding.user.create_account")}
+      </mwc-button>
+    `;
   }
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
-    setTimeout(
-      () => this.shadowRoot!.querySelector("paper-input")!.focus(),
-      100
-    );
+    setTimeout(() => this._form?.focus(), 100);
     this.addEventListener("keypress", (ev) => {
-      if (ev.keyCode === 13) {
+      if (
+        ev.keyCode === 13 &&
+        this._newUser.name &&
+        this._newUser.username &&
+        this._newUser.password &&
+        this._newUser.password_confirm
+      ) {
         this._submitForm(ev);
       }
     });
   }
 
-  private _handleValueChanged(ev: PolymerChangedEvent<string>): void {
-    const name = (ev.target as any).name;
-    this[`_${name}`] = ev.detail.value;
+  private _computeLabel(localize) {
+    return (schema: HaFormSchema) =>
+      localize(`ui.panel.page-onboarding.user.data.${schema.name}`);
+  }
+
+  private _handleValueChanged(
+    ev: PolymerChangedEvent<HaFormDataContainer>
+  ): void {
+    this._newUser = ev.detail.value;
+    this._maybePopulateUsername();
+    this._formError.password_confirm =
+      this._newUser.password !== this._newUser.password_confirm
+        ? this.localize(
+            "ui.panel.page-onboarding.user.error.password_not_match"
+          )
+        : "";
   }
 
   private _maybePopulateUsername(): void {
-    if (this._username) {
+    if (!this._newUser.name || this._newUser.name === this._newUser.username) {
       return;
     }
 
-    const parts = this._name.split(" ");
-
+    const parts = String(this._newUser.name).split(" ");
     if (parts.length) {
-      this._username = parts[0].toLowerCase();
+      this._newUser.username = parts[0].toLowerCase();
     }
   }
 
   private async _submitForm(ev): Promise<void> {
     ev.preventDefault();
-    if (!this._name || !this._username || !this._password) {
-      this._errorMsg = "required_fields";
-      return;
-    }
-
-    if (this._password !== this._passwordConfirm) {
-      this._errorMsg = "password_not_match";
-      return;
-    }
-
     this._loading = true;
     this._errorMsg = "";
 
@@ -179,9 +126,9 @@ class OnboardingCreateUser extends LitElement {
 
       const result = await onboardUserStep({
         client_id: clientId,
-        name: this._name,
-        username: this._username,
-        password: this._password,
+        name: String(this._newUser.name),
+        username: String(this._newUser.username),
+        password: String(this._newUser.password),
         language: this.language,
       });
 
@@ -199,13 +146,11 @@ class OnboardingCreateUser extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      .error {
-        color: red;
-      }
-
-      .action {
-        margin: 32px 0 16px;
+      mwc-button {
+        margin: 32px 0 0;
         text-align: center;
+        display: block;
+        text-align: right;
       }
     `;
   }

src/translations/en.json

@@ -3924,7 +3924,6 @@
           },
           "create_account": "Create Account",
           "error": {
-            "required_fields": "Fill in all required fields",
             "password_not_match": "Passwords don't match"
           }
         },