replace Vuetify components with KDS equivalents and update error handling text

Author: vtushar06

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

@@ -130,7 +130,7 @@
           :style="{ color: $themeTokens.error }"
           class="field-error"
         >
-          {{ $tr('fieldRequired') }}
+          {{ fieldRequiredText }}
         </div>
 
         <!-- Location -->
@@ -144,7 +144,7 @@
           :style="{ color: $themeTokens.error }"
           class="field-error"
         >
-          {{ $tr('fieldRequired') }}
+          {{ fieldRequiredText }}
         </div>
 
         <!-- Source -->
@@ -182,7 +182,7 @@
           :style="{ color: $themeTokens.error }"
           class="field-error"
         >
-          {{ $tr('fieldRequired') }}
+          {{ fieldRequiredText }}
         </div>
 
         <!-- Agreements -->
@@ -243,11 +243,6 @@
 <script>
 
   import { mapActions, mapGetters, mapState } from 'vuex';
-  import KTextbox from 'kolibri-design-system/lib/KTextbox';
-  import KCheckbox from 'kolibri-design-system/lib/KCheckbox';
-  import KTransition from 'kolibri-design-system/lib/KTransition';
-  import KSelect from 'kolibri-design-system/lib/KSelect';
-  import KRouterLink from 'kolibri-design-system/lib/buttons-and-links/KRouterLink';
   import { uses, sources } from '../constants';
   import StudioEmailField from '../components/form/StudioEmailField';
   import StudioPasswordField from '../components/form/StudioPasswordField';
@@ -262,16 +257,11 @@
     name: 'Create',
     components: {
       StudioImmersiveModal,
-      KTextbox,
-      KCheckbox,
-      KTransition,
-      KSelect,
       StudioEmailField,
       StudioPasswordField,
       CountryField,
       PolicyModals,
       StudioBanner,
-      KRouterLink,
     },
     data() {
       return {
@@ -288,7 +278,7 @@
           storage: '',
           other_use: '',
           locations: [],
-          source: {},
+          source: { value: '', label: '' },
           organization: '',
           conference: '',
           other_source: '',
@@ -362,6 +352,10 @@
       policies() {
         return policies;
       },
+      fieldRequiredText() {
+        /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
+        return commonStrings.$tr('fieldRequired');
+      },
       sourceOptions() {
         return [
           {
@@ -480,6 +474,9 @@
       showOtherField(id) {
         return id === uses.OTHER && this.form.uses.includes(id);
       },
+      // Custom validation is used (not generateFormMixin) because KTextbox requires
+      // field-specific error message strings via :invalidText, which generateFormMixin
+      // does not support (it stores only boolean errors per field).
       validateField(field) {
         switch (field) {
           case 'first_name':
@@ -567,8 +564,7 @@
         return isValid;
       },
       submit() {
-        // We need to check the "acceptedAgreement" here explicitly because it is not a
-        // Vuetify form field and does not trigger the form validation.
+        // acceptedAgreement must be checked explicitly here as it is not included in validateForm().
         if (this.validateForm() && this.acceptedAgreement) {
           // Prevent double submission
           if (this.submitting) {
@@ -677,7 +673,6 @@
       otherSourcePlaceholder: 'Please describe',
 
       // Privacy policy + terms of service
-      fieldRequired: 'Field is required',
       viewToSLink: 'View Terms of Service',
       ToSRequiredMessage: 'Please accept our terms of service and policy',
 
@@ -718,6 +713,7 @@
   }
 
   .banner {
+    width: 100%;
     margin-bottom: 32px;
   }
 

contentcuration/contentcuration/frontend/accounts/pages/__tests__/create.spec.js

@@ -105,18 +105,16 @@ describe('Create account page', () => {
   // NOTE:
   // Full form submission tests are intentionally skipped here.
   //
-  // This page still relies on Vuetify components (v-select / v-autocomplete)
-  // for required fields such as "locations" and "source".
-  // These components do not reliably update their v-model state when interacted
-  // with via Vue Testing Library’s userEvent APIs, which prevents a fully
-  // user-centric submission flow from being exercised.
+  // The "locations" field uses CountryField, which internally uses VAutocomplete
+  // (a Vuetify component). VAutocomplete does not reliably update its v-model
+  // state when interacted with via Vue Testing Library's userEvent APIs, which
+  // prevents a fully user-centric submission flow from being exercised.
   //
-  // The previous Vue Test Utils tests worked around this by directly mutating
-  // component data (setData), which is intentionally avoided when using
-  // Testing Library.
+  // The "source" field has been migrated to KSelect (KDS) and no longer has
+  // this limitation, but "locations" remains the blocker.
   //
-  // These tests will be re-enabled once this page is migrated to the
-  // Kolibri Design System as part of the Vuetify removal effort .
+  // These tests will be re-enabled once CountryField is migrated away from
+  // VAutocomplete as part of the ongoing Vuetify removal effort.
   it.skip('creates an account when the user submits valid information', async () => {
     await renderComponent();
 
@@ -143,7 +141,7 @@ describe('Create account page', () => {
     });
   });
 
-  // Skipped for the same reason as above
+  // Skipped for the same reason as above — CountryField (VAutocomplete) blocker
   it.skip('shows an offline error when the user is offline', async () => {
     await renderComponent({ offline: true });