[Remove Vuetify from Studio] Sign-in page

[MisRob]

Overview

Remove Vuetify from the Sign-in page.

Complexity: Low

Context

Sign-in page:

The Change

Remove Vuetify dependencies in this location by:

• Replace VCard with StudioRaisedBox
• Replace Banner with StudioBanner
• Remove VLayout and VDivider in favor of custom styles
• Replace VForm with <form> and use generateFormMixin for validation
• Replace EmailField / PasswordField by StudioEmailField / StudioPasswordField

Ensure that all interactions are functional as before. Do not modify Banner, EmailField and PasswordField. Do not refactor any other areas of the codebase.

How to Get There

• Navigate to /accounts

Guidance

• Find detailed guidance with many code examples in KDS documentation
• Read the project for more useful references

Out of Scope

• Do not modify Banner, EmailField and PasswordField
• Do not refactor any other areas of the codebase

Expected UI/UX changes

• Error banner text will be black and there will be an error icon (introduced in Improve alert banner #5687 & meant to be applied to all error banners consistently)
• Minor visual differences naturally stemming from the use of KDS

Acceptance Criteria

These are general acceptance criteria for the project. For each sub-issue, consider which are relevant.

General

• The specification above is followed.
• Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
• There are no regressions in the printing preview
• There are no ::v-deep or /deep/ selectors.
• All user interactions are manually tested with no regressions.
• Pull request includes screenshots.

a11y and i18n

See the project's "Guidance" for useful references.

• Implementation meets a11y standards
• All components are LTR and RTL compliant (preview with pnpm run devserver since :hot doesn't render RTL properly)
• All user-facing strings are translated properly
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. user-generated text)
• Mobile experience is reasonable

Unit tests

• If there is a unit test suite already, it is meaningfully updated (even if tests don't fail)
• If there is no unit test suite, a new one is created. Do not use obsolete @vue/test-utils approach. Instead, use @testing-library/vue (Vue Testing Library).

References

Sub-issue of #5060

[LightCreator1007]

Hello:)
Could I work on this

[learning-equality-bot]

Hi! 👋

Thanks for your interest! This issue supports self-assignment. Comment /assign to assign yourself.

Visit Contributing guidelines to learn about the contributing process. 😊

Are you preparing for Google Summer of Code? See our GSoC guidelines.

[LightCreator1007]

/assign

[learning-equality-bot]

Hi! 👋

You've been assigned to this issue. Here's what to do next:

• Read the issue description carefully and make sure you understand the requirements
• Link your pull request to this issue when you submit it
• If you can no longer work on this, unassign yourself so others can pick it up

Good luck! 😊

Are you preparing for Google Summer of Code? See our GSoC guidelines.

[connect-abdullah]

/assign

[learning-equality-bot]

Hi! 👋

Thanks so much for your interest! This issue is already assigned. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues. If there are no unassigned 'help wanted' issues available, please wait until new ones are added.

We really appreciate your willingness to help. 😊

Are you preparing for Google Summer of Code? See our GSoC guidelines.

[khanshekhufarhan]

@LightCreator1007 Bro are you still working on this issue??

[learning-equality-bot]

Hi! 👋

Thanks so much for your interest! This issue is already assigned. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues. If there are no unassigned 'help wanted' issues available, please wait until new ones are added.

We really appreciate your willingness to help. 😊

Are you preparing for Google Summer of Code? See our GSoC guidelines.

[LightCreator1007]

@LightCreator1007 Bro are you still working on this issue??

Yes :)