improve: overall ux in auth page
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user