add: locale and i18n

2025-07-24 03:14:21 +03:30
parent b9d14478a1
commit 1b3fac2f43
38 changed files with 385 additions and 69 deletions
@@ -1,8 +1,11 @@
+'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 React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next';

 type Props = {
    onChange: React.ChangeEventHandler<HTMLInputElement>;
@@ -12,6 +15,7 @@ type Props = {

 function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
    const [error, setError] = useState('');
+    const { t } = useTranslation();

    const hasError = (e = error) => {
        return e.trim().length > 0
@@ -21,12 +25,12 @@ function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
        let error = '';
        if (value.length > 0) {
            if (!/^09\d{7,9}$/.test(value)) {
-                error = 'فرمت اشتباه است';
+                error = t('Errors.PhoneNumberFormat');
            }
        }

        setError(error);
-    }, [value])
+    }, [t, value])

    return (
        <>
@@ -41,9 +45,9 @@ function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
            />
            <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'>
-                        <h6 className='text-lg font-bold'>ورود به سیستم</h6>
-                        <p className='mt-3 text-[13px]'>برای ورود شماره همراه خود را وارد نمایید.</p>
+                    <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()}
@@ -52,13 +56,13 @@ function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
                        autoComplete='tel'
                        className='mt-10 w-full'
                        htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
-                        labelText='شماره همراه'
+                        labelText={t('Enter.LabelPhoneNumber')}
                        value={value}
                        placeholder='09120000000'
                        onChange={onChange}
                        type='number' />
                </div>
-                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>بعدی</Button>
+                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('Enter.ButtonSubmit')}</Button>
            </div>
        </>
    )
@@ -4,6 +4,7 @@ import { AUTH_PAGE_ELEMENT, AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/en
 import clsx from 'clsx';
 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>;
@@ -17,6 +18,7 @@ type Props = {

 function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, phoneNumber, timerRunning, secondsLeft }: Props) {
    const [error, setError] = useState('');
+    const { t } = useTranslation();

    const hasError = (e = error) => {
        return e.trim().length > 0
@@ -25,11 +27,11 @@ function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, pho
    useEffect(() => {
        let error = '';
        if (!/^\d{6}$/.test(value)) {
-            error = 'عبارت کامل نیست';
+            error = t('Errors.OTPFormat');
        }

        setError(error);
-    }, [value])
+    }, [t, value])

    return (
        <>
@@ -43,10 +45,10 @@ function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, pho
                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' dir='rtl'>
+                <div className='pt-4'>
                    {/* // TODO: add persian digits font */}
-                    <h6 className='text-lg font-bold'>کد فعالسازی را وارد کنید</h6>
-                    <p className='mt-3 text-[13px]'>کد ۶ رقمی ارسال شده به شماره {phoneNumber} را وارد نمایید.</p>
+                    <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
@@ -64,11 +66,11 @@ function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, pho
                </div>

                <div className='text-center w-full pt-6 text-xs'>
-                    <div dir='rtl'>
+                    <div>
                        {timerRunning ?
-                            <div>{secondsLeft} ثانیه دیگر تا دریافت کد</div> :
+                            <div>{t('OTP.TimerRunning').replace('{seconds}', String(secondsLeft))}</div> :
                            <div>
-                                کد را دریافت نکردید؟
+                                {t('OTP.TimerOut')}
                                <button
                                    type='button'
                                    disabled={pending}
@@ -77,13 +79,13 @@ function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, pho
                                        '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'>بعدی</Button>
+                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('OTP.ButtonSubmit')}</Button>
            </div>
        </>
    )
@@ -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>;
@@ -16,6 +17,7 @@ type Props = {

 function StepEnterPassword({ onChange, onClick, pending, disabled = false, value, passwordVisible, rememberMe }: Props) {
    const [error, setError] = useState('');
+    const { t } = useTranslation();

    const hasError = (e = error) => {
        return e.trim().length > 0
@@ -25,12 +27,12 @@ function StepEnterPassword({ onChange, onClick, pending, disabled = false, value
        let error = '';
        if (value.length > 0) {
            if (!/^.{6,}$/.test(value)) {
-                error = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
+                error = t('Errors.PasswordLength');
            }
        }

        setError(error);
-    }, [value])
+    }, [t, value])

    return (
        <>
@@ -45,9 +47,9 @@ function StepEnterPassword({ onChange, onClick, pending, disabled = false, value
            />
            <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'>
-                        <h6 className='text-lg font-bold'>ورود به سیستم</h6>
-                        <p className='mt-3 text-[13px]'>کلمه عبور خود را وارد نمایید.</p>
+                    <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()}
@@ -56,7 +58,7 @@ function StepEnterPassword({ onChange, onClick, pending, disabled = false, value
                        autoComplete='current-password'
                        className='mt-10'
                        htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
-                        labelText='کلمه عبور'
+                        labelText={t('EnterPass.LabelPass')}
                        value={value}
                        placeholder=''
                        onChange={onChange}
@@ -66,15 +68,19 @@ function StepEnterPassword({ onChange, onClick, pending, disabled = false, value
                        </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'>بازیابی کلمه عبور</button>
+                        <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'>مرا به خاطر بسپار</label>
+                            <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'>ورود به منو</Button>
+                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('EnterPass.ButtonSubmit')}</Button>
            </div>
        </>
    )
@@ -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>
        </>
    )