From 5091a3c36c3c154b5574f0041be9f05149e9069c Mon Sep 17 00:00:00 2001
From: Vaibhavkumar-tech <vaibhavkumar62078@gmail.com>
Date: Tue, 8 Sep 2026 12:23:01 +0000
Subject: [PATCH 1/4]  update forgetPassword.vue

---
 .../pages/resetPassword/ForgotPassword.vue    | 162 +++++++++++-------
 1 file changed, 101 insertions(+), 61 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
index c6581cd722..3ed67451cd 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
@@ -1,92 +1,132 @@
 <template>
-
-  <MessageLayout
+  <StudioMessageLayout
     :header="$tr('forgotPasswordTitle')"
     :text="$tr('forgotPasswordPrompt')"
   >
-    <VForm
+    <form
       ref="form"
-      lazy-validation
+      novalidate
       @submit.prevent="submit"
     >
-      <Banner
-        :text="$tr('forgotPasswordFailed')"
-        :value="error"
+      <StudioBanner
+        v-if="error"
         error
         class="mb-4"
         data-testid="error-banner"
-      />
-      <EmailField
+      >
+        {{ $tr('forgotPasswordFailed') }}
+      </StudioBanner>
+
+      <StudioEmailField
         v-model="email"
         autofocus
+        :error-messages="emailErrors"
+        @blur="showEmailError"
+        @input="hideEmailError"
+        @click.native="hideEmailError"
       />
+
       <KButton
         primary
         class="w-100"
         :text="$tr('submitButton')"
         type="submit"
       />
-    </VForm>
-  </MessageLayout>
-
+    </form>
+  </StudioMessageLayout>
 </template>
 
-
 <script>
+import { mapActions } from 'vuex';
+import StudioMessageLayout from '../../components/StudioMessageLayout';
+import StudioEmailField from '../../components/form/StudioEmailField';
+import StudioBanner from '../../../shared/views/StudioBanner';
+import { generateFormMixin } from '../../../shared/mixins.js';
 
-  import { mapActions } from 'vuex';
-  import MessageLayout from '../../components/MessageLayout';
-  import EmailField from 'shared/views/form/EmailField';
-  import Banner from 'shared/views/Banner';
-
-  export default {
-    name: 'ForgotPassword',
-    components: {
-      MessageLayout,
-      EmailField,
-      Banner,
-    },
-    data() {
-      return {
-        email: '',
-        error: false,
-      };
+const formFields = {
+  email: {
+    required: true,
+    validator: value => Boolean(value && /.+@.+\..+/.test(value)),
+  },
+};
+
+export default {
+  name: 'ForgotPassword',
+
+  mixins: [generateFormMixin(formFields)],
+
+  components: {
+    StudioMessageLayout,
+    StudioEmailField,
+    StudioBanner,
+  },
+
+  data() {
+    return {
+      error: false,
+      emailValidationVisible: false,
+    };
+  },
+
+  computed: {
+    emailErrors() {
+      if (!this.emailValidationVisible || !this.errors.email) {
+        return [];
+      }
+
+      return [this.$tr('validEmailMessage')];
     },
-    methods: {
-      ...mapActions('account', ['sendPasswordResetLink']),
-      submit() {
-        this.error = false;
-        if (this.$refs.form.validate()) {
-          this.sendPasswordResetLink(this.email)
-            .then(() => {
-              this.$router
-                .push({
-                  name: 'PasswordInstructionsSent',
-                })
-                .catch(() => {});
-            })
-            .catch(() => {
-              this.error = true;
-            });
-        }
-      },
+  },
+
+  methods: {
+    ...mapActions('account', ['sendPasswordResetLink']),
+
+    hideEmailError() {
+      this.emailValidationVisible = false;
     },
-    $trs: {
-      forgotPasswordTitle: 'Reset your password',
-      forgotPasswordPrompt:
-        '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.',
+
+    showEmailError() {
+      this.emailValidationVisible = true;
     },
-  };
 
-</script>
+    submit() {
+      this.error = false;
 
+      const formData = this.clean();
 
-<style lang="scss" scoped>
+      if (!this.validate(formData)) {
+        this.emailValidationVisible = true;
+        return;
+      }
+
+      this.sendPasswordResetLink(formData.email)
+        .then(() => {
+          this.$router
+            .push({
+              name: 'PasswordInstructionsSent',
+            })
+            .catch(() => {});
+        })
+        .catch(() => {
+          this.error = true;
+        });
+    },
+  },
 
-  .w-100 {
-    width: 100%;
-  }
+  $trs: {
+    forgotPasswordTitle: 'Reset your password',
+    forgotPasswordPrompt:
+      '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.',
+    validEmailMessage: 'Please enter a valid email',
+  },
+};
+</script>
 
-</style>
+<style lang="scss" scoped>
+.w-100 {
+  width: 100%;
+}
+</style>
\ No newline at end of file

From 35cc159e22131bfa019cad8e238aad0aa7a8fa30 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Thu, 10 Sep 2026 11:58:13 +0000
Subject: [PATCH 2/4] [pre-commit.ci lite] apply automatic fixes

---
 .../pages/resetPassword/ForgotPassword.vue    | 165 +++++++++---------
 1 file changed, 86 insertions(+), 79 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
index 3ed67451cd..decb7f6ad4 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
@@ -1,4 +1,5 @@
 <template>
+
   <StudioMessageLayout
     :header="$tr('forgotPasswordTitle')"
     :text="$tr('forgotPasswordPrompt')"
@@ -34,99 +35,105 @@
       />
     </form>
   </StudioMessageLayout>
+
 </template>
 
+
 <script>
-import { mapActions } from 'vuex';
-import StudioMessageLayout from '../../components/StudioMessageLayout';
-import StudioEmailField from '../../components/form/StudioEmailField';
-import StudioBanner from '../../../shared/views/StudioBanner';
-import { generateFormMixin } from '../../../shared/mixins.js';
-
-const formFields = {
-  email: {
-    required: true,
-    validator: value => Boolean(value && /.+@.+\..+/.test(value)),
-  },
-};
-
-export default {
-  name: 'ForgotPassword',
-
-  mixins: [generateFormMixin(formFields)],
-
-  components: {
-    StudioMessageLayout,
-    StudioEmailField,
-    StudioBanner,
-  },
-
-  data() {
-    return {
-      error: false,
-      emailValidationVisible: false,
-    };
-  },
-
-  computed: {
-    emailErrors() {
-      if (!this.emailValidationVisible || !this.errors.email) {
-        return [];
-      }
-
-      return [this.$tr('validEmailMessage')];
+
+  import { mapActions } from 'vuex';
+  import StudioMessageLayout from '../../components/StudioMessageLayout';
+  import StudioEmailField from '../../components/form/StudioEmailField';
+  import StudioBanner from '../../../shared/views/StudioBanner';
+  import { generateFormMixin } from '../../../shared/mixins.js';
+
+  const formFields = {
+    email: {
+      required: true,
+      validator: value => Boolean(value && /.+@.+\..+/.test(value)),
     },
-  },
+  };
+
+  export default {
+    name: 'ForgotPassword',
 
-  methods: {
-    ...mapActions('account', ['sendPasswordResetLink']),
+    mixins: [generateFormMixin(formFields)],
 
-    hideEmailError() {
-      this.emailValidationVisible = false;
+    components: {
+      StudioMessageLayout,
+      StudioEmailField,
+      StudioBanner,
     },
 
-    showEmailError() {
-      this.emailValidationVisible = true;
+    data() {
+      return {
+        error: false,
+        emailValidationVisible: false,
+      };
     },
 
-    submit() {
-      this.error = false;
+    computed: {
+      emailErrors() {
+        if (!this.emailValidationVisible || !this.errors.email) {
+          return [];
+        }
+
+        return [this.$tr('validEmailMessage')];
+      },
+    },
 
-      const formData = this.clean();
+    methods: {
+      ...mapActions('account', ['sendPasswordResetLink']),
 
-      if (!this.validate(formData)) {
+      hideEmailError() {
+        this.emailValidationVisible = false;
+      },
+
+      showEmailError() {
         this.emailValidationVisible = true;
-        return;
-      }
-
-      this.sendPasswordResetLink(formData.email)
-        .then(() => {
-          this.$router
-            .push({
-              name: 'PasswordInstructionsSent',
-            })
-            .catch(() => {});
-        })
-        .catch(() => {
-          this.error = true;
-        });
+      },
+
+      submit() {
+        this.error = false;
+
+        const formData = this.clean();
+
+        if (!this.validate(formData)) {
+          this.emailValidationVisible = true;
+          return;
+        }
+
+        this.sendPasswordResetLink(formData.email)
+          .then(() => {
+            this.$router
+              .push({
+                name: 'PasswordInstructionsSent',
+              })
+              .catch(() => {});
+          })
+          .catch(() => {
+            this.error = true;
+          });
+      },
+    },
+
+    $trs: {
+      forgotPasswordTitle: 'Reset your password',
+      forgotPasswordPrompt:
+        '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.',
+      validEmailMessage: 'Please enter a valid email',
     },
-  },
-
-  $trs: {
-    forgotPasswordTitle: 'Reset your password',
-    forgotPasswordPrompt:
-      '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.',
-    validEmailMessage: 'Please enter a valid email',
-  },
-};
+  };
+
 </script>
 
+
 <style lang="scss" scoped>
-.w-100 {
-  width: 100%;
-}
-</style>
\ No newline at end of file
+
+  .w-100 {
+    width: 100%;
+  }
+
+</style>

From cbc030b109ad93c587577770e740e27a19e9bab0 Mon Sep 17 00:00:00 2001
From: Vaibhavkumar-tech <vaibhavkumar62078@gmail.com>
Date: Thu, 24 Sep 2026 05:45:38 +0000
Subject: [PATCH 3/4]  fix the size

---
 .../pages/resetPassword/ForgotPassword.vue    | 178 +++++++++---------
 1 file changed, 92 insertions(+), 86 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
index decb7f6ad4..eb35dcc497 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
@@ -1,5 +1,4 @@
 <template>
-
   <StudioMessageLayout
     :header="$tr('forgotPasswordTitle')"
     :text="$tr('forgotPasswordPrompt')"
@@ -7,6 +6,7 @@
     <form
       ref="form"
       novalidate
+      class="forgot-password-form"
       @submit.prevent="submit"
     >
       <StudioBanner
@@ -21,6 +21,7 @@
       <StudioEmailField
         v-model="email"
         autofocus
+        class="w-100 email-field"
         :error-messages="emailErrors"
         @blur="showEmailError"
         @input="hideEmailError"
@@ -35,105 +36,110 @@
       />
     </form>
   </StudioMessageLayout>
-
 </template>
 
-
 <script>
-
-  import { mapActions } from 'vuex';
-  import StudioMessageLayout from '../../components/StudioMessageLayout';
-  import StudioEmailField from '../../components/form/StudioEmailField';
-  import StudioBanner from '../../../shared/views/StudioBanner';
-  import { generateFormMixin } from '../../../shared/mixins.js';
-
-  const formFields = {
-    email: {
-      required: true,
-      validator: value => Boolean(value && /.+@.+\..+/.test(value)),
+import { mapActions } from 'vuex';
+import StudioMessageLayout from '../../components/StudioMessageLayout';
+import StudioEmailField from '../../components/form/StudioEmailField';
+import StudioBanner from '../../../shared/views/StudioBanner';
+import { generateFormMixin } from '../../../shared/mixins.js';
+
+const formFields = {
+  email: {
+    required: true,
+    validator: value => Boolean(value && /.+@.+\..+/.test(value)),
+  },
+};
+
+export default {
+  name: 'ForgotPassword',
+
+  mixins: [generateFormMixin(formFields)],
+
+  components: {
+    StudioMessageLayout,
+    StudioEmailField,
+    StudioBanner,
+  },
+
+  data() {
+    return {
+      error: false,
+      emailValidationVisible: false,
+    };
+  },
+
+  computed: {
+    emailErrors() {
+      if (!this.emailValidationVisible || !this.errors.email) {
+        return [];
+      }
+
+      return [this.$tr('validEmailMessage')];
     },
-  };
-
-  export default {
-    name: 'ForgotPassword',
+  },
 
-    mixins: [generateFormMixin(formFields)],
+  methods: {
+    ...mapActions('account', ['sendPasswordResetLink']),
 
-    components: {
-      StudioMessageLayout,
-      StudioEmailField,
-      StudioBanner,
+    hideEmailError() {
+      this.emailValidationVisible = false;
     },
 
-    data() {
-      return {
-        error: false,
-        emailValidationVisible: false,
-      };
+    showEmailError() {
+      this.emailValidationVisible = true;
     },
 
-    computed: {
-      emailErrors() {
-        if (!this.emailValidationVisible || !this.errors.email) {
-          return [];
-        }
-
-        return [this.$tr('validEmailMessage')];
-      },
-    },
+    submit() {
+      this.error = false;
 
-    methods: {
-      ...mapActions('account', ['sendPasswordResetLink']),
+      const formData = this.clean();
 
-      hideEmailError() {
-        this.emailValidationVisible = false;
-      },
-
-      showEmailError() {
+      if (!this.validate(formData)) {
         this.emailValidationVisible = true;
-      },
-
-      submit() {
-        this.error = false;
-
-        const formData = this.clean();
-
-        if (!this.validate(formData)) {
-          this.emailValidationVisible = true;
-          return;
-        }
-
-        this.sendPasswordResetLink(formData.email)
-          .then(() => {
-            this.$router
-              .push({
-                name: 'PasswordInstructionsSent',
-              })
-              .catch(() => {});
-          })
-          .catch(() => {
-            this.error = true;
-          });
-      },
-    },
-
-    $trs: {
-      forgotPasswordTitle: 'Reset your password',
-      forgotPasswordPrompt:
-        '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.',
-      validEmailMessage: 'Please enter a valid email',
+        return;
+      }
+
+      this.sendPasswordResetLink(formData.email)
+        .then(() => {
+          this.$router
+            .push({
+              name: 'PasswordInstructionsSent',
+            })
+            .catch(() => {});
+        })
+        .catch(() => {
+          this.error = true;
+        });
     },
-  };
-
+  },
+
+  $trs: {
+    forgotPasswordTitle: 'Reset your password',
+    forgotPasswordPrompt:
+      '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.',
+    validEmailMessage: 'Please enter a valid email',
+  },
+};
 </script>
 
-
 <style lang="scss" scoped>
-
-  .w-100 {
-    width: 100%;
-  }
-
-</style>
+.forgot-password-form {
+  width: 400px;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.email-field {
+  margin-bottom: 24px;
+}
+
+.w-100 {
+  display: block;
+  width: 100% !important;
+}
+</style>
\ No newline at end of file

From 6325752b3eac5ccf7a050670b05558a9e778ba5c Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Thu, 24 Sep 2026 12:13:11 +0000
Subject: [PATCH 4/4] [pre-commit.ci lite] apply automatic fixes

---
 .../pages/resetPassword/ForgotPassword.vue    | 189 +++++++++---------
 1 file changed, 98 insertions(+), 91 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
index eb35dcc497..ae8eaf71f6 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue
@@ -1,4 +1,5 @@
 <template>
+
   <StudioMessageLayout
     :header="$tr('forgotPasswordTitle')"
     :text="$tr('forgotPasswordPrompt')"
@@ -21,7 +22,7 @@
       <StudioEmailField
         v-model="email"
         autofocus
-        class="w-100 email-field"
+        class="email-field w-100"
         :error-messages="emailErrors"
         @blur="showEmailError"
         @input="hideEmailError"
@@ -36,110 +37,116 @@
       />
     </form>
   </StudioMessageLayout>
+
 </template>
 
+
 <script>
-import { mapActions } from 'vuex';
-import StudioMessageLayout from '../../components/StudioMessageLayout';
-import StudioEmailField from '../../components/form/StudioEmailField';
-import StudioBanner from '../../../shared/views/StudioBanner';
-import { generateFormMixin } from '../../../shared/mixins.js';
-
-const formFields = {
-  email: {
-    required: true,
-    validator: value => Boolean(value && /.+@.+\..+/.test(value)),
-  },
-};
-
-export default {
-  name: 'ForgotPassword',
-
-  mixins: [generateFormMixin(formFields)],
-
-  components: {
-    StudioMessageLayout,
-    StudioEmailField,
-    StudioBanner,
-  },
-
-  data() {
-    return {
-      error: false,
-      emailValidationVisible: false,
-    };
-  },
-
-  computed: {
-    emailErrors() {
-      if (!this.emailValidationVisible || !this.errors.email) {
-        return [];
-      }
-
-      return [this.$tr('validEmailMessage')];
+
+  import { mapActions } from 'vuex';
+  import StudioMessageLayout from '../../components/StudioMessageLayout';
+  import StudioEmailField from '../../components/form/StudioEmailField';
+  import StudioBanner from '../../../shared/views/StudioBanner';
+  import { generateFormMixin } from '../../../shared/mixins.js';
+
+  const formFields = {
+    email: {
+      required: true,
+      validator: value => Boolean(value && /.+@.+\..+/.test(value)),
     },
-  },
+  };
 
-  methods: {
-    ...mapActions('account', ['sendPasswordResetLink']),
+  export default {
+    name: 'ForgotPassword',
 
-    hideEmailError() {
-      this.emailValidationVisible = false;
+    mixins: [generateFormMixin(formFields)],
+
+    components: {
+      StudioMessageLayout,
+      StudioEmailField,
+      StudioBanner,
+    },
+
+    data() {
+      return {
+        error: false,
+        emailValidationVisible: false,
+      };
     },
 
-    showEmailError() {
-      this.emailValidationVisible = true;
+    computed: {
+      emailErrors() {
+        if (!this.emailValidationVisible || !this.errors.email) {
+          return [];
+        }
+
+        return [this.$tr('validEmailMessage')];
+      },
     },
 
-    submit() {
-      this.error = false;
+    methods: {
+      ...mapActions('account', ['sendPasswordResetLink']),
 
-      const formData = this.clean();
+      hideEmailError() {
+        this.emailValidationVisible = false;
+      },
 
-      if (!this.validate(formData)) {
+      showEmailError() {
         this.emailValidationVisible = true;
-        return;
-      }
-
-      this.sendPasswordResetLink(formData.email)
-        .then(() => {
-          this.$router
-            .push({
-              name: 'PasswordInstructionsSent',
-            })
-            .catch(() => {});
-        })
-        .catch(() => {
-          this.error = true;
-        });
+      },
+
+      submit() {
+        this.error = false;
+
+        const formData = this.clean();
+
+        if (!this.validate(formData)) {
+          this.emailValidationVisible = true;
+          return;
+        }
+
+        this.sendPasswordResetLink(formData.email)
+          .then(() => {
+            this.$router
+              .push({
+                name: 'PasswordInstructionsSent',
+              })
+              .catch(() => {});
+          })
+          .catch(() => {
+            this.error = true;
+          });
+      },
     },
-  },
-
-  $trs: {
-    forgotPasswordTitle: 'Reset your password',
-    forgotPasswordPrompt:
-      '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.',
-    validEmailMessage: 'Please enter a valid email',
-  },
-};
+
+    $trs: {
+      forgotPasswordTitle: 'Reset your password',
+      forgotPasswordPrompt:
+        '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.',
+      validEmailMessage: 'Please enter a valid email',
+    },
+  };
+
 </script>
 
+
 <style lang="scss" scoped>
-.forgot-password-form {
-  width: 400px;
-  max-width: 100%;
-  margin: 0 auto;
-}
-
-.email-field {
-  margin-bottom: 24px;
-}
-
-.w-100 {
-  display: block;
-  width: 100% !important;
-}
-</style>
\ No newline at end of file
+
+  .forgot-password-form {
+    width: 400px;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+
+  .email-field {
+    margin-bottom: 24px;
+  }
+
+  .w-100 {
+    display: block;
+    width: 100% !important;
+  }
+
+</style>