Mahyar Khanbolooki
60 lines
2.8 KiB
TypeScript
60 lines
2.8 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 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>
|
||
<Button type='submit'>ورود</Button>
|
||
</form>
|
||
)
|
||
}
|
||
|
||
export default StepNewPassword |