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,7 +192,8 @@ 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">
+              <div class="person">
                 <ha-person-badge
                   .person=${this._persons[this._selectedUser]}
                 ></ha-person-badge>
@@ -199,10 +204,12 @@ export class HaLocalAuthFlow extends LitElement {
                   type="hidden"
                   name="username"
                   autocomplete="username"
+                  readonly
                   .value=${this.authProvider.users[this._selectedUser]}
                 />
                 <ha-auth-textfield
                   .type=${this._unmaskedPassword ? "text" : "password"}
+                  autocomplete="current-password"
                   id="password"
                   name="password"
                   .label=${this.localize(
@@ -210,23 +217,33 @@ export class HaLocalAuthFlow extends LitElement {
                   )}
                   required
                   autoValidate
-        autocomplete
                   iconTrailing
                   validationMessage="Required"
                 >
                   <ha-icon-button
                     toggles
-        .label=${
+                    .label=${this.localize(
-          this.localize(
                       this._unmaskedPassword
                         ? "ui.panel.page-authorize.form.hide_password"
                         : "ui.panel.page-authorize.form.show_password"
-          ) || (this._unmaskedPassword ? "Hide password" : "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>
                 <div class="action space-between">
                   <mwc-button
@@ -243,17 +260,8 @@ export class HaLocalAuthFlow extends LitElement {
                     ${this.localize("ui.panel.page-authorize.form.next")}
                   </mwc-button>
                 </div>
-              <div class="action">
+              </form>
-              <a class="forgot-password"
+            </div>`
-                  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>`
           : 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", {