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/StepEnterNumber.tsx
+65 -58
View File
@@ -1,71 +1,78 @@
'use client'; 'use client'
import Button from '@/components/button/PrimaryButton'; import Button from '@/components/button/PrimaryButton'
import InputField from '@/components/input/InputField'; import InputField from '@/components/input/InputField'
import { AUTH_PAGE_ELEMENT } from '@/enums'; import { AUTH_PAGE_ELEMENT } from '@/enums'
import Image from 'next/image'; import Image from 'next/image'
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next'
type Props = { type Props = {
onChange: React.ChangeEventHandler<HTMLInputElement>; onChange: React.ChangeEventHandler<HTMLInputElement>
value: string; value: string
pending?: boolean | undefined pending?: boolean | undefined
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'> } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
function StepEnterNumber({ onChange, pending, disabled, value }: Props) { function StepEnterNumber ({ onChange, pending, disabled, value }: Props) {
const [error, setError] = useState(''); const [error, setError] = useState('')
const { t } = useTranslation('auth'); const { t } = useTranslation('auth')
const hasError = (e = error) => { const hasError = (e = error) => {
return e.trim().length > 0 return e.trim().length > 0
}
useEffect(() => {
let error = ''
if (value.length > 0) {
if (!/^09\d{7,9}$/.test(value)) {
error = t('Errors.PhoneNumberFormat')
}
} }
useEffect(() => { setError(error)
let error = ''; }, [t, value])
if (value.length > 0) {
if (!/^09\d{7,9}$/.test(value)) {
error = t('Errors.PhoneNumberFormat');
}
}
setError(error); return (
}, [t, value]) <>
<Image
return ( 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'}
<Image alt='login banner'
className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2' width={100}
src={'/assets/images/login-banner.png'} height={100}
alt='login banner' unoptimized
width={100} priority
height={100} />
unoptimized <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'>
priority <div className='w-full'>
/> <div className='pt-4'>
<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'> <h6 className='text-lg font-bold'>{t('Enter.Heading')}</h6>
<div className='w-full'> <p className='mt-3 text-[13px]'>{t('Enter.Description')}</p>
<div className='pt-4'> </div>
<h6 className='text-lg font-bold'>{t('Enter.Heading')}</h6> <InputField
<p className='mt-3 text-[13px]'>{t('Enter.Description')}</p> valid={!hasError()}
</div> aria-errormessage={error}
<InputField inputMode='tel'
valid={!hasError()} autoComplete='tel'
aria-errormessage={error} className='mt-10 w-full bg-container'
inputMode='tel' htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
autoComplete='tel' labelText={t('Enter.LabelPhoneNumber')}
className='mt-10 w-full' value={value}
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE} placeholder='09120000000'
labelText={t('Enter.LabelPhoneNumber')} onChange={onChange}
value={value} type='number'
placeholder='09120000000' />
onChange={onChange} </div>
type='number' /> <Button
</div> disabled={disabled || hasError() || value.length <= 0}
<Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('Enter.ButtonSubmit')}</Button> pending={pending}
</div> type='submit'
</> >
) {t('Enter.ButtonSubmit')}
</Button>
</div>
</>
)
} }
export default StepEnterNumber export default StepEnterNumber
src/features/auth/components/StepEnterOtp.tsx
+114 -82
View File
@@ -1,96 +1,128 @@
'use client'; 'use client'
import Button from '@/components/button/PrimaryButton'; import Button from '@/components/button/PrimaryButton'
import OTPInputField from '@/components/input/MultiInputField'; import OTPInputField from '@/components/input/MultiInputField'
import { AUTH_PAGE_ELEMENT, AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/enums'; import {
import clsx from 'clsx'; AUTH_PAGE_ELEMENT,
import Image from 'next/image'; 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 React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next'
type Props = { type Props = {
onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>; onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
onClick: React.MouseEventHandler<HTMLButtonElement> | undefined; React.ChangeEventHandler<HTMLInputElement>
value: string; onClick: React.MouseEventHandler<HTMLButtonElement> | undefined
phoneNumber: string; value: string
timerRunning: boolean; phoneNumber: string
secondsLeft: number; timerRunning: boolean
pending?: boolean | undefined secondsLeft: number
pending?: boolean | undefined
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'> } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, phoneNumber, timerRunning, secondsLeft }: Props) { function StepEnterOtp ({
const [error, setError] = useState(''); onChange,
const { t } = useTranslation('auth'); onClick,
pending,
disabled = false,
value,
phoneNumber,
timerRunning,
secondsLeft
}: Props) {
const [error, setError] = useState('')
const { t } = useTranslation('auth')
const hasError = (e = error) => { const hasError = (e = error) => {
return e.trim().length > 0 return e.trim().length > 0
}
useEffect(() => {
let error = ''
if (!/^\d{6}$/.test(value)) {
error = t('Errors.OTPFormat')
} }
useEffect(() => { setError(error)
let error = ''; }, [t, value])
if (!/^\d{6}$/.test(value)) {
error = t('Errors.OTPFormat');
}
setError(error); return (
}, [t, value]) <>
<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 ( <div className='text-center w-full pt-6 text-xs'>
<> <div>
<Image {timerRunning ? (
className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2' <div>
src={'/assets/images/login-banner.png'} {t('OTP.TimerRunning').replace(
alt='login banner' '{seconds}',
width={100} String(secondsLeft)
height={100} )}
unoptimized </div>
priority ) : (
/> <div>
<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'> {t('OTP.TimerOut')}
<div className='pt-4'> <button
{/* // TODO: add persian digits font */} type='button'
<h6 className='text-lg font-bold'>{t('OTP.Heading')}</h6> disabled={pending}
<p className='mt-3 text-[13px]'>{t('OTP.Description').replace('{phoneNumber}', phoneNumber)}</p> id={AUTH_PAGE_ELEMENTS.RESEND_OTP}
</div> className={clsx(
<div className='w-full flex justify-center items-center'> 'px-1 transition-colors duration-200',
<OTPInputField !pending
autoFocus ? 'text-primary cursor-pointer'
autoComplete='one-time-code' : 'text-neutral-200 cursor-auto'
type='text' )}
inputMode='numeric' onClick={onClick}
className='mt-10 min-h-14 max-w-[304px]' >
maxLength={6} {t('OTP.TimerReset')}
htmlFor={AUTH_PAGE_ELEMENT.INPUT_OTP} </button>
labelText='' </div>
value={value} )}
placeholder='' </div>
onChange={onChange} /> </div>
</div> <Button
disabled={disabled || hasError() || value.length <= 0}
<div className='text-center w-full pt-6 text-xs'> pending={pending}
<div> type='submit'
{timerRunning ? >
<div>{t('OTP.TimerRunning').replace('{seconds}', String(secondsLeft))}</div> : {t('OTP.ButtonSubmit')}
<div> </Button>
{t('OTP.TimerOut')} </div>
<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
src/features/auth/components/StepEnterPassword.tsx
+115 -76
View File
@@ -1,91 +1,130 @@
'use client'; 'use client'
import Button from '@/components/button/PrimaryButton'; import Button from '@/components/button/PrimaryButton'
import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon'; import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon'
import InputField from '@/components/input/InputField'; import InputField from '@/components/input/InputField'
import { AUTH_PAGE_ELEMENT } from '@/enums'; import { AUTH_PAGE_ELEMENT } from '@/enums'
import Image from 'next/image'; import Image from 'next/image'
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next'
type Props = { type Props = {
onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>; onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
onClick: React.MouseEventHandler<HTMLButtonElement> | undefined; React.ChangeEventHandler<HTMLInputElement>
value: string; onClick: React.MouseEventHandler<HTMLButtonElement> | undefined
passwordVisible: boolean; value: string
rememberMe: boolean; passwordVisible: boolean
pending?: boolean | undefined rememberMe: boolean
pending?: boolean | undefined
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'> } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
function StepEnterPassword({ onChange, onClick, pending, disabled = false, value, passwordVisible, rememberMe }: Props) { function StepEnterPassword ({
const [error, setError] = useState(''); onChange,
const { t } = useTranslation('auth'); onClick,
pending,
disabled = false,
value,
passwordVisible,
rememberMe
}: Props) {
const [error, setError] = useState('')
const { t } = useTranslation('auth')
const hasError = (e = error) => { const hasError = (e = error) => {
return e.trim().length > 0 return e.trim().length > 0
}
useEffect(() => {
let error = ''
if (value.length > 0) {
if (!/^.{6,}$/.test(value)) {
error = t('Errors.PasswordLength')
}
} }
useEffect(() => { setError(error)
let error = ''; }, [t, value])
if (value.length > 0) {
if (!/^.{6,}$/.test(value)) {
error = t('Errors.PasswordLength');
}
}
setError(error); return (
}, [t, value]) <>
<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 ( <div className='inline-flex justify-between items-center'>
<> {/* TODO: customize checkbox */}
<Image <label
className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2' htmlFor={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME}
src={'/assets/images/login-banner.png'} className='text-sm2 px-2 py-0.5'
alt='login banner' >
width={100} {t('EnterPass.LabelRememberance')}
height={100} </label>
unoptimized <input
priority name={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME}
/> className='h-4.5 w-4.5 checked:accent-primary'
<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'> onChange={onChange}
<div className='w-full'> type='checkbox'
<div className='pt-4'> checked={rememberMe}
<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> </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
src/features/auth/components/StepNewPassword.tsx
+133 -94
View File
@@ -1,107 +1,146 @@
'use client'; 'use client'
import Button from '@/components/button/PrimaryButton'; import Button from '@/components/button/PrimaryButton'
import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon'; import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon'
import InputField from '@/components/input/InputField'; import InputField from '@/components/input/InputField'
import { AUTH_PAGE_ELEMENT } from '@/enums'; import { AUTH_PAGE_ELEMENT } from '@/enums'
import Image from 'next/image'; import Image from 'next/image'
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next'
type Props = { type Props = {
onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>; onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
onClick: React.MouseEventHandler<HTMLButtonElement> | undefined; React.ChangeEventHandler<HTMLInputElement>
value: string; onClick: React.MouseEventHandler<HTMLButtonElement> | undefined
repeatValue: string; value: string
isReset?: boolean; repeatValue: string
passwordVisible: boolean; isReset?: boolean
repeatPasswordVisible: boolean; passwordVisible: boolean
pending?: boolean | undefined repeatPasswordVisible: boolean
pending?: boolean | undefined
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'> } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
function StepNewPassword({ isReset: reset = false, pending, disabled = false, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) { function StepNewPassword ({
const [error, setError] = useState(''); isReset: reset = false,
const [error2, setError2] = useState(''); pending,
const { t } = useTranslation('auth'); 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) => { const hasError = (e = error) => {
return e.trim().length > 0 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(() => { setError(error)
let error = ''; setError2(error2)
let error2 = ''; }, [value, repeatValue, t])
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); return (
setError2(error2); <>
}, [value, repeatValue, t]) <Image
className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
return ( src={'/assets/images/login-banner.png'}
<> alt='login banner'
<Image width={100}
className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2' height={100}
src={'/assets/images/login-banner.png'} unoptimized
alt='login banner' priority
width={100} />
height={100} <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'>
unoptimized <div className='w-full'>
priority <div className='pt-4'>
/> <h6 className='text-lg font-bold'>
<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'> {reset
<div className='w-full'> ? t('NewPassword.HeadingResetPass')
<div className='pt-4'> : t('NewPassword.HeadingCreatePass')}
<h6 className='text-lg font-bold'> </h6>
{reset ? t('NewPassword.HeadingResetPass') : t('NewPassword.HeadingCreatePass')} <p className='mt-3 text-[13px]'>{t('NewPassword.Description')}</p>
</h6> </div>
<p className='mt-3 text-[13px]'>{t('NewPassword.Description')}</p> <InputField
</div> valid={!hasError()}
<InputField aria-errormessage={error}
valid={!hasError()} autoComplete='new-password'
aria-errormessage={error} className='mt-10 bg-container'
autoComplete='new-password' htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
className='mt-10' labelText={t('NewPassword.LabelPass')}
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD} value={value}
labelText={t('NewPassword.LabelPass')} placeholder=''
value={value} onChange={onChange}
placeholder='' type={passwordVisible ? 'text' : 'password'}
onChange={onChange} >
type={passwordVisible ? 'text' : 'password'}> <button
<button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD} type='button' onClick={onClick}> className='ps-3'
<EyeToggleIcon slash={passwordVisible} className="pointer-events-none" /> id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD}
</button> type='button'
</InputField> onClick={onClick}
<InputField >
valid={!hasError(error2)} <EyeToggleIcon
aria-errormessage={error2} slash={passwordVisible}
autoComplete='new-password' className='pointer-events-none'
className='mt-6' />
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT} </button>
labelText={t('NewPassword.LabelRepeatPass')} </InputField>
value={repeatValue} <InputField
placeholder='' valid={!hasError(error2)}
onChange={onChange} aria-errormessage={error2}
type={repeatPasswordVisible ? 'text' : 'password'}> autoComplete='new-password'
<button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_REPEAT_PASSWORD} type='button' onClick={onClick}> className='mt-6 bg-container'
<EyeToggleIcon slash={repeatPasswordVisible} className="pointer-events-none" /> htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
</button> labelText={t('NewPassword.LabelRepeatPass')}
</InputField> value={repeatValue}
</div> placeholder=''
<Button disabled={disabled || hasError() || hasError(error2) || value.length <= 0} pending={pending} type='submit'>{t('NewPassword.ButtonSubmit')}</Button> onChange={onChange}
</div> 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