chore: seperated auth page files

2025-06-30 23:02:12 +03:30
parent 5b58b1e6ba
commit 2fc5b28925
9 changed files with 289 additions and 172 deletions
@@ -0,0 +1,34 @@
+import PrimaryButton from '@/components/button/PrimaryButton';
+import InputField from '@/components/input/InputField';
+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) {
+    return (
+        <form 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'>
+                    <h6 className='text-lg font-bold'>ورود به سیستم</h6>
+                    <p className='mt-3 text-[13px]'>برای ورود شماره همراه خود را وارد نمایید.</p>
+                </div>
+                <InputField
+                    className='mt-10'
+                    htmlFor='phone'
+                    labelText='شماره همراه'
+                    value={value}
+                    placeholder='09120000000'
+                    onChange={onChange}
+                    type='number' />
+            </div>
+            <PrimaryButton type='submit'>بعدی</PrimaryButton>
+        </form>
+    )
+}
+
+export default StepEnterNumber
@@ -0,0 +1,59 @@
+import PrimaryButton from '@/components/button/PrimaryButton';
+import OTPInputField from '@/components/input/MultiInputField';
+import { AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/enums';
+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;
+    phoneNumber: string;
+    timerRunning: boolean;
+    secondsLeft: number;
+}
+
+function StepEnterOtp({ onSubmit, onChange, onClick, value, phoneNumber, timerRunning, secondsLeft }: Props) {
+    
+    return (
+        <form 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'>
+                    {/* // TODO: add persian digits font */}
+                    <h6 className='text-lg font-bold'>کد فعالسازی را وارد کنید</h6>
+                    <p className='mt-3 text-[13px]'>کد ۶ رقمی ارسال شده به شماره {phoneNumber} را وارد نمایید.</p>
+                </div>
+                <OTPInputField
+                    className='mt-10'
+                    maxLength={6}
+                    htmlFor='otp'
+                    labelText=''
+                    value={value}
+                    placeholder=''
+                    onChange={onChange}
+                    type='text'>
+
+                </OTPInputField>
+                <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='cursor-pointer' onClick={onClick}>
+                                        دوباره امتحان کنید
+                                    </button>
+                                </span>
+                            </div>
+                        }
+                    </div>
+                </div>
+            </div>
+            <PrimaryButton type='submit'>بعدی</PrimaryButton>
+        </form>
+    )
+}
+
+export default StepEnterOtp
@@ -0,0 +1,51 @@
+import PrimaryButton from '@/components/button/PrimaryButton';
+import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon';
+import InputField from '@/components/input/InputField';
+import { AUTH_PAGE_ELEMENT } from '@/enums';
+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;
+    passwordVisible: boolean;
+    rememberMe: boolean;
+}
+
+function StepEnterPassword({ onSubmit, onChange, onClick, value, passwordVisible, rememberMe }: Props) {
+    return (
+        <form 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'>
+                    <h6 className='text-lg font-bold'>ورود به سیستم</h6>
+                    <p className='mt-3 text-[13px]'>کلمه عبور خود را وارد نمایید.</p>
+                </div>
+                <InputField
+                    className='mt-10'
+                    htmlFor='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='rememberMe' className='text-sm2 px-2 py-0.5'>مرا به خاطر بسپار</label>
+                        <input id='rememberMe' className='h-4.5 w-4.5 checked:accent-primary' onChange={onChange} type='checkbox' checked={rememberMe} />            </div>
+                </div>
+            </div>
+            <PrimaryButton type='submit'>ورود به منو</PrimaryButton>
+        </form>
+    )
+}
+
+export default StepEnterPassword