Reset password: Add inline validation messaging for password pattern requirements (closes #21255)

[NguyenThuyLan]

Prerequisites

• [x ] I have added steps to test this contribution in the description below
• Password set / reset from email - Generic format error #21255

Description

• Previously, when a password failed the pattern requirement, a default browser error message would be displayed.
  Now, when a field becomes invalid due to a pattern mismatch, a localized error message (login_invalidPasswordMessage) is shown inline via setCustomValidity. This allows this error message to be customized through localization.
• A new invalidPasswordMessage localization key has been added to en.ts.
• The default error message will now be: The password is not strong enough.

How to test:

1. Navigate to the reset password or user invite flow.
2. Submit the form with a password that does not meet the configured requirements
3. Verify the inline error message reads The password is not strong enough.
4. Start typing in the password field — verify the error message disappears immediately.
5. Try to override the login_invalidPasswordMessage and see if the custom message is shown, like:

6. Submit a valid password that meets all requirements — verify the form submits successfully.

[claude]

Claude encountered an error after 0s —— View job

---

I'll analyze this and get back to you.

[claude]

Claude finished @NguyenThuyLan's task in 6m 3s —— View job

---

PR Review

Target: origin/main · Based on commit: 52d19cad · Skipped: 0 noise files out of 2 total

Replaces the browser-default constraint-violation tooltip for password pattern mismatches with a localized inline message (login_invalidPasswordMessage), and clears it on every keystroke so the error disappears as the user types.

• Other changes: New default error text "The password is not strong enough." is now shown in place of the browser's built-in validation popover when a submitted password fails the pattern check. This is a user-visible behavior change on the reset-password and invite-user flows.

---

Important

• new-password-layout.element.ts:57: Event listeners attached in firstUpdated via anonymous arrow function wrappers can never be cleaned up — removeEventListener won't match an anonymous closure. If the component is ever detached and reattached, listeners double-up. Lit's declarative @event-name template bindings are idiomatic here and handle cleanup automatically. See inline comment for a concrete refactor. Fix this →

Suggestions

• new-password-layout.element.ts:85: this.localize.term('login_invalidPasswordMessage') ?? 'The password is not strong enough.' — the fallback string is identical to the value in en.ts, so it only helps if localization is completely uninitialized. Harmless, and consistent with how other messages in this file are written (login_errorInPasswordFormat etc.), so fine to keep.

---

Approved with Suggestions for improvement

Good to go, but please carefully consider the importance of the suggestion around declarative Lit event bindings.

[claude]

Claude finished @NguyenThuyLan's task in 3m 22s —— View job

---

PR Review

Target: origin/main · Based on commit: e455355e · Skipped: 0 noise files out of 2 total

Replaces the browser-default constraint-violation tooltip for password pattern mismatches with a localized inline message (login_invalidPasswordMessage), and clears it on every keystroke. Adds the English default string "The password is not strong enough." to en.ts.

• Other changes: User-visible behavior change on the reset-password and invite-user flows — the browser's native tooltip is replaced with an inline localized error message when a submitted password fails the pattern check.

---

Suggestions

• new-password-layout.element.ts:57–68: firstUpdated/disconnectedCallback is an asymmetric lifecycle pair. firstUpdated fires only once per component instance — if the element is ever detached and reattached (e.g., via router transitions or dynamic slot usage), firstUpdated won't re-run and the invalid listeners won't be restored, even though disconnectedCallback already removed them. The idiomatic fix is to move the attachment into connectedCallback so it mirrors disconnectedCallback:

  override connectedCallback(): void {
    super.connectedCallback();
    this.passwordElement?.addEventListener('invalid', this.#handlePasswordInvalid);
    this.confirmPasswordElement?.addEventListener('invalid', this.#handlePasswordInvalid);
  }
  
  override disconnectedCallback(): void {
    this.passwordElement?.removeEventListener('invalid', this.#handlePasswordInvalid);
    this.confirmPasswordElement?.removeEventListener('invalid', this.#handlePasswordInvalid);
    super.disconnectedCallback();
  }

  Note: connectedCallback fires before the first render completes, so this.passwordElement (from @query) may be undefined on first connect — use optional chaining (?.) as shown. You can remove firstUpdated and the PropertyValues import entirely.

  In practice, the login SPA rarely detaches and reattaches these components, so the current code is low-risk, but the connectedCallback/disconnectedCallback pair is the correct Lit pattern for persistent imperative listeners.

---

Approved with Suggestions for improvement

Good to go — the previous feedback on anonymous closures has been properly addressed by using stable class-field references (#handlePasswordInvalid = ...), and disconnectedCallback cleanup is now in place. Please consider the lifecycle asymmetry note above before merging.

[AndyButland]

This is working as expected @NguyenThuyLan, nice work. I've verified the default message as well as overriding having added the following in a local project App_Plugins/login-message-override/umbraco-package.json:

{
  "$schema": "../../umbraco-package-schema.json",
  "name": "Login Message Override",
  "allowPublicAccess": true,
  "extensions": [
    {
      "type": "localization",
      "alias": "LoginMessageOverride.Lang.EN",
      "name": "Login Message Override (English)",
      "weight": 1000,
      "meta": {
        "culture": "en",
        "localizations": {
          "login": {
            "invalidPasswordMessage": "You need to include a digit in your password"
          }
        }
      }
    },
    {
      "type": "localization",
      "alias": "LoginMessageOverride.Lang.EN_US",
      "name": "Login Message Override (English - United States)",
      "weight": 1000,
      "meta": {
        "culture": "en-US",
        "localizations": {
          "login": {
            "invalidPasswordMessage": "You need to include a digit in your password"
          }
        }
      }
    }
  ]
}

[AndyButland]

Cherry-picked into release/18.0 and release/17.5.0.