refactor: use single form wrapper for auth forms

src/features/auth/components/StepEnterNumber.tsx

@@ -5,45 +5,41 @@ import Image from 'next/image';
 import React from 'react'
 
 type Props = {
-    onSubmit: React.FormEventHandler<HTMLFormElement> | undefined;
     onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
     value: string;
 }
 
-function StepEnterNumber({ onSubmit, onChange, value }: Props) {
+function StepEnterNumber({ onChange, value }: Props) {
     return (
-        <form onSubmit={onSubmit} className='p-6 lg:py-[75px] w-full flex items-center justify-center py-4 lg:items-center lg:px-10 px-4 drop-shadow-black h-full'>
-            <div className='h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] bg-container rounded-container overflow-clip lg:flex-row justify-between'>
-                <Image  
-                    className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
-                    src={'/assets/images/login-banner.png'} 
-                    alt='login banner'
-                    width={100}
-                    height={100}
-                    unoptimized={true}
-                    />
-                <div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
-                    <div className='w-full'>
-                        <div className='pt-4' dir='rtl'>
-                            <h6 className='text-lg font-bold'>ورود به سیستم</h6>
-                            <p className='mt-3 text-[13px]'>برای ورود شماره همراه خود را وارد نمایید.</p>
-                        </div>
-                        <InputField
-                            inputMode='tel'
-                            autoComplete='tel'
-                            className='mt-10 w-full'
-                            htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
-                            labelText='شماره همراه'
-                            value={value}
-                            placeholder='09120000000'
-                            onChange={onChange}
-                            type='tel' />
+        <>
+            <Image
+                className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
+                src={'/assets/images/login-banner.png'}
+                alt='login banner'
+                width={100}
+                height={100}
+                unoptimized={true}
+            />
+            <div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
+                <div className='w-full'>
+                    <div className='pt-4' dir='rtl'>
+                        <h6 className='text-lg font-bold'>ورود به سیستم</h6>
+                        <p className='mt-3 text-[13px]'>برای ورود شماره همراه خود را وارد نمایید.</p>
                     </div>
-                    <Button type='submit'>بعدی</Button>
+                    <InputField
+                        inputMode='tel'
+                        autoComplete='tel'
+                        className='mt-10 w-full'
+                        htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
+                        labelText='شماره همراه'
+                        value={value}
+                        placeholder='09120000000'
+                        onChange={onChange}
+                        type='number' />
                 </div>
-
+                <Button type='submit'>بعدی</Button>
             </div>
-        </form>
+        </>
     )
 }