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,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
-                <Image  
+                className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
-                    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'}
-                    src={'/assets/images/login-banner.png'} 
+                alt='login banner'
-                    alt='login banner'
+                width={100}
-                    width={100}
+                height={100}
-                    height={100}
+                unoptimized={true}
-                    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 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='w-full'>
+                    <div className='pt-4' dir='rtl'>
-                        <div className='pt-4' dir='rtl'>
+                        <h6 className='text-lg font-bold'>ورود به سیستم</h6>
-                            <h6 className='text-lg font-bold'>ورود به سیستم</h6>
+                        <p className='mt-3 text-[13px]'>برای ورود شماره همراه خود را وارد نمایید.</p>
-                            <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' />
                     </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>
+        </>
     )
 }
 

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,59 +13,57 @@ 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
-                <Image
+                className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
-                    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'}
-                    src={'/assets/images/login-banner.png'}
+                alt='login banner'
-                    alt='login banner'
+                width={100}
-                    width={100}
+                height={100}
-                    height={100}
+                unoptimized={true}
-                    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 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='pt-4' dir='rtl'>
-                    <div className='pt-4' dir='rtl'>
+                    {/* // TODO: add persian digits font */}
-                        {/* // TODO: add persian digits font */}
+                    <h6 className='text-lg font-bold'>کد فعالسازی را وارد کنید</h6>
-                        <h6 className='text-lg font-bold'>کد فعالسازی را وارد کنید</h6>
+                    <p className='mt-3 text-[13px]'>کد ۶ رقمی ارسال شده به شماره {phoneNumber} را وارد نمایید.</p>
-                        <p className='mt-3 text-[13px]'>کد ۶ رقمی ارسال شده به شماره {phoneNumber} را وارد نمایید.</p>
-                    </div>
-                    <div className='w-full flex justify-center items-center'>
-                        <OTPInputField
-                            autoFocus
-                            autoComplete='one-time-code'
-                            type='number'
-                            inputMode='numeric'
-                            className='mt-10 min-h-14 max-w-[304px]'
-                            maxLength={6}
-                            htmlFor={AUTH_PAGE_ELEMENT.INPUT_OTP}
-                            labelText=''
-                            value={value}
-                            placeholder=''
-                            onChange={onChange} />
-                    </div>
-
-                    <div className='inline-flex justify-center items-center w-full pt-6 text-xs'>
-                        <div dir='rtl'>
-                            {timerRunning ?
-                                <div>{secondsLeft} ثانیه دیگر تا دریافت کد</div> :
-                                <div>
-                                    کد را دریافت نکردید؟
-                                    <span className='text-primary px-1'>
-                                        <button id={AUTH_PAGE_ELEMENTS.RESEND_OTP} className='' onClick={onClick}>
-                                            دوباره امتحان کنید
-                                        </button>
-                                    </span>
-                                </div>
-                            }
-                        </div>
-                    </div>
-                    <Button type='submit'>بعدی</Button>
                 </div>
+                <div className='w-full flex justify-center items-center'>
+                    <OTPInputField
+                        autoFocus
+                        autoComplete='one-time-code'
+                        type='number'
+                        inputMode='numeric'
+                        className='mt-10 min-h-14 max-w-[304px]'
+                        maxLength={6}
+                        htmlFor={AUTH_PAGE_ELEMENT.INPUT_OTP}
+                        labelText=''
+                        value={value}
+                        placeholder=''
+                        onChange={onChange} />
+                </div>
+
+                <div className='inline-flex justify-center items-center w-full pt-6 text-xs'>
+                    <div dir='rtl'>
+                        {timerRunning ?
+                            <div>{secondsLeft} ثانیه دیگر تا دریافت کد</div> :
+                            <div>
+                                کد را دریافت نکردید؟
+                                <span className='text-primary px-1'>
+                                    <button id={AUTH_PAGE_ELEMENTS.RESEND_OTP} className='' onClick={onClick}>
+                                        دوباره امتحان کنید
+                                    </button>
+                                </span>
+                            </div>
+                        }
+                    </div>
+                </div>
+                <Button type='submit'>بعدی</Button>
             </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,52 +13,49 @@ 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
-                <Image
+                className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
-                    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'}
-                    src={'/assets/images/login-banner.png'}
+                alt='login banner'
-                    alt='login banner'
+                width={100}
-                    width={100}
+                height={100}
-                    height={100}
+                unoptimized={true}
-                    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 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='w-full'>
+                    <div className='pt-4' dir='rtl'>
-                        <div className='pt-4' dir='rtl'>
+                        <h6 className='text-lg font-bold'>ورود به سیستم</h6>
-                            <h6 className='text-lg font-bold'>ورود به سیستم</h6>
+                        <p className='mt-3 text-[13px]'>کلمه عبور خود را وارد نمایید.</p>
-                            <p className='mt-3 text-[13px]'>کلمه عبور خود را وارد نمایید.</p>
-                        </div>
-                        <InputField
-                            autoFocus
-                            autoComplete='current-password'
-                            className='mt-10'
-                            htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
-                            labelText='کلمه عبور'
-                            value={value}
-                            placeholder=''
-                            onChange={onChange}
-                            type={passwordVisible ? 'text' : 'password'}>
-                            <button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD} type='button' onClick={onClick}>
-                                <EyeToggleIcon slash={passwordVisible} className="pointer-events-none" />
-                            </button>
-                        </InputField>
-                        <div className='inline-flex justify-between items-center w-full pt-3'>
-                            <button id={AUTH_PAGE_ELEMENT.RESET_PASSWORD} type='button' onClick={onClick} className='text-sm2 cursor-pointer'>بازیابی کلمه عبور</button>
-
-                            <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 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>
+                    <InputField
-                </div>
+                        autoFocus
+                        autoComplete='current-password'
+                        className='mt-10'
+                        htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
+                        labelText='کلمه عبور'
+                        value={value}
+                        placeholder=''
+                        onChange={onChange}
+                        type={passwordVisible ? 'text' : 'password'}>
+                        <button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD} type='button' onClick={onClick}>
+                            <EyeToggleIcon slash={passwordVisible} className="pointer-events-none" />
+                        </button>
+                    </InputField>
+                    <div className='inline-flex justify-between items-center w-full pt-3'>
+                        <button id={AUTH_PAGE_ELEMENT.RESET_PASSWORD} type='button' onClick={onClick} className='text-sm2 cursor-pointer'>بازیابی کلمه عبور</button>
 
+                        <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 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>
             </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,59 +15,56 @@ 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
-                <Image
+                className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
-                    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'}
-                    src={'/assets/images/login-banner.png'}
+                alt='login banner'
-                    alt='login banner'
+                width={100}
-                    width={100}
+                height={100}
-                    height={100}
+                unoptimized={true}
-                    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 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='w-full'>
+                    <div className='pt-4' dir='rtl'>
-                        <div className='pt-4' dir='rtl'>
+                        <h6 className='text-lg font-bold'>
-                            <h6 className='text-lg font-bold'>
+                            {reset ? "تغییر کلمه عبور" : "انتخاب کلمه عبور"}
-                                {reset ? "تغییر کلمه عبور" : "انتخاب کلمه عبور"}
+                        </h6>
-                            </h6>
+                        <p className='mt-3 text-[13px]'>کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@</p>
-                            <p className='mt-3 text-[13px]'>کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@</p>
-                        </div>
-                        <InputField
-                            autoComplete='new-password'
-                            className='mt-10'
-                            htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
-                            labelText='کلمه عبور'
-                            value={value}
-                            placeholder=''
-                            onChange={onChange}
-                            type={passwordVisible ? 'text' : 'password'}>
-                            <button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD} type='button' onClick={onClick}>
-                                <EyeToggleIcon slash={passwordVisible} className="pointer-events-none" />
-                            </button>
-                        </InputField>
-                        <InputField
-                            autoComplete='new-password'
-                            valid={value === repeatValue}
-                            className='mt-6'
-                            htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
-                            labelText='تکرار کلمه عبور'
-                            value={repeatValue}
-                            placeholder=''
-                            onChange={onChange}
-                            type={repeatPasswordVisible ? 'text' : 'password'}>
-                            <button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_REPEAT_PASSWORD} type='button' onClick={onClick}>
-                                <EyeToggleIcon slash={repeatPasswordVisible} className="pointer-events-none" />
-                            </button>
-                        </InputField>
                     </div>
-                    <Button type='submit'>ورود</Button>
+                    <InputField
+                        autoComplete='new-password'
+                        className='mt-10'
+                        htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
+                        labelText='کلمه عبور'
+                        value={value}
+                        placeholder=''
+                        onChange={onChange}
+                        type={passwordVisible ? 'text' : 'password'}>
+                        <button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD} type='button' onClick={onClick}>
+                            <EyeToggleIcon slash={passwordVisible} className="pointer-events-none" />
+                        </button>
+                    </InputField>
+                    <InputField
+                        autoComplete='new-password'
+                        valid={value === repeatValue}
+                        className='mt-6'
+                        htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
+                        labelText='تکرار کلمه عبور'
+                        value={repeatValue}
+                        placeholder=''
+                        onChange={onChange}
+                        type={repeatPasswordVisible ? 'text' : 'password'}>
+                        <button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_REPEAT_PASSWORD} type='button' onClick={onClick}>
+                            <EyeToggleIcon slash={repeatPasswordVisible} className="pointer-events-none" />
+                        </button>
+                    </InputField>
                 </div>
-
+                <Button type='submit'>ورود</Button>
             </div>
-        </form>
+        </>
     )
 }