add: locale and i18n
This commit is contained in:
Mahyar Khanbolooki
@@ -0,0 +1,6 @@
|
||||
const i18nConfig = {
|
||||
locales: ['en', 'fa'],
|
||||
defaultLocale: 'fa'
|
||||
};
|
||||
|
||||
module.exports = i18nConfig;
|
||||
Generated
+116
@@ -24,13 +24,17 @@
|
||||
"cmdk": "^1.1.1",
|
||||
"dmenu-plus-frontned": "file:",
|
||||
"framer-motion": "^12.23.3",
|
||||
"i18next": "^25.3.2",
|
||||
"i18next-resources-to-backend": "^1.2.1",
|
||||
"iconsax-react": "^0.0.8",
|
||||
"lucide-react": "^0.525.0",
|
||||
"next": "15.3.4",
|
||||
"next-i18n-router": "^5.5.3",
|
||||
"next-usequerystate": "^1.20.0",
|
||||
"react": "^19.0.0",
|
||||
"react-day-picker": "^9.8.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-i18next": "^15.6.1",
|
||||
"react-virtualized": "^9.22.6",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"zustand": "^5.0.6"
|
||||
@@ -316,6 +320,15 @@
|
||||
"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@formatjs/intl-localematcher": {
|
||||
"version": "0.5.10",
|
||||
"resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.10.tgz",
|
||||
"integrity": "sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "2"
|
||||
}
|
||||
},
|
||||
"node_modules/@humanfs/core": {
|
||||
"version": "0.19.1",
|
||||
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
|
||||
@@ -4691,6 +4704,55 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/html-parse-stringify": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
|
||||
"integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"void-elements": "3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/i18next": {
|
||||
"version": "25.3.2",
|
||||
"resolved": "https://registry.npmjs.org/i18next/-/i18next-25.3.2.tgz",
|
||||
"integrity": "sha512-JSnbZDxRVbphc5jiptxr3o2zocy5dEqpVm9qCGdJwRNO+9saUJS0/u4LnM/13C23fUEWxAylPqKU/NpMV/IjqA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://locize.com"
|
||||
},
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://locize.com/i18next.html"
|
||||
},
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.27.6"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": "^5"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/i18next-resources-to-backend": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/i18next-resources-to-backend/-/i18next-resources-to-backend-1.2.1.tgz",
|
||||
"integrity": "sha512-okHbVA+HZ7n1/76MsfhPqDou0fptl2dAlhRDu2ideXloRRduzHsqDOznJBef+R3DFZnbvWoBW+KxJ7fnFjd6Yw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.23.2"
|
||||
}
|
||||
},
|
||||
"node_modules/iconsax-react": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/iconsax-react/-/iconsax-react-0.0.8.tgz",
|
||||
@@ -5796,6 +5858,15 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/negotiator": {
|
||||
"version": "0.6.4",
|
||||
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
|
||||
"integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/next": {
|
||||
"version": "15.3.4",
|
||||
"resolved": "https://registry.npmjs.org/next/-/next-15.3.4.tgz",
|
||||
@@ -5850,6 +5921,16 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/next-i18n-router": {
|
||||
"version": "5.5.3",
|
||||
"resolved": "https://registry.npmjs.org/next-i18n-router/-/next-i18n-router-5.5.3.tgz",
|
||||
"integrity": "sha512-btKVR/Mup05scxJp3EdPNALlufnZ/BO/zkIZc8a5ESdu+CNnmLW1AOkziTfRawXiZcznACCQtyfKNobC/WBTEA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@formatjs/intl-localematcher": "^0.5.2",
|
||||
"negotiator": "^0.6.3"
|
||||
}
|
||||
},
|
||||
"node_modules/next-usequerystate": {
|
||||
"version": "1.20.0",
|
||||
"resolved": "https://registry.npmjs.org/next-usequerystate/-/next-usequerystate-1.20.0.tgz",
|
||||
@@ -6278,6 +6359,32 @@
|
||||
"react": "^19.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-i18next": {
|
||||
"version": "15.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.6.1.tgz",
|
||||
"integrity": "sha512-uGrzSsOUUe2sDBG/+FJq2J1MM+Y4368/QW8OLEKSFvnDflHBbZhSd1u3UkW0Z06rMhZmnB/AQrhCpYfE5/5XNg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.27.6",
|
||||
"html-parse-stringify": "^3.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"i18next": ">= 23.2.3",
|
||||
"react": ">= 16.8.0",
|
||||
"typescript": "^5"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-native": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
@@ -7367,6 +7474,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/void-elements": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
|
||||
"integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
|
||||
@@ -25,13 +25,17 @@
|
||||
"cmdk": "^1.1.1",
|
||||
"dmenu-plus-frontned": "file:",
|
||||
"framer-motion": "^12.23.3",
|
||||
"i18next": "^25.3.2",
|
||||
"i18next-resources-to-backend": "^1.2.1",
|
||||
"iconsax-react": "^0.0.8",
|
||||
"lucide-react": "^0.525.0",
|
||||
"next": "15.3.4",
|
||||
"next-i18n-router": "^5.5.3",
|
||||
"next-usequerystate": "^1.20.0",
|
||||
"react": "^19.0.0",
|
||||
"react-day-picker": "^9.8.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-i18next": "^15.6.1",
|
||||
"react-virtualized": "^9.22.6",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"zustand": "^5.0.6"
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import 'server-only'
|
||||
|
||||
const dictionaries = {
|
||||
en: () => import('@/dictionaries/en.json').then((module) => module.default),
|
||||
fa: () => import('@/dictionaries/fa.json').then((module) => module.default),
|
||||
}
|
||||
|
||||
export const getDictionary = async (locale: 'en' | 'fa') =>
|
||||
dictionaries[locale]()
|
||||
@@ -0,0 +1,49 @@
|
||||
import { Metadata } from "next";
|
||||
import "../globals.css";
|
||||
import { ReactQueryProvider } from "@/components/providers/ReactQueryProvider";
|
||||
import { notFound } from "next/navigation";
|
||||
import i18nConfig from "../../../i18nConfig";
|
||||
import initTranslations from '@/lib/i18n';
|
||||
import TranslationsProvider from "@/components/utils/TranslationsProdiver";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Dashboard',
|
||||
description: 'Webapp dashboard'
|
||||
}
|
||||
|
||||
const i18nNamespaces = ['auth'];
|
||||
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
params,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
params: { locale: string }
|
||||
}>) {
|
||||
const { locale } = await params;
|
||||
if (!i18nConfig.locales.includes(locale)) {
|
||||
notFound();
|
||||
}
|
||||
const { resources } = await initTranslations(locale, i18nNamespaces);
|
||||
|
||||
return (
|
||||
|
||||
<html lang={locale} className="h-svh overflow-hidden">
|
||||
<body
|
||||
dir={locale === 'fa' ? 'rtl' : 'ltr'}
|
||||
className={`antialiased bg-background h-svh overflow-hidden`}
|
||||
>
|
||||
<ReactQueryProvider>
|
||||
<TranslationsProvider
|
||||
namespaces={i18nNamespaces}
|
||||
locale={locale}
|
||||
resources={resources}>
|
||||
<div id="root" className="h-svh overflow-hidden">
|
||||
{children}
|
||||
</div>
|
||||
</TranslationsProvider>
|
||||
</ReactQueryProvider>
|
||||
</body>
|
||||
</html >
|
||||
);
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
import { Metadata } from "next";
|
||||
import "./globals.css";
|
||||
import { ReactQueryProvider } from "@/components/providers/ReactQueryProvider";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Dashboard',
|
||||
description: 'Webapp dashboard'
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
|
||||
return (
|
||||
|
||||
<html lang="en" className="h-svh overflow-hidden">
|
||||
<body
|
||||
dir="rtl"
|
||||
className={`antialiased bg-background h-svh overflow-hidden`}
|
||||
>
|
||||
<ReactQueryProvider>
|
||||
<div id="root" className="h-svh overflow-hidden">
|
||||
{children}
|
||||
</div>
|
||||
</ReactQueryProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -15,7 +15,7 @@ function InputField({ onChange, htmlFor, labelText, children, valid = true, clas
|
||||
return (
|
||||
<div className={`${className} ${valid ? 'border-border' : 'border-invalid'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border`}>
|
||||
<label
|
||||
className='absolute right-2 -top-3 px-2 bg-container text-[12px] text-foreground'
|
||||
className='absolute start-2 -top-2.5 px-2 bg-container text-[12px] text-foreground'
|
||||
htmlFor={htmlFor}>
|
||||
{labelText}
|
||||
</label>
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
'use client';
|
||||
|
||||
import { I18nextProvider } from 'react-i18next';
|
||||
import initTranslations from '@/lib/i18n';
|
||||
import { createInstance } from 'i18next';
|
||||
|
||||
export default function TranslationsProvider({
|
||||
children,
|
||||
locale,
|
||||
namespaces,
|
||||
resources
|
||||
}) {
|
||||
const i18n = createInstance();
|
||||
|
||||
initTranslations(locale, namespaces, i18n, resources);
|
||||
|
||||
return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import { createInstance } from 'i18next';
|
||||
import { initReactI18next } from 'react-i18next/initReactI18next';
|
||||
import resourcesToBackend from 'i18next-resources-to-backend';
|
||||
import i18nConfig from '../../i18nConfig';
|
||||
|
||||
export default async function initTranslations(
|
||||
locale,
|
||||
namespaces,
|
||||
i18nInstance,
|
||||
resources
|
||||
) {
|
||||
i18nInstance = i18nInstance || createInstance();
|
||||
|
||||
i18nInstance.use(initReactI18next);
|
||||
|
||||
if (!resources) {
|
||||
i18nInstance.use(
|
||||
resourcesToBackend(
|
||||
(language, namespace) =>
|
||||
import(`@/locales/${language}/${namespace}.json`)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
await i18nInstance.init({
|
||||
lng: locale,
|
||||
resources,
|
||||
fallbackLng: i18nConfig.defaultLocale,
|
||||
supportedLngs: i18nConfig.locales,
|
||||
defaultNS: namespaces[0],
|
||||
fallbackNS: namespaces[0],
|
||||
ns: namespaces,
|
||||
preload: resources ? [] : i18nConfig.locales
|
||||
});
|
||||
|
||||
return {
|
||||
i18n: i18nInstance,
|
||||
resources: { [locale]: i18nInstance.services.resourceStore.data[locale] },
|
||||
t: i18nInstance.t
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"Enter": {
|
||||
"Heading": "Login",
|
||||
"Description": "Please enter your mobile number to log in.",
|
||||
"LabelPhoneNumber": "Mobile Number",
|
||||
"ButtonSubmit": "Next"
|
||||
},
|
||||
"OTP": {
|
||||
"Heading": "Enter Activation Code",
|
||||
"Description": "Please enter the 6-digit code sent to the number {phoneNumber}.",
|
||||
"Label": "",
|
||||
"TimerRunning": "{seconds} seconds left to receive the code",
|
||||
"TimerOut": "Didn’t receive the code?",
|
||||
"TimerReset": "Try again",
|
||||
"ButtonSubmit": "Next"
|
||||
},
|
||||
"NewPassword": {
|
||||
"HeadingCreatePass": "Choose Password",
|
||||
"HeadingResetPass": "Change Password",
|
||||
"Description": "The new password must be a combination of uppercase and lowercase letters and symbols, like A126bdz@",
|
||||
"LabelPass": "Password",
|
||||
"LabelRepeatPass": "Repeat Password",
|
||||
"ButtonSubmit": "Login"
|
||||
},
|
||||
"EnterPass": {
|
||||
"Heading": "Login",
|
||||
"Description": "Please enter your password.",
|
||||
"LabelPass": "Password",
|
||||
"ButtonRecover": "Recover Password",
|
||||
"LabelRememberance": "Remember me",
|
||||
"ButtonSubmit": "Enter Menu"
|
||||
},
|
||||
"Errors": {
|
||||
"PasswordLength": "Password must be at least 6 characters long",
|
||||
"PasswordMatch": "Repeated password does not match",
|
||||
"PhoneNumberFormat": "Phone number format is incorrect",
|
||||
"OTPFormat": "Activation code is incomplete"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"Enter": {
|
||||
"Heading": "ورود به سیستم",
|
||||
"Description": "برای ورود شماره همراه خود را وارد نمایید.",
|
||||
"LabelPhoneNumber": "شماره همراه",
|
||||
"ButtonSubmit": "بعدی"
|
||||
},
|
||||
"OTP": {
|
||||
"Heading": "کد فعالسازی را وارد کنید",
|
||||
"Description": "کد ۶ رقمی ارسال شده به شماره {phoneNumber} را وارد نمایید.",
|
||||
"Label": "",
|
||||
"TimerRunning": "{seconds} ثانیه دیگر تا دریافت کد",
|
||||
"TimerOut": "کد را دریافت نکردید؟",
|
||||
"TimerReset": "دوباره امتحان کنید",
|
||||
"ButtonSubmit": "بعدی"
|
||||
},
|
||||
"NewPassword": {
|
||||
"HeadingCreatePass": "انتخاب کلمه عبور",
|
||||
"HeadingResetPass": "تغییر کلمه عبور",
|
||||
"Description": "کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@",
|
||||
"LabelPass": "کلمه عبور",
|
||||
"LabelRepeatPass": "تکرار کلمه عبور",
|
||||
"ButtonSubmit": "ورود"
|
||||
},
|
||||
"EnterPass": {
|
||||
"Heading": "ورود به سیستم",
|
||||
"Description": "کلمه عبور خود را وارد نمایید.",
|
||||
"LabelPass": "کلمه عبور",
|
||||
"ButtonRecover": "بازیابی کلمه عبور",
|
||||
"LabelRememberance": "مرا به خاطر بسپار",
|
||||
"ButtonSubmit": "ورود به منو"
|
||||
},
|
||||
"Errors": {
|
||||
"PasswordLength": "کلمه عبور باید شامل حداقل 6 کاراکتر باشد",
|
||||
"PasswordMatch": "تکرار کلمه عبور مطابقت ندارد",
|
||||
"PhoneNumberFormat": "فرمت شماره تلفن اشتباه است",
|
||||
"OTPFormat": "کد فعالسازی کامل نیست"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { i18nRouter } from 'next-i18n-router';
|
||||
import { NextRequest } from 'next/server';
|
||||
import i18nConfig from '../i18nConfig';
|
||||
|
||||
export function middleware(request: NextRequest) {
|
||||
return i18nRouter(request, i18nConfig);
|
||||
}
|
||||
|
||||
// only applies this middleware to files in the app directory
|
||||
export const config = {
|
||||
matcher: '/((?!api|static|favicon.ico|.*\\..*|_next).*)'
|
||||
};
|
||||
+1
-1
@@ -22,6 +22,6 @@
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/middleware.js", "src/components/utils/TranslationsProdiver.jsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user