feat: add TwoFaModal component for OTP input and verification handling

Author: NoOne7135

custom/TwoFaModal.vue

@@ -0,0 +1,144 @@
+<template>
+    <div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 top-0 bottom-0 left-0 right-0"
+    v-if ="modelShow">
+      <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow p-6 w-full max-w-md">
+        <div id="mfaCode-label" class="mb-4 text-gray-700 dark:text-gray-100">
+          {{ $t('Please enter your authenticator code') }}
+        </div>
+  
+        <div class="my-4 w-full flex justify-center" ref="otpRoot">
+          <v-otp-input
+            ref="code"
+            container-class="grid grid-cols-6 gap-3 w-full"
+            input-classes="bg-gray-50 text-center flex justify-center otp-input border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            :num-inputs="6"
+            inputType="number"
+            inputmode="numeric"
+            :should-auto-focus="true"
+            :should-focus-order="true"
+            v-model:value="bindValue"
+            @on-complete="handleOnComplete"
+          />
+        </div>
+  
+        <div class="mt-6 flex justify-center gap-3">
+          <button
+            class="px-4 py-2 rounded border bg-gray-100 dark:bg-gray-600"
+            @click="onCancel"
+            :disabled="inProgress"
+          >{{ $t('Cancel') }}</button>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import VOtpInput from 'vue3-otp-input';
+  import { ref, nextTick, onMounted, onBeforeUnmount } from 'vue';
+  import { useUserStore } from '@/stores/user';
+  import { useI18n } from 'vue-i18n';
+  declare global {
+    interface Window {
+      adminforthTwoFaModal: {
+        getCode: () => Promise<any>;
+      };
+    }
+  }
+  const props = defineProps<{
+    autoFinishLogin?: boolean
+  }>();
+  const emit = defineEmits<{
+    (e: 'resolved', payload: any): void
+    (e: 'rejected', err?: any): void
+    (e: 'closed'): void
+  }>();
+
+  const modelShow = ref(false);
+  let resolveFn: ((code: string) => void) | null = null;
+  let verifyingCallback: ((code: string) => boolean) | null = null;
+  let verifyFn: null | ((code: string) => Promise<boolean> | boolean) = null;
+
+  window.adminforthTwoFaModal = {
+    getCode: (verifyingCallback?: () => Promise<boolean>) => new Promise((resolve) => {
+      if (modelShow.value) {
+        throw new Error('Modal is already open');
+      }
+      modelShow.value = true;
+      resolveFn = resolve;
+      verifyFn = verifyingCallback ?? null;
+    }),
+  };
+  
+  const { t } = useI18n();
+  const user = useUserStore();
+  
+  const code = ref<any>(null);
+  const otpRoot = ref<HTMLElement | null>(null);
+  const bindValue = ref('');
+  
+  function tagOtpInputs() {
+    const root = otpRoot.value;
+    if (!root) return;
+    root.querySelectorAll('input.otp-input').forEach((el, idx) => {
+      el.setAttribute('name', 'mfaCode');
+      el.setAttribute('id', `mfaCode-${idx + 1}`);
+      el.setAttribute('autocomplete', 'one-time-code');
+      el.setAttribute('inputmode', 'numeric');
+      el.setAttribute('aria-labelledby', 'mfaCode-label');
+    });
+  }
+  
+  function handlePaste(event: ClipboardEvent) {
+    event.preventDefault();
+    const pastedText = event.clipboardData?.getData('text') || '';
+    if (pastedText.length === 6) {
+      code.value?.fillInput(pastedText);
+    }
+  }
+  
+  async function submit() {
+    if (bindValue.value.length !== 6) return;
+    await sendCode(bindValue.value);
+  }
+  
+  async function handleOnComplete(value: string) {
+    await sendCode(value);
+  }
+  
+  async function sendCode(value: string) {
+    if (!resolveFn) {
+      throw new Error('Modal is not initialized properly');
+    }
+
+    if (verifyFn) {
+      try {
+        const ok = await verifyFn(value);
+        if (!ok) {
+          return;
+        }
+      } catch {
+        return;
+      }
+    }
+
+    modelShow.value = false;
+    resolveFn(value);
+  }
+  
+  
+  function onCancel() {
+    modelShow.value = false;
+    emit('rejected', new Error('cancelled'));
+    emit('closed');
+  }
+  
+  onMounted(async () => {
+    await nextTick();
+    tagOtpInputs();
+    window.addEventListener('paste', handlePaste as any);
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener('paste', handlePaste as any);
+  });
+  </script>
+  

index.ts

@@ -33,6 +33,8 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
       path:'/setup2fa',
       component: { file: this.componentPath('TwoFactorsSetup.vue'), meta: { title: 'Setup 2FA', customLayout: true }}
     })
+    const everyPageBottomInjections = this.adminforth.config.customization.globalInjections.everyPageBottom || []
+    everyPageBottomInjections.push({ file: this.componentPath('TwoFaModal.vue'), meta: {} })
     this.activate( resourceConfig, adminforth )
   }
 
@@ -188,5 +190,25 @@ export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
         }
       },
     });
+    server.endpoint({
+      method: 'POST',
+      path: `/plugin/twofa/verify`,
+      noAuth: false,
+      handler: async ({ adminUser, body }) => {
+        if (!body?.code) return { error: 'Code is required' };
+    
+        const authRes = this.adminforth.config.resources
+          .find(r => r.resourceId === this.adminforth.config.auth.usersResourceId);
+        const connector = this.adminforth.connectors[authRes.dataSource];
+        const pkName = authRes.columns.find(c => c.primaryKey).name;
+        const user = await connector.getRecordByPrimaryKey(authRes, adminUser.dbUser[pkName]);
+    
+        const secret = user[this.options.twoFaSecretFieldName];
+        if (!secret) return { error: '2FA is not set up for this user' };
+    
+        const verified = twofactor.verifyToken(secret, body.code, this.options.timeStepWindow);
+        return verified ? { ok: true } : { error: 'Wrong or expired OTP code' };
+      }
+    });
   }
 }