feat: resend timer for mfa & passwordless views that support it

PlusAuth · May 20, 2024 · 83ec772 · 83ec772
1 parent 8a1f6ee
commit 83ec772
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 96 deletions.
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -24,6 +24,7 @@ export default {
     reject: 'Reject',
     resend: 'Resend',
     resendText: 'Didn\'t receive the {type}?',
+    resendAfter: 'Resend in: {time}',
     seconds: 'seconds',
     show: 'Show',
     submit: 'Submit',

diff --git a/src/ui/components/ResendAction.vue b/src/ui/components/ResendAction.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import {computed} from 'vue';
+
+import {useContext, useLocale} from '../composables';
+import {useTimer} from '../composables/use_timer.ts';
+import {secondsToTime} from '../utils';
+
+withDefaults(defineProps<{
+  type?: string
+}>(), {
+  type: 'common.code'
+})
+
+const context = useContext()
+const {t} = useLocale()
+const resendLink = `${window.location.pathname}/resend`
+const resendAfter = context.details.resend_after as number
+const {countdown} = useTimer(Math.floor(resendAfter / 1000) || 0)
+const formattedTimer = computed(() => {
+  return secondsToTime(countdown.value)
+})
+</script>
+
+<template>
+  <div class="pa__resend-action">
+    <span
+      v-t="['common.resendText', { type }]"
+    />
+    <span
+      v-if="countdown > 0"
+    >
+      {{ t('common.resendAfter', {time: formattedTimer}) }}
+    </span>
+    <a
+      v-else
+      v-t="'common.resend'"
+      :href="resendLink"
+    />
+  </div>
+</template>
+
+<style>
+.widget {
+  .resend-action {
+    @apply text-center;
+
+    span:first-of-type {
+      @apply pr-2
+    }
+    span + span  {
+      @apply opacity-75
+    }
+  }
+}
+
+</style>
diff --git a/src/ui/composables/use_resend.ts b/src/ui/composables/use_resend.ts
@@ -0,0 +1,9 @@
+import type { IPlusAuthContext } from '../interfaces';
+
+export function useResend(context: IPlusAuthContext){
+  const resendLink = `${ window.location.pathname }/resend`
+  const resendAfter = context.details.resend_after
+  return {
+    resendLink
+  }
+}
diff --git a/src/ui/utils/index.ts b/src/ui/utils/index.ts
@@ -156,3 +156,10 @@ export function setColorStyle(props: { color?: string, textColor?: string } ){
     ...props.textColor ? { color: resolveColor(props.textColor) } : {},
   }
 }
+
+export function secondsToTime(e: number){
+  const m = Math.floor(e % 3600 / 60).toString().padStart(2,'0'),
+        s = Math.floor(e % 60).toString().padStart(2,'0');
+
+  return `${m}:${s}`;
+}
diff --git a/src/ui/utils/translator.ts b/src/ui/utils/translator.ts
@@ -1,4 +1,5 @@
 import type { Ref } from 'vue';
+import { getCurrentInstance } from 'vue';
 import { ref } from 'vue';
 
 import { escapeRegExp, isObject, keysToDotNotation, propertyAccessor } from '.';
@@ -37,6 +38,10 @@ export class Translator {
       locale?: string
     } = {}
   ) {
+    const vm = this instanceof Translator
+      ? this
+      : getCurrentInstance()?.appContext?.config?.globalProperties.$i18n;
+
     if (!opts.fallback && (params instanceof Error || typeof params === 'string')) {
       opts.fallback = params['error_description']
         || params['error_details']
@@ -45,18 +50,18 @@ export class Translator {
         || params
     }
     const locale = opts.locale || this.locale
-    const value = propertyAccessor(this.dictionary[locale], key)
-      || propertyAccessor(this.dictionary[this.fallBackLocale], key);
+    const value = propertyAccessor(vm.dictionary[locale], key)
+      || propertyAccessor(vm.dictionary[vm.fallBackLocale], key);
     if (value) {
-      return this._interpolate(
+      return vm._interpolate(
         value,
         params,
         locale
       )
     } else if (opts.fallback) {
-      return this._interpolate(
-        propertyAccessor(this.dictionary[locale], opts.fallback)
-        || propertyAccessor(this.dictionary[this.fallBackLocale], opts.fallback)
+      return vm._interpolate(
+        propertyAccessor(vm.dictionary[locale], opts.fallback)
+        || propertyAccessor(vm.dictionary[vm.fallBackLocale], opts.fallback)
         || opts.fallback,
         params,
         locale

diff --git a/src/ui/views/VerifyEmail.vue b/src/ui/views/VerifyEmail.vue
@@ -11,15 +11,7 @@
       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"
-        /><a
-          v-t="'common.resend'"
-          :href="resendLink"
-        />
-      </p>
+      <ResendAction type="common.email" />
     </template>
     <template
       v-else-if="!error"
@@ -38,13 +30,14 @@ import {
   defineComponent, ref, onMounted
 } from 'vue';
 
+import ResendAction from '../components/ResendAction.vue';
 import WidgetLayout from '../components/WidgetLayout.vue';
 import { useContext } from '../composables';
 import { resolveLogo } from '../utils';
 
 export default defineComponent({
   name: 'VerifyEmail',
-  components: { WidgetLayout },
+  components: { ResendAction, WidgetLayout },
 
   setup() {
     const context = useContext()
@@ -55,8 +48,6 @@ export default defineComponent({
     const error = context.error?.error
     let loginUrl = context.settings.auto_sign_in && context.settings.tenant_login_url
 
-    const resendLink = `${window.location.pathname}/resend`
-
     onMounted(() => {
       if (
         context.prompt?.mode
@@ -80,7 +71,6 @@ export default defineComponent({
       actionCompleted,
       error,
       loginUrl,
-      resendLink,
       resolveClientLogo: resolveLogo
     }
   },

diff --git a/src/ui/views/mfa/Email.vue b/src/ui/views/mfa/Email.vue
@@ -28,15 +28,7 @@
           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>
+      <ResendAction type="common.email" />
     </template>
   </WidgetLayout>
 </template>
@@ -45,6 +37,7 @@
 import { defineComponent } from 'vue';
 
 import GenericForm from '../../components/GenericForm.vue';
+import ResendAction from '../../components/ResendAction.vue';
 import WidgetLayout from '../../components/WidgetLayout.vue';
 import { useContext, useHttp } from '../../composables';
 import type { AdditionalFields } from '../../interfaces';
@@ -53,13 +46,11 @@ import { useGenericForm } from '../../utils/form_generics';
 
 export default defineComponent({
   name: 'Email',
-  components: { WidgetLayout, GenericForm },
+  components: { ResendAction, WidgetLayout, GenericForm },
   setup(){
     const http = useHttp()
     const context = useContext()
 
-    const resendLink = `${ window.location.pathname }/resend`
-
     const defaultFields: AdditionalFields = {
       code: {
         type: 'text',
@@ -76,7 +67,6 @@ export default defineComponent({
       }
     )
     return {
-      resendLink,
       loading,
       fields,
       form,

diff --git a/src/ui/views/mfa/Push.vue b/src/ui/views/mfa/Push.vue
@@ -75,16 +75,7 @@
           @click="switchToCode"
         />
       </p>
-      <p>
-        <span
-          v-t="['common.resendText', { type: 'common.notification'}]"
-          style="padding-right: 4px"
-        />
-        <a
-          v-t="'common.resend'"
-          :href="resendLink"
-        />
-      </p>
+      <ResendAction type="common.notification" />
     </template>
   </WidgetLayout>
 </template>
@@ -94,21 +85,20 @@ import { computed, defineComponent, nextTick, ref, watch } from 'vue';
 
 import GenericForm from '../../components/GenericForm.vue';
 import PSpinner from '../../components/PSpinner/PSpinner';
+import ResendAction from '../../components/ResendAction.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: 'Push',
-  components: { WidgetLayout, PSpinner, GenericForm },
+  components: { ResendAction, WidgetLayout, PSpinner, GenericForm },
   setup() {
 
     const http = useHttp()
     const context = useContext()
 
-    const resendLink = `${window.location.pathname}/resend`
-
     const urlParams = new URLSearchParams(window.location.search)
     const manualMode = computed(() => urlParams.get('useQuery') === 'true')
 
@@ -175,7 +165,6 @@ export default defineComponent({
     }, { immediate: true, flush: 'post' })
     return {
       fields,
-      resendLink,
       validate,
       isRegistration,
       manualMode,

diff --git a/src/ui/views/mfa/SMS.vue b/src/ui/views/mfa/SMS.vue
@@ -33,15 +33,7 @@
           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>
+      <ResendAction />
     </template>
   </WidgetLayout>
 </template>
@@ -51,14 +43,15 @@ import { defineComponent } from 'vue';
 
 import GenericForm from '../../components/GenericForm.vue';
 import PTimer from '../../components/PTimer/PTimer';
+import ResendAction from '../../components/ResendAction.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: 'SMS',
-  components: { WidgetLayout, PTimer, GenericForm },
+  components: { ResendAction, WidgetLayout, PTimer, GenericForm },
   setup(){
 
     const http = useHttp()

diff --git a/src/ui/views/passwordless/Email.vue b/src/ui/views/passwordless/Email.vue
@@ -31,15 +31,7 @@
     </template>
 
     <template #content-footer>
-      <p>
-        <span
-          v-t="[ 'common.resendText', { type: 'common.email' } ]"
-          style="padding-right: 4px"
-        /><a
-          v-t="'common.resend'"
-          :href="resendLink"
-        />
-      </p>
+      <ResendAction type="common.email" />
     </template>
   </WidgetLayout>
 </template>
@@ -48,6 +40,7 @@
 import { computed, defineComponent } from 'vue';
 
 import GenericForm from '../../components/GenericForm.vue';
+import ResendAction from '../../components/ResendAction.vue';
 import WidgetLayout from '../../components/WidgetLayout.vue';
 import { useContext, useHttp, useLocale } from '../../composables';
 import type { AdditionalFields } from '../../interfaces';
@@ -56,14 +49,12 @@ import { useGenericForm } from '../../utils/form_generics';
 
 export default defineComponent({
   name: 'Email',
-  components: { WidgetLayout, GenericForm },
+  components: { ResendAction, WidgetLayout, GenericForm },
   setup(){
     const http = useHttp()
     const context = useContext()
     const i18n = useLocale()
 
-    const resendLink = `${ window.location.pathname }/resend`
-
     const isMagicLink = context.prompt?.mode === 'check_email'
     const defaultFields: AdditionalFields = {
       email: {
@@ -114,7 +105,6 @@ export default defineComponent({
       fields,
       form,
       context,
-      resendLink,
       validate,
       submit
     }