refactor: use single form wrapper for auth forms

src/app/auth/page.tsx

@@ -9,6 +9,7 @@ import StepEnterOtp from '@/features/auth/components/StepEnterOtp';
 import { AUTH_PAGE_ELEMENT, AUTH_STEP } from '@/enums';
 import { useCountdown } from '@/hooks/useCountdown';
 import StepNewPassword from '@/features/auth/components/StepNewPassword';
+import AuthFormWrapper from '@/features/auth/components/AuthFormWrapper';
 // import { useLogin } from '@/hooks/auth/useLogin';
 // import { useSignup } from '@/hooks/auth/useSignup';
 // import { useCheckUserExistsLazy } from '@/hooks/auth/useCheckUserExists';
@@ -172,14 +173,18 @@ function AuthIndex({ }: Props) {
     }
 
     const stepMap = {
-        [AUTH_STEP.ENTER_NUMBER]: <StepEnterNumber onChange={onChange} onSubmit={onSubmit} value={number} />,
+        [AUTH_STEP.ENTER_NUMBER]: <StepEnterNumber onChange={onChange} value={number} />,
-        [AUTH_STEP.ENTER_PASSWORD]: <StepEnterPassword onChange={onChange} onClick={onClick} onSubmit={onSubmit} value={password} passwordVisible={showPassword} rememberMe={rememberMe} />,
+        [AUTH_STEP.ENTER_PASSWORD]: <StepEnterPassword onChange={onChange} onClick={onClick} value={password} passwordVisible={showPassword} rememberMe={rememberMe} />,
-        [AUTH_STEP.ENTER_OTP]: <StepEnterOtp onChange={onChange} onClick={onClick} phoneNumber={number} onSubmit={onSubmit} value={otp} timerRunning={timerRunning} secondsLeft={secondsLeft} />,
+        [AUTH_STEP.ENTER_OTP]: <StepEnterOtp onChange={onChange} onClick={onClick} phoneNumber={number} value={otp} timerRunning={timerRunning} secondsLeft={secondsLeft} />,
-        [AUTH_STEP.ENTER_NEW_PASSWORD]: <StepNewPassword onChange={onChange} onClick={onClick} onSubmit={onSubmit} value={password} repeatValue={passwordRepeat} passwordVisible={showPassword} repeatPasswordVisible={showPasswordRepeat} />,
+        [AUTH_STEP.ENTER_NEW_PASSWORD]: <StepNewPassword onChange={onChange} onClick={onClick} value={password} repeatValue={passwordRepeat} passwordVisible={showPassword} repeatPasswordVisible={showPasswordRepeat} />,
-        [AUTH_STEP.ENTER_RESET_PASSWORD]: <StepNewPassword reset onChange={onChange} onClick={onClick} onSubmit={onSubmit} value={password} repeatValue={passwordRepeat} passwordVisible={showPassword} repeatPasswordVisible={showPasswordRepeat} />,
+        [AUTH_STEP.ENTER_RESET_PASSWORD]: <StepNewPassword reset onChange={onChange} onClick={onClick} value={password} repeatValue={passwordRepeat} passwordVisible={showPassword} repeatPasswordVisible={showPasswordRepeat} />,
     }
 
-    return stepMap[step] || 'say what now?'
+    return (
+        <AuthFormWrapper onSubmit={onSubmit}>
+            {stepMap[step] || 'say what now?'}
+        </AuthFormWrapper>
+    )
 }
 
 export default AuthIndex

src/features/auth/components/AuthFormWrapper.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+type Props = {
+
+} & Omit<React.FormHTMLAttributes<HTMLFormElement>, "id">;
+
+function AuthFormWrapper({ children, ...restProps }: Props) {
+  return (
+    <form {...restProps} 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'>
+        {children}
+      </div>
+    </form>
+  )
+}
+
+export default AuthFormWrapper

src/features/auth/components/StepEnterNumber.tsx

@@ -5,15 +5,13 @@ 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'}
@@ -37,13 +35,11 @@ function StepEnterNumber({ onSubmit, onChange, value }: Props) {
                         value={value}
                         placeholder='09120000000'
                         onChange={onChange}
-                            type='tel' />
+                        type='number' />
                 </div>
                 <Button type='submit'>بعدی</Button>
             </div>
-
+        </>
-            </div>
-        </form>
     )
 }
 

src/features/auth/components/StepEnterOtp.tsx

@@ -5,7 +5,6 @@ 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>;
     onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
     value: string;
@@ -14,11 +13,10 @@ type Props = {
     secondsLeft: number;
 }
 
-function StepEnterOtp({ onSubmit, onChange, onClick, value, phoneNumber, timerRunning, secondsLeft }: Props) {
+function StepEnterOtp({ onChange, onClick, value, phoneNumber, timerRunning, secondsLeft }: Props) {
 
     return (
-        <form autoComplete='off' 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 md:max-h-[812px] lg: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'}
@@ -65,8 +63,7 @@ function StepEnterOtp({ onSubmit, onChange, onClick, value, phoneNumber, timerRu
                 </div>
                 <Button type='submit'>بعدی</Button>
             </div>
-            </div>
+        </>
-        </form>
     )
 }
 

src/features/auth/components/StepEnterPassword.tsx

@@ -6,7 +6,6 @@ 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>;
     onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
     value: string;
@@ -14,10 +13,9 @@ type Props = {
     rememberMe: boolean;
 }
 
-function StepEnterPassword({ onSubmit, onChange, onClick, value, passwordVisible, rememberMe }: Props) {
+function StepEnterPassword({ onChange, onClick, value, passwordVisible, rememberMe }: 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'}
@@ -57,9 +55,7 @@ function StepEnterPassword({ onSubmit, onChange, onClick, value, passwordVisible
                 </div>
                 <Button type='submit'>ورود به منو</Button>
             </div>
-
+        </>
-            </div>
-        </form>
     )
 }
 

src/features/auth/components/StepNewPassword.tsx

@@ -6,7 +6,6 @@ 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>;
     onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
     value: string;
@@ -16,10 +15,9 @@ type Props = {
     repeatPasswordVisible: boolean;
 }
 
-function StepNewPassword({ reset = false, onSubmit, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
+function StepNewPassword({ reset = false, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
     return (
-        <form autoComplete='off' 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'}
@@ -66,9 +64,7 @@ function StepNewPassword({ reset = false, onSubmit, onChange, onClick, value, re
                 </div>
                 <Button type='submit'>ورود</Button>
             </div>
-
+        </>
-            </div>
-        </form>
     )
 }