From 025e7c1ee2e18b77ca178a51af4fa4971bcf6b4e Mon Sep 17 00:00:00 2001
From: Aadarsh Mahesh K <aadarshmahk@gmail.com>
Date: Tue, 13 Jan 2026 14:10:40 +0530
Subject: [PATCH 1/2] feat: developed new StudioMessageLayout component

---
 .../components/StudioMessageLayout.vue        | 105 ++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 contentcuration/contentcuration/frontend/accounts/components/StudioMessageLayout.vue

diff --git a/contentcuration/contentcuration/frontend/accounts/components/StudioMessageLayout.vue b/contentcuration/contentcuration/frontend/accounts/components/StudioMessageLayout.vue
new file mode 100644
index 0000000000..dc1c187115
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/accounts/components/StudioMessageLayout.vue
@@ -0,0 +1,105 @@
+<template>
+
+  <div class="message-layout-wrapper">
+    <StudioPage
+      :centered="true"
+      :marginTop="0"
+    >
+      <div class="message-layout-content">
+        <h1 class="message-header">
+          {{ header }}
+        </h1>
+        <p
+          v-if="text"
+          class="message-text"
+        >
+          {{ text }}
+        </p>
+        <div class="message-slot-container">
+          <slot></slot>
+        </div>
+        <div class="link-container">
+          <slot name="back">
+            <KRouterLink
+              :to="{ name: 'Main' }"
+              :text="$tr('backToLogin')"
+              :appearance="basic - link"
+            />
+          </slot>
+        </div>
+      </div>
+    </StudioPage>
+  </div>
+
+</template>
+
+
+<script>
+
+  import StudioPage from '../../shared/views/StudioPage';
+
+  export default {
+    name: 'StudioMessageLayout',
+    components: {
+      StudioPage,
+    },
+    props: {
+      header: {
+        type: String,
+        required: true,
+      },
+      text: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    $trs: {
+      backToLogin: 'Continue to sign-in page',
+    },
+  };
+
+</script>
+
+
+<style scoped>
+
+  .message-layout-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+  }
+
+  .message-layout-content {
+    display: flex;
+    flex-direction: column;
+    max-width: 900px;
+    padding-top: 80px;
+    padding-bottom: 48px;
+    text-align: center;
+  }
+
+  .message-header {
+    margin-bottom: 6px;
+    font-size: 24px;
+    font-weight: bold;
+  }
+
+  .message-text {
+    margin-top: 4px;
+    margin-bottom: 20px;
+    font-size: 16px;
+  }
+
+  .message-slot-container {
+    max-width: 400px;
+    margin: 24px auto 0;
+    text-align: center;
+  }
+
+  .link-container {
+    margin-top: 24px;
+  }
+
+</style>

From e55da1788490414c87f2d7b42f6fa915a2ee227e Mon Sep 17 00:00:00 2001
From: Aadarsh Mahesh K <aadarshmahk@gmail.com>
Date: Tue, 13 Jan 2026 14:11:07 +0530
Subject: [PATCH 2/2] feat(accounts): replaced messageLayout with
 StudioMessageLayout

---
 .../accounts/pages/accountDeleted/AccountDeleted.vue      | 8 ++++----
 .../accounts/pages/activateAccount/AccountCreated.vue     | 8 ++++----
 .../pages/activateAccount/AccountNotActivated.vue         | 8 ++++----
 .../accounts/pages/activateAccount/ActivationExpired.vue  | 8 ++++----
 .../pages/activateAccount/ActivationLinkReSent.vue        | 6 +++---
 .../accounts/pages/activateAccount/ActivationSent.vue     | 6 +++---
 .../pages/resetPassword/PasswordInstructionsSent.vue      | 6 +++---
 .../accounts/pages/resetPassword/ResetLinkExpired.vue     | 8 ++++----
 .../accounts/pages/resetPassword/ResetPasswordSuccess.vue | 6 +++---
 9 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/accountDeleted/AccountDeleted.vue b/contentcuration/contentcuration/frontend/accounts/pages/accountDeleted/AccountDeleted.vue
index c439fab9af..0e521fb62d 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/accountDeleted/AccountDeleted.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/accountDeleted/AccountDeleted.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <MessageLayout :header="$tr('accountDeletedTitle')">
+  <StudioMessageLayout :header="$tr('accountDeletedTitle')">
     <template #back>
       <KRouterLink
         :to="{ name: 'Main' }"
@@ -9,19 +9,19 @@
         appearance="raised-button"
       />
     </template>
-  </MessageLayout>
+  </StudioMessageLayout>
 
 </template>
 
 
 <script>
 
-  import MessageLayout from '../../components/MessageLayout';
+  import StudioMessageLayout from '../../components/MessageLayout';
 
   export default {
     name: 'AccountDeleted',
     components: {
-      MessageLayout,
+      StudioMessageLayout,
     },
     $trs: {
       accountDeletedTitle: 'Account successfully deleted',
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountCreated.vue b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountCreated.vue
index 0e53ada2b2..2d2723b6c1 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountCreated.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountCreated.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <MessageLayout :header="$tr('accountCreatedTitle')">
+  <StudioMessageLayout :header="$tr('accountCreatedTitle')">
     <template #back>
       <KRouterLink
         :to="{ name: 'Main' }"
@@ -9,19 +9,19 @@
         appearance="raised-button"
       />
     </template>
-  </MessageLayout>
+  </StudioMessageLayout>
 
 </template>
 
 
 <script>
 
-  import MessageLayout from '../../components/MessageLayout';
+  import StudioMessageLayout from '../../components/StudioMessageLayout';
 
   export default {
     name: 'AccountCreated',
     components: {
-      MessageLayout,
+      StudioMessageLayout,
     },
     $trs: {
       accountCreatedTitle: 'Account successfully created',
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountNotActivated.vue b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountNotActivated.vue
index ccbec003d1..b45d511f1f 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountNotActivated.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/AccountNotActivated.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <MessageLayout
+  <StudioMessageLayout
     :header="$tr('title')"
     :text="$tr('text')"
   >
@@ -10,19 +10,19 @@
       :to="{ name: 'RequestNewActivationLink' }"
       appearance="raised-button"
     />
-  </MessageLayout>
+  </StudioMessageLayout>
 
 </template>
 
 
 <script>
 
-  import MessageLayout from '../../components/MessageLayout';
+  import StudioMessageLayout from '../../components/StudioMessageLayout';
 
   export default {
     name: 'AccountNotActivated',
     components: {
-      MessageLayout,
+      StudioMessageLayout,
     },
     $trs: {
       title: 'Account has not been activated',
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationExpired.vue b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationExpired.vue
index 9dd1dad18c..15e4413376 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationExpired.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationExpired.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <MessageLayout
+  <StudioMessageLayout
     :header="$tr('activationExpiredTitle')"
     :text="$tr('activationExpiredText')"
   >
@@ -10,19 +10,19 @@
       :to="{ name: 'RequestNewActivationLink' }"
       appearance="raised-button"
     />
-  </MessageLayout>
+  </StudioMessageLayout>
 
 </template>
 
 
 <script>
 
-  import MessageLayout from '../../components/MessageLayout';
+  import StudioMessageLayout from '../../components/StudioMessageLayout';
 
   export default {
     name: 'ActivationExpired',
     components: {
-      MessageLayout,
+      StudioMessageLayout,
     },
     $trs: {
       activationExpiredTitle: 'Activation failed',
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationLinkReSent.vue b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationLinkReSent.vue
index 03cb854b4c..89f9a68c74 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationLinkReSent.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationLinkReSent.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <MessageLayout
+  <StudioMessageLayout
     :header="$tr('activationReSentTitle')"
     :text="$tr('activationReSentText')"
   />
@@ -10,12 +10,12 @@
 
 <script>
 
-  import MessageLayout from '../../components/MessageLayout';
+  import StudioMessageLayout from '../../components/StudioMessageLayout';
 
   export default {
     name: 'ActivationLinkReSent',
     components: {
-      MessageLayout,
+      StudioMessageLayout,
     },
     $trs: {
       activationReSentTitle: 'Instructions sent. Thank you!',
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationSent.vue b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationSent.vue
index bba3ac22a2..c6b27f3bf5 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationSent.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/activateAccount/ActivationSent.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <MessageLayout
+  <StudioMessageLayout
     :header="$tr('header')"
     :text="$tr('text')"
   />
@@ -10,12 +10,12 @@
 
 <script>
 
-  import MessageLayout from '../../components/MessageLayout';
+  import StudioMessageLayout from '../../components/StudioMessageLayout';
 
   export default {
     name: 'ActivationSent',
     components: {
-      MessageLayout,
+      StudioMessageLayout,
     },
     $trs: {
       header: 'Activation link sent',
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/PasswordInstructionsSent.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/PasswordInstructionsSent.vue
index c7c3a23644..d193e43049 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/PasswordInstructionsSent.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/PasswordInstructionsSent.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <MessageLayout
+  <StudioMessageLayout
     :header="$tr('passwordInstructionsHeader')"
     :text="$tr('passwordInstructionsText')"
   />
@@ -10,12 +10,12 @@
 
 <script>
 
-  import MessageLayout from '../../components/MessageLayout';
+  import StudioMessageLayout from '../../components/StudioMessageLayout';
 
   export default {
     name: 'PasswordInstructionsSent',
     components: {
-      MessageLayout,
+      StudioMessageLayout,
     },
     $trs: {
       passwordInstructionsHeader: 'Instructions sent. Thank you!',
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetLinkExpired.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetLinkExpired.vue
index 0249fd9fda..d1f383c884 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetLinkExpired.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetLinkExpired.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <MessageLayout
+  <StudioMessageLayout
     :header="$tr('resetExpiredTitle')"
     :text="$tr('resetExpiredText')"
   >
@@ -10,19 +10,19 @@
       :to="{ name: 'ForgotPassword' }"
       appearance="raised-button"
     />
-  </MessageLayout>
+  </StudioMessageLayout>
 
 </template>
 
 
 <script>
 
-  import MessageLayout from '../../components/MessageLayout';
+  import StudioMessageLayout from '../../components/StudioMessageLayout';
 
   export default {
     name: 'ResetLinkExpired',
     components: {
-      MessageLayout,
+      StudioMessageLayout,
     },
     $trs: {
       resetExpiredTitle: 'Reset link expired',
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPasswordSuccess.vue b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPasswordSuccess.vue
index d3b8279c36..93e4e128f1 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPasswordSuccess.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ResetPasswordSuccess.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <MessageLayout
+  <StudioMessageLayout
     :header="$tr('header')"
     :text="$tr('text')"
   />
@@ -10,12 +10,12 @@
 
 <script>
 
-  import MessageLayout from '../../components/MessageLayout';
+  import StudioMessageLayout from '../../components/StudioMessageLayout';
 
   export default {
     name: 'ResetPasswordSuccess',
     components: {
-      MessageLayout,
+      StudioMessageLayout,
     },
     $trs: {
       header: 'Password reset successfully',