[Remove Vuetify from Studio] 'Forgot password' page

[Vaibhavkumar-tech]

Summary

Migrated the Forgot Password page from the legacy Vuetify components to the Studio/KDS components.

• Replaced MessageLayout with StudioMessageLayout.
• Replaced EmailField with StudioEmailField.
• Replaced the legacy Banner with StudioBanner.
• Removed the Vuetify VForm and its validation usage.
• Added email syntax validation to the Forgot Password page using the existing form validation pattern.
• Preserved the existing password-reset submission and navigation behavior.
• Kept validation changes limited to the Forgot Password page.

References

• Related issue/PR: Remove Vuetify from Studio – "Reset password" page [Remove Vuetify from Studio] 'Reset password' page #5931
• Related PR: Improve alert banner Improve alert banner #5687

Reviewer guidance

Manual verification

1. Open the Reset your password page.
2. Verify the page uses the Studio/KDS components.
3. Submit an empty/invalid email address and verify the email validation message is displayed.
4. Verify that no validation error is displayed while typing.
5. Click/tap the email field after an error is displayed and verify the error disappears.
6. Enter a valid email address and submit the form.
7. Verify the password reset request is sent and the user is redirected to the password-instructions page.
8. Simulate a failed password-reset request and verify the Studio error banner is displayed.
9. Verify the error banner is hidden when there is no API error.

UI

Minor visual differences from the previous Vuetify implementation are expected because the page now uses Studio/KDS components.

AI usage

I used ChatGPT to help understand the existing Vuetify implementation, the Studio components, and the project's form-validation pattern. I reviewed the generated suggestions critically, compared them with the existing code and maintainer guidance, and kept the implementation limited to the Forgot Password page as requested.

[learning-equality-bot]

👋 Hi @Vaibhavkumar-tech, 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."

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.

[Vaibhavkumar-tech]

@akolson I've opened the PR with the changes for the Forgot Password page.

I've kept the changes limited to the page as requested and followed the validation approach discussed above. When you have a chance, could you please review it and let me know if any changes or improvements are needed?

Thank you!

[akolson]

Hi @Vaibhavkumar-tech! Great changes on this. Code changes makes sense to me! However, it appears that there is a noticeable/major change(and not minor as suggested) in the sizing of the field and submit button comparing with what is currently present in production. Applying appropriate css styling should resolve this.

UI in production

UI from pr