refactor: centralize layout

PlusAuth · May 6, 2024 · 861dda9 · 861dda9
1 parent 0efd5c2
commit 861dda9
Show file tree

Hide file tree

Showing 23 changed files with 821 additions and 1,000 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>,