hamid zarghami
127 lines
3.5 KiB
TypeScript
127 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import Button from '@/components/button/PrimaryButton'
|
|
import OTPInputField from '@/components/input/MultiInputField'
|
|
import {
|
|
AUTH_PAGE_ELEMENT,
|
|
AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS
|
|
} from '@/enums'
|
|
import clsx from 'clsx'
|
|
import { formatCountdown } from '@/hooks/useCountdown'
|
|
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
|
|
phoneNumber: string
|
|
timerRunning: boolean
|
|
secondsLeft: number
|
|
pending?: boolean | undefined
|
|
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
|
|
|
|
function StepEnterOtp ({
|
|
onChange,
|
|
onClick,
|
|
pending,
|
|
disabled = false,
|
|
value,
|
|
phoneNumber,
|
|
timerRunning,
|
|
secondsLeft
|
|
}: Props) {
|
|
const [error, setError] = useState('')
|
|
const { t } = useTranslation('auth')
|
|
|
|
const hasError = (e = error) => {
|
|
return e.trim().length > 0
|
|
}
|
|
|
|
useEffect(() => {
|
|
let error = ''
|
|
if (!/^\d{6}$/.test(value)) {
|
|
error = t('Errors.OTPFormat')
|
|
}
|
|
|
|
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='pt-4'>
|
|
{/* // TODO: add persian digits font */}
|
|
<h6 className='text-lg font-bold'>{t('OTP.Heading')}</h6>
|
|
<p className='mt-3 text-[13px]'>
|
|
{t('OTP.Description').replace('{phoneNumber}', phoneNumber)}
|
|
</p>
|
|
</div>
|
|
<div className='w-full flex justify-center items-center'>
|
|
<OTPInputField
|
|
autoFocus
|
|
autoComplete='one-time-code'
|
|
type='text'
|
|
inputMode='numeric'
|
|
className='mt-10 min-h-14 max-w-[304px]'
|
|
maxLength={6}
|
|
htmlFor={AUTH_PAGE_ELEMENT.INPUT_OTP}
|
|
labelText=''
|
|
value={value}
|
|
placeholder=''
|
|
onChange={onChange}
|
|
/>
|
|
</div>
|
|
|
|
<div className='text-center w-full pt-6 text-xs'>
|
|
<div>
|
|
{timerRunning ? (
|
|
<div>
|
|
{t('OTP.TimerRunning', { time: formatCountdown(secondsLeft, t) })}
|
|
</div>
|
|
) : (
|
|
<div>
|
|
{t('OTP.TimerOut')}
|
|
<button
|
|
type='button'
|
|
disabled={pending}
|
|
id={AUTH_PAGE_ELEMENTS.RESEND_OTP}
|
|
className={clsx(
|
|
'px-1 transition-colors duration-200',
|
|
!pending
|
|
? 'text-primary cursor-pointer'
|
|
: 'text-neutral-200 cursor-auto'
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
{t('OTP.TimerReset')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
disabled={disabled || hasError() || value.length <= 0}
|
|
pending={pending}
|
|
type='submit'
|
|
>
|
|
{t('OTP.ButtonSubmit')}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default StepEnterOtp
|