improve: overall ux in auth page

This commit is contained in:
Mahyar Khanbolooki
2025-07-14 20:59:01 +03:30
parent b344e7d291
commit 69540a67f2
10 changed files with 165 additions and 119 deletions
@@ -13,9 +13,10 @@ type Props = {
isReset?: boolean;
passwordVisible: boolean;
repeatPasswordVisible: boolean;
pending?: boolean | undefined
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
function StepNewPassword({ isReset: reset = false, disabled = false, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
function StepNewPassword({ isReset: reset = false, pending, disabled = false, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
const [error, setError] = useState('');
const [error2, setError2] = useState('');
@@ -25,28 +26,23 @@ function StepNewPassword({ isReset: reset = false, disabled = false, onChange, o
useEffect(() => {
let error = '';
let error2 = '';
if (value.length > 0) {
if (!/^.{6,}$/.test(value)) {
error = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
}
}
setError(error);
}, [value])
useEffect(() => {
let error = '';
if (value.length > 0) {
if (!/^.{6,}$/.test(value)) {
error = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
if (repeatValue.length > 0) {
if (!/^.{6,}$/.test(repeatValue)) {
error2 = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
} else if (repeatValue !== value) {
error = 'تکرار کلمه عبور مطابقت ندارد';
error2 = 'تکرار کلمه عبور مطابقت ندارد';
}
}
setError2(error);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [repeatValue])
setError(error);
setError2(error2);
}, [value, repeatValue])
return (
<>
@@ -56,7 +52,8 @@ function StepNewPassword({ isReset: reset = false, disabled = false, onChange, o
alt='login banner'
width={100}
height={100}
unoptimized={true}
unoptimized
priority
/>
<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'>
@@ -97,7 +94,7 @@ function StepNewPassword({ isReset: reset = false, disabled = false, onChange, o
</button>
</InputField>
</div>
<Button disabled={disabled || hasError() || hasError(error2) || value.length <= 0} type='submit'>ورود</Button>
<Button disabled={disabled || hasError() || hasError(error2) || value.length <= 0} pending={pending} type='submit'>ورود</Button>
</div>
</>
)