profile ,footer , ...

src/pages/auth/components/LoginStep2.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { OtpVerifyType } from '../types/AuthTypes'
 import { useFormik } from 'formik'
@@ -47,6 +47,28 @@ const LoginStep2: FC = () => {
         },
     })
 
+    useEffect(() => {
+        // بررسی پشتیبانی از Web OTP API
+        if (!("OTPCredential" in window)) return;
+
+        const ac = new AbortController();
+
+        navigator.credentials
+            .get({
+                otp: { transport: ["sms"] },
+                signal: ac.signal,
+            } as CredentialRequestOptions) // اطمینان از تطابق تایپ‌ها
+            .then((otpCredential) => {
+                if (otpCredential && "code" in otpCredential) {
+                    alert("OTP Received: " + otpCredential.code);
+                    formik.setFieldValue("code", (otpCredential).code);
+                }
+            })
+            .catch((err) => console.error("SMS AutoFill Error:", err));
+
+        return () => ac.abort();
+    }, []);
+
     return (
         <div>
             <div className='mt-5'>
@@ -78,7 +100,13 @@ const LoginStep2: FC = () => {
                         numInputs={5}
                         inputType='tel'
                         onChange={(otp: string) => formik.setFieldValue('code', otp)}
-                        renderInput={(props) => <input {...props} className='w-full h-[50px] flex-1 mx-2  bg-white border rounded-2.5' />}
+                        renderInput={(props) =>
+                            <input
+                                {...props}
+                                autoComplete="one-time-code"
+                                inputMode="numeric"
+                                className='w-full h-[50px] flex-1 mx-2  bg-white border rounded-2.5' />
+                        }
                     />
                 </div>