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

[vtushar06]

Summary

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

Changes:

1. ReplacedVForm, VSelect, VSlideYTransition, VLayout, VInput with KDS equivalents (KSelect, KTransition, KCheckbox, KTextbox, KButton, KRouterLink)
2. 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

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

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

[learning-equality-bot]

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