[Remove Vuetify from Studio] 'Create an account' page by vtushar06 · Pull Request #5701 · learningequality/studio

vtushar06 · 2026-02-13T17:05:28Z

Summary

Migrates the Create an account page from Vuetify to Kolibri Design System (KDS) as part of issue #5670.

Changes:

ReplacedVForm, VSelect, VSlideYTransition, VLayout, VInput with KDS equivalents (KSelect, KTransition, KCheckbox, KTextbox, KButton, KRouterLink)
Replaced shared Vuetify wrappers (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

Replaced Vuetify form validation ($refs.form.validate() + computed rule arrays) with a custom validateField() / validateForm() approach that:

Validates each text field independently on blur (errors accumulate across fields)
Clears field errors on input
Validates all fields on submit

Replaced ActionLinkpolicy links with KRouterLink

ScreenRecording:

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

…ponents and added emailValidateMessage translation

…mplement toggleUsage method for form handling

…xtbox components, enhancing form handling and user experience

…ndling for agreement acceptance

learning-equality-bot · 2026-02-13T17:06:07Z

👋 Thanks for contributing!

We will assign a reviewer within the next two weeks. In the meantime, please ensure that:

You ran pre-commit locally
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! 😊

Copilot

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 StudioEmailField and StudioPasswordField for consistent email and password input handling
Implemented custom form validation with validateField() and validateForm() 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

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

MisRob · 2026-02-17T16:25:08Z

Hi @vtushar06, thanks! Before we assign a maintainer, I will invite the community review.

MisRob · 2026-02-17T16:25:16Z

📢 ✨ Community Review guidance for both authors and reviewers.

vtushar06 · 2026-02-17T16:29:17Z

Yeah sure @MisRob, I would love to get engage with our fellow contributors over this.

abhiraj75 · 2026-02-21T16:49:11Z

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!

MisRob · 2026-02-23T09:38:50Z

Hi @abhiraj75, thanks! The page itself was covered with VTL tests #5633 beforehand which I mentioned to @vtushar06.

However still, having few focused tests for the new StudioEmailField and StudioPasswordField would be helpful for sure ~ they are important components that will be re-used in many places. Such tests should cover their most important logic. Then in tests for specific pages, we won't need to re-implement test for every detail, but only test page-specific logic.

vtushar06 · 2026-02-23T10:13:32Z

thanks @MisRob, I will proceed my upcoming changes including tests for StudioEmailField and StudioPasswordField

LianaHarris360

Thanks for your work on this @vtushar06! The newly created components are clean, focused, and correctly match the use case of the original components used. I had a few questions & notes on the changes within Create.vue that need to be resolved.

LianaHarris360 · 2026-03-04T15:44:38Z

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

+            break;
+        }
+      },
+      validateForm() {


I noticed this manual validateField() / validateForm() system is used to replace the Vuetify form validation. Was there any particular reason to not use generateFormMixin for the validation instead?

LianaHarris360 · 2026-03-04T15:47:24Z

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

        // We need to check the "acceptedAgreement" here explicitly because it is not a
        // Vuetify form field and does not trigger the form validation.
-        if (this.$refs.form.validate() && this.acceptedAgreement) {
+        if (this.validateForm() && this.acceptedAgreement) {


Does the previous comment about the acceptedAgreement field not being a Vuetify form field still apply? Is validation triggered if we don't explicitly check "acceptedAgreement" here?

LianaHarris360 · 2026-03-04T15:58:40Z

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

+          :style="{ color: $themeTokens.error }"
+          class="field-error"
+        >
+          {{ $tr('fieldRequired') }}


Was there an issue with using commonStrings.$tr('fieldRequired') in the template? This file uses two sources for this string, but it would be best to stick to one.

LianaHarris360 · 2026-03-04T18:35:49Z

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

          other_use: '',
          locations: [],
-          source: '',
+          source: {},


There's an error in the console: [Vue warn]: Invalid prop: custom validator check failed for prop "value" because of how the source field is initialized. Can you update this to be source: { value: '', label: '' }, instead?

LianaHarris360 · 2026-03-04T18:49:22Z

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

+
+  .banner {
+    margin-bottom: 32px;
+  }


This is a visual nitpick, but could we set a width in this banner class so that it matches the width of the text boxes?

LianaHarris360 · 2026-03-04T18:54:02Z

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

      >
-        <Banner
-          :value="!valid"
+        <StudioBanner


The banner and textboxes might need to be wrapped in a dedicated <div> element, to be centered within the form container like it was previously.

Original Updated

vtushar06 added 6 commits February 2, 2026 08:50

Add StudioEmailField and StudioPasswordField components

d601682

add custom validateForm method and replaced basic fields with new com…

e296099

…ponents and added emailValidateMessage translation

Refactor usage fields to use KCheckbox and KTextbox components, and i…

5cbe5cc

…mplement toggleUsage method for form handling

updted Create.vue to replace VInput and TextArea with KSelect and KTe…

03f71fb

…xtbox components, enhancing form handling and user experience

Replace Checkbox with KCheckbox component and update error message ha…

8798e70

…ndling for agreement acceptance

remove vuetify from create page

79bd634

Copilot AI review requested due to automatic review settings February 13, 2026 17:05

Copilot started reviewing on behalf of vtushar06 February 13, 2026 17:05 View session

[pre-commit.ci lite] apply automatic fixes

9025e23

Copilot AI reviewed Feb 13, 2026

View reviewed changes

updated theme color error and fixed copilot review

8d5a99f

test for email and password field

0c4bdf9

rtibbles assigned LianaHarris360 Feb 24, 2026

LianaHarris360 requested changes Mar 4, 2026

View reviewed changes

Conversation

vtushar06 commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

References

Reviewer guidance

Uh oh!

learning-equality-bot bot commented Feb 13, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MisRob commented Feb 17, 2026

Uh oh!

MisRob commented Feb 17, 2026

Uh oh!

vtushar06 commented Feb 17, 2026

Uh oh!

abhiraj75 commented Feb 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MisRob commented Feb 23, 2026

Uh oh!

vtushar06 commented Feb 23, 2026

Uh oh!

LianaHarris360 left a comment

Choose a reason for hiding this comment

Uh oh!

LianaHarris360 Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

LianaHarris360 Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

LianaHarris360 Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

LianaHarris360 Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

LianaHarris360 Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

LianaHarris360 Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

vtushar06 commented Feb 13, 2026 •

edited

Loading

abhiraj75 commented Feb 21, 2026 •

edited

Loading