translate login page to nepali

WBG-Coach · Jan 16, 2024 · 341d5f3 · 341d5f3
1 parent 0d846ee
commit 341d5f3
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
@@ -15,7 +15,7 @@ export const resources: {
 i18n.use(initReactI18next).init({
   compatibilityJSON: 'v3',
   resources,
-  fallbackLng: 'en',
+  fallbackLng: import.meta.env.VITE_COUNTRY === 'np' ? 'np' : 'en',
   interpolation: {
     escapeValue: false,
   },

diff --git a/src/i18n/langs/en.ts b/src/i18n/langs/en.ts
@@ -23,7 +23,14 @@ const enTranslation = {
     complete: 'Complete',
     incomplete: 'Incomplete',
   },
-
+  Login: {
+    email: 'E-mail',
+    'request-button': 'Request one-time login code',
+    'verify-button': 'Verify code',
+    'invalid-email': 'Invalid email',
+    'invalid-code': 'Invalid code',
+    'code-label': 'Enter the code we sent to your email',
+  },
   Navbar: {
     logout: 'Log out',
     settings: 'Settings',

diff --git a/src/i18n/langs/np.ts b/src/i18n/langs/np.ts
@@ -23,6 +23,14 @@ const npTranslation = {
     complete: 'पूर्ण',
     incomplete: 'अपूर्ण',
   },
+  Login: {
+    email: 'ई-मेल',
+    'request-button': 'एक-पटकको लग-इन कोड माग गर्नुहोस्',
+    'verify-button': 'कोड प्रमाणित गर्नुहोस्',
+    'invalid-email': 'अमान्य इमेल',
+    'invalid-code': 'अमान्य कोड',
+    'code-label': 'तपाईंको ईमेलमा पठाइएको कोड प्रविष्ट गर्नुहोस्',
+  },
   Navbar: {
     dashboard: 'मुख्य पृष्ठ',
     questionnaire: 'प्रश्नावली',

diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
@@ -17,6 +17,7 @@ import {
 } from '@chakra-ui/react';
 import React, { useContext, useState } from 'react';
 import { useForm, SubmitHandler, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { CloseButton } from 'react-toastify/dist/components';
 
 const defaultValues = {
@@ -33,6 +34,7 @@ const Login: React.FC = () => {
   const [error, setError] = useState('');
   const [showOTP, setShowOTP] = useState(false);
   const [code, setCode] = useState('');
+  const { t } = useTranslation();
 
   const handleLogin: SubmitHandler<typeof defaultValues> = async ({ email }) => {
     try {
@@ -45,9 +47,9 @@ const Login: React.FC = () => {
       }
     } catch (err: any) {
       if (showOTP) {
-        setError('Invalid code');
+        setError(t('Login.invalid-code') || '');
       } else {
-        setError('Invalid email');
+        setError(t('Login.invalid-email') || '');
       }
       setCode('');
     }
@@ -75,7 +77,13 @@ const Login: React.FC = () => {
                 rules={{ required: true }}
                 name="email"
                 render={({ field, fieldState: { error } }) => (
-                  <Input placeholder="E-mail" {...field} isInvalid={!!error} h={'48px'} disabled={showOTP} />
+                  <Input
+                    placeholder={t('Login.email') || ''}
+                    {...field}
+                    isInvalid={!!error}
+                    h={'48px'}
+                    disabled={showOTP}
+                  />
                 )}
               />
               {error && (
@@ -86,7 +94,7 @@ const Login: React.FC = () => {
               )}
               {showOTP && (
                 <VStack my={10}>
-                  <Text>Enter the code we sent to your email</Text>
+                  <Text>{t('Login.code-labelकोच डिजिटल एनपी')}</Text>
                   <HStack>
                     <PinInput otp onComplete={setCode}>
                       <PinInputField />
@@ -108,7 +116,7 @@ const Login: React.FC = () => {
               onClick={handleSubmit(handleLogin)}
               isDisabled={showOTP && code.length < 4}
             >
-              {showOTP ? 'Verify code' : 'Send OTP code'}
+              {showOTP ? t('Login.verify-button') : t('Login.request-button')}
             </Button>
           </>
         )}