fix: Check password strength on password auto-fill (#2148)

Fixes password strength not being checked when new passwords are
auto-filled, resulting in submit buttons remaining disabled.

---------

Co-authored-by: SuaYoo <SuaYoo@users.noreply.github.com>
Co-authored-by: emma <hi@emma.cafe>

frontend/src/features/accounts/sign-up-form.ts

@@ -1,7 +1,7 @@
 import { localized, msg, str } from "@lit/localize";
 import type { SlInput } from "@shoelace-style/shoelace";
 import type { ZxcvbnResult } from "@zxcvbn-ts/core";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import debounce from "lodash/fp/debounce";
 
@@ -54,6 +54,9 @@ export class SignUpForm extends LiteElement {
   @state()
   private showLoginLink = false;
 
+  @query('sl-input[name="password"]')
+  private readonly password?: SlInput | null;
+
   protected firstUpdated() {
     void PasswordService.setOptions();
   }
@@ -121,7 +124,7 @@ export class SignUpForm extends LiteElement {
             passwordToggle
             class="hide-required-content"
             required
-            @input=${this.onPasswordInput as UnderlyingFunction<
+            @sl-input=${this.onPasswordInput as UnderlyingFunction<
               typeof this.onPasswordInput
             >}
           >
@@ -174,8 +177,8 @@ export class SignUpForm extends LiteElement {
     </div>
   `;
 
-  private readonly onPasswordInput = debounce(150)(async (e: InputEvent) => {
-    const { value } = e.target as SlInput;
+  private readonly onPasswordInput = debounce(150)(async () => {
+    const value = this.password?.value;
     if (!value || value.length < 4) {
       this.pwStrengthResults = null;
       return;

frontend/src/pages/account-settings.ts

@@ -3,7 +3,7 @@ import type { SlInput, SlSelectEvent } from "@shoelace-style/shoelace";
 import { serialize } from "@shoelace-style/shoelace/dist/utilities/form.js";
 import type { ZxcvbnResult } from "@zxcvbn-ts/core";
 import { nothing, type PropertyValues } from "lit";
-import { customElement, property, queryAsync, state } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { choose } from "lit/directives/choose.js";
 import { when } from "lit/directives/when.js";
 import debounce from "lodash/fp/debounce";
@@ -112,8 +112,8 @@ export class AccountSettings extends LiteElement {
   @state()
   private pwStrengthResults: null | ZxcvbnResult = null;
 
-  @queryAsync('sl-input[name="password"]')
-  private readonly passwordInput?: Promise<SlInput | null>;
+  @query('sl-input[name="newPassword"]')
+  private readonly newPassword?: SlInput | null;
 
   private get activeTab() {
     return this.tab && Object.values(Tab).includes(this.tab as unknown as Tab)
@@ -257,7 +257,7 @@ export class AccountSettings extends LiteElement {
             name="password"
             label=${msg("Enter your current password")}
             type="password"
-            autocomplete="off"
+            autocomplete="current-password"
             password-toggle
             required
           ></sl-input>
@@ -269,7 +269,7 @@ export class AccountSettings extends LiteElement {
             password-toggle
             minlength="8"
             required
-            @input=${this.onPasswordInput as UnderlyingFunction<
+            @sl-input=${this.onPasswordInput as UnderlyingFunction<
               typeof this.onPasswordInput
             >}
           ></sl-input>
@@ -375,8 +375,8 @@ export class AccountSettings extends LiteElement {
     </div>
   `;
 
-  private readonly onPasswordInput = debounce(150)(async (e: InputEvent) => {
-    const { value } = e.target as SlInput;
+  private readonly onPasswordInput = debounce(150)(async () => {
+    const value = this.newPassword?.value;
     if (!value || value.length < 4) {
       this.pwStrengthResults = null;
       return;

frontend/src/pages/reset-password.ts

@@ -1,7 +1,7 @@
 import { localized, msg, str } from "@lit/localize";
 import type { SlInput } from "@shoelace-style/shoelace";
 import type { ZxcvbnResult } from "@zxcvbn-ts/core";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import debounce from "lodash/fp/debounce";
 
@@ -28,6 +28,9 @@ export class ResetPassword extends LiteElement {
   @state()
   private isSubmitting = false;
 
+  @query('sl-input[name="newPassword"]')
+  private readonly newPassword?: SlInput | null;
+
   protected firstUpdated() {
     void PasswordService.setOptions();
   }
@@ -52,16 +55,15 @@ export class ResetPassword extends LiteElement {
             <div class="mb-5">
               <sl-input
                 id="password"
-                name="password"
+                name="newPassword"
                 type="password"
                 label="${msg("Enter new password")}"
-                help-text=${msg("Must be between 8-64 characters")}
                 minlength="8"
                 autocomplete="new-password"
                 passwordToggle
                 class="hide-required-content"
                 required
-                @input=${this.onPasswordInput as UnderlyingFunction<
+                @sl-input=${this.onPasswordInput as UnderlyingFunction<
                   typeof this.onPasswordInput
                 >}
               >
@@ -110,8 +112,8 @@ export class ResetPassword extends LiteElement {
     </div>
   `;
 
-  private readonly onPasswordInput = debounce(150)(async (e: InputEvent) => {
-    const { value } = e.target as SlInput;
+  private readonly onPasswordInput = debounce(150)(async () => {
+    const value = this.newPassword?.value;
     if (!value || value.length < 4) {
       this.pwStrengthResults = null;
       return;
@@ -124,7 +126,7 @@ export class ResetPassword extends LiteElement {
     this.isSubmitting = true;
 
     const formData = new FormData(event.target as HTMLFormElement);
-    const password = formData.get("password") as string;
+    const password = formData.get("newPassword") as string;
 
     const resp = await fetch("/api/auth/reset-password", {
       method: "POST",

frontend/xliff/es.xlf

@@ -3235,9 +3235,6 @@
       <trans-unit id="sf151c44c3a52a448">
         <source>Enter new password</source>
       </trans-unit>
-      <trans-unit id="sf6c0a694575fb0a6">
-        <source>Must be between 8-64 characters</source>
-      </trans-unit>
       <trans-unit id="s8daf047a917f4cc4">
         <source>Choose a strong password between <x equiv-text="${PASSWORD_MINLENGTH}" id="0"/>-<x equiv-text="${PASSWORD_MAXLENGTH}" id="1"/> characters.</source>
       </trans-unit>