From e345fd6938ae900e5f7b8d509125dd9d9d2dc68d Mon Sep 17 00:00:00 2001
From: LightCreator1007 <arunitchakraborty2006@gmail.com>
Date: Fri, 18 Sep 2026 01:18:26 +0530
Subject: [PATCH 1/3] Migrate ResetPassword page from Vuetify to KDS

Replace the four Vuetify-backed pieces of the reset password page with
their Studio/KDS equivalents, per #5931:

  MessageLayout  -> StudioMessageLayout
  VForm          -> <form> + generateFormMixin
  Banner         -> StudioBanner
  PasswordField  -> StudioPasswordField

All four replacements already existed and are in use by sibling pages;
no new components are introduced. The remaining pages under
pages/resetPassword/ were migrated earlier, so this brings the last
Vuetify page in that directory into line.

Two details preserve existing behaviour:

  - The submit handler validates and submits the raw this.form values
    rather than formMixin's clean(), which trims every field. Passwords
    must keep any leading or trailing spaces the user typed.
  - A touched map gates error display until blur, since formMixin's
    setters otherwise flag an error on every keystroke, where the
    VForm version validated on blur.

Strings, submit payload, redirect target, and the length and match
rules are unchanged. resetPassword.spec.js required no changes and
still passes.
---
 .../pages/resetPassword/ResetPassword.vue     | 145 ++++++++++++------
 1 file changed, 100 insertions(+), 45 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue
index f7149673d5..198b0ea212 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue
@@ -1,30 +1,38 @@
 <template>
 
-  <MessageLayout
+  <StudioMessageLayout
     :header="$tr('resetPasswordTitle')"
     :text="$tr('resetPasswordPrompt')"
   >
-    <VForm
-      ref="form"
-      lazy-validation
-      @submit.prevent="submit"
+    <form
+      class="reset-password-form"
+      novalidate
+      @submit.prevent="resetPassword"
     >
-      <Banner
-        :text="$tr('resetPasswordFailed')"
-        :value="error"
+      <StudioBanner
+        v-if="error"
+        role="alert"
         error
-        class="mb-4"
-      />
-      <PasswordField
+        class="banner"
+      >
+        {{ $tr('resetPasswordFailed') }}
+      </StudioBanner>
+      <StudioPasswordField
         v-model="new_password1"
-        :label="$tr('passwordLabel')"
-        :additionalRules="passwordValidationRules"
         autofocus
+        :label="$tr('passwordLabel')"
+        :errorMessages="
+          touched.new_password1 && errors.new_password1 ? [new_password1ErrorText] : []
+        "
+        @blur="touched.new_password1 = true"
       />
-      <PasswordField
+      <StudioPasswordField
         v-model="new_password2"
         :label="$tr('passwordConfirmLabel')"
-        :additionalRules="passwordConfirmRules"
+        :errorMessages="
+          touched.new_password2 && errors.new_password2 ? [new_password2ErrorText] : []
+        "
+        @blur="touched.new_password2 = true"
       />
       <KButton
         primary
@@ -32,8 +40,8 @@
         :text="$tr('submitButton')"
         type="submit"
       />
-    </VForm>
-  </MessageLayout>
+    </form>
+  </StudioMessageLayout>
 
 </template>
 
@@ -41,52 +49,88 @@
 <script>
 
   import { mapActions } from 'vuex';
-  import MessageLayout from '../../components/MessageLayout';
-  import PasswordField from 'shared/views/form/PasswordField';
-  import Banner from 'shared/views/Banner';
+  import StudioMessageLayout from '../../components/StudioMessageLayout';
+  import StudioPasswordField from '../../components/form/StudioPasswordField';
+  import StudioBanner from 'shared/views/StudioBanner';
+  import commonStrings from 'shared/translator';
+  import { generateFormMixin } from 'shared/mixins';
+
+  const formMixin = generateFormMixin({
+    new_password1: {
+      required: true,
+      validator: v => Boolean(v) && v.length >= 8,
+    },
+    new_password2: {
+      required: true,
+      validator: (v, vm) => Boolean(v) && v === vm.form.new_password1,
+    },
+  });
 
   export default {
     name: 'ResetPassword',
     components: {
-      MessageLayout,
-      PasswordField,
-      Banner,
+      StudioMessageLayout,
+      StudioPasswordField,
+      StudioBanner,
     },
+    mixins: [formMixin],
     data() {
       return {
-        new_password1: '',
-        new_password2: '',
         error: false,
+        // Gates error display until blur, since formMixin's setters otherwise
+        // mark errors on every keystroke. Create.vue has no equivalent gate,
+        // so the two forms validate differently; epic-level decision tracked
+        // on #5060.
+        touched: {
+          new_password1: false,
+          new_password2: false,
+        },
       };
     },
     computed: {
-      passwordConfirmRules() {
-        return [value => (this.new_password1 === value ? true : this.$tr('passwordMatchMessage'))];
+      new_password1ErrorText() {
+        if (!this.new_password1) {
+          /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
+          return commonStrings.$tr('fieldRequired');
+        }
+        return this.$tr('passwordValidationMessage');
       },
-      passwordValidationRules() {
-        return [value => (value.length >= 8 ? true : this.$tr('passwordValidationMessage'))];
+      new_password2ErrorText() {
+        if (!this.new_password2) {
+          /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
+          return commonStrings.$tr('fieldRequired');
+        }
+        return this.$tr('passwordMatchMessage');
       },
     },
     methods: {
       ...mapActions('account', ['setPassword']),
-      submit() {
+      resetPassword() {
         this.error = false;
-        if (this.$refs.form.validate()) {
-          const payload = {
-            ...this.$route.query,
-            new_password1: this.new_password1,
-            new_password2: this.new_password2,
-          };
-          this.setPassword(payload)
-            .then(() => {
-              this.$router.push({
-                name: 'ResetPasswordSuccess',
-              });
-            })
-            .catch(() => {
-              this.error = true;
-            });
+        this.touched.new_password1 = true;
+        this.touched.new_password2 = true;
+
+        // Validate against this.form rather than formMixin's clean(), which
+        // trims every field. Passwords must keep the leading/trailing spaces
+        // the user typed, both here and in the payload below.
+        if (!this.validate(this.form)) {
+          return;
         }
+
+        const payload = {
+          ...this.$route.query,
+          new_password1: this.form.new_password1,
+          new_password2: this.form.new_password2,
+        };
+        this.setPassword(payload)
+          .then(() => {
+            this.$router.push({
+              name: 'ResetPasswordSuccess',
+            });
+          })
+          .catch(() => {
+            this.error = true;
+          });
       },
     },
     $trs: {
@@ -106,6 +150,17 @@
 
 <style lang="scss" scoped>
 
+  .reset-password-form {
+    width: 400px;
+    max-width: 100%;
+    text-align: left;
+  }
+
+  .banner {
+    width: 100%;
+    margin-bottom: 16px;
+  }
+
   .w-100 {
     width: 100%;
   }

From 1d85abb933d454788f796ce6a32fecdb1a537611 Mon Sep 17 00:00:00 2001
From: LightCreator1007 <arunitchakraborty2006@gmail.com>
Date: Tue, 6 Oct 2026 12:36:22 +0530
Subject: [PATCH 2/3] Address review feedback on ResetPassword migration

- Derive displayed field errors from form state and touched flags, so
  blurring an empty field shows the required error and editing the new
  password re-checks the confirmation
- Move focus to the first invalid field on a failed submit
- Give StudioMessageLayout's slot container a full width so forms no
  longer overflow narrow viewports
- Cover blur validation, confirmation re-checks, required errors, the
  failure banner, focus handling and untrimmed passwords in the spec
---
 .../components/StudioMessageLayout.vue        |   1 +
 .../pages/__tests__/resetPassword.spec.js     | 134 ++++++++++++++++++
 .../pages/resetPassword/ResetPassword.vue     |  47 ++++--
 3 files changed, 167 insertions(+), 15 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/components/StudioMessageLayout.vue b/contentcuration/contentcuration/frontend/accounts/components/StudioMessageLayout.vue
index 8be9c6a54d..8ebea3ace0 100644
--- a/contentcuration/contentcuration/frontend/accounts/components/StudioMessageLayout.vue
+++ b/contentcuration/contentcuration/frontend/accounts/components/StudioMessageLayout.vue
@@ -100,6 +100,7 @@
   }
 
   .message-slot-container {
+    width: 100%;
     max-width: 400px;
     margin: 24px auto 0;
     text-align: center;
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/__tests__/resetPassword.spec.js b/contentcuration/contentcuration/frontend/accounts/pages/__tests__/resetPassword.spec.js
index c87be9ab31..ff8adf8bf4 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/__tests__/resetPassword.spec.js
+++ b/contentcuration/contentcuration/frontend/accounts/pages/__tests__/resetPassword.spec.js
@@ -1,7 +1,20 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
 import VueRouter from 'vue-router';
 import { createLocalVue } from '@vue/test-utils';
 import ResetPassword from '../resetPassword/ResetPassword';
+import commonStrings from 'shared/translator';
+import { createTranslator } from 'shared/i18n';
+
+const { fieldRequired$ } = commonStrings;
+const {
+  passwordLabel$,
+  passwordConfirmLabel$,
+  passwordValidationMessage$,
+  passwordMatchMessage$,
+  submitButton$,
+  resetPasswordFailed$,
+} = createTranslator(ResetPassword.name, ResetPassword.$trs);
 
 const localVue = createLocalVue();
 localVue.use(VueRouter);
@@ -10,6 +23,7 @@ const setPasswordMock = jest.fn(() => Promise.resolve());
 
 const renderComponent = (queryParams = {}) => {
   const router = new VueRouter({
+    mode: 'abstract',
     routes: [
       { path: '/', name: 'Main' },
       { path: '/reset-password', name: 'ResetPassword' },
@@ -80,4 +94,124 @@ describe('ResetPassword', () => {
       expect(router.currentRoute.name).toBe('ResetPasswordSuccess');
     });
   });
+
+  describe('validation feedback', () => {
+    let user;
+
+    beforeEach(() => {
+      user = userEvent.setup();
+    });
+
+    const newPasswordField = () => screen.getByLabelText(passwordLabel$());
+    const confirmPasswordField = () => screen.getByLabelText(passwordConfirmLabel$());
+
+    it('shows the required error when an empty field loses focus', async () => {
+      renderComponent();
+
+      await user.click(newPasswordField());
+      await user.tab();
+
+      expect(screen.getByText(fieldRequired$())).toBeInTheDocument();
+    });
+
+    it('hides errors while typing and shows them once the field loses focus', async () => {
+      renderComponent();
+
+      await user.type(newPasswordField(), 'short');
+      expect(screen.queryByText(passwordValidationMessage$())).not.toBeInTheDocument();
+
+      await user.tab();
+      expect(screen.getByText(passwordValidationMessage$())).toBeInTheDocument();
+    });
+
+    it('re-checks the confirmation when the new password changes', async () => {
+      renderComponent();
+
+      await user.type(newPasswordField(), 'abcdefgh');
+      await user.type(confirmPasswordField(), 'abcdefgh');
+      await user.tab();
+      expect(screen.queryByText(passwordMatchMessage$())).not.toBeInTheDocument();
+
+      await user.type(newPasswordField(), 'ZZ');
+      await user.tab();
+      expect(screen.getByText(passwordMatchMessage$())).toBeInTheDocument();
+    });
+
+    it('clears the mismatch error when the new password is changed to match', async () => {
+      renderComponent();
+
+      await user.type(newPasswordField(), 'abcdefgh');
+      await user.type(confirmPasswordField(), 'abcdefghZZ');
+      await user.tab();
+      expect(screen.getByText(passwordMatchMessage$())).toBeInTheDocument();
+
+      await user.type(newPasswordField(), 'ZZ');
+      expect(screen.queryByText(passwordMatchMessage$())).not.toBeInTheDocument();
+    });
+
+    it('shows the required error on both fields when submitting an empty form', async () => {
+      renderComponent();
+
+      await user.click(screen.getByRole('button', { name: submitButton$() }));
+
+      expect(screen.getAllByText(fieldRequired$())).toHaveLength(2);
+      expect(setPasswordMock).not.toHaveBeenCalled();
+    });
+
+    it('moves focus to the new password field when it is the first invalid field', async () => {
+      renderComponent();
+
+      await user.click(screen.getByRole('button', { name: submitButton$() }));
+
+      await waitFor(() => {
+        expect(newPasswordField()).toHaveFocus();
+      });
+    });
+
+    it('moves focus to the confirmation field when only it is invalid', async () => {
+      renderComponent();
+
+      await user.type(newPasswordField(), 'abcdefgh');
+      await user.type(confirmPasswordField(), 'mismatch');
+      await user.click(screen.getByRole('button', { name: submitButton$() }));
+
+      await waitFor(() => {
+        expect(confirmPasswordField()).toHaveFocus();
+      });
+    });
+  });
+
+  it('shows and announces an error banner when resetting the password fails', async () => {
+    const user = userEvent.setup();
+    setPasswordMock.mockRejectedValueOnce(new Error('Invalid token'));
+    renderComponent();
+
+    await user.type(screen.getByLabelText(passwordLabel$()), 'validPassword123');
+    await user.type(screen.getByLabelText(passwordConfirmLabel$()), 'validPassword123');
+    await user.click(screen.getByRole('button', { name: submitButton$() }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('alert')).toHaveTextContent(resetPasswordFailed$());
+    });
+  });
+
+  it('preserves leading and trailing whitespace in the submitted passwords', async () => {
+    const user = userEvent.setup();
+    const PASSWORD_WITH_SPACES = '  spaced password  ';
+    renderComponent();
+
+    await user.type(screen.getByLabelText(passwordLabel$()), PASSWORD_WITH_SPACES);
+    await user.type(screen.getByLabelText(passwordConfirmLabel$()), PASSWORD_WITH_SPACES);
+    await user.click(screen.getByRole('button', { name: submitButton$() }));
+
+    await waitFor(() => {
+      expect(setPasswordMock).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          new_password1: PASSWORD_WITH_SPACES,
+          new_password2: PASSWORD_WITH_SPACES,
+        }),
+      );
+    });
+  });
 });
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue
index 198b0ea212..d5e490af2e 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPassword.vue
@@ -18,20 +18,18 @@
         {{ $tr('resetPasswordFailed') }}
       </StudioBanner>
       <StudioPasswordField
+        ref="new_password1"
         v-model="new_password1"
         autofocus
         :label="$tr('passwordLabel')"
-        :errorMessages="
-          touched.new_password1 && errors.new_password1 ? [new_password1ErrorText] : []
-        "
+        :errorMessages="new_password1Error ? [new_password1Error] : []"
         @blur="touched.new_password1 = true"
       />
       <StudioPasswordField
+        ref="new_password2"
         v-model="new_password2"
         :label="$tr('passwordConfirmLabel')"
-        :errorMessages="
-          touched.new_password2 && errors.new_password2 ? [new_password2ErrorText] : []
-        "
+        :errorMessages="new_password2Error ? [new_password2Error] : []"
         @blur="touched.new_password2 = true"
       />
       <KButton
@@ -55,14 +53,19 @@
   import commonStrings from 'shared/translator';
   import { generateFormMixin } from 'shared/mixins';
 
+  const validators = {
+    new_password1: v => Boolean(v) && v.length >= 8,
+    new_password2: (v, vm) => Boolean(v) && v === vm.form.new_password1,
+  };
+
   const formMixin = generateFormMixin({
     new_password1: {
       required: true,
-      validator: v => Boolean(v) && v.length >= 8,
+      validator: validators.new_password1,
     },
     new_password2: {
       required: true,
-      validator: (v, vm) => Boolean(v) && v === vm.form.new_password1,
+      validator: validators.new_password2,
     },
   });
 
@@ -78,9 +81,7 @@
       return {
         error: false,
         // Gates error display until blur, since formMixin's setters otherwise
-        // mark errors on every keystroke. Create.vue has no equivalent gate,
-        // so the two forms validate differently; epic-level decision tracked
-        // on #5060.
+        // mark errors on every keystroke.
         touched: {
           new_password1: false,
           new_password2: false,
@@ -88,15 +89,24 @@
       };
     },
     computed: {
-      new_password1ErrorText() {
-        if (!this.new_password1) {
+      new_password1Error() {
+        if (!this.touched.new_password1 || validators.new_password1(this.form.new_password1)) {
+          return '';
+        }
+        if (!this.form.new_password1) {
           /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
           return commonStrings.$tr('fieldRequired');
         }
         return this.$tr('passwordValidationMessage');
       },
-      new_password2ErrorText() {
-        if (!this.new_password2) {
+      new_password2Error() {
+        if (
+          !this.touched.new_password2 ||
+          validators.new_password2(this.form.new_password2, this)
+        ) {
+          return '';
+        }
+        if (!this.form.new_password2) {
           /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
           return commonStrings.$tr('fieldRequired');
         }
@@ -114,6 +124,7 @@
         // trims every field. Passwords must keep the leading/trailing spaces
         // the user typed, both here and in the payload below.
         if (!this.validate(this.form)) {
+          this.focusFirstInvalidField();
           return;
         }
 
@@ -132,6 +143,12 @@
             this.error = true;
           });
       },
+      focusFirstInvalidField() {
+        const firstInvalidField = this.errors.new_password1 ? 'new_password1' : 'new_password2';
+        this.$nextTick(() => {
+          this.$refs[firstInvalidField].$el.querySelector('input').focus();
+        });
+      },
     },
     $trs: {
       resetPasswordTitle: 'Reset your password',

From 893f25c1a365c53150f3d69f6f0ec70693ca929e Mon Sep 17 00:00:00 2001
From: LightCreator1007 <arunitchakraborty2006@gmail.com>
Date: Tue, 6 Oct 2026 22:01:50 +0530
Subject: [PATCH 3/3] Scope the blur required-error test to the new password
 field

---
 .../accounts/pages/__tests__/resetPassword.spec.js     | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/__tests__/resetPassword.spec.js b/contentcuration/contentcuration/frontend/accounts/pages/__tests__/resetPassword.spec.js
index ff8adf8bf4..89c403d098 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/__tests__/resetPassword.spec.js
+++ b/contentcuration/contentcuration/frontend/accounts/pages/__tests__/resetPassword.spec.js
@@ -1,4 +1,4 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/vue';
+import { render, screen, fireEvent, waitFor, within } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import VueRouter from 'vue-router';
 import { createLocalVue } from '@vue/test-utils';
@@ -104,6 +104,9 @@ describe('ResetPassword', () => {
 
     const newPasswordField = () => screen.getByLabelText(passwordLabel$());
     const confirmPasswordField = () => screen.getByLabelText(passwordConfirmLabel$());
+    // KTextbox doesn't link its error text to the input via ARIA, so scope
+    // queries to the textbox container that holds both.
+    const fieldContainer = field => field.closest('.ui-textbox');
 
     it('shows the required error when an empty field loses focus', async () => {
       renderComponent();
@@ -111,7 +114,10 @@ describe('ResetPassword', () => {
       await user.click(newPasswordField());
       await user.tab();
 
-      expect(screen.getByText(fieldRequired$())).toBeInTheDocument();
+      expect(within(fieldContainer(newPasswordField())).getByText(fieldRequired$())).toBeVisible();
+      expect(
+        within(fieldContainer(confirmPasswordField())).queryByText(fieldRequired$()),
+      ).not.toBeInTheDocument();
     });
 
     it('hides errors while typing and shows them once the field loses focus', async () => {