Mahyar Khanbolooki
89 lines
3.9 KiB
TypeScript
89 lines
3.9 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'
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
type Props = {
|
|
onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
|
|
onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
value: string;
|
|
passwordVisible: boolean;
|
|
rememberMe: boolean;
|
|
pending?: boolean | undefined
|
|
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
|
|
|
|
function StepEnterPassword({ onChange, onClick, pending, disabled = false, value, passwordVisible, rememberMe }: Props) {
|
|
const [error, setError] = useState('');
|
|
const { t } = useTranslation('auth');
|
|
|
|
const hasError = (e = error) => {
|
|
return e.trim().length > 0
|
|
}
|
|
|
|
useEffect(() => {
|
|
let error = '';
|
|
if (value.length > 0) {
|
|
if (!/^.{6,}$/.test(value)) {
|
|
error = t('Errors.PasswordLength');
|
|
}
|
|
}
|
|
|
|
setError(error);
|
|
}, [t, value])
|
|
|
|
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'>
|
|
<h6 className='text-lg font-bold'>{t('EnterPass.Heading')}</h6>
|
|
<p className='mt-3 text-[13px]'>{t('EnterPass.Description')}</p>
|
|
</div>
|
|
<InputField
|
|
valid={!hasError()}
|
|
aria-errormessage={error}
|
|
autoFocus
|
|
autoComplete='current-password'
|
|
className='mt-10'
|
|
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
|
|
labelText={t('EnterPass.LabelPass')}
|
|
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>
|
|
<div className='inline-flex justify-between items-center w-full pt-3'>
|
|
<button id={AUTH_PAGE_ELEMENT.RESET_PASSWORD} type='button' onClick={onClick} className='text-sm2 cursor-pointer'>
|
|
{t('EnterPass.ButtonRecover')}
|
|
</button>
|
|
|
|
<div className='inline-flex justify-between items-center'>
|
|
{/* TODO: customize checkbox */}
|
|
<label htmlFor={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='text-sm2 px-2 py-0.5'>
|
|
{t('EnterPass.LabelRememberance')}
|
|
</label>
|
|
<input name={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>
|
|
<Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('EnterPass.ButtonSubmit')}</Button>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default StepEnterPassword |