Add particles to login, move forgot password link (#18868)

src/auth/ha-authorize.ts

@@ -279,6 +279,10 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
       );
     }
 
+    if (window.innerWidth > 450) {
+      import("../resources/particles");
+    }
+
     // If we are logging into the instance that is hosting this auth form
     // we will register the service worker to start preloading.
     if (url.host === location.host) {

src/auth/ha-local-auth-flow.ts

@@ -154,6 +154,10 @@ export class HaLocalAuthFlow extends LitElement {
         ha-button {
           --mdc-typography-button-text-transform: none;
         }
+        .forgot-password-container {
+          text-align: right;
+          padding: 8px 0 16px 0;
+        }
         a.forgot-password {
           color: var(--primary-color);
           text-decoration: none;
@@ -177,7 +181,7 @@ export class HaLocalAuthFlow extends LitElement {
       </style>
       ${this._error
         ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-        : ""}
+        : nothing}
       ${this._step
         ? html`<ha-auth-flow
             .clientId=${this.clientId}
@@ -188,72 +192,76 @@ export class HaLocalAuthFlow extends LitElement {
             .localize=${this.localize}
           ></ha-auth-flow>`
         : this._selectedUser
-          ? html`<div class="login-form"><div class="person">
+          ? html`<div class="login-form">
-              <ha-person-badge
+              <div class="person">
-                .person=${this._persons[this._selectedUser]}
+                <ha-person-badge
-              ></ha-person-badge>
+                  .person=${this._persons[this._selectedUser]}
-              <p>${this._persons[this._selectedUser].name}</p>
+                ></ha-person-badge>
-            </div>
+                <p>${this._persons[this._selectedUser].name}</p>
-            <form>
-              <input
-                type="hidden"
-                name="username"
-                autocomplete="username"
-                .value=${this.authProvider.users[this._selectedUser]}
-              />
-              <ha-auth-textfield
-              .type=${this._unmaskedPassword ? "text" : "password"}
-                id="password"
-                name="password"
-        .label=${this.localize(
-          "ui.panel.page-authorize.form.providers.homeassistant.step.init.data.password"
-        )}
-        required
-        autoValidate
-        autocomplete
-        iconTrailing
-        validationMessage="Required"
-              >
-              <ha-icon-button
-        toggles
-        .label=${
-          this.localize(
-            this._unmaskedPassword
-              ? "ui.panel.page-authorize.form.hide_password"
-              : "ui.panel.page-authorize.form.show_password"
-          ) || (this._unmaskedPassword ? "Hide password" : "Show password")
-        }
-        @click=${this._toggleUnmaskedPassword}
-        .path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
-      ></ha-icon-button>
-    </ha-auth-textfield>
-      </div>
-              <div class="action space-between">
-              <mwc-button
-                  @click=${this._restart}
-                  .disabled=${this._submitting}
-                >
-                  ${this.localize("ui.panel.page-authorize.form.previous")}
-                </mwc-button>
-              <mwc-button
-                  raised
-                  @click=${this._handleSubmit}
-                  .disabled=${this._submitting}
-                >
-                  ${this.localize("ui.panel.page-authorize.form.next")}
-                </mwc-button>
               </div>
-              <div class="action">
+              <form>
-              <a class="forgot-password"
+                <input
-                  href="https://www.home-assistant.io/docs/locked_out/#forgot-password"
+                  type="hidden"
-                  target="_blank"
+                  name="username"
-                  rel="noreferrer noopener"
+                  autocomplete="username"
-                  >${this.localize(
+                  readonly
-                    "ui.panel.page-authorize.forgot_password"
+                  .value=${this.authProvider.users[this._selectedUser]}
-                  )}</a
+                />
+                <ha-auth-textfield
+                  .type=${this._unmaskedPassword ? "text" : "password"}
+                  autocomplete="current-password"
+                  id="password"
+                  name="password"
+                  .label=${this.localize(
+                    "ui.panel.page-authorize.form.providers.homeassistant.step.init.data.password"
+                  )}
+                  required
+                  autoValidate
+                  iconTrailing
+                  validationMessage="Required"
                 >
+                  <ha-icon-button
+                    toggles
+                    .label=${this.localize(
+                      this._unmaskedPassword
+                        ? "ui.panel.page-authorize.form.hide_password"
+                        : "ui.panel.page-authorize.form.show_password"
+                    ) ||
+                    (this._unmaskedPassword
+                      ? "Hide password"
+                      : "Show password")}
+                    @click=${this._toggleUnmaskedPassword}
+                    .path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
+                  ></ha-icon-button>
+                </ha-auth-textfield>
+                <div class="forgot-password-container">
+                  <a
+                    class="forgot-password"
+                    href="https://www.home-assistant.io/docs/locked_out/#forgot-password"
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    >${this.localize(
+                      "ui.panel.page-authorize.forgot_password"
+                    )}</a
+                  >
                 </div>
-            </form>`
+                <div class="action space-between">
+                  <mwc-button
+                    @click=${this._restart}
+                    .disabled=${this._submitting}
+                  >
+                    ${this.localize("ui.panel.page-authorize.form.previous")}
+                  </mwc-button>
+                  <mwc-button
+                    raised
+                    @click=${this._handleSubmit}
+                    .disabled=${this._submitting}
+                  >
+                    ${this.localize("ui.panel.page-authorize.form.next")}
+                  </mwc-button>
+                </div>
+              </form>
+            </div>`
           : html`<h1>
                 ${this.localize("ui.panel.page-authorize.welcome_home")}
               </h1>

src/onboarding/ha-onboarding.ts

@@ -218,7 +218,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
       this._handleProgress(ev)
     );
     if (window.innerWidth > 450) {
-      import("./particles");
+      import("../resources/particles");
     }
     makeDialogManager(this, this.shadowRoot!);
     import("../components/ha-language-picker");

src/resources/particles.ts

@@ -1,6 +1,6 @@
 import { tsParticles } from "tsparticles-engine";
 import { loadLinksPreset } from "tsparticles-preset-links";
-import { DEFAULT_PRIMARY_COLOR } from "../resources/styles-data";
+import { DEFAULT_PRIMARY_COLOR } from "./styles-data";
 
 loadLinksPreset(tsParticles).then(() => {
   tsParticles.load("particles", {