add: reset password and basic auth mock service

src/features/auth/components/StepEnterNumber.tsx

@@ -1,5 +1,6 @@
 import PrimaryButton from '@/components/button/PrimaryButton';
 import InputField from '@/components/input/InputField';
+import { AUTH_PAGE_ELEMENT } from '@/enums';
 import React from 'react'
 
 type Props = {
@@ -19,7 +20,7 @@ function StepEnterNumber({ onSubmit, onChange, value }: Props) {
                 </div>
                 <InputField
                     className='mt-10'
-                    htmlFor='phone'
+                    htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
                     labelText='شماره همراه'
                     value={value}
                     placeholder='09120000000'

src/features/auth/components/StepEnterOtp.tsx

@@ -1,6 +1,6 @@
 import PrimaryButton from '@/components/button/PrimaryButton';
 import OTPInputField from '@/components/input/MultiInputField';
-import { AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/enums';
+import { AUTH_PAGE_ELEMENT, AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/enums';
 import React from 'react'
 
 type Props = {
@@ -27,7 +27,7 @@ function StepEnterOtp({ onSubmit, onChange, onClick, value, phoneNumber, timerRu
                 <OTPInputField
                     className='mt-10'
                     maxLength={6}
-                    htmlFor='otp'
+                    htmlFor={AUTH_PAGE_ELEMENT.INPUT_OTP}
                     labelText=''
                     value={value}
                     placeholder=''

src/features/auth/components/StepEnterPassword.tsx

@@ -24,7 +24,7 @@ function StepEnterPassword({ onSubmit, onChange, onClick, value, passwordVisible
                 </div>
                 <InputField
                     className='mt-10'
-                    htmlFor='password'
+                    htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
                     labelText='کلمه عبور'
                     value={value}
                     placeholder=''
@@ -39,8 +39,8 @@ function StepEnterPassword({ onSubmit, onChange, onClick, value, passwordVisible
 
                     <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>
+                        <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>
                 </div>
             </div>
             <PrimaryButton type='submit'>ورود به منو</PrimaryButton>

src/features/auth/components/StepNewPassword.tsx

@@ -0,0 +1,60 @@
+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;
+    repeatValue: string;
+    reset?: boolean;
+    passwordVisible: boolean;
+    repeatPasswordVisible: boolean;
+}
+
+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'>
+            <div className='block'>
+                <img src='/assets/images/login-banner.png' />
+                <div className='pt-4' dir='rtl'>
+                    <h6 className='text-lg font-bold'>
+                        { reset ? "تغییر کلمه عبور" : "انتخاب کلمه عبور" }
+                    </h6>
+                    <p className='mt-3 text-[13px]'>کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@</p>
+                </div>
+                <InputField
+                    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
+                    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>
+            <PrimaryButton type='submit'>ورود</PrimaryButton>
+        </form>
+    )
+}
+
+export default StepNewPassword