I18n of the init, adduser and login views

webapp/package.json

@@ -10,8 +10,10 @@
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "axios": "^1.6.5",
+    "i18next": "^23.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.0.5",
     "react-scripts": "5.0.1",
     "web-vitals": "^3.5.1"
   },

webapp/src/App.tsx

@@ -1,12 +1,15 @@
 import  { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import AddUser from './components/AddUser';
 import Login from './components/Login';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Init from './components/Init';
+import './i18n'
 
 function App() {
+  const { t } = useTranslation()
   const [showLogin, setShowLogin] = useState(true);
   const [showInit, setShowInit] = useState(true);
 
@@ -23,7 +26,7 @@ function App() {
     <Container component="main" maxWidth="xs">
       <CssBaseline />
       <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-        Conocer y Vencer
+        {t('app_name')}
       </Typography>
       {showInit ? 
        < Init changeView={handleLogginRegisterToggleView}/>

webapp/src/components/AddUser.tsx

@@ -2,6 +2,7 @@
 import  { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField,  Snackbar } from '@mui/material';
+import { useTranslation } from 'react-i18next';
 
 const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
@@ -10,6 +11,7 @@ type ActionProps = {
 }
 
 const AddUser = (props:ActionProps) => {
+  const { t } = useTranslation()
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
@@ -31,7 +33,7 @@ const AddUser = (props:ActionProps) => {
   return (
     <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
       <Typography component="h1" variant="h5">
-        Add User
+        {t('add_user')}
       </Typography>
       <TextField
         name="username"
@@ -51,10 +53,10 @@ const AddUser = (props:ActionProps) => {
         onChange={(e) => setPassword(e.target.value)}
       />
       <button  color="primary" onClick={addUser}>
-        Add User
+        {t('add_user')}
       </button>
       <button color="primary" onClick={props.goBack}>
-        Go back
+        {t('go_back')}
       </button>
       <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" />
       {error && (

webapp/src/components/Init.tsx

@@ -1,19 +1,20 @@
-
+import { useTranslation } from 'react-i18next';
 
 type ActionProps = {
     changeView:(arg:boolean)=> void;
 }
 
 const Init = (props:ActionProps) =>{
+  const { t } = useTranslation()
     return (
         <div>
           <button className={'app-button'}  
           onClick={() => props.changeView(false)}>
-            Register
+            {t('register')}
           </button>
           <button className={'app-button'} 
           onClick={() => props.changeView(true)}>
-            Login
+            {t('login')}
           </button>
         </div> 
     );

webapp/src/components/Login.tsx

@@ -2,12 +2,14 @@
 import  { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Snackbar } from '@mui/material';
+import { useTranslation } from 'react-i18next';
 
 type ActionProps = {
     goBack:()=> void;
 }
 
 const Login = (props: ActionProps) => {
+  const { t } = useTranslation()
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
@@ -51,7 +53,7 @@ const Login = (props: ActionProps) => {
       ) : (
         <div>
           <Typography component="h1" variant="h5">
-            Login
+            {t('login')}
           </Typography>
           <TextField
             margin="normal"
@@ -69,10 +71,10 @@ const Login = (props: ActionProps) => {
             onChange={(e) => setPassword(e.target.value)}
           />
           <button  color="primary" onClick={loginUser}>
-            Login
+          {t('login')}
           </button>
           <button color="primary" onClick={props.goBack}>
-            Go back
+          {t('go_back')}
           </button>
           <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Login successful" />
           {error && (

webapp/src/constants/index.ts

@@ -0,0 +1,4 @@
+export const LANGUAGES = [
+    { label: 'Spanish', code: 'es'},
+    { label: 'English', code: 'en'},
+]

webapp/src/i18n.ts

@@ -0,0 +1,35 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+i18n
+    .use(initReactI18next)
+    .init({
+        lng: 'en',
+        fallbackLng: 'en',
+        interpolation:{
+            escapeValue: false
+        },
+        resources: {
+            en: {
+                translation: {
+                    app_name: 'Conocer y Vencer',
+                    login: 'Login',
+                    go_back: 'Go back',
+                    register: 'Register',
+                    add_user: 'Add user'
+                }
+            },
+            es: {
+                translation: {
+                    app_name: 'Conocer y Vencer',
+                    login: 'Iniciar sesión',
+                    go_back: 'Ir atrás',
+                    register: 'Registrarse',
+                    add_user: 'Añadir usuario'
+                }
+            },
+
+        }
+    });
+
+export default i18n;