From 861dda95bc121dcc2db470a149a3930f094db1f0 Mon Sep 17 00:00:00 2001
From: "Ismail H. Ayaz" <ayazismailhakki@gmail.com>
Date: Mon, 6 May 2024 21:28:53 +0300
Subject: [PATCH] refactor: centralize layout

---
 src/i18n/en.ts                      |  11 ++-
 src/ui/components/WidgetLayout.vue  |  71 +++++++++++++++
 src/ui/styles/main.css              | 130 ++++++++++++++-------------
 src/ui/utils/index.ts               |  11 ++-
 src/ui/views/Consent.vue            |  83 ++++++++---------
 src/ui/views/FillMissing.vue        |  59 ++++++------
 src/ui/views/ForgotPassword.vue     |  51 ++++-------
 src/ui/views/Login.vue              | 134 +++++++++++++--------------
 src/ui/views/Register.vue           | 134 +++++++++++++--------------
 src/ui/views/ResetPassword.vue      |  38 ++++----
 src/ui/views/VerifyEmail.vue        |  65 +++++---------
 src/ui/views/mfa/Challenge.vue      |  41 ++++-----
 src/ui/views/mfa/Email.vue          |  93 +++++++++----------
 src/ui/views/mfa/FingerVein.vue     |  99 +++++++++-----------
 src/ui/views/mfa/OTP.vue            | 135 +++++++++++-----------------
 src/ui/views/mfa/Push.vue           | 122 ++++++++++---------------
 src/ui/views/mfa/SMS.vue            |  93 +++++++++----------
 src/ui/views/mfa/WebAuthN.vue       |  64 ++++++-------
 src/ui/views/passwordless/Email.vue |  78 +++++++---------
 src/ui/views/passwordless/OTP.vue   | 115 +++++++++---------------
 src/ui/views/passwordless/Push.vue  |  90 +++++++------------
 src/ui/views/passwordless/SMS.vue   |  84 ++++++++---------
 src/ui/widget.ts                    |  20 +----
 23 files changed, 821 insertions(+), 1000 deletions(-)
 create mode 100644 src/ui/components/WidgetLayout.vue

diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 35a8080..f35b949 100755
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -6,6 +6,7 @@ export default {
     days: 'days',
     edit: 'Edit',
     email: 'email',
+    enterOtp: 'Enter your code',
     field: 'Field',
     fields: {
       code: 'Code',
@@ -81,6 +82,7 @@ export default {
     code_already_used: 'Code was already used',
     code_expired: 'Code has expired',
     email_not_verified: 'Email is not verified. Please verify your email by clicking the link that has been sent to your email account.',
+    invalid_entity: 'Invalid {field}',
     field_required: '{field} is required.',
     incorrect_code: 'Verification code is invalid',
     invalid_code: 'Code is invalid',
@@ -114,12 +116,15 @@ export default {
   },
   passwordless: {
     email: {
+      magicLinkTitle: 'Check your email',
       title: 'Enter authorization code sent to: <strong>{email}</strong>',
       checkText: "We\'ve sent an email to <strong>{email}</strong>, please click the link included" +
         ' to sign in. Make sure to open link in the same device/browser you are trying to sign in.',
     },
     otp: {
-      title: 'Enter authorization code:'
+      registerTitle: 'Register Your Authenticator',
+      registerSubtitle: 'Open your preferred authenticator application and scan the QRCode below. If you have trouble scanning the code you can manually enter the code below image.',
+      title: 'Enter authorization code'
     },
     sms: {
       title: 'Enter authorization code sent to: <strong>{phone_number}</strong>'
@@ -156,7 +161,9 @@ export default {
       verify: 'Click to <strong>VERIFY</strong> when you are ready to scan your finger.'
     },
     otp: {
-      title: 'Please enter authorization code'
+      title: 'Enter authorization code',
+      registerTitle: 'Register Your Authenticator',
+      registerSubtitle: 'Open your preferred authenticator application and scan the QRCode below. If you have trouble scanning the code you can manually enter the code below image.',
     },
     push: {
       selectCode: 'Select number below from your device',
diff --git a/src/ui/components/WidgetLayout.vue b/src/ui/components/WidgetLayout.vue
new file mode 100644
index 0000000..84d270c
--- /dev/null
+++ b/src/ui/components/WidgetLayout.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useContext } from '../composables';
+
+import type { ITranslatePath } from '../interfaces';
+import { resolveLogo } from '../utils';
+
+import PFooter from './Footer.vue';
+
+withDefaults( defineProps<{
+  logo?: string | boolean,
+  title?: ITranslatePath
+  logoStyle?: any,
+  subtitle?: ITranslatePath
+}>(), {
+  logo: true
+})
+const context = useContext()
+
+</script>
+
+<template>
+  <div class="pa__widget-content">
+    <div class="pa__widget-content-main">
+      <slot
+        name="logo"
+      >
+        <div
+          v-if="logo && context.client?.logoUri"
+          class="pa__logo-container"
+        >
+          <img
+            class="pa__logo"
+            :style="logoStyle"
+            alt="Logo"
+            :src="resolveLogo(typeof logo === 'string' ? logo : context.client)"
+          >
+        </div>
+      </slot>
+      <div class="pa__widget-info-section">
+        <slot name="title">
+          <h1
+            v-t="title"
+          />
+          <h2
+            v-if="subtitle"
+            v-t="subtitle"
+          />
+        </slot>
+      </div>
+      <slot />
+      <div
+        v-if="$slots['content-actions']"
+        class="pa__widget-content-actions"
+      >
+        <slot name="content-actions" />
+      </div>
+      <slot name="content-append" />
+      <div
+        v-if="$slots['content-footer']"
+        class="pa__widget-content-footer"
+      >
+        <slot name="content-footer" />
+      </div>
+    </div>
+    <PFooter class="pa__widget-footer" />
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/ui/styles/main.css b/src/ui/styles/main.css
index d24f333..27c7f79 100644
--- a/src/ui/styles/main.css
+++ b/src/ui/styles/main.css
@@ -6,6 +6,7 @@
   @apply h-full;
 	line-height: 1.5;
 	tab-size: 4;
+	box-sizing: border-box;
 	font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
 
 	-webkit-text-size-adjust: 100%;
@@ -113,52 +114,6 @@
   };
 
 
-  &-info-section {
-    @apply text-center;
-  }
-
-  &-social-section {
-    @apply text-center py-6;
-  }
-
-  &-helpers-section {
-    @apply text-center py-4;
-    line-height: 24px;
-
-    a {
-      padding-left: 4px;
-    }
-		+ .widget-content-footer {
-			@apply mt-0;
-		}
-  }
-
-  &-social-icons {
-    @apply flex justify-center pt-2 flex-wrap gap-2;
-  }
-
-  &-social-button.btn {
-    @apply capitalize justify-start gap-4 bg-transparent text-gray-800 border border-gray-300 hover:bg-gray-100 hover:opacity-100;
-
-    &-circle {
-      @apply w-10 h-10 p-0 rounded-full overflow-hidden;
-
-      .widget-social-icon {
-        @apply w-10 h-10;
-      }
-
-      &:hover{
-        filter: brightness(0.8);
-      }
-    }
-  }
-
-  &-social-icon {
-    @apply w-8 h-8;
-    background-repeat: no-repeat;
-    background-position: center center;
-  }
-
   &-content {
     display: flex;
     flex-direction: column;
@@ -169,13 +124,17 @@
 
     @media (min-width: 601px) {
       display: block;
-      flex-shrink: 0;
-      margin: 0 auto;
+      margin: 16px auto;
       min-height: 0;
       width: 450px;
     }
-
+		&-footer {
+			p {
+					@apply text-center;
+			}
+		}
     &-main {
+			@apply relative;
       box-flex: 1;
       flex-grow: 1;
       overflow: hidden;
@@ -208,7 +167,7 @@
     }
 
     &-footer {
-			@apply space-y-2;
+			@apply space-y-2 mt-auto;
 
       border: none;
       font-size: 14px;
@@ -223,7 +182,50 @@
 
   }
 
-  &-footer {
+	&-info-section {
+		@apply text-center pb-4;
+	}
+
+	&-helpers-section {
+		@apply text-center py-4;
+		line-height: 24px;
+
+		a {
+			padding-left: 4px;
+		}
+		+ .widget-content-footer {
+			@apply mt-0;
+		}
+	}
+
+	&-social-icons {
+		@apply flex justify-center py-4 flex-wrap gap-2;
+	}
+
+	&-social-button.btn {
+		@apply capitalize justify-start gap-2 bg-transparent text-gray-800 border border-gray-300 hover:bg-gray-100 hover:opacity-100;
+
+		&-circle {
+			@apply w-10 h-10 p-0 rounded-full overflow-hidden;
+
+			.widget-social-icon {
+				@apply w-10 h-10 ;
+			}
+
+			&:hover{
+				filter: brightness(0.8);
+			}
+		}
+	}
+
+	&-social-icon {
+		@apply w-8 h-8 flex-shrink-0;
+		background-repeat: no-repeat;
+		background-position: center center;
+	}
+
+
+	&-footer {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
@@ -313,18 +315,10 @@
   }
 
   .qr-code {
+		@apply mx-auto mb-4;
     border: 1px solid lightgray;
-  }
-
-  .column {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .row {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+		object-position: center;
+		max-width: 220px; max-height: 220px;
   }
 
   .challenge-timer {
@@ -341,7 +335,7 @@
   }
 
   hr {
-    @apply flex items-center text-center text-gray-500 mb-3;
+    @apply flex items-center text-center text-gray-500 my-0;
 
     &::before,
     &::after {
@@ -357,5 +351,15 @@
       @apply ml-4;
     }
   }
+	input::-webkit-outer-spin-button,
+	input::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	/* Firefox */
+	input[type=number] {
+		-moz-appearance: textfield;
+	}
 
 }
diff --git a/src/ui/utils/index.ts b/src/ui/utils/index.ts
index 8455e5a..a088c21 100755
--- a/src/ui/utils/index.ts
+++ b/src/ui/utils/index.ts
@@ -103,8 +103,15 @@ export function looseEqual(a: any, b: any): boolean {
   }
 }
 
-export function resolveClientLogo(client: IClient) {
-  return client?.logoUri || 'https://static.plusauth.com/images/logo.png'
+export function resolveLogo(logoOrObj: string | IClient) {
+  if(typeof logoOrObj === 'string'){
+    if(logoOrObj.startsWith('http') || logoOrObj.startsWith('/')){
+      return  logoOrObj
+    } else {
+      return `https://static.plusauth.com/${logoOrObj}`
+    }
+  }
+  return logoOrObj?.logoUri || 'https://static.plusauth.com/images/logo.png'
 }
 
 export function keysToDotNotation(obj: Record<string, any>,
diff --git a/src/ui/views/Consent.vue b/src/ui/views/Consent.vue
index 71b62ca..03b1c39 100755
--- a/src/ui/views/Consent.vue
+++ b/src/ui/views/Consent.vue
@@ -1,68 +1,61 @@
 <template>
-  <div class="pa__logo-container">
-    <img
-      class="pa__logo"
-      alt="Logo"
-      :src="resolveClientLogo(context.client)"
-    >
-  </div>
-  <div class="pa__widget-info-section">
-    <h2
-      v-t="{ path: 'consent.title',
-             args: { clientName: context.client.clientName}
-      }"
-    />
-  </div>
-
-  <div class="pa__column">
-    <template
-      v-for="scope in _scopes"
-      :key="scope"
-    >
-      <li>
-        {{ scope }}
-      </li>
+  <WidgetLayout
+    :title="{
+      path: 'consent.title',
+      args: { clientName: context.client.clientName}
+    }"
+  >
+    <ul>
+      <template
+        v-for="scope in scopes"
+        :key="scope"
+      >
+        <li>
+          {{ scope }}
+        </li>
+      </template>
+    </ul>
+    <template #content-actions>
+      <p-btn
+        color="success"
+        @click="resolve(true)"
+      >
+        <span v-t="'common.allow'" />
+      </p-btn>
+      <div style="padding: 4px" />
+      <p-btn
+        class="pa__ml-2"
+        color="error"
+        @click="resolve(false)"
+      >
+        <span v-t="'common.reject'" />
+      </p-btn>
     </template>
-  </div>
-
-  <div class="pa__widget-content-actions">
-    <p-btn
-      color="success"
-      @click="resolve(true)"
-    >
-      <span v-t="'common.allow'" />
-    </p-btn>
-    <div style="padding: 4px" />
-    <p-btn
-      class="pa__ml-2"
-      color="error"
-      @click="resolve(false)"
-    >
-      <span v-t="'common.reject'" />
-    </p-btn>
-  </div>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import WidgetLayout from '../components/WidgetLayout.vue';
 import { useContext, useHttp } from '../composables';
-import { resolveClientLogo } from '../utils';
+import { resolveLogo } from '../utils';
 
 export default defineComponent({
   name: 'Consent',
+  components: { WidgetLayout },
   setup(){
     const http = useHttp()
     const context = useContext()
 
-    const _scopes = [...context.details.scopes?.new || []]
+    const scopes = [...context.details.scopes?.new || []]
     return {
-      _scopes,
+      scopes,
       context,
       resolve(response){
         return http.post({ body: { accepted: response } })
       },
-      resolveClientLogo,
+      resolveClientLogo: resolveLogo,
     }
   }
 })
diff --git a/src/ui/views/FillMissing.vue b/src/ui/views/FillMissing.vue
index a20cd97..6a36c38 100755
--- a/src/ui/views/FillMissing.vue
+++ b/src/ui/views/FillMissing.vue
@@ -1,49 +1,42 @@
 <template>
-  <div class="pa__logo-container">
-    <img
-      class="pa__logo"
-      alt="Logo"
-      :src="resolveClientLogo(context.client)"
-    >
-  </div>
-
-  <div class="pa__widget-info-section">
-    <h1 v-t="'fillMissing.title'" />
-    <h2 v-t="'fillMissing.subtitle'" />
-  </div>
-
-  <GenericForm
-    ref="form"
-    :fields="fields"
-    :validate="validate"
-    :submit="submit"
-  />
-
-  <div class="pa__widget-content-actions">
-    <p-btn
-      color="primary"
-      block
-      :loading="loading"
-      @click="submit"
-    >
-      <span v-t="'common.submit'" />
-    </p-btn>
-  </div>
+  <WidgetLayout
+    title="fillMissing.title"
+    subtitle="fillMissing.subtitle"
+    :logo="false"
+  >
+    <GenericForm
+      ref="form"
+      :fields="fields"
+      :validate="validate"
+      :submit="submit"
+    />
+    <template #content-actions>
+      <p-btn
+        color="primary"
+        block
+        :loading="loading"
+        @click="submit"
+      >
+        <span v-t="'common.submit'" />
+      </p-btn>
+    </template>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
 import { defineComponent, inject } from 'vue';
 
 import GenericForm from '../components/GenericForm.vue';
+import WidgetLayout from '../components/WidgetLayout.vue';
 import type { FieldDefinition, IPlusAuthContext } from '../interfaces';
-import { resolveClientLogo } from '../utils';
+import { resolveLogo } from '../utils';
 import type { FetchWrapper } from '../utils/fetch';
 import { useGenericForm } from '../utils/form_generics';
 
 
 export default defineComponent({
   name: 'FillMissing',
-  components: { GenericForm },
+  components: { WidgetLayout, GenericForm },
   setup() {
     const http = inject('http') as FetchWrapper
     const context = inject('context') as IPlusAuthContext
@@ -90,7 +83,7 @@ export default defineComponent({
     return {
       fields,
       context,
-      resolveClientLogo,
+      resolveClientLogo: resolveLogo,
       form,
       loading,
       submit,
diff --git a/src/ui/views/ForgotPassword.vue b/src/ui/views/ForgotPassword.vue
index 7153381..2eb49d4 100755
--- a/src/ui/views/ForgotPassword.vue
+++ b/src/ui/views/ForgotPassword.vue
@@ -3,20 +3,11 @@
     name="slide-x-transition"
     mode="out-in"
   >
-    <div v-if="!actionCompleted">
-      <div class="pa__logo-container">
-        <img
-          class="pa__logo"
-          alt="Logo"
-          :src="resolveClientLogo(context.client)"
-        >
-      </div>
-
-      <div class="pa__widget-info-section">
-        <h1 v-t="'forgotPassword.title'" />
-        <h2 v-t="'forgotPassword.subtitle'" />
-      </div>
-
+    <WidgetLayout
+      v-if="!actionCompleted"
+      title="forgotPassword.title"
+      subtitle="forgotPassword.subtitle"
+    >
       <GenericForm
         ref="form"
         :fields="fields"
@@ -24,7 +15,7 @@
         :submit="submit"
       />
 
-      <div class="pa__widget-content-actions">
+      <template #content-actions>
         <p-btn
           color="primary"
           :loading="loading"
@@ -33,22 +24,13 @@
         >
           <span v-t="'common.submit'" />
         </p-btn>
-      </div>
-    </div>
-    <template v-else>
-      <div class="pa__column">
-        <div class="pa__logo-container">
-          <img
-            src="https://static.plusauth.com/images/icons/plane.svg"
-            class="pa__logo"
-            alt="Mail Confirmation"
-          >
-        </div>
-        <div class="pa__widget-info-section">
-          <h2 v-t="{ path: 'forgotPassword.emailSent', args: {email: fields.email.value } }" />
-        </div>
-      </div>
-    </template>
+      </template>
+    </WidgetLayout>
+    <WidgetLayout
+      v-else
+      :subtitle="{ path: 'forgotPassword.emailSent', args: {email: fields.email.value } }"
+      logo="images/icons/plane.svg"
+    />
   </transition>
 </template>
 
@@ -56,14 +38,15 @@
 import { defineComponent, ref } from 'vue';
 
 import GenericForm from '../components/GenericForm.vue';
+import WidgetLayout from '../components/WidgetLayout.vue';
 import { useContext, useHttp } from '../composables';
 import type { AdditionalFields } from '../interfaces';
-import { resolveClientLogo } from '../utils';
+import { resolveLogo } from '../utils';
 import { useGenericForm } from '../utils/form_generics';
 
 export default defineComponent({
   name: 'ForgotPassword',
-  components: { GenericForm },
+  components: { WidgetLayout, GenericForm },
   setup(){
     const http = useHttp()
     const context = useContext()
@@ -115,7 +98,7 @@ export default defineComponent({
       form,
       actionCompleted,
       loading,
-      resolveClientLogo,
+      resolveClientLogo: resolveLogo,
       validate,
       submit
     }
diff --git a/src/ui/views/Login.vue b/src/ui/views/Login.vue
index d67e5c8..3476e13 100755
--- a/src/ui/views/Login.vue
+++ b/src/ui/views/Login.vue
@@ -1,75 +1,62 @@
 <template>
-  <div
-    v-if="context.client?.logoUri"
-    class="pa__logo-container"
-  >
-    <img
-      class="pa__logo"
-      alt="Logo"
-      :src="resolveClientLogo(context.client)"
-    >
-  </div>
+  <WidgetLayout title="login.title">
+    <GenericForm
+      ref="form"
+      :fields="fields"
+      :validate="validate"
+      :submit="submit"
+    />
 
-  <div class="pa__widget-info-section">
-    <h1 v-t="'login.title'" />
-  </div>
-
-  <GenericForm
-    ref="form"
-    :fields="fields"
-    :validate="validate"
-    :submit="submit"
-  />
-
-  <div class="pa__widget-content-actions">
-    <p-btn
-      color="primary"
-      :loading="loading"
-      block
-      @click="submit"
-    >
-      <span v-t="'login.signIn'" />
-    </p-btn>
-  </div>
-
-  <div
-    v-if="context.client
-      && context.client.social
-      && context.client.social.length"
-    class="pa__widget-social-section"
-  >
-    <hr v-t="'login.socialLoginHelper'">
-    <div class="pa__widget-social-icons">
-      <SocialConnectionButton
-        v-for="connection in context.client.social"
-        :key="typeof connection === 'string' ? connection : connection.name"
-        lang-key="login.signInWith"
-        :connection="connection"
-      />
-    </div>
-  </div>
-  <div class="pa__widget-helpers-section">
-    <div
-      v-if="context.settings.register_enabled"
-    >
-      <span
-        v-t="'login.noAccount'"
-      />
-      <a
-        v-t="'login.signUp'"
-        tabindex="0"
-        href="/signup"
-        @click.stop
-      />
-    </div>
-    <div v-if="!isPasswordless && context.settings.forgot_password_enabled">
-      <a
-        v-t="'login.forgotPassword'"
-        tabindex="0"
-        href="/signin/recovery"
-      />
-    </div>
-  </div>
+    <template #content-actions>
+      <p-btn
+        color="primary"
+        :loading="loading"
+        block
+        @click="submit"
+      >
+        <span v-t="'login.signIn'" />
+      </p-btn>
+    </template>
+    <template #content-append>
+      <div class="pa__widget-helpers-section">
+        <template
+          v-if="context.client
+            && context.client.social
+            && context.client.social.length"
+        >
+          <hr v-t="'login.socialLoginHelper'">
+          <div class="pa__widget-social-icons">
+            <SocialConnectionButton
+              v-for="connection in context.client.social"
+              :key="typeof connection === 'string' ? connection : connection.name"
+              lang-key="login.signInWith"
+              :connection="connection"
+            />
+          </div>
+        </template>
+        <div
+          v-if="context.settings.register_enabled"
+        >
+          <span
+            v-t="'login.noAccount'"
+          />
+          <a
+            v-t="'login.signUp'"
+            tabindex="0"
+            href="/signup"
+            @click.stop
+          />
+        </div>
+        <div v-if="!isPasswordless && context.settings.forgot_password_enabled">
+          <a
+            v-t="'login.forgotPassword'"
+            tabindex="0"
+            href="/signin/recovery"
+          />
+        </div>
+      </div>
+    </template>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
@@ -77,14 +64,15 @@ import { defineComponent, ref } from 'vue';
 
 import GenericForm from '../components/GenericForm.vue';
 import SocialConnectionButton from '../components/SocialConnectionButton.vue';
+import WidgetLayout from '../components/WidgetLayout.vue';
 import { useContext, useHttp } from '../composables';
 import type { AdditionalFields } from '../interfaces';
-import { resolveClientLogo } from '../utils';
+import { resolveLogo } from '../utils';
 import { useGenericForm } from '../utils/form_generics';
 
 export default defineComponent({
   name: 'Login',
-  components: { GenericForm, SocialConnectionButton },
+  components: { WidgetLayout, GenericForm, SocialConnectionButton },
   setup() {
     const http = useHttp()
     const context = useContext()
@@ -155,7 +143,7 @@ export default defineComponent({
       validate,
       isPasswordless,
       submit,
-      resolveClientLogo
+      resolveClientLogo: resolveLogo
     }
 
   }
diff --git a/src/ui/views/Register.vue b/src/ui/views/Register.vue
index b3b8b0c..680bd31 100755
--- a/src/ui/views/Register.vue
+++ b/src/ui/views/Register.vue
@@ -1,77 +1,64 @@
 <template>
-  <div
-    v-if="context.client?.logoUri"
-    class="pa__logo-container"
-  >
-    <img
-      class="pa__logo"
-      alt="Logo"
-      :src="resolveClientLogo(context.client)"
+  <WidgetLayout title="register.title">
+    <GenericForm
+      ref="form"
+      :fields="fields"
+      :validate="validate"
+      :submit="submit"
     >
-  </div>
+      <template #password.message="{ message: [ message ], isFocused, isPristine }">
+        <PasswordStrength
+          v-if="isFocused || !isPristine"
+          :rules="context.settings?.password_policy"
+          :message="message"
+        />
+      </template>
+    </GenericForm>
 
-  <div class="pa__widget-info-section">
-    <h1 v-t="'register.title'" />
-  </div>
-
-  <GenericForm
-    ref="form"
-    :fields="fields"
-    :validate="validate"
-    :submit="submit"
-  >
-    <template #password.message="{ message: [ message ], isFocused, isPristine }">
-      <PasswordStrength
-        v-if="isFocused || !isPristine"
-        :rules="context.settings?.password_policy"
-        :message="message"
-      />
+    <template #content-actions>
+      <p-btn
+        color="primary"
+        :loading="loading"
+        block
+        @click="submit"
+      >
+        <span v-t="'register.signUp'" />
+      </p-btn>
     </template>
-  </GenericForm>
-  <div class="pa__widget-content-actions">
-    <p-btn
-      color="primary"
-      :loading="loading"
-      block
-      @click="submit"
-    >
-      <span v-t="'register.signUp'" />
-    </p-btn>
-  </div>
-
-  <div
-    v-if="context.client
-      && context.client.social
-      && context.client.social.length"
-    class="pa__widget-social-section"
-  >
-    <hr v-t="'login.socialLoginHelper'">
-    <div class="pa__widget-social-icons">
-      <SocialConnectionButton
-        v-for="connection in context.client.social"
-        :key="typeof connection === 'string' ? connection : connection.name"
-        lang-key="register.signUpWith"
-        :connection="connection"
-      />
-    </div>
-  </div>
-
-  <div class="pa__widget-helpers-section">
-    <span
-      v-t="'register.haveAccount'"
-    />
-    <a
-      v-t="'login.signIn'"
-      href="/signin"
-      @click.stop
-    />
-    <div v-if="!isPasswordless && context.settings.forgot_password_enabled">
-      <a
-        v-t="'login.forgotPassword'"
-        href="/signin/recovery"
-      />
-    </div>
-  </div>
+    <template #content-append>
+      <div class="pa__widget-helpers-section">
+        <template
+          v-if="context.client
+            && context.client.social
+            && context.client.social.length"
+        >
+          <hr v-t="'login.socialLoginHelper'">
+          <div class="pa__widget-social-icons">
+            <SocialConnectionButton
+              v-for="connection in context.client.social"
+              :key="typeof connection === 'string' ? connection : connection.name"
+              lang-key="register.signUpWith"
+              :connection="connection"
+            />
+          </div>
+        </template>
+        <span
+          v-t="'register.haveAccount'"
+        />
+        <a
+          v-t="'login.signIn'"
+          href="/signin"
+          @click.stop
+        />
+        <div v-if="!isPasswordless && context.settings.forgot_password_enabled">
+          <a
+            v-t="'login.forgotPassword'"
+            href="/signin/recovery"
+          />
+        </div>
+      </div>
+    </template>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
@@ -80,15 +67,16 @@ import { defineComponent } from 'vue';
 import { PasswordStrength } from '../components';
 import GenericForm from '../components/GenericForm.vue';
 import SocialConnectionButton from '../components/SocialConnectionButton.vue';
+import WidgetLayout from '../components/WidgetLayout.vue';
 import { useContext, useHttp } from '../composables';
 import type { AdditionalFields, FieldDefinition } from '../interfaces';
-import { resolveClientLogo } from '../utils';
+import { resolveLogo } from '../utils';
 import { checkPasswordStrength } from '../utils/check_passsword_strength';
 import { useGenericForm } from '../utils/form_generics';
 
 export default defineComponent({
   name: 'Register',
-  components: { GenericForm, SocialConnectionButton, PasswordStrength },
+  components: { WidgetLayout, GenericForm, SocialConnectionButton, PasswordStrength },
   setup() {
     const http = useHttp()
     const context = useContext()
@@ -178,7 +166,7 @@ export default defineComponent({
       fields,
       loading,
       isPasswordless,
-      resolveClientLogo,
+      resolveClientLogo: resolveLogo,
       validate,
       submit
     }
diff --git a/src/ui/views/ResetPassword.vue b/src/ui/views/ResetPassword.vue
index fe8980e..809242a 100755
--- a/src/ui/views/ResetPassword.vue
+++ b/src/ui/views/ResetPassword.vue
@@ -1,21 +1,10 @@
 <template>
-  <div
-    v-if="actionCompleted"
-    v-t="'resetPassword.successfullyReset'"
-  />
-  <template v-else>
-    <div class="pa__logo-container">
-      <img
-        class="pa__logo"
-        alt="Logo"
-        :src="resolveClientLogo(context.client)"
-      >
-    </div>
-    <div class="pa__widget-info-section">
-      <h1 v-t="'resetPassword.title'" />
-    </div>
-
+  <WidgetLayout
+    :title="actionCompleted ? 'resetPassword.successfullyReset' : 'resetPassword.title'"
+    :logo="!actionCompleted"
+  >
     <GenericForm
+      v-if="!actionCompleted"
       ref="form"
       :fields="fields"
       :validate="validate"
@@ -31,8 +20,10 @@
       </template>
     </GenericForm>
 
-
-    <div class="pa__widget-content-actions">
+    <template
+      v-if="!actionCompleted"
+      #content-actions
+    >
       <p-btn
         color="primary"
         :loading="loading"
@@ -41,8 +32,8 @@
       >
         <span v-t="'common.submit'" />
       </p-btn>
-    </div>
-  </template>
+    </template>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
@@ -50,15 +41,16 @@ import { defineComponent, ref } from 'vue';
 
 import { PasswordStrength } from '../components';
 import GenericForm from '../components/GenericForm.vue';
+import WidgetLayout from '../components/WidgetLayout.vue';
 import { useContext, useHttp } from '../composables';
 import type { AdditionalFields, FieldDefinition } from '../interfaces';
-import { resolveClientLogo } from '../utils';
+import { resolveLogo } from '../utils';
 import { checkPasswordStrength } from '../utils/check_passsword_strength';
 import { useGenericForm } from '../utils/form_generics';
 
 export default defineComponent({
   name: 'ResetPassword',
-  components: { GenericForm, PasswordStrength },
+  components: { WidgetLayout, GenericForm, PasswordStrength },
   setup(){
 
     const http = useHttp()
@@ -101,7 +93,7 @@ export default defineComponent({
       context,
       actionCompleted,
       loading,
-      resolveClientLogo,
+      resolveClientLogo: resolveLogo,
       validate,
       submit,
     }
diff --git a/src/ui/views/VerifyEmail.vue b/src/ui/views/VerifyEmail.vue
index 5b24860..699b73d 100755
--- a/src/ui/views/VerifyEmail.vue
+++ b/src/ui/views/VerifyEmail.vue
@@ -1,30 +1,17 @@
 <template>
-  <template v-if="error">
-    <div class="pa__logo-container">
-      <img
-        src="https://static.plusauth.com/images/icons/email_error.svg"
-        class="pa__logo"
-        alt="Mail Confirmation"
-      >
-    </div>
-    <div class="pa__widget-info-section">
-      <h1 v-t="'errors.'+error" />
-    </div>
-  </template>
-  <template v-else-if="context.prompt?.mode === 'check' || !context.details.email_verified">
-    <div class="pa__logo-container">
-      <img
-        src="https://static.plusauth.com/images/icons/plane.svg"
-        class="pa__logo"
-        alt="Mail Confirmation"
-      >
-    </div>
-    <div class="pa__widget-info-section">
-      <h1 v-t="'verifyEmail.title'" />
-      <h2 v-t="{path: 'verifyEmail.checkText', args: { email: context.details.email}}" />
-    </div>
-    <div class="pa__widget-content-footer">
-      <p align="center">
+  <WidgetLayout
+    :logo="error ? 'images/icons/email_error.svg' :
+      context.prompt?.mode === 'check' || !context.details.email_verified ? 'images/icons/plane.svg'
+      : 'images/icons/mail_confirm.svg'
+    "
+    :title="error ? 'errors.'+error: 'verifyEmail.title'"
+    :subtitle="error ? '' : {path: 'verifyEmail.checkText', args: { email: context.details.email}}"
+  >
+    <template
+      v-if="!error && (context.prompt?.mode === 'check' || !context.details.email_verified)"
+      #content-footer
+    >
+      <p>
         <span
           v-t="[ 'common.resendText', { type: 'common.email' } ]"
           style="padding-right: 4px"
@@ -33,23 +20,17 @@
           :href="resendLink"
         />
       </p>
-    </div>
-  </template>
-  <template v-else>
-    <div class="pa__logo-container">
-      <img
-        src="https://static.plusauth.com/images/icons/mail_confirm.svg"
-        class="pa__logo"
-        alt="Mail Confirmation"
-      >
-    </div>
-    <div class="pa__widget-info-section">
+    </template>
+    <template
+      v-else-if="!error"
+      #title
+    >
       <h1>
         Your email verified successfully.
         <span v-if="loginUrl">  Redirecting to application in {{ time }} seconds.</span>
       </h1>
-    </div>
-  </template>
+    </template>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
@@ -57,11 +38,13 @@ import {
   defineComponent, ref, onMounted
 } from 'vue';
 
+import WidgetLayout from '../components/WidgetLayout.vue';
 import { useContext } from '../composables';
-import { resolveClientLogo } from '../utils';
+import { resolveLogo } from '../utils';
 
 export default defineComponent({
   name: 'VerifyEmail',
+  components: { WidgetLayout },
 
   setup() {
     const context = useContext()
@@ -98,7 +81,7 @@ export default defineComponent({
       error,
       loginUrl,
       resendLink,
-      resolveClientLogo
+      resolveClientLogo: resolveLogo
     }
   },
 })
diff --git a/src/ui/views/mfa/Challenge.vue b/src/ui/views/mfa/Challenge.vue
index 28d1e1f..cb8fd68 100755
--- a/src/ui/views/mfa/Challenge.vue
+++ b/src/ui/views/mfa/Challenge.vue
@@ -1,36 +1,31 @@
 <template>
-  <div class="pa__logo-container">
-    <img
-      style="max-height: 150px"
-      alt="Logo"
-      src="https://static.plusauth.com/images/icons/select.svg"
-    >
-  </div>
-  <div class="pa__widget-info-section">
-    <h2
-      v-t="'mfa.challenge.title'"
-    />
-  </div>
-  <div class="pa__signin-challenges">
-    <a
-      v-for="challenge in context.details.challenges"
-      :key="challenge"
-      :href="'/signin/challenge/'+ challenge"
-      class="pa__btn pa__btn--flat pa__btn--block pa__signin-challenge pa__text-primary"
-      @click.stop=""
-    >
-      <span v-t="'mfa.challenge.'+ challenge" />
-    </a>
-  </div>
+  <WidgetLayout
+    logo="images/icons/select.svg"
+    title="mfa.challenge.title"
+  >
+    <div class="pa__signin-challenges">
+      <a
+        v-for="challenge in context.details.challenges"
+        :key="challenge"
+        :href="'/signin/challenge/'+ challenge"
+        class="pa__btn pa__btn--flat pa__btn--block pa__signin-challenge pa__text-primary"
+        @click.stop=""
+      >
+        <span v-t="'mfa.challenge.'+ challenge" />
+      </a>
+    </div>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import WidgetLayout from '../../components/WidgetLayout.vue';
 import { useContext } from '../../composables';
 
 export default defineComponent( {
   name: 'Challenge',
+  components: { WidgetLayout },
   props: {},
   setup() {
     const context = useContext()
diff --git a/src/ui/views/mfa/Email.vue b/src/ui/views/mfa/Email.vue
index a781620..2160faf 100755
--- a/src/ui/views/mfa/Email.vue
+++ b/src/ui/views/mfa/Email.vue
@@ -1,62 +1,51 @@
 <template>
-  <div class="pa__logo-container">
-    <img
-      id="mainLogo"
-      class="pa__logo"
-      alt="Logo"
-      src="https://static.plusauth.com/images/icons/email_question.svg"
-    >
-  </div>
-  <div class="pa__widget-info-section">
-    <h2
-      v-t="{ path: 'mfa.email.title', args: { email: context.details.email } }"
-    />
-  </div>
-
-  <GenericForm
-    ref="form"
-    :fields="fields"
-    :validate="validate"
-    :submit="submit"
-  />
-
-  <div class="pa__widget-content-actions">
-    <p-btn
-      block
-      color="primary"
-      :loading="loading"
-      @click="submit"
-    >
-      <span v-t="'common.submit'" />
-    </p-btn>
-  </div>
-
-  <div
-    v-if="context.details.challenges.length > 1"
-    class="pa__widget-helpers-section"
+  <WidgetLayout
+    logo="images/icons/email_question.svg"
+    :title="{ path: 'mfa.email.title', args: { email: context.details.email } }"
   >
-    <a
-      v-t="'mfa.tryAnotherWay'"
-      href="/signin/challenge"
+    <GenericForm
+      ref="form"
+      :fields="fields"
+      :validate="validate"
+      :submit="submit"
     />
-  </div>
-  <div class="pa__widget-content-footer">
-    <p align="center">
-      <span
-        v-t="['common.resendText', {type: 'common.email'}]"
-        style="padding-right: 4px"
-      /><a
-        v-t="'common.resend'"
-        :href="resendLink"
-      />
-    </p>
-  </div>
+    <template #content-actions>
+      <p-btn
+        block
+        color="primary"
+        :loading="loading"
+        @click="submit"
+      >
+        <span v-t="'common.submit'" />
+      </p-btn>
+    </template>
+    <template #content-footer>
+      <p
+        v-if="context.details.challenges.length > 1"
+      >
+        <a
+          v-t="'mfa.tryAnotherWay'"
+          href="/signin/challenge"
+        />
+      </p>
+      <p>
+        <span
+          v-t="['common.resendText', {type: 'common.email'}]"
+          style="padding-right: 4px"
+        /><a
+          v-t="'common.resend'"
+          :href="resendLink"
+        />
+      </p>
+    </template>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 
 import GenericForm from '../../components/GenericForm.vue';
+import WidgetLayout from '../../components/WidgetLayout.vue';
 import { useContext, useHttp } from '../../composables';
 import type { AdditionalFields } from '../../interfaces';
 import { useGenericForm } from '../../utils/form_generics';
@@ -64,7 +53,7 @@ import { useGenericForm } from '../../utils/form_generics';
 
 export default defineComponent({
   name: 'Email',
-  components: { GenericForm },
+  components: { WidgetLayout, GenericForm },
   setup(){
     const http = useHttp()
     const context = useContext()
@@ -74,7 +63,7 @@ export default defineComponent({
     const defaultFields: AdditionalFields = {
       code: {
         type: 'text',
-        label: 'common.fields.code'
+        label: 'common.enterOtp'
       }
     }
     const { form, loading, submit, validate, fields } = useGenericForm(
diff --git a/src/ui/views/mfa/FingerVein.vue b/src/ui/views/mfa/FingerVein.vue
index b5c334b..1e6fe08 100755
--- a/src/ui/views/mfa/FingerVein.vue
+++ b/src/ui/views/mfa/FingerVein.vue
@@ -1,42 +1,27 @@
 <template>
-  <!-- eslint-disable max-len -->
-  <div style="position: relative">
-    <template
+  <WidgetLayout
+    :logo="false"
+    :title="deviceOk
+      && (!context.details.fv_template || context.details.fv_template.length === 0)
+      ? 'mfa.fv.enroll': !deviceOk ? 'mfa.fv.checkDevice' : 'mfa.fv.verify'"
+  >
+    <div
       v-if="deviceOk
         && (!context.details.fv_template || context.details.fv_template.length === 0)"
+      class="pa__hands_container"
     >
-      <div class="pa__widget-info-section">
-        <h2 v-t="'mfa.fv.enroll'" />
-      </div>
-      <div
-        class="pa__hands_container"
-      >
-        <Hand
-          :class="{'disabled' : loading}"
-          :selected="enrolledFingers.left"
-          @select="onFingerSelect($event, 'left')"
-        />
-        <Hand
-          :class="{'disabled' : loading}"
-          style="transform: rotateY(180deg)"
-          :selected="enrolledFingers.right"
-          @select="onFingerSelect($event,'right')"
-        />
-      </div>
-    </template>
-    <template v-else-if="!deviceOk">
-      <div
-        v-t="{ path: 'mfa.fv.checkDevice'}"
-        style="margin-bottom: 8px"
-        class="pa__subtitle-2 pa__text-left"
+      <Hand
+        :class="{'disabled' : loading}"
+        :selected="enrolledFingers.left"
+        @select="onFingerSelect($event, 'left')"
       />
-    </template>
-    <template v-else>
-      <div
-        v-t="{ path: 'mfa.fv.verify'}"
-        class="pa__subtitle-2 pa__text-left"
+      <Hand
+        :class="{'disabled' : loading}"
+        style="transform: rotateY(180deg)"
+        :selected="enrolledFingers.right"
+        @select="onFingerSelect($event,'right')"
       />
-    </template>
+    </div>
     <GenericForm
       ref="form"
       style="padding-top: 24px"
@@ -44,18 +29,6 @@
       :validate="validate"
       :submit="submit"
     />
-
-    <div class="pa__widget-content-actions">
-      <p-btn
-        v-if="deviceOk"
-        block
-        color="primary"
-        :loading="loading"
-        @click="submit"
-      >
-        <span v-t="context.details.fv_template?.length > 0 ? 'common.verify' : 'common.submit'" />
-      </p-btn>
-    </div>
     <div
       v-if="loading"
       style="position:absolute; top: 0; bottom: 0; right: 0; display: flex; align-items: center;
@@ -71,17 +44,28 @@
         style="margin-top: 12px; font-size: 0.9em"
       />
     </div>
-  </div>
-
-  <div
-    v-if="context.details.challenges.length > 1"
-    class="pa__widget-helpers-section"
-  >
-    <a
-      v-t="'mfa.tryAnotherWay'"
-      href="/signin/challenge"
-    />
-  </div>
+    <template
+      v-if="deviceOk"
+      #content-actions
+    >
+      <p-btn
+        block
+        color="primary"
+        :loading="loading"
+        @click="submit"
+      >
+        <span v-t="context.details.fv_template?.length > 0 ? 'common.verify' : 'common.submit'" />
+      </p-btn>
+    </template>
+    <template #content-footer>
+      <p>
+        <a
+          v-t="'mfa.tryAnotherWay'"
+          href="/signin/challenge"
+        />
+      </p>
+    </template>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
@@ -90,13 +74,14 @@ import { defineComponent, onMounted, reactive, ref } from 'vue';
 import GenericForm from '../../components/GenericForm.vue';
 import Hand from '../../components/Hand.vue';
 import PSpinner from '../../components/PSpinner/PSpinner';
+import WidgetLayout from '../../components/WidgetLayout.vue';
 import { useContext, useHttp } from '../../composables';
 import { useGenericForm } from '../../utils/form_generics';
 import { H1FingerVeinService } from '../../utils/fv_helper';
 
 export default defineComponent({
   name: 'FingerVein',
-  components: { PSpinner, Hand, GenericForm },
+  components: { WidgetLayout, PSpinner, Hand, GenericForm },
   setup(){
 
     const http = useHttp()
diff --git a/src/ui/views/mfa/OTP.vue b/src/ui/views/mfa/OTP.vue
index 3cb795c..c85bd44 100755
--- a/src/ui/views/mfa/OTP.vue
+++ b/src/ui/views/mfa/OTP.vue
@@ -1,99 +1,69 @@
 <template>
-  <template v-if="context.details.dataUrl">
-    <h4>
-      1. Download Google Authenticator
-      <a
-        target="_blank"
-        href="https://play.google.com/store/apps/
-details?id=com.google.android.apps.authenticator2"
-      >
-        Android
-      </a>
-      /
-      <a
-        href="https://apps.apple.com/us/app/google-authenticator/id388497605"
-        target="_blank"
-      >iOS</a>
-    </h4>
-    <p>
-      Google Authenticator can be downloaded from the App store or
-      Google Play. Search "Google Authenticator"
-      and proceed to download.
-    </p>
-    <h4>2. Add Authentication Token in Google 2FA and keep the key phrase</h4>
-    <p>
-      Open Google 2FA, scan below QR code or manually enter the key phrase
-      to add a token.
-      <br>
-      Key Phrase is used to recover Google 2FA in the case of phone loss or
-      change. Please make sure to keep
-      the key phrase; in a safe location before binding.
-    </p>
-    <div class="pa__logo-container">
-      <img
-        id="mainLogo"
-        class="pa__logo"
-        alt="Logo"
-        style="max-width: 300px; max-height: 300px;"
-        :src="context.details.dataUrl"
-      >
-    </div>
-    <h3
-      style="text-align: center;
-      background-color: lightgray; border: 1px solid black;"
-    >
-      {{ context.details.secret }}
-    </h3>
-    <h4>3. Enable Google Two Factor Authentication</h4>
-  </template>
-  <template v-else>
-    <div class="pa__widget-info-section">
-      <p
-        v-t="{ path: 'mfa.otp.title'}"
-        class="pa__subtitle-2 pa__text-left"
-        style="margin: 0 0 12px 0"
-      />
-    </div>
-  </template>
-  <GenericForm
-    ref="form"
-    :fields="fields"
-    :validate="validate"
-    :submit="submit"
-  />
-
-  <div class="pa__widget-content-actions">
-    <p-btn
-      v-t="'common.submit'"
-      block
-      color="primary"
-      :loading="loading"
-      @click="submit"
-    />
-  </div>
-
-  <div
-    v-if="context.details.challenges.length > 1"
-    class="pa__widget-helpers-section"
+  <WidgetLayout
+    :logo="false"
+    :title="context.details.dataUrl ? 'mfa.otp.registerTitle' : 'mfa.otp.title'"
+    :subtitle="context.details.dataUrl ? 'mfa.otp.registerSubtitle' : undefined"
   >
-    <a
-      v-t="'mfa.tryAnotherWay'"
-      href="/signin/challenge"
+    <template v-if="context.details.dataUrl">
+      <div style="text-align: center">
+        <img
+          id="mainLogo"
+          class="pa__logo"
+          alt="Logo"
+          style="max-width: 300px; max-height: 300px;"
+          :src="context.details.dataUrl"
+        >
+        <h3
+          style="text-align: center;
+      background-color: lightgray; border: 1px solid black; margin: 16px 0;"
+        >
+          {{ context.details.secret }}
+        </h3>
+      </div>
+    </template>
+    <GenericForm
+      ref="form"
+      :fields="fields"
+      :validate="validate"
+      :submit="submit"
     />
-  </div>
+    <template #content-actions>
+      <p-btn
+        block
+        color="primary"
+        type="submit"
+        :loading="loading"
+        @click="submit"
+      >
+        <span v-t="'common.submit'" />
+      </p-btn>
+    </template>
+    <template
+      v-if="context.details.challenges.length > 1"
+      #content-footer
+    >
+      <p>
+        <a
+          v-t="'mfa.tryAnotherWay'"
+          href="/signin/challenge"
+        />
+      </p>
+    </template>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 
 import GenericForm from '../../components/GenericForm.vue';
+import WidgetLayout from '../../components/WidgetLayout.vue';
 import { useContext, useHttp } from '../../composables';
 import type { AdditionalFields } from '../../interfaces';
 import { useGenericForm } from '../../utils/form_generics';
 
 export default defineComponent({
   name: 'OTP',
-  components: {  GenericForm },
+  components: { WidgetLayout,  GenericForm },
   setup(){
 
     const http = useHttp()
@@ -104,7 +74,8 @@ export default defineComponent({
 
     const defaultFields: AdditionalFields = {
       code: {
-        type: 'code',
+        type: 'number',
+        label: 'common.enterOtp',
         value: null,
       }
     }
diff --git a/src/ui/views/mfa/Push.vue b/src/ui/views/mfa/Push.vue
index 3d396d1..7ec9e16 100755
--- a/src/ui/views/mfa/Push.vue
+++ b/src/ui/views/mfa/Push.vue
@@ -1,46 +1,29 @@
 <template>
-  <template v-if="isRegistration">
-    <div class="pa__widget-info-section">
-      <h1 v-t="'mfa.push.enrollTitle'" />
-      <p
-        v-t="{ path: 'passwordless.push.enrollDescription'}"
-        class="pa__subtitle-2 pa__text-left"
-        style="margin: 12px 0"
-      />
-    </div>
-    <div class="pa__logo-container">
-      <img
-        id="mainLogo"
-        class="pa__logo pa__qr-code"
-        alt="Logo"
-        style="max-width: 300px; max-height: 300px;"
-        :src="context.details.dataUrl"
-      >
-    </div>
-    <div class="pa__widget-content-actions">
-      <p-btn
-        block
-        color="primary"
-        :loading="loading"
-        @click="reload"
-      >
-        <span v-t="'common.continue'" />
-      </p-btn>
-    </div>
-  </template>
-  <template v-else>
-    <div class="pa__widget-info-section">
-      <h1 v-t="'mfa.push.title'" />
-      <p
-        v-t="{
-          path: !manualMode && context.details.push_code ?
-            'mfa.push.selectCode': 'mfa.push.description'
-        }"
-        class="pa__subtitle-2 pa__text-left"
-        style="margin: 12px 0"
-      />
+  <WidgetLayout
+    :logo="false"
+    :title="isRegistration ? 'mfa.push.enrollTitle'
+      : manualMode ? 'mfa.otp.title' : 'mfa.push.title'"
+    :subtitle="isRegistration ? 'mfa.push.enrollDescription'
+      : manualMode ? ''
+        : context.details.push_code ?
+          'mfa.push.selectCode': 'mfa.push.description'
+    "
+  >
+    <img
+      v-if="isRegistration"
+      id="mainLogo"
+      class="pa__logo pa__qr-code"
+      alt="Logo"
+      :src="context.details.dataUrl"
+    >
+    <div
+      v-else-if="!manualMode && context.details.push_code"
+      class="pa__timer pa__timer--circle"
+    >
+      <span class="pa__timer--seconds">
+        {{ context.details.push_code }}
+      </span>
     </div>
-
     <GenericForm
       ref="form"
       :fields="fields"
@@ -48,14 +31,6 @@
       :submit="submit"
     >
       <template v-if="!manualMode">
-        <div
-          v-if="context.details.push_code"
-          class="pa__timer pa__timer--circle"
-        >
-          <span class="pa__timer--seconds">
-            {{ context.details.push_code }}
-          </span>
-        </div>
         <div
           v-for="device in context.details.devices"
           :key="device.model"
@@ -69,45 +44,38 @@
         </div>
       </template>
     </GenericForm>
-
-
-    <div
-      v-if="manualMode"
-      class="pa__widget-content-actions"
-    >
+    <template #content-actions>
       <p-btn
+        v-if="manualMode || isRegistration"
         block
         color="primary"
         :loading="loading"
-        @click="submit"
+        @click="manualMode ? submit : reload"
       >
-        <span v-t="'common.submit'" />
+        <span v-t="manualMode ? 'common.submit': 'common.continue'" />
       </p-btn>
-    </div>
-
-    <div
-      v-if="context.details.challenges.length > 1"
-      class="pa__widget-helpers-section"
-    >
-      <a
-        v-t="'mfa.tryAnotherWay'"
-        href="/signin/challenge"
-      />
-    </div>
-    <div
+    </template>
+    <template
       v-if="!manualMode"
-      class="pa__widget-content-footer"
+      #content-footer
     >
+      <p
+        v-if="context.details.challenges.length > 1"
+      >
+        <a
+          v-t="'mfa.tryAnotherWay'"
+          href="/signin/challenge"
+        />
+      </p>
       <p
         v-if="!isRegistration"
-        align="center"
       >
         <a
           v-t="'mfa.push.tryCodeAction'"
           @click="switchToCode"
         />
       </p>
-      <p align="center">
+      <p>
         <span
           v-t="['common.resendText', { type: 'common.notification'}]"
           style="padding-right: 4px"
@@ -117,8 +85,8 @@
           :href="resendLink"
         />
       </p>
-    </div>
-  </template>
+    </template>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
@@ -126,13 +94,14 @@ import { computed, defineComponent, nextTick, ref, watch } from 'vue';
 
 import GenericForm from '../../components/GenericForm.vue';
 import PSpinner from '../../components/PSpinner/PSpinner';
+import WidgetLayout from '../../components/WidgetLayout.vue';
 import { useContext, useHttp } from '../../composables';
 import type { AdditionalFields } from '../../interfaces';
 import { useGenericForm } from '../../utils/form_generics';
 
 export default defineComponent({
   name: 'Push',
-  components: { PSpinner, GenericForm },
+  components: { WidgetLayout, PSpinner, GenericForm },
   setup() {
 
     const http = useHttp()
@@ -151,7 +120,8 @@ export default defineComponent({
     const defaultFields = computed<AdditionalFields>(() => ({
       ...manualMode.value ? {
         code: {
-          type: 'code',
+          type: 'number',
+          label: 'common.enterOtp',
           value: null,
         }
       } : undefined
diff --git a/src/ui/views/mfa/SMS.vue b/src/ui/views/mfa/SMS.vue
index 3d36308..34d2423 100755
--- a/src/ui/views/mfa/SMS.vue
+++ b/src/ui/views/mfa/SMS.vue
@@ -1,59 +1,49 @@
 <template>
-  <div class="pa__logo-container">
-    <img
-      id="mainLogo"
-      style="margin-left: 30px;"
-      class="pa__logo"
-      alt="Logo"
-      src="https://static.plusauth.com/images/icons/message-on-phone.svg"
-    >
-  </div>
-  <div class="pa__widget-info-section">
+  <WidgetLayout
+    logo="images/icons/message-on-phone.svg"
+    logo-style="margin-left: 30px;"
+    :title="{ path: 'mfa.sms.title', args: { phone_number: context.details.phone_number} }"
+  >
     <PTimer
       class="pa__challenge-timer"
       :duration="120"
     />
-    <h2 v-t="{ path: 'mfa.sms.title', args: { phone_number: context.details.phone_number} }" />
-  </div>
-
-  <GenericForm
-    ref="form"
-    :fields="fields"
-    :validate="validate"
-    :submit="submit"
-  />
-
-  <div class="pa__widget-content-actions">
-    <p-btn
-      block
-      color="primary"
-      :loading="loading"
-      @click="submit"
-    >
-      <span v-t="'common.submit'" />
-    </p-btn>
-  </div>
-
-  <div
-    v-if="context.details.challenges.length > 1"
-    class="pa__widget-helpers-section"
-  >
-    <a
-      v-t="'mfa.tryAnotherWay'"
-      href="/signin/challenge"
+    <GenericForm
+      ref="form"
+      :fields="fields"
+      :validate="validate"
+      :submit="submit"
     />
-  </div>
-  <div class="pa__widget-content-footer">
-    <p align="center">
-      <span
-        v-t="['common.resendText', {type: 'common.code'}]"
-        style="padding-right: 4px"
-      /><a
-        v-t="'common.resend'"
-        :href="resendLink"
-      />
-    </p>
-  </div>
+    <template #content-actions>
+      <p-btn
+        block
+        color="primary"
+        :loading="loading"
+        @click="submit"
+      >
+        <span v-t="'common.submit'" />
+      </p-btn>
+    </template>
+    <template #content-footer>
+      <p
+        v-if="context.details.challenges.length > 1"
+      >
+        <a
+          v-t="'mfa.tryAnotherWay'"
+          href="/signin/challenge"
+        />
+      </p>
+      <p>
+        <span
+          v-t="['common.resendText', {type: 'common.code'}]"
+          style="padding-right: 4px"
+        /><a
+          v-t="'common.resend'"
+          :href="resendLink"
+        />
+      </p>
+    </template>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
@@ -61,13 +51,14 @@ import { defineComponent } from 'vue';
 
 import GenericForm from '../../components/GenericForm.vue';
 import PTimer from '../../components/PTimer/PTimer';
+import WidgetLayout from '../../components/WidgetLayout.vue';
 import { useContext, useHttp } from '../../composables';
 import type { AdditionalFields } from '../../interfaces';
 import { useGenericForm } from '../../utils/form_generics';
 
 export default defineComponent({
   name: 'SMS',
-  components: { PTimer, GenericForm },
+  components: { WidgetLayout, PTimer, GenericForm },
   setup(){
 
     const http = useHttp()
diff --git a/src/ui/views/mfa/WebAuthN.vue b/src/ui/views/mfa/WebAuthN.vue
index 0dbc9ba..29c1e1c 100755
--- a/src/ui/views/mfa/WebAuthN.vue
+++ b/src/ui/views/mfa/WebAuthN.vue
@@ -1,39 +1,40 @@
 <template>
-  <div style="position: relative">
-    <div class="pa__widget-info-section">
-      <div
-        v-if="loading"
-        style="position:absolute; top: 0; bottom: 0; right: 0; display: flex;
+  <WidgetLayout
+    :logo="false"
+  >
+    <div
+      v-if="loading"
+      style="position:absolute; top: 0; bottom: 0; right: 0; display: flex;
        align-items: center; flex-direction: column; left: 0; justify-content: center;
         background: white; opacity: 1;"
-      >
-        <p-spinner
-          color="primary"
-          indeterminate
-        />
-        <div
-          v-if="loadingMsg"
-          v-t="loadingMsg"
-          style="margin-top: 12px; font-size: 0.9em"
-        />
-      </div>
-      <GenericForm
-        ref="form"
-        :fields="fields"
-        :validate="validate"
-        :submit="submit"
-      />
-    </div>
-    <div
-      v-if="context.details.challenges.length > 1"
-      class="pa__widget-helpers-section"
     >
-      <a
-        v-t="'mfa.tryAnotherWay'"
-        href="/signin/challenge"
+      <p-spinner
+        color="primary"
+        indeterminate
+      />
+      <div
+        v-if="loadingMsg"
+        v-t="loadingMsg"
+        style="margin-top: 12px; font-size: 0.9em"
       />
     </div>
-  </div>
+    <GenericForm
+      ref="form"
+      :fields="fields"
+      :validate="validate"
+      :submit="submit"
+    />
+    <template #content-actions>
+      <p
+        v-if="context.details.challenges.length > 1"
+      >
+        <a
+          v-t="'mfa.tryAnotherWay'"
+          href="/signin/challenge"
+        />
+      </p>
+    </template>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
@@ -46,13 +47,14 @@ import {
 import { defineComponent, onMounted, ref } from 'vue';
 
 import GenericForm from '../../components/GenericForm.vue';
+import WidgetLayout from '../../components/WidgetLayout.vue';
 import { useContext, useHttp, useLocale } from '../../composables';
 import type { AdditionalFields } from '../../interfaces';
 import { useGenericForm } from '../../utils/form_generics';
 
 export default defineComponent({
   name: 'WebAuthN',
-  components: { GenericForm },
+  components: { WidgetLayout, GenericForm },
   setup() {
     const http = useHttp()
     const context = useContext()
diff --git a/src/ui/views/passwordless/Email.vue b/src/ui/views/passwordless/Email.vue
index 4212a73..008f9d6 100755
--- a/src/ui/views/passwordless/Email.vue
+++ b/src/ui/views/passwordless/Email.vue
@@ -1,40 +1,25 @@
 <template>
-  <template v-if="context.prompt?.mode === 'check_email'">
-    <div class="pa__logo-container">
-      <img
-        src="https://static.plusauth.com/images/icons/plane.svg"
-        class="pa__logo"
-        alt="Mail Confirmation"
-      >
-    </div>
-    <div class="pa__widget-info-section">
-      <h1 v-t="'passwordless.email.title'" />
-      <h2 v-t="{path: 'passwordless.email.checkText', args: { email: context.details.email}}" />
-    </div>
-  </template>
-  <template v-else>
-    <div class="pa__logo-container">
-      <img
-        id="mainLogo"
-        class="pa__logo"
-        alt="Logo"
-        src="https://static.plusauth.com/images/icons/email_question.svg"
-      >
-    </div>
-    <div class="pa__widget-info-section">
-      <h2
-        v-t="{ path: 'passwordless.email.title', args: { email: context.details.email } }"
-      />
-    </div>
-
+  <WidgetLayout
+    :logo="isMagicLink ? 'images/icons/plane.svg' : 'images/icons/email_question.svg'"
+    :title="isMagicLink ? 'passwordless.email.magicLinkTitle' : {
+      path: 'passwordless.email.title', args: { email: context.details.email }
+    } "
+    :subtitle="isMagicLink ? {
+      path: 'passwordless.email.checkText', args: { email: context.details.email}
+    }: undefined
+    "
+  >
     <GenericForm
+      v-if="!isMagicLink"
       ref="form"
       :fields="fields"
       :validate="validate"
       :submit="submit"
     />
-
-    <div class="pa__widget-content-actions">
+    <template
+      v-if="!isMagicLink"
+      #content-actions
+    >
       <p-btn
         block
         color="primary"
@@ -43,26 +28,27 @@
       >
         <span v-t="'common.submit'" />
       </p-btn>
-    </div>
-  </template>
+    </template>
 
-  <div class="pa__widget-content-footer">
-    <p align="center">
-      <span
-        v-t="[ 'common.resendText', { type: 'common.email' } ]"
-        style="padding-right: 4px"
-      /><a
-        v-t="'common.resend'"
-        :href="resendLink"
-      />
-    </p>
-  </div>
+    <template #content-footer>
+      <p>
+        <span
+          v-t="[ 'common.resendText', { type: 'common.email' } ]"
+          style="padding-right: 4px"
+        /><a
+          v-t="'common.resend'"
+          :href="resendLink"
+        />
+      </p>
+    </template>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 
 import GenericForm from '../../components/GenericForm.vue';
+import WidgetLayout from '../../components/WidgetLayout.vue';
 import { useContext, useHttp, useLocale } from '../../composables';
 import type { AdditionalFields } from '../../interfaces';
 import { useGenericForm } from '../../utils/form_generics';
@@ -70,7 +56,7 @@ import { useGenericForm } from '../../utils/form_generics';
 
 export default defineComponent({
   name: 'Email',
-  components: { GenericForm },
+  components: { WidgetLayout, GenericForm },
   setup(){
     const http = useHttp()
     const context = useContext()
@@ -78,6 +64,7 @@ export default defineComponent({
 
     const resendLink = `${ window.location.pathname }/resend`
 
+    const isMagicLink = context.prompt?.mode === 'check_email'
     const defaultFields: AdditionalFields = {
       email: {
         type: 'text',
@@ -122,6 +109,7 @@ export default defineComponent({
       }
     )
     return {
+      isMagicLink,
       loading,
       fields,
       form,
diff --git a/src/ui/views/passwordless/OTP.vue b/src/ui/views/passwordless/OTP.vue
index 73e8fa5..3f9926d 100755
--- a/src/ui/views/passwordless/OTP.vue
+++ b/src/ui/views/passwordless/OTP.vue
@@ -1,88 +1,58 @@
 <template>
-  <template v-if="context.details.dataUrl">
-    <h4>
-      1. Download Google Authenticator
-      <a
-        target="_blank"
-        href="https://play.google.com/store/apps/
-details?id=com.google.android.apps.authenticator2"
-      >
-        Android
-      </a>
-      /
-      <a
-        href="https://apps.apple.com/us/app/google-authenticator/id388497605"
-        target="_blank"
-      >iOS</a>
-    </h4>
-    <p>
-      Google Authenticator can be downloaded from the App store or
-      Google Play. Search "Google Authenticator"
-      and proceed to download.
-    </p>
-    <h4>2. Add Authentication Token in Google 2FA and keep the key phrase</h4>
-    <p>
-      Open Google 2FA, scan below QR code or manually enter the key phrase
-      to add a token.
-      <br>
-      Key Phrase is used to recover Google 2FA in the case of phone loss or
-      change. Please make sure to keep
-      the key phrase; in a safe location before binding.
-    </p>
-    <div class="pa__logo-container">
-      <img
-        id="mainLogo"
-        class="pa__logo"
-        alt="Logo"
-        style="max-width: 300px; max-height: 300px;"
-        :src="context.details.dataUrl"
-      >
-    </div>
-    <h3
-      style="text-align: center;
-      background-color: lightgray; border: 1px solid black;"
-    >
-      {{ context.details.secret }}
-    </h3>
-    <h4>3. Enable Google Two Factor Authentication</h4>
-  </template>
-  <template v-else>
-    <div
-      v-t="{ path: 'passwordless.otp.title'}"
-      class="pa__subtitle-2 pa__text-left"
+  <WidgetLayout
+    :logo="false"
+    :title="context.details.dataUrl ? 'passwordless.otp.registerTitle' : 'passwordless.otp.title'"
+    :subtitle="context.details.dataUrl ? 'passwordless.otp.registerSubtitle' : undefined"
+  >
+    <template v-if="context.details.dataUrl">
+      <div style="text-align: center">
+        <img
+          id="mainLogo"
+          class="pa__logo"
+          alt="Logo"
+          style="max-width: 300px; max-height: 300px;"
+          :src="context.details.dataUrl"
+        >
+        <h3
+          style="text-align: center;
+      background-color: lightgray; border: 1px solid black; margin: 16px 0;"
+        >
+          {{ context.details.secret }}
+        </h3>
+      </div>
+    </template>
+    <GenericForm
+      ref="form"
+      :fields="fields"
+      :validate="validate"
+      :submit="submit"
     />
-  </template>
-  <GenericForm
-    ref="form"
-    :fields="fields"
-    :validate="validate"
-    :submit="submit"
-  />
-
-  <div class="pa__widget-content-actions">
-    <p-btn
-      block
-      color="primary"
-      type="submit"
-      :loading="loading"
-      @click="submit"
-    >
-      <span v-t="'common.submit'" />
-    </p-btn>
-  </div>
+    <template #content-actions>
+      <p-btn
+        block
+        color="primary"
+        type="submit"
+        :loading="loading"
+        @click="submit"
+      >
+        <span v-t="'common.submit'" />
+      </p-btn>
+    </template>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 
 import GenericForm from '../../components/GenericForm.vue';
+import WidgetLayout from '../../components/WidgetLayout.vue';
 import { useContext, useHttp, useLocale } from '../../composables';
 import type { AdditionalFields } from '../../interfaces';
 import { useGenericForm } from '../../utils/form_generics';
 
 export default defineComponent({
   name: 'OTP',
-  components: {  GenericForm },
+  components: { WidgetLayout,  GenericForm },
   setup(){
     const http = useHttp()
     const context = useContext()
@@ -112,7 +82,8 @@ export default defineComponent({
         }
       },
       code: {
-        type: 'code',
+        type: 'number',
+        label: 'common.enterOtp',
         value: null,
       }
     }
diff --git a/src/ui/views/passwordless/Push.vue b/src/ui/views/passwordless/Push.vue
index f726f2d..b2db6bd 100755
--- a/src/ui/views/passwordless/Push.vue
+++ b/src/ui/views/passwordless/Push.vue
@@ -1,47 +1,23 @@
 <template>
-  <template v-if="isRegistration">
-    <div class="pa__widget-info-section">
-      <h1 v-t="'passwordless.push.enrollTitle'" />
-      <p
-        v-t="{ path: 'passwordless.push.enrollDescription'}"
-        class="pa__subtitle-2 pa__text-left"
-        style="margin: 12px 0"
-      />
-    </div>
-    <div class="pa__logo-container">
-      <img
-        id="mainLogo"
-        class="pa__logo pa__qr-code"
-        alt="Logo"
-        style="max-width: 300px; max-height: 300px;"
-        :src="context.details.dataUrl"
-      >
-    </div>
-    <div class="pa__widget-content-actions">
-      <p-btn
-        block
-        color="primary"
-        :loading="loading"
-        @click="reload"
-      >
-        <span v-t="'common.continue'" />
-      </p-btn>
-    </div>
-  </template>
-  <template v-else>
-    <div class="pa__widget-info-section">
-      <h1 v-t="'passwordless.push.title'" />
-      <p
-        v-t="{
-          path: manualMode ? 'passwordless.otp.title' : context.details.push_code ?
-            'passwordless.push.selectCode': 'passwordless.push.description'
-        }"
-        class="pa__subtitle-2 pa__text-left"
-        style="margin: 12px 0"
-      />
-    </div>
+  <WidgetLayout
+    :logo="false"
+		:title="isRegistration ? 'passwordless.push.enrollTitle'
+      : manualMode ? 'mfa.otp.title' : 'passwordless.push.title'"
+    :subtitle="isRegistration ? 'passwordless.push.enrollDescription'
+      : manualMode ? ''
+        : context.details.push_code ?
+          'passwordless.push.selectCode': 'passwordless.push.description'
+    "
+  >
+    <img
+      v-if="isRegistration"
+      id="mainLogo"
+      class="pa__logo pa__qr-code"
+      alt="Logo"
+      :src="context.details.dataUrl"
+    >
     <div
-      v-if="!manualMode && context.details.push_code"
+      v-else-if="!manualMode && context.details.push_code"
       class="pa__timer pa__timer--circle"
     >
       <span class="pa__timer--seconds">
@@ -68,34 +44,30 @@
         </div>
       </template>
     </GenericForm>
-
-    <div
-      v-if="manualMode"
-      class="pa__widget-content-actions"
-    >
+    <template #content-actions>
       <p-btn
+        v-if="manualMode || isRegistration"
         block
         color="primary"
         :loading="loading"
-        @click="submit"
+        @click="manualMode ? submit : reload"
       >
-        <span v-t="'common.submit'" />
+        <span v-t="manualMode ? 'common.submit': 'common.continue'" />
       </p-btn>
-    </div>
-    <div
+    </template>
+    <template
       v-if="!manualMode"
-      class="pa__widget-content-footer"
+      #content-footer
     >
       <p
         v-if="!isRegistration"
-        align="center"
       >
         <a
           v-t="'passwordless.push.tryCodeAction'"
           @click="switchToCode"
         />
       </p>
-      <p align="center">
+      <p>
         <span
           v-t="['common.resendText', { type: 'common.notification'}]"
           style="padding-right: 4px"
@@ -105,8 +77,8 @@
           :href="resendLink"
         />
       </p>
-    </div>
-  </template>
+    </template>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
@@ -114,13 +86,14 @@ import { computed, defineComponent, nextTick, ref, watch } from 'vue';
 
 import GenericForm from '../../components/GenericForm.vue';
 import PSpinner from '../../components/PSpinner/PSpinner';
+import WidgetLayout from '../../components/WidgetLayout.vue';
 import { useContext, useHttp, useLocale } from '../../composables';
 import type { AdditionalFields } from '../../interfaces';
 import { useGenericForm } from '../../utils/form_generics';
 
 export default defineComponent({
   name: 'Push',
-  components: { PSpinner,  GenericForm },
+  components: { WidgetLayout, PSpinner,  GenericForm },
   setup(){
     const http = useHttp()
     const context = useContext()
@@ -158,7 +131,8 @@ export default defineComponent({
       },
       ...manualMode.value ? {
         code: {
-          type: 'code',
+          type: 'number',
+          label: 'common.enterOtp',
           value: null,
         }
       }: undefined
diff --git a/src/ui/views/passwordless/SMS.vue b/src/ui/views/passwordless/SMS.vue
index b6c440e..9d4258a 100755
--- a/src/ui/views/passwordless/SMS.vue
+++ b/src/ui/views/passwordless/SMS.vue
@@ -1,54 +1,43 @@
 <template>
-  <div class="pa__logo-container">
-    <img
-      id="mainLogo"
-      style="margin-left: 30px;"
-      class="pa__logo"
-      alt="Logo"
-      src="https://static.plusauth.com/images/icons/message-on-phone.svg"
-    >
-  </div>
-  <div class="pa__widget-info-section">
+  <WidgetLayout
+    :title="{
+      path: 'passwordless.sms.title',
+      args: { phone_number: context.details.phone_number}
+    }"
+    logo="images/icons/message-on-phone.svg"
+  >
     <PTimer
       class="pa__challenge-timer"
       :duration="120"
     />
-    <h2
-      v-t="{
-        path: 'passwordless.sms.title',
-        args: { phone_number: context.details.phone_number}
-      }"
+    <GenericForm
+      ref="form"
+      :fields="fields"
+      :validate="validate"
+      :submit="submit"
     />
-  </div>
-
-  <GenericForm
-    ref="form"
-    :fields="fields"
-    :validate="validate"
-    :submit="submit"
-  />
-
-  <div class="pa__widget-content-actions">
-    <p-btn
-      block
-      color="primary"
-      :loading="loading"
-      @click="submit"
-    >
-      <span v-t="'common.submit'" />
-    </p-btn>
-  </div>
-  <div class="pa__widget-content-footer">
-    <p align="center">
-      <span
-        v-t="['common.resendText', {type: 'common.code'}]"
-        style="padding-right: 4px"
-      /><a
-        v-t="'common.resend'"
-        :href="resendLink"
-      />
-    </p>
-  </div>
+    <template #content-actions>
+      <p-btn
+        block
+        color="primary"
+        :loading="loading"
+        @click="submit"
+      >
+        <span v-t="'common.submit'" />
+      </p-btn>
+    </template>
+    <template #content-footer>
+      <p>
+        <span
+          v-t="['common.resendText', {type: 'common.code'}]"
+          style="padding-right: 4px"
+        /><a
+          v-t="'common.resend'"
+          :href="resendLink"
+        />
+      </p>
+    </template>
+  </WidgetLayout>
 </template>
 
 <script lang="ts">
@@ -56,13 +45,14 @@ import { defineComponent } from 'vue';
 
 import GenericForm from '../../components/GenericForm.vue';
 import PTimer from '../../components/PTimer/PTimer';
+import WidgetLayout from '../../components/WidgetLayout.vue';
 import { useContext, useHttp, useLocale } from '../../composables';
 import type { AdditionalFields } from '../../interfaces';
 import { useGenericForm } from '../../utils/form_generics';
 
 export default defineComponent({
   name: 'SMS',
-  components: { PTimer, GenericForm },
+  components: { WidgetLayout, PTimer, GenericForm },
   setup(){
     const http = useHttp()
     const context = useContext()
@@ -92,7 +82,7 @@ export default defineComponent({
       },
       code: {
         type: 'text',
-        label: 'common.fields.code'
+        label: 'common.enterOtp'
       }
     }
     const { form, loading, submit, validate, fields } = useGenericForm(
diff --git a/src/ui/widget.ts b/src/ui/widget.ts
index 6b74911..2764f4d 100755
--- a/src/ui/widget.ts
+++ b/src/ui/widget.ts
@@ -41,23 +41,9 @@ export function App(theme: Theme, settings: Partial<IWidgetSettings>): any {
           class: 'pa__widget',
           key: this.locale
         },
-        h('div', { class: 'pa__widget-content' },
-          [
-            h(
-              'div',
-              {
-                class: ['pa__widget-content-main']
-              },
-              [
-                this.resolvedView && h(
-                  this.resolvedView
-                )
-              ]
-            ),
-            settings.footer && settings.footer.enabled && h(PFooter as any,
-              { class: 'pa__widget-footer' })
-          ] )
-
+        this.resolvedView && h(
+          this.resolvedView
+        )
       )
     }
   };