fix bug of WebOTP

src/views/login/desktop/components/DesktopLoginForm.vue

@@ -3,15 +3,13 @@ import { mobileValidation, required } from '@/utils/inputRules'
 import BasicInput from '@/components/BasicPacks/BasicInput.vue'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import OtpInput from 'vue3-otp-input'
+import SmsOtpField from '@/components/SmsOtpField.vue'
 import { useConfigStore } from '@/store/configStore'
 import { useLoginPageContext } from '../../composables/useLoginPage'
 import DesktopPwaGuideModal from './DesktopPwaGuideModal.vue'
 import router from '@/router'
 import {isTWA} from "@/utils/config";
-import {useUserStore} from "@/store/userStore";
 import {useSettingsStore} from "@/store/settingsStore";
-import { persianToEnglishDigits } from '@/utils/persianDigits'
 
 const emit = defineEmits<{
   register: [val: boolean]
@@ -42,17 +40,6 @@ const {
   proceedWithInstall,
 } = useLoginPageContext().loginForm
 
-function onWebOtpAssistInput(event: Event) {
-  const raw = (event.target as HTMLInputElement | null)?.value ?? ''
-  const code = persianToEnglishDigits(raw).replace(/\D/g, '').slice(0, 4)
-  if (code.length === 4) {
-    userFormState.token = code
-    handleOnComplete(code)
-  } else {
-    handleOnChange(code)
-  }
-}
-
 function goToEducate() {
   router.push({ name: 'educate' })
 }
@@ -137,30 +124,12 @@ function goToAboutUs() {
           name="token"
           style="position: relative"
         >
-          <OtpInput
+          <SmsOtpField
             ref="refOtpInput"
-            :is-input-num="true"
-            :num-inputs="4"
-            :should-auto-focus="true"
-            autocomplete="one-time-code"
-            class="dauth-otp justify-center"
-            input-classes="otp-input"
-            separator=""
-            style="direction: ltr"
-            :value="userFormState.token || ''"
-            @on-change="handleOnChange"
-            @on-complete="handleOnComplete"
-          />
-          <input
-            class="web-otp-assist"
-            type="text"
-            inputmode="numeric"
-            autocomplete="one-time-code"
-            maxlength="4"
-            tabindex="-1"
-            aria-hidden="true"
-            :value="userFormState.token || ''"
-            @input="onWebOtpAssistInput"
+            v-model="userFormState.token"
+            class="dauth-otp"
+            @change="handleOnChange"
+            @complete="handleOnComplete"
           />
         </AFormItem>