fix: style issue after modifications
This commit is contained in:
Mahyar Khanbolooki
@@ -1,71 +1,78 @@
|
||||
'use client';
|
||||
'use client'
|
||||
|
||||
import Button from '@/components/button/PrimaryButton';
|
||||
import InputField from '@/components/input/InputField';
|
||||
import { AUTH_PAGE_ELEMENT } from '@/enums';
|
||||
import Image from 'next/image';
|
||||
import Button from '@/components/button/PrimaryButton'
|
||||
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';
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type Props = {
|
||||
onChange: React.ChangeEventHandler<HTMLInputElement>;
|
||||
value: string;
|
||||
pending?: boolean | undefined
|
||||
onChange: React.ChangeEventHandler<HTMLInputElement>
|
||||
value: string
|
||||
pending?: boolean | undefined
|
||||
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
|
||||
|
||||
function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
|
||||
const [error, setError] = useState('');
|
||||
const { t } = useTranslation('auth');
|
||||
function StepEnterNumber ({ onChange, pending, disabled, value }: 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 (value.length > 0) {
|
||||
if (!/^09\d{7,9}$/.test(value)) {
|
||||
error = t('Errors.PhoneNumberFormat')
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let error = '';
|
||||
if (value.length > 0) {
|
||||
if (!/^09\d{7,9}$/.test(value)) {
|
||||
error = t('Errors.PhoneNumberFormat');
|
||||
}
|
||||
}
|
||||
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='w-full'>
|
||||
<div className='pt-4'>
|
||||
<h6 className='text-lg font-bold'>{t('Enter.Heading')}</h6>
|
||||
<p className='mt-3 text-[13px]'>{t('Enter.Description')}</p>
|
||||
</div>
|
||||
<InputField
|
||||
valid={!hasError()}
|
||||
aria-errormessage={error}
|
||||
inputMode='tel'
|
||||
autoComplete='tel'
|
||||
className='mt-10 w-full'
|
||||
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
|
||||
labelText={t('Enter.LabelPhoneNumber')}
|
||||
value={value}
|
||||
placeholder='09120000000'
|
||||
onChange={onChange}
|
||||
type='number' />
|
||||
</div>
|
||||
<Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('Enter.ButtonSubmit')}</Button>
|
||||
</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='w-full'>
|
||||
<div className='pt-4'>
|
||||
<h6 className='text-lg font-bold'>{t('Enter.Heading')}</h6>
|
||||
<p className='mt-3 text-[13px]'>{t('Enter.Description')}</p>
|
||||
</div>
|
||||
<InputField
|
||||
valid={!hasError()}
|
||||
aria-errormessage={error}
|
||||
inputMode='tel'
|
||||
autoComplete='tel'
|
||||
className='mt-10 w-full bg-container'
|
||||
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
|
||||
labelText={t('Enter.LabelPhoneNumber')}
|
||||
value={value}
|
||||
placeholder='09120000000'
|
||||
onChange={onChange}
|
||||
type='number'
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
disabled={disabled || hasError() || value.length <= 0}
|
||||
pending={pending}
|
||||
type='submit'
|
||||
>
|
||||
{t('Enter.ButtonSubmit')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default StepEnterNumber
|
||||
export default StepEnterNumber
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -1,91 +1,130 @@
|
||||
'use client';
|
||||
'use client'
|
||||
|
||||
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 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';
|
||||
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
|
||||
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');
|
||||
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
|
||||
const hasError = (e = error) => {
|
||||
return e.trim().length > 0
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let error = ''
|
||||
if (value.length > 0) {
|
||||
if (!/^.{6,}$/.test(value)) {
|
||||
error = t('Errors.PasswordLength')
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let error = '';
|
||||
if (value.length > 0) {
|
||||
if (!/^.{6,}$/.test(value)) {
|
||||
error = t('Errors.PasswordLength');
|
||||
}
|
||||
}
|
||||
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='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 bg-container'
|
||||
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>
|
||||
|
||||
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 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
|
||||
export default StepEnterPassword
|
||||
|
||||
@@ -1,107 +1,146 @@
|
||||
'use client';
|
||||
'use client'
|
||||
|
||||
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 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';
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
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
|
||||
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 { t } = useTranslation('auth');
|
||||
function StepNewPassword ({
|
||||
isReset: reset = false,
|
||||
pending,
|
||||
disabled = false,
|
||||
onChange,
|
||||
onClick,
|
||||
value,
|
||||
repeatValue,
|
||||
passwordVisible,
|
||||
repeatPasswordVisible
|
||||
}: Props) {
|
||||
const [error, setError] = useState('')
|
||||
const [error2, setError2] = 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 = ''
|
||||
let error2 = ''
|
||||
if (value.length > 0) {
|
||||
if (!/^.{6,}$/.test(value)) {
|
||||
error = t('Errors.PasswordLength')
|
||||
}
|
||||
}
|
||||
if (repeatValue.length > 0) {
|
||||
if (!/^.{6,}$/.test(repeatValue)) {
|
||||
error2 = t('Errors.PasswordLength')
|
||||
} else if (repeatValue !== value) {
|
||||
error2 = t('Errors.PasswordMatch')
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let error = '';
|
||||
let error2 = '';
|
||||
if (value.length > 0) {
|
||||
if (!/^.{6,}$/.test(value)) {
|
||||
error = t('Errors.PasswordLength');
|
||||
}
|
||||
}
|
||||
if (repeatValue.length > 0) {
|
||||
if (!/^.{6,}$/.test(repeatValue)) {
|
||||
error2 = t('Errors.PasswordLength');
|
||||
} else if (repeatValue !== value) {
|
||||
error2 = t('Errors.PasswordMatch');
|
||||
}
|
||||
}
|
||||
|
||||
setError(error);
|
||||
setError2(error2);
|
||||
}, [value, repeatValue, t])
|
||||
setError(error)
|
||||
setError2(error2)
|
||||
}, [value, repeatValue, t])
|
||||
|
||||
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'>
|
||||
{reset ? t('NewPassword.HeadingResetPass') : t('NewPassword.HeadingCreatePass')}
|
||||
</h6>
|
||||
<p className='mt-3 text-[13px]'>{t('NewPassword.Description')}</p>
|
||||
</div>
|
||||
<InputField
|
||||
valid={!hasError()}
|
||||
aria-errormessage={error}
|
||||
autoComplete='new-password'
|
||||
className='mt-10'
|
||||
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
|
||||
labelText={t('NewPassword.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>
|
||||
<InputField
|
||||
valid={!hasError(error2)}
|
||||
aria-errormessage={error2}
|
||||
autoComplete='new-password'
|
||||
className='mt-6'
|
||||
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
|
||||
labelText={t('NewPassword.LabelRepeatPass')}
|
||||
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'>{t('NewPassword.ButtonSubmit')}</Button>
|
||||
</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='w-full'>
|
||||
<div className='pt-4'>
|
||||
<h6 className='text-lg font-bold'>
|
||||
{reset
|
||||
? t('NewPassword.HeadingResetPass')
|
||||
: t('NewPassword.HeadingCreatePass')}
|
||||
</h6>
|
||||
<p className='mt-3 text-[13px]'>{t('NewPassword.Description')}</p>
|
||||
</div>
|
||||
<InputField
|
||||
valid={!hasError()}
|
||||
aria-errormessage={error}
|
||||
autoComplete='new-password'
|
||||
className='mt-10 bg-container'
|
||||
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
|
||||
labelText={t('NewPassword.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>
|
||||
<InputField
|
||||
valid={!hasError(error2)}
|
||||
aria-errormessage={error2}
|
||||
autoComplete='new-password'
|
||||
className='mt-6 bg-container'
|
||||
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
|
||||
labelText={t('NewPassword.LabelRepeatPass')}
|
||||
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'
|
||||
>
|
||||
{t('NewPassword.ButtonSubmit')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default StepNewPassword
|
||||
export default StepNewPassword
|
||||
|
||||
Reference in New Issue
Block a user