From 03897c4177edbff60cdebc0fbaeb7c65474f0d62 Mon Sep 17 00:00:00 2001
From: LightCreator1007 <arunitchakraborty2006@gmail.com>
Date: Fri, 3 Jul 2026 01:48:30 +0530
Subject: [PATCH 1/3] refactor: removed vuetify from request new activation
 link page

---
 .../RequestNewActivationLink.vue              | 79 +++++++++++++------
 1 file changed, 53 insertions(+), 26 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
index 4f07acb4db..49da4dd993 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
@@ -1,23 +1,24 @@
 <template>
-
-  <MessageLayout
+  <StudioMessageLayout
     :header="$tr('activationExpiredTitle')"
     :text="$tr('activationExpiredText')"
   >
-    <VForm
-      ref="form"
-      lazy-validation
+    <form
+      novalidate
       @submit.prevent="requestActivationLink"
     >
-      <Banner
-        :text="$tr('activationRequestFailed')"
-        :value="error"
+      <StudioBanner
+        v-if="true"
         error
-        class="mb-4"
-      />
-      <EmailField
+        class="banner"
+      >
+        {{ $tr('activationRequestFailed') }}
+      </StudioBanner>
+      <StudioEmailField
         v-model="email"
         autofocus
+        :label="$tr('emailLabel')"
+        :errorMessages="errors.email ? [emailErrorText] : []"
       />
       <KButton
         primary
@@ -25,38 +26,53 @@
         :text="$tr('submitButton')"
         type="submit"
       />
-    </VForm>
-  </MessageLayout>
-
+    </form>
+  </StudioMessageLayout>
 </template>
 
 
 <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 { generateFormMixin } from 'shared/mixins';
+
+  const formMixin = generateFormMixin({
+    email: {
+      required: true,
+      validator: v => Boolean(v && v.trim()) && /\S+@\S+\.\S+/.test(v),
+    },
+  });
 
   export default {
     name: 'RequestNewActivationLink',
     components: {
-      MessageLayout,
-      EmailField,
-      Banner,
+      StudioMessageLayout,
+      StudioEmailField,
+      StudioBanner,
     },
+    mixins: [formMixin],
     data() {
       return {
-        email: '',
         error: false,
       };
     },
+    computed: {
+      emailErrorText() {
+        if (!this.email || !this.email.trim()) {
+          return this.$tr('fieldRequiredMessage');
+        }
+        return this.$tr('emailValidationMessage');
+      },
+    },
     methods: {
       ...mapActions('account', ['sendActivationLink']),
       requestActivationLink() {
         this.error = false;
-        if (this.$refs.form.validate()) {
-          this.sendActivationLink(this.email)
+        const formData = this.clean();
+        if (this.validate(formData)) {
+          this.sendActivationLink(formData.email)
             .then(() => {
               this.$router.replace({ name: 'ActivationLinkReSent' }).catch(() => {});
             })
@@ -71,16 +87,27 @@
       activationExpiredText: 'This activation link has been used already or has expired.',
       submitButton: 'Submit',
       activationRequestFailed: 'Failed to send a new activation link. Please try again.',
+      emailLabel: 'Email',
+      fieldRequiredMessage: 'This field is required',
+      emailValidationMessage: 'Please enter a valid email',
     },
   };
-
 </script>
 
 
 <style lang="scss" scoped>
+  form {
+    width: 400px;
+    max-width: 100%;
+    text-align: left;
+  }
 
-  .w-100 {
+  .banner {
     width: 100%;
+    margin-bottom: 16px;
   }
 
+  .w-100 {
+    width: 100%;
+  }
 </style>

From 04827f103567d3c196a68650a557018f5af3c29a Mon Sep 17 00:00:00 2001
From: LightCreator1007 <arunitchakraborty2006@gmail.com>
Date: Fri, 3 Jul 2026 01:49:04 +0530
Subject: [PATCH 2/3] fixes

---
 .../accounts/pages/activateAccount/RequestNewActivationLink.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
index 49da4dd993..a92baa69fe 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
@@ -8,7 +8,7 @@
       @submit.prevent="requestActivationLink"
     >
       <StudioBanner
-        v-if="true"
+        v-if="error"
         error
         class="banner"
       >

From 790052e3a4a8f7ee4634e697de95d11cf132dbd8 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, 2 Jul 2026 20:34:40 +0000
Subject: [PATCH 3/3] [pre-commit.ci lite] apply automatic fixes

---
 .../pages/activateAccount/RequestNewActivationLink.vue      | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
index a92baa69fe..8e06553d77 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
@@ -1,4 +1,5 @@
 <template>
+
   <StudioMessageLayout
     :header="$tr('activationExpiredTitle')"
     :text="$tr('activationExpiredText')"
@@ -28,10 +29,12 @@
       />
     </form>
   </StudioMessageLayout>
+
 </template>
 
 
 <script>
+
   import { mapActions } from 'vuex';
   import StudioMessageLayout from '../../components/StudioMessageLayout';
   import StudioEmailField from '../../components/form/StudioEmailField';
@@ -92,10 +95,12 @@
       emailValidationMessage: 'Please enter a valid email',
     },
   };
+
 </script>
 
 
 <style lang="scss" scoped>
+
   form {
     width: 400px;
     max-width: 100%;
@@ -110,4 +115,5 @@
   .w-100 {
     width: 100%;
   }
+
 </style>