[Remove Vuetify from Studio] 'Create an account' page

[MisRob]

🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:

• Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don’t follow the guidelines won’t be answered.
• Confirm that you’ve read the guidelines in your comment.

Overview

Complexity: Medium

Context

Create an account page

The Change

Remove Vuetify from the Create an account page by:

• Replace ImmersiveModalLayout with StudioImmersiveModal
• Replace VLayout with custom styles
• Replace VForm with <form> and use generateFormMixin for validation
• Replace Banner with StudioBanner
• Use KTextbox for first and last name input
• Create new components StudioEmailField and StudioPasswordField
  • Parallels to EmailField and PasswordField but use KTextbox instead of VTextField
  • Use them instead of EmailField and PasswordField
• Use KCheckbox, KTransition, and KTextbox for "How do you plan on using Kolibri Studio" section
• Use KSelect, KTransition and KTextbox for "How did you hear about us?" section
• Use KCheckbox, KTransition, and KRouterLink for "I have read..." agreement section

Do not refactor "Where do you plan to use Kolibri Studio?" section (we don't yet have a replacement for Vuetify's multi-select).

Ensure that all interactions are functional as before. Do not modify ImmersiveModalLayout, Banner, TextField, TextArea, EmailField, PasswordField, CountryField, DropdownWrapper, Checkbox, and ActionLink files. Do not refactor any other areas of the codebase.

How to Get There

• Navigate to /accounts/#/create URL
• Submit the form with missing or invalid data
• Submit the form with correct data
• In browser dev tools, turn on offline throttling

Out of Scope

• Do not modify ImmersiveModalLayout, Banner, TextField, TextArea, EmailField, PasswordField, CountryField, DropdownWrapper, Checkbox, and ActionLink files
• Do not refactor "Where do you plan to use Kolibri Studio?" section
• Do not refactor any other areas of the codebase

Expected UI/UX changes

• Error banner text will be dark red instead of black
• 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.

[MisRob]

@vtushar06 this is an issue I had in mind for you - if you'd be interested, just comment here. Thanks!

[sharma-anushka]

@MisRob hi, I just wanted to know when do the new contributors get to work on medium level issues ?

[MisRob]

Hi @sharma-anushka, occasionally I will try to make few medium complexity ones available to everyone. Most often though it'd be after I've seen several contributions merged over weeks, sometimes months. I cannot watch all activity but as best as time allows, I try to facilitate a bit this progression towards more and more complex work - the community as well as team seem to have nicer experiences that way :)

[vtushar06]

Hi @MisRob, thank you for thinking of me for this issue. I’d be happy to work on it and take it forward. Thanks!

[thunderbird7413]

Hii @MisRob Is this issue Solved? If not I like to work on it.

[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.

[vtushar06]

hii @thunderbird7413, I am currently working on this, if you are interested can take part in conversation and pre-review, it will help you a lot in understanding codebase and community standards.thanks.