danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: style issue after modifications

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-08-21 18:30:01 +03:30
parent d30e6ac209
commit 3cb48023b6
4 changed files with 431 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/auth/components/StepEnterOtp.tsx
+115 -83
View File
@@ -1,96 +1,128 @@
'use client';
'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 Image from 'next/image';
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 Image from 'next/image'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next';
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
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');
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
const hasError = (e = error) => {
return e.trim().length > 0
}
useEffect(() => {
let error = ''
if (!/^\d{6}$/.test(value)) {
error = t('Errors.OTPFormat')
}
useEffect(() => {
let error = '';
if (!/^\d{6}$/.test(value)) {
error = t('Errors.OTPFormat');
}
setError(error)
}, [t, value])
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>
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').replace('{seconds}', String(secondsLeft))}</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>
</>
)
<div className='text-center w-full pt-6 text-xs'>
<div>
{timerRunning ? (
<div>
{t('OTP.TimerRunning').replace(
'{seconds}',
String(secondsLeft)
)}
</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
export default StepEnterOtp