add: locale and i18n

src/features/auth/components/StepNewPassword.tsx

@@ -4,6 +4,7 @@ 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';
 
 type Props = {
     onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
@@ -19,6 +20,7 @@ type Props = {
 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();
 
     const hasError = (e = error) => {
         return e.trim().length > 0
@@ -29,20 +31,20 @@ function StepNewPassword({ isReset: reset = false, pending, disabled = false, on
         let error2 = '';
         if (value.length > 0) {
             if (!/^.{6,}$/.test(value)) {
-                error = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
+                error = t('Errors.PasswordLength');
             }
         }
         if (repeatValue.length > 0) {
             if (!/^.{6,}$/.test(repeatValue)) {
-                error2 = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
+                error2 = t('Errors.PasswordLength');
             } else if (repeatValue !== value) {
-                error2 = 'تکرار کلمه عبور  مطابقت ندارد';
+                error2 = t('Errors.PasswordMatch');
             }
         }
         
         setError(error);
         setError2(error2);
-    }, [value, repeatValue])
+    }, [value, repeatValue, t])
 
     return (
         <>
@@ -57,11 +59,11 @@ function StepNewPassword({ isReset: reset = false, pending, disabled = false, on
             />
             <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' dir='rtl'>
+                    <div className='pt-4'>
                         <h6 className='text-lg font-bold'>
-                            {reset ? "تغییر کلمه عبور" : "انتخاب کلمه عبور"}
+                            {reset ? t('NewPassword.HeadingResetPass') : t('NewPassword.HeadingCreatePass')}
                         </h6>
-                        <p className='mt-3 text-[13px]'>کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@</p>
+                        <p className='mt-3 text-[13px]'>{t('NewPassword.Description')}</p>
                     </div>
                     <InputField
                         valid={!hasError()}
@@ -69,7 +71,7 @@ function StepNewPassword({ isReset: reset = false, pending, disabled = false, on
                         autoComplete='new-password'
                         className='mt-10'
                         htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
-                        labelText='کلمه عبور'
+                        labelText={t('NewPassword.LabelPass')}
                         value={value}
                         placeholder=''
                         onChange={onChange}
@@ -84,7 +86,7 @@ function StepNewPassword({ isReset: reset = false, pending, disabled = false, on
                         autoComplete='new-password'
                         className='mt-6'
                         htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
-                        labelText='تکرار کلمه عبور'
+                        labelText={t('NewPassword.LabelRepeatPass')}
                         value={repeatValue}
                         placeholder=''
                         onChange={onChange}
@@ -94,7 +96,7 @@ function StepNewPassword({ isReset: reset = false, pending, disabled = false, on
                         </button>
                     </InputField>
                 </div>
-                <Button disabled={disabled || hasError() || hasError(error2) || value.length <= 0} pending={pending} type='submit'>ورود</Button>
+                <Button disabled={disabled || hasError() || hasError(error2) || value.length <= 0} pending={pending} type='submit'>{t('NewPassword.ButtonSubmit')}</Button>
             </div>
         </>
     )