diff --git a/frontend/src/features/accounts/sign-up-form.ts b/frontend/src/features/accounts/sign-up-form.ts index 5fe15a01..576c15f4 100644 --- a/frontend/src/features/accounts/sign-up-form.ts +++ b/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 { `; - 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; diff --git a/frontend/src/pages/account-settings.ts b/frontend/src/pages/account-settings.ts index 14ce5fbf..59e191cc 100644 --- a/frontend/src/pages/account-settings.ts +++ b/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; + @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 > @@ -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 >} > @@ -375,8 +375,8 @@ export class AccountSettings extends LiteElement { `; - 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; diff --git a/frontend/src/pages/reset-password.ts b/frontend/src/pages/reset-password.ts index cd83f10d..c264dc17 100644 --- a/frontend/src/pages/reset-password.ts +++ b/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 {
} > @@ -110,8 +112,8 @@ export class ResetPassword extends LiteElement {
`; - 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", diff --git a/frontend/xliff/es.xlf b/frontend/xliff/es.xlf index 9cecfcd5..0221d886 100644 --- a/frontend/xliff/es.xlf +++ b/frontend/xliff/es.xlf @@ -3235,9 +3235,6 @@ Enter new password - - Must be between 8-64 characters - Choose a strong password between - characters.