optimization

src/app/page.tsx

@@ -1,16 +1,17 @@
 "use client"
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { api } from '@/lib/api'
 import { Smartphone, ArrowLeft } from 'lucide-react'
 import Loading from '@/components/Loading'
+import { MobileInput } from '@/components/forms'
+import { ErrorMessage } from '@/components/common'
 
 export default function Home() {
   const router = useRouter()
   const [mobile, setMobile] = useState('')
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const mobileRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     // Check if user is logged in
@@ -28,34 +29,6 @@ export default function Home() {
     }
   }, [router])
 
-  useEffect(() => {
-    const checkAutoFill = () => {
-      setTimeout(() => {
-        if (mobileRef.current) {
-          const filledMobile = mobileRef.current.value
-          if (filledMobile && filledMobile !== mobile) {
-            setMobile(filledMobile)
-          }
-        }
-      }, 100)
-    }
-
-    checkAutoFill()
-    window.addEventListener('load', checkAutoFill)
-
-    return () => {
-      window.removeEventListener('load', checkAutoFill)
-    }
-  }, [mobile])
-
-  const handleInputChange = (e: React.FormEvent<HTMLInputElement>) => {
-    const value = e.currentTarget.value
-    // Only allow digits
-    const digitsOnly = value.replace(/\D/g, '')
-    setMobile(digitsOnly)
-    setError(null)
-  }
-
   const normalizeMobile = (mobile: string): string => {
     const digitsOnly = mobile.replace(/\D/g, '')
     if (digitsOnly.startsWith('9') && digitsOnly.length === 10) {
@@ -127,24 +100,17 @@ export default function Home() {
               <label className="block text-sm font-medium text-gray-700 mb-2">
                 شماره موبایل
               </label>
-              <input
-                ref={mobileRef}
-                type="tel"
-                inputMode="numeric"
-                className="w-full px-4 py-3 rounded-xl border-2 border-gray-200 bg-gray-50 focus:border-green-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-green-500/20 transition-all duration-200 text-left"
-                placeholder="09123456789"
+              <MobileInput
                 value={mobile}
-                onInput={handleInputChange}
+                onValueChange={(value) => {
+                  setMobile(value)
+                  setError(null)
+                }}
                 disabled={loading}
-                maxLength={11}
               />
             </div>
 
-            {error && (
-              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl text-sm text-center">
-                {error}
-              </div>
-            )}
+            {error && <ErrorMessage message={error} />}
 
             <button
               type="submit"