Mahyar Khanbolooki
103 lines
4.6 KiB
TypeScript
103 lines
4.6 KiB
TypeScript
import Button from '@/components/button/PrimaryButton';
|
||
import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon';
|
||
import InputField from '@/components/input/InputField';
|
||
import { AUTH_PAGE_ELEMENT } from '@/enums';
|
||
import Image from 'next/image';
|
||
import React, { useEffect, useState } from 'react'
|
||
|
||
type Props = {
|
||
onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
|
||
onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
||
value: string;
|
||
repeatValue: string;
|
||
isReset?: boolean;
|
||
passwordVisible: boolean;
|
||
repeatPasswordVisible: boolean;
|
||
pending?: boolean | undefined
|
||
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
|
||
|
||
function StepNewPassword({ isReset: reset = false, pending, disabled = false, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
|
||
const [error, setError] = useState('');
|
||
const [error2, setError2] = useState('');
|
||
|
||
const hasError = (e = error) => {
|
||
return e.trim().length > 0
|
||
}
|
||
|
||
useEffect(() => {
|
||
let error = '';
|
||
let error2 = '';
|
||
if (value.length > 0) {
|
||
if (!/^.{6,}$/.test(value)) {
|
||
error = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
|
||
}
|
||
}
|
||
if (repeatValue.length > 0) {
|
||
if (!/^.{6,}$/.test(repeatValue)) {
|
||
error2 = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
|
||
} else if (repeatValue !== value) {
|
||
error2 = 'تکرار کلمه عبور مطابقت ندارد';
|
||
}
|
||
}
|
||
|
||
setError(error);
|
||
setError2(error2);
|
||
}, [value, repeatValue])
|
||
|
||
return (
|
||
<>
|
||
<Image
|
||
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'}
|
||
alt='login banner'
|
||
width={100}
|
||
height={100}
|
||
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'>
|
||
<div className='pt-4' dir='rtl'>
|
||
<h6 className='text-lg font-bold'>
|
||
{reset ? "تغییر کلمه عبور" : "انتخاب کلمه عبور"}
|
||
</h6>
|
||
<p className='mt-3 text-[13px]'>کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@</p>
|
||
</div>
|
||
<InputField
|
||
valid={!hasError()}
|
||
aria-errormessage={error}
|
||
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
|
||
valid={!hasError(error2)}
|
||
aria-errormessage={error2}
|
||
autoComplete='new-password'
|
||
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 disabled={disabled || hasError() || hasError(error2) || value.length <= 0} pending={pending} type='submit'>ورود</Button>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default StepNewPassword |