fix: style issue after modifications

2025-08-21 18:30:01 +03:30
parent d30e6ac209
commit 3cb48023b6
4 changed files with 431 additions and 314 deletions
@@ -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