[adibmbrk]

Summary

Removes Vuetify from the Forgot password page as part of #5060.

• MessageLayout → StudioMessageLayout
• VForm → <form> with generateFormMixin validation, following RequestNewActivationLink
• Banner → StudioBanner
• EmailField → StudioEmailField
• Email errors appear only after blur or submit, matching the previous validate-on-blur behaviour
• Unit tests updated to check validation messages, blur behaviour and the error banner

References

Closes #5932

Reviewer guidance

1. Go to /accounts/#/forgot-password
2. Submit with an empty email → "This field is required"
3. Type an invalid email → no error until blur or submit
4. Submit with a valid email → redirects to the instructions sent page
5. To see the error banner, temporarily make sendPasswordResetLink reject

Expected UI changes: the error banner has black text and an error icon, plus minor KDS styling differences.

Before

After

AI usage

Used Claude Code to plan, implement and test the change.

[learning-equality-bot]

👋 Hi @adibmbrk, thanks for contributing!

For the review process to begin, please verify that the following is satisfied:

• Contribution is aligned with our contributing guidelines

• Pull request description has correctly filled AI usage section & follows our AI guidance:

  AI guidance

  
  

  State explicitly whether you didn't use or used AI & how.

  If you used it, ensure that the PR is aligned with Using AI as well as our DEEP framework. DEEP asks you:

  • Disclose — Be open about when you've used AI for support.
  • Engage critically — Question what is generated. Review code for correctness and unnecessary complexity.
  • Edit — Review and refine AI output. Remove unnecessary code and verify it still works after your edits.
  • Process sharing — Explain how you used the AI so others can learn.

  
  

  Examples of good disclosures:

  "I used Claude Code to implement the component, prompting it to follow the pattern in ComponentX. I reviewed the generated code, removed unnecessary error handling, and verified the tests pass."

  "I brainstormed the approach with Gemini, then had it write failing tests for the feature. After reviewing the tests, I used Claude Code to generate the implementation. I refactored the output to reduce verbosity and ran the full test suite."

📢✨ Before we assign a reviewer:

• @rtibblesbot will pre-review this pull request. Its comments are generated by an LLM, and should be evaluated accordingly.
• We'll also invite community pre-review. See the community review guidance for both authors and reviewers.

Also check that issue requirements are satisfied & you ran pre-commit locally.

Pull requests that don't follow the guidelines will be closed.

Reviewer assignment can take up to 2 weeks.

[rtibblesbot]

🟡 Waiting for changes

Outcome: skipped — no new commits since 3c46df4

Last updated: 2026-10-28 09:53 UTC

[rtibblesbot]

PR #6334 is blocked on missing screenshots. The code follows the merged RequestNewActivationLink.vue pattern (#6026) and covers all four replacements the issue lists.

CI: only Pull Request Template / Check template fails, on the screenshot placeholder. Manual QA did not run.

• blocking: screenshots missing. The PR body still has <!-- TODO: add screenshots -->. The issue's acceptance criteria require screenshots. Add before/after for the default state, the required-field error, the invalid-email error and the error banner (force it temporarily). Add RTL and mobile widths too.
• suggestion: validation now runs on every keystroke; note it in the PR body (inline).
• suggestion: validation-message assertions match on text alone; scope them to the email field (inline).

Next step: Needs a full code review by a human engineer, then manual QA once that reviewer sets Needs QA.

• The author is outside the team: confirm this should be built at all.
• User-visible files changed: contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue.
• Check that the required-field error, the invalid-email error and the error banner render correctly at mobile width and in RTL.
• Confirm that errors showing on each keystroke, rather than on blur, is acceptable.

---

Written by rtibblesbot, an LLM-based coding agent.

[rtibblesbot]

PR #6334: both prior findings are resolved. Manual QA did not run. The UI is unverified.

Prior-finding status

RESOLVED — contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue:25 — validation runs on every keystroke instead of on blur
RESOLVED — contentcuration/contentcuration/frontend/accounts/pages/tests/forgotPassword.spec.js:50 — text assertions match anywhere on the page

Next step: Needs a full code review by a human engineer, then manual QA once that reviewer sets Needs QA.

• The author is outside the team: confirm this should be built at all.
• User-visible files changed: contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue.
• Check the email error appears only after blur or submit, and the reset link sends for a valid email.

---

Written by rtibblesbot, an LLM-based coding agent.

Superseded by my review of 3c46df4: no blocking findings remain.

[akolson]

@adibmbrk Thanks for your work on this PR! Could you please update it to use the required PR template? Also be sure add screenshots to help reviewers assess your changes more thoroughly, as this is frontend focused issue.

[adibmbrk]

Done @akolson

[akolson]

Thanks @adibmbrk! The migration follows the issue and the RequestNewActivationLink page closely, and the blur behaviour matches the old field.

CI passing. Manual QA: empty submit, the blur error, the valid submit, the failure banner and RTL all work, with no console errors.

[akolson]

blocking: At 360px the form does not fit the screen, which fails "Mobile experience is reasonable" in #5932. The form is 400px wide inside a 328px column. On load, autofocus also scrolls the column sideways, so the heading is off-center, the Submit button is cut off at the right edge, and so is the error banner text. The old page fit.

The cause is in StudioMessageLayout: .message-slot-container has a max-width but no width, so it takes the form's 400px, and max-width: 100% here never shrinks it. Adding width: 100% to .message-slot-container fixes it. I tested that on all eleven pages that use the layout, at 360px and 1280px. Only the two form pages change: this one and RequestNewActivationLink, which has the same overflow. #6145 makes the same one-line change, so you can add it here or update your branch after #6145 merges.

[akolson]

suggestion: Screen readers do not announce this banner when it appears, because StudioBanner has no role. Adding role="alert" makes it a live region (WCAG 4.1.3 Status Messages). It is not a regression, because the old Banner had no role either. But this page is being rewritten anyway, and #6145 does the same for the reset password banner. The test at line 109 can then use findByRole('alert') instead of the test id, as the unit testing guide prefers. I checked both: the role query fails without the role and passes with it.

[akolson]

nitpick: These two new tests use fireEvent and read strings straight from ForgotPassword.$trs. The unit testing guide recommends userEvent, which types and tabs like a real user, and createTranslator for strings. With those changes all 7 tests pass and lint passes. The two tests also still fail when the blur gate or the blur handler is removed. The older tests in this file use fireEvent and hard-coded strings too, so you can convert them in the same pass if you like.