revision: auth page components

src/features/auth/components/StepEnterNumber.tsx

@@ -19,13 +19,15 @@ function StepEnterNumber({ onSubmit, onChange, value }: Props) {
                     <p className='mt-3 text-[13px]'>برای ورود شماره همراه خود را وارد نمایید.</p>
                 </div>
                 <InputField
+                    inputMode='tel'
+                    autoComplete='tel'
                     className='mt-10'
                     htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
                     labelText='شماره همراه'
                     value={value}
                     placeholder='09120000000'
                     onChange={onChange}
-                    type='number' />
+                    type='tel' />
             </div>
             <Button type='submit'>بعدی</Button>
         </form>

src/features/auth/components/StepEnterOtp.tsx

@@ -14,9 +14,9 @@ type Props = {
 }
 
 function StepEnterOtp({ onSubmit, onChange, onClick, value, phoneNumber, timerRunning, secondsLeft }: Props) {
-    
+
     return (
-        <form onSubmit={onSubmit} className='p-6 h-full flex flex-col justify-between'>
+        <form autoComplete='off' onSubmit={onSubmit} className='p-6 h-full flex flex-col justify-between'>
             <div className='block'>
                 <img src='/assets/images/login-banner.png' />
                 <div className='pt-4' dir='rtl'>
@@ -25,16 +25,17 @@ function StepEnterOtp({ onSubmit, onChange, onClick, value, phoneNumber, timerRu
                     <p className='mt-3 text-[13px]'>کد ۶ رقمی ارسال شده به شماره {phoneNumber} را وارد نمایید.</p>
                 </div>
                 <OTPInputField
+                    autoComplete='one-time-code'
+                    type='number'
+                    inputMode='numeric'
                     className='mt-10'
                     maxLength={6}
                     htmlFor={AUTH_PAGE_ELEMENT.INPUT_OTP}
                     labelText=''
                     value={value}
                     placeholder=''
-                    onChange={onChange}
-                    type='text'>
+                    onChange={onChange} />
 
-                </OTPInputField>
                 <div className='inline-flex justify-center items-center w-full pt-6 text-xs'>
                     <div dir='rtl'>
                         {timerRunning ?

src/features/auth/components/StepEnterPassword.tsx

@@ -23,6 +23,7 @@ function StepEnterPassword({ onSubmit, onChange, onClick, value, passwordVisible
                     <p className='mt-3 text-[13px]'>کلمه عبور خود را وارد نمایید.</p>
                 </div>
                 <InputField
+                    autoComplete='current-password'
                     className='mt-10'
                     htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
                     labelText='کلمه عبور'
@@ -40,7 +41,7 @@ function StepEnterPassword({ onSubmit, onChange, onClick, value, passwordVisible
                     <div className='inline-flex justify-between items-center'>
                         {/* TODO: customize checkbox */}
                         <label htmlFor={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='text-sm2 px-2 py-0.5'>مرا به خاطر بسپار</label>
-                        <input id={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='h-4.5 w-4.5 checked:accent-primary' onChange={onChange} type='checkbox' checked={rememberMe} />            </div>
+                        <input name={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='h-4.5 w-4.5 checked:accent-primary' onChange={onChange} type='checkbox' checked={rememberMe} /></div>
                 </div>
             </div>
             <Button type='submit'>ورود به منو</Button>

src/features/auth/components/StepNewPassword.tsx

@@ -17,7 +17,7 @@ type Props = {
 
 function StepNewPassword({ reset = false, onSubmit, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
     return (
-        <form onSubmit={onSubmit} className='p-6 h-full flex flex-col justify-between'>
+        <form autoComplete='off' onSubmit={onSubmit} className='p-6 h-full flex flex-col justify-between'>
             <div className='block'>
                 <img src='/assets/images/login-banner.png' />
                 <div className='pt-4' dir='rtl'>
@@ -27,6 +27,7 @@ function StepNewPassword({ reset = false, onSubmit, onChange, onClick, value, re
                     <p className='mt-3 text-[13px]'>کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@</p>
                 </div>
                 <InputField
+                    autoComplete='new-password'
                     className='mt-10'
                     htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
                     labelText='کلمه عبور'
@@ -39,6 +40,7 @@ function StepNewPassword({ reset = false, onSubmit, onChange, onClick, value, re
                     </button>
                 </InputField>
                 <InputField
+                    autoComplete='new-password'
                     valid={value === repeatValue}
                     className='mt-6'
                     htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}