-
Notifications
You must be signed in to change notification settings - Fork 286
Comments
[Remove Vuetify from Studio] 'Create an account' page#5701
[Remove Vuetify from Studio] 'Create an account' page #5701vtushar06 wants to merge 8 commits intolearningequality:unstable from
Conversation
...ponents and added emailValidateMessage translation
...mplement toggleUsage method for form handling
...xtbox components, enhancing form handling and user experience
...ndling for agreement acceptance
👋 Thanks for contributing!
We will assign a reviewer within the next two weeks. In the meantime, please ensure that:
- You ran
pre-commitlocally - All issue requirements are satisfied
- The contribution is aligned with our Contributing guidelines. Pay extra attention to Using generative AI. Pull requests that don't follow the guidelines will be closed.
We'll be in touch! 😊
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This pull request migrates the "Create an account" page from Vuetify to the Kolibri Design System (KDS) as part of the ongoing effort to remove Vuetify dependencies from Studio (issue #5060). The migration replaces Vuetify form components with KDS equivalents and implements custom form validation logic to replace Vuetify's built-in validation system.
Changes:
- Replaced Vuetify components (
VForm,VSelect,VSlideYTransition,VLayout,VInput) with KDS components (KSelect,KTransition,KCheckbox,KTextbox,KButton,KRouterLink) - Created two new wrapper components
StudioEmailFieldandStudioPasswordFieldfor consistent email and password input handling - Implemented custom form validation with
validateField()andvalidateForm()methods to replace Vuetify's validation system
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 8 comments.
| File | Description |
|---|---|
| contentcuration/contentcuration/frontend/accounts/pages/Create.vue | Main migration: replaced Vuetify components with KDS, implemented custom validation, updated styling |
| contentcuration/contentcuration/frontend/accounts/components/form/StudioEmailField.vue | New wrapper component for email input using KTextbox with validation and error display |
| contentcuration/contentcuration/frontend/accounts/components/form/StudioPasswordField.vue | New wrapper component for password input using KTextbox with error display |
Comments suppressed due to low confidence (1)
contentcuration/contentcuration/frontend/accounts/components/form/StudioPasswordField.vue:50
- According to the acceptance criteria in issue #5670, if there is no unit test suite, a new one should be created using @testing-library/vue. No unit tests have been added for the Create page or the new StudioEmailField and StudioPasswordField components.
Consider adding unit tests for the new components and the updated Create page to verify the form validation logic, error handling, and user interactions work as expected.
<template>
<KTextbox
:value="value"
type="password"
:label="label || $tr('passwordLabel')"
:invalid="hasError"
:invalidText="errorText"
:showInvalidText="hasError"
@input="$emit('input', $event)"
@blur="$emit('blur')"
/>
</template>
<script>
export default {
name: 'StudioPasswordField',
props: {
value: {
type: String,
default: '',
},
label: {
type: String,
default: null,
},
errorMessages: {
type: Array,
default: () => [],
},
},
computed: {
hasError() {
return this.errorMessages && this.errorMessages.length > 0;
},
errorText() {
return this.hasError ? this.errorMessages[0] : '';
},
},
$trs: {
passwordLabel: 'Password',
},
};
</script>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
contentcuration/contentcuration/frontend/accounts/components/form/StudioEmailField.vue
Show resolved
Hide resolved
MisRob
commented
Feb 17, 2026
Hi @vtushar06, thanks! Before we assign a maintainer, I will invite the community review.
MisRob
commented
Feb 17, 2026
📢 ✨ Community Review guidance for both authors and reviewers.
vtushar06
commented
Feb 17, 2026
Yeah sure @MisRob, I would love to get engage with our fellow contributors over this.
Hey @vtushar06 @MisRob , are there existing tests for the Create page that would cover the new StudioEmailField, StudioPasswordField, and validation logic? Or would new tests be needed as mentioned in the issue's acceptance criteria?
Happy to help if needed!
Uh oh!
There was an error while loading. Please reload this page.
Summary
Migrates the Create an account page from Vuetify to Kolibri Design System (KDS) as part of issue #5670.
Changes:
VForm,VSelect,VSlideYTransition,VLayout,VInputwith KDS equivalents (KSelect,KTransition,KCheckbox,KTextbox,KButton,KRouterLink)TextField,EmailField,PasswordField,TextArea,Checkbox,Banner,ImmersiveModalLayout) with KDS components and two new wrapper components:StudioEmailField.vue — wraps KTextbox with email input handling and error display
StudioPasswordField.vue — wraps KTextbox with password type and error display
$refs.form.validate()+ computed rule arrays) with a customvalidateField()/validateForm()approach that:ActionLinkpolicy links withKRouterLinkScreenRecording:
Remove-vuetify-5670-2.mp4
Remove-vuetify-5670.mp4
...
References
Closes #5670
...
Reviewer guidance
Login as a@a.com with password a
Go to Create Page