dmenu-plus-front/src/features/auth/components/StepNewPassword.tsx

'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 React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { glassSurfaceFlat } from '@/lib/styles/glassSurface'

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
} & 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')

  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')
      }
    }

    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={glassSurfaceFlat('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={glassSurfaceFlat('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 ||
            repeatValue.length <= 0
          }
          pending={pending}
          type='submit'
        >
          {t('NewPassword.ButtonSubmit')}
        </Button>
      </div>
    </>
  )
}

export default StepNewPassword