From 8af1de6f82c445e52752ba514cdbf8ebef295e06 Mon Sep 17 00:00:00 2001
From: adibmbrk <adibmbrk@gmail.com>
Date: Mon, 26 Oct 2026 16:17:27 +0530
Subject: [PATCH 1/3] Remove Vuetify from Forgot password page

Signed-off-by: adibmbrk <adibmbrk@gmail.com>
---
 .../pages/__tests__/forgotPassword.spec.js    |  8 +-
 .../pages/resetPassword/ForgotPassword.vue    | 77 ++++++++++++++-----
 2 files changed, 63 insertions(+), 22 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/__tests__/forgotPassword.spec.js b/contentcuration/contentcuration/frontend/accounts/pages/__tests__/forgotPassword.spec.js
index ca34fa905f..dacc30c839 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/__tests__/forgotPassword.spec.js
+++ b/contentcuration/contentcuration/frontend/accounts/pages/__tests__/forgotPassword.spec.js
@@ -1,6 +1,7 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/vue';
 import VueRouter from 'vue-router';
 import ForgotPassword from '../resetPassword/ForgotPassword';
+import commonStrings from 'shared/translator';
 
 const sendPasswordResetLinkMock = jest.fn(() => Promise.resolve());
 
@@ -40,11 +41,13 @@ describe('ForgotPassword', () => {
     expect(screen.getByText('Reset your password')).toBeInTheDocument();
     expect(screen.getByLabelText('Email')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
+    expect(screen.queryByTestId('error-banner')).not.toBeInTheDocument();
   });
 
   it('should not submit form with empty email', async () => {
     renderComponent();
     await fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
+    expect(await screen.findByText(commonStrings.$tr('fieldRequired'))).toBeInTheDocument();
     expect(sendPasswordResetLinkMock).not.toHaveBeenCalled();
   });
 
@@ -52,6 +55,7 @@ describe('ForgotPassword', () => {
     renderComponent();
     await fireEvent.update(screen.getByLabelText(/email/i), 'invalid-email');
     await fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
+    expect(await screen.findByText(ForgotPassword.$trs.emailValidationMessage)).toBeInTheDocument();
     expect(sendPasswordResetLinkMock).not.toHaveBeenCalled();
   });
 
@@ -74,6 +78,8 @@ describe('ForgotPassword', () => {
     renderComponent();
     await fireEvent.update(screen.getByLabelText(/email/i), 'test@test.com');
     await fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
-    expect(await screen.findByTestId('error-banner')).toBeInTheDocument();
+    expect(await screen.findByTestId('error-banner')).toHaveTextContent(
+      ForgotPassword.$trs.forgotPasswordFailed,
+    );
   });
 });
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
index c6581cd722..fa1c1a3fe9 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
@@ -1,24 +1,27 @@
 <template>
 
-  <MessageLayout
+  <StudioMessageLayout
     :header="$tr('forgotPasswordTitle')"
     :text="$tr('forgotPasswordPrompt')"
   >
-    <VForm
-      ref="form"
-      lazy-validation
+    <form
+      class="forgot-password-form"
+      novalidate
       @submit.prevent="submit"
     >
-      <Banner
-        :text="$tr('forgotPasswordFailed')"
-        :value="error"
+      <StudioBanner
+        v-if="error"
         error
-        class="mb-4"
+        class="banner"
         data-testid="error-banner"
-      />
-      <EmailField
+      >
+        {{ $tr('forgotPasswordFailed') }}
+      </StudioBanner>
+      <StudioEmailField
         v-model="email"
         autofocus
+        :label="$tr('emailLabel')"
+        :errorMessages="errors.email ? [emailErrorText] : []"
       />
       <KButton
         primary
@@ -26,8 +29,8 @@
         :text="$tr('submitButton')"
         type="submit"
       />
-    </VForm>
-  </MessageLayout>
+    </form>
+  </StudioMessageLayout>
 
 </template>
 
@@ -35,29 +38,48 @@
 <script>
 
   import { mapActions } from 'vuex';
-  import MessageLayout from '../../components/MessageLayout';
-  import EmailField from 'shared/views/form/EmailField';
-  import Banner from 'shared/views/Banner';
+  import StudioMessageLayout from '../../components/StudioMessageLayout';
+  import StudioEmailField from '../../components/form/StudioEmailField';
+  import StudioBanner from 'shared/views/StudioBanner';
+  import commonStrings from 'shared/translator';
+  import { generateFormMixin } from 'shared/mixins';
+
+  const formMixin = generateFormMixin({
+    email: {
+      required: true,
+      validator: v => Boolean(v && v.trim()) && /.+@.+\..+/.test(v),
+    },
+  });
 
   export default {
     name: 'ForgotPassword',
     components: {
-      MessageLayout,
-      EmailField,
-      Banner,
+      StudioMessageLayout,
+      StudioEmailField,
+      StudioBanner,
     },
+    mixins: [formMixin],
     data() {
       return {
-        email: '',
         error: false,
       };
     },
+    computed: {
+      emailErrorText() {
+        if (!this.email || !this.email.trim()) {
+          /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
+          return commonStrings.$tr('fieldRequired');
+        }
+        return this.$tr('emailValidationMessage');
+      },
+    },
     methods: {
       ...mapActions('account', ['sendPasswordResetLink']),
       submit() {
         this.error = false;
-        if (this.$refs.form.validate()) {
-          this.sendPasswordResetLink(this.email)
+        const formData = this.clean();
+        if (this.validate(formData)) {
+          this.sendPasswordResetLink(formData.email)
             .then(() => {
               this.$router
                 .push({
@@ -77,6 +99,8 @@
         'Please enter your email address to receive instructions for resetting your password',
       submitButton: 'Submit',
       forgotPasswordFailed: 'Failed to send a password reset link. Please try again.',
+      emailLabel: 'Email',
+      emailValidationMessage: 'Please enter a valid email',
     },
   };
 
@@ -85,6 +109,17 @@
 
 <style lang="scss" scoped>
 
+  .forgot-password-form {
+    width: 400px;
+    max-width: 100%;
+    text-align: left;
+  }
+
+  .banner {
+    width: 100%;
+    margin-bottom: 16px;
+  }
+
   .w-100 {
     width: 100%;
   }

From 4e2476a90cf541b0b90e6c2f54cea6cf3cbffc05 Mon Sep 17 00:00:00 2001
From: adibmbrk <adibmbrk@gmail.com>
Date: Mon, 26 Oct 2026 16:46:06 +0530
Subject: [PATCH 2/3] Scope email validation assertions to the email field

Signed-off-by: adibmbrk <adibmbrk@gmail.com>
---
 .../accounts/pages/__tests__/forgotPassword.spec.js  | 12 ++++++++++--
 .../accounts/pages/resetPassword/ForgotPassword.vue  |  1 +
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/__tests__/forgotPassword.spec.js b/contentcuration/contentcuration/frontend/accounts/pages/__tests__/forgotPassword.spec.js
index dacc30c839..c0da8359ff 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/__tests__/forgotPassword.spec.js
+++ b/contentcuration/contentcuration/frontend/accounts/pages/__tests__/forgotPassword.spec.js
@@ -47,7 +47,11 @@ describe('ForgotPassword', () => {
   it('should not submit form with empty email', async () => {
     renderComponent();
     await fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
-    expect(await screen.findByText(commonStrings.$tr('fieldRequired'))).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByTestId('email-field')).toHaveTextContent(
+        commonStrings.$tr('fieldRequired'),
+      );
+    });
     expect(sendPasswordResetLinkMock).not.toHaveBeenCalled();
   });
 
@@ -55,7 +59,11 @@ describe('ForgotPassword', () => {
     renderComponent();
     await fireEvent.update(screen.getByLabelText(/email/i), 'invalid-email');
     await fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
-    expect(await screen.findByText(ForgotPassword.$trs.emailValidationMessage)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByTestId('email-field')).toHaveTextContent(
+        ForgotPassword.$trs.emailValidationMessage,
+      );
+    });
     expect(sendPasswordResetLinkMock).not.toHaveBeenCalled();
   });
 
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
index fa1c1a3fe9..09220dc0a7 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
@@ -20,6 +20,7 @@
       <StudioEmailField
         v-model="email"
         autofocus
+        data-testid="email-field"
         :label="$tr('emailLabel')"
         :errorMessages="errors.email ? [emailErrorText] : []"
       />

From 3c46df4b45a0303c457d8ac569446e2b70e3d773 Mon Sep 17 00:00:00 2001
From: adibmbrk <adibmbrk@gmail.com>
Date: Mon, 26 Oct 2026 16:46:45 +0530
Subject: [PATCH 3/3] Show email validation error on blur or submit

Signed-off-by: adibmbrk <adibmbrk@gmail.com>
---
 .../pages/__tests__/forgotPassword.spec.js    | 20 +++++++++++++++++++
 .../pages/resetPassword/ForgotPassword.vue    |  5 ++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/__tests__/forgotPassword.spec.js b/contentcuration/contentcuration/frontend/accounts/pages/__tests__/forgotPassword.spec.js
index c0da8359ff..18a2a195b2 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/__tests__/forgotPassword.spec.js
+++ b/contentcuration/contentcuration/frontend/accounts/pages/__tests__/forgotPassword.spec.js
@@ -67,6 +67,26 @@ describe('ForgotPassword', () => {
     expect(sendPasswordResetLinkMock).not.toHaveBeenCalled();
   });
 
+  it('should not show validation error while typing', async () => {
+    renderComponent();
+    await fireEvent.update(screen.getByLabelText(/email/i), 'invalid-email');
+    expect(screen.getByTestId('email-field')).not.toHaveTextContent(
+      ForgotPassword.$trs.emailValidationMessage,
+    );
+  });
+
+  it('should show validation error on blur', async () => {
+    renderComponent();
+    const emailInput = screen.getByLabelText(/email/i);
+    await fireEvent.update(emailInput, 'invalid-email');
+    await fireEvent.blur(emailInput);
+    await waitFor(() => {
+      expect(screen.getByTestId('email-field')).toHaveTextContent(
+        ForgotPassword.$trs.emailValidationMessage,
+      );
+    });
+  });
+
   it('should submit form with valid email and navigate to success page', async () => {
     sendPasswordResetLinkMock.mockResolvedValue({});
     const { router } = renderComponent();
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
index 09220dc0a7..1c2cce67be 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
@@ -22,7 +22,8 @@
         autofocus
         data-testid="email-field"
         :label="$tr('emailLabel')"
-        :errorMessages="errors.email ? [emailErrorText] : []"
+        :errorMessages="showEmailError && errors.email ? [emailErrorText] : []"
+        @blur="showEmailError = true"
       />
       <KButton
         primary
@@ -63,6 +64,7 @@
     data() {
       return {
         error: false,
+        showEmailError: false,
       };
     },
     computed: {
@@ -78,6 +80,7 @@
       ...mapActions('account', ['sendPasswordResetLink']),
       submit() {
         this.error = false;
+        this.showEmailError = true;
         const formData = this.clean();
         if (this.validate(formData)) {
           this.sendPasswordResetLink(formData.email)