fix bug of WebOTP

src/views/login/composables/useLoginForm.ts

@@ -1,7 +1,7 @@
-import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import type { FormInstance } from 'ant-design-vue'
 import { message } from 'ant-design-vue'
-import OtpInput from 'vue3-otp-input'
+import type SmsOtpField from '@/components/SmsOtpField.vue'
 import type { Login } from '@/models/login'
 import {
   authenticateWithFingerprint,
@@ -11,14 +11,13 @@ import {
 } from '@/utils'
 import useCountdownTimer from '@/utils/useCountdownTimer'
 import { loginCustomer, verifyToken } from '@/api/login'
-import router from '@/router'
 import { useUserStore } from '@/store/userStore'
 import { useWalletStore } from '@/store/walletStore'
 import { useSettingsStore } from '@/store/settingsStore'
 import { setTruth } from '@/app/authBoot'
 import { completeLoginNavigation } from '@/layouts/composables/useMobileScrollReset'
 import { normalizeAuthFormFields } from '@/utils/persianDigits'
-import { listenForSmsOtp } from '@/utils/webOtp'
+import { beginSmsOtpCapture, clearPendingSmsOtp } from '@/utils/webOtp'
 
 export function useLoginForm() {
   const { time, onFinish, reset } = useCountdownTimer('00:02:00', 'mm:ss')
@@ -27,11 +26,10 @@ export function useLoginForm() {
   const formRef = ref<FormInstance>()
   const userStore = useUserStore()
   const walletStore = useWalletStore()
-  const refOtpInput = ref<InstanceType<typeof OtpInput> | null>(null)
+  const refOtpInput = ref<InstanceType<typeof SmsOtpField> | null>(null)
   const isSMS = ref(true)
   const isRegister = ref<boolean | undefined>()
   const showPWAInstallGuide = ref(false)
-  let otpAbort: AbortController | null = null
 
   const userFormState = reactive<Login>({
     provider: 'customer',
@@ -42,17 +40,19 @@ export function useLoginForm() {
   })
 
   onBeforeUnmount(() => {
-    otpAbort?.abort()
-    otpAbort = null
+    // SmsOtpField cleans its own listener
   })
 
   async function reSendCode() {
     userFormState.token = undefined
-    ;(refOtpInput.value as { clearInput?: () => void } | null)?.clearInput?.()
+    clearPendingSmsOtp()
+    refOtpInput.value?.clearInput?.()
     enableSendAgainCode.value = false
     normalizeAuthFormFields(userFormState)
+    beginSmsOtpCapture()
     await loginCustomer(userFormState)
-    getcode()
+    refOtpInput.value?.startWebOtp?.()
+    refOtpInput.value?.focusInput?.()
     reset()
   }
 
@@ -92,31 +92,8 @@ export function useLoginForm() {
     await completeLoginNavigation()
   }
 
-  async function applySmsOtpCode(code: string) {
-    userFormState.token = code
-    await nextTick()
-    const input = refOtpInput.value as { fillInput?: (v: string) => void } | null
-    if (input?.fillInput) {
-      try {
-        input.fillInput(code)
-        // fillInput → on-complete → handleOnComplete → phoneVerification
-        return
-      } catch {
-        /* fall through */
-      }
-    }
-    await phoneVerification()
-  }
-
-  function getcode() {
-    otpAbort?.abort()
-    otpAbort = listenForSmsOtp((code) => {
-      void applySmsOtpCode(code)
-    })
-  }
-
   function phoneVerification() {
-    formRef.value?.validateFields().then(async () => {
+    return formRef.value?.validateFields().then(async () => {
       try {
         loading.value = true
         normalizeAuthFormFields(userFormState)
@@ -125,10 +102,10 @@ export function useLoginForm() {
             userFormState.token = undefined
             userFormState.password = undefined
             userFormState.provider = 'customer'
+            beginSmsOtpCapture()
             const { id } = await loginCustomer(userFormState)
             userFormState.id = id
             stepTwoVerify.value = true
-            getcode()
             reset()
           } else {
             const { access_token } = await verifyToken(userFormState)