Paso a dev el cambio de idioma y el formateo de fechas

webapp/src/App.js

@@ -32,11 +32,11 @@ function App() {
 
 
                 <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
-                    Don't have an account? Register here.
+                    ¿No tienes cuenta? Registrate aqui.
                 </Link>
             ) : (
                 <Link component="button" variant="body2" onClick={handleToggleView}>
-                    Already have an account? Login here.
+                    ¿Ya tienes cuenta? Inicia sesión aqui.
                 </Link>
             )}
         </Typography>

webapp/src/components/AddUser.js

@@ -27,7 +27,7 @@ const AddUser = () => {
   return (
     <Container component="main" maxWidth="lg" sx={{ marginTop: 4 }}>
       <Typography component="h1" variant="h5">
-        Add User
+        Añadir usuario
       </Typography>
       <TextField
         name="username"
@@ -47,9 +47,9 @@ const AddUser = () => {
         onChange={(e) => setPassword(e.target.value)}
       />
       <Button variant="contained" color="primary" onClick={addUser}>
-        Add User
+        Añadir usuario
       </Button>
-      <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" />
+      <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Usuario añadido correctamente" />
       {error && (
         <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
       )}

webapp/src/components/AddUser.test.js

@@ -16,7 +16,7 @@ describe('AddUser component', () => {
 
     const usernameInput = screen.getByLabelText(/Username/i);
     const passwordInput = screen.getByLabelText(/Password/i);
-    const addUserButton = screen.getByRole('button', { name: /Add User/i });
+    const addUserButton = screen.getByRole('button', { name: /Añadir usuario/i });
 
     // Mock the axios.post request to simulate a successful response
     mockAxios.onPost('http://localhost:8000/adduser').reply(200);
@@ -30,7 +30,7 @@ describe('AddUser component', () => {
 
     // Wait for the Snackbar to be open
     await waitFor(() => {
-      expect(screen.getByText(/User added successfully/i)).toBeInTheDocument();
+      expect(screen.getByText(/Usuario añadido correctamente/i)).toBeInTheDocument();
     });
   });
 
@@ -39,7 +39,7 @@ describe('AddUser component', () => {
 
     const usernameInput = screen.getByLabelText(/Username/i);
     const passwordInput = screen.getByLabelText(/Password/i);
-    const addUserButton = screen.getByRole('button', { name: /Add User/i });
+    const addUserButton = screen.getByRole('button', { name: /Añadir usuario/i });
 
     // Mock the axios.post request to simulate an error response
     mockAxios.onPost('http://localhost:8000/adduser').reply(500, { error: 'Internal Server Error' });

webapp/src/components/GeneratedQuestionsList.js

@@ -54,7 +54,7 @@ const GeneratedQuestionsList = () => {
 
   return (
     <div>
-    <h2>Questions List</h2>
+    <h2>Lista de preguntas</h2>
     <table style={{ borderCollapse: 'collapse', width: '100%' }}>
       <thead>
         <tr style={{ border: '1px solid #ddd', padding: '8px', backgroundColor: '#f2f2f2' }}>

webapp/src/components/Login.js

@@ -133,10 +133,10 @@ const Login = ({setLogged}) => {
 
         <div>
           <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
-            Hello {username}!
+            Hola {username}!
           </Typography>
           <Typography component="p" variant="body1" sx={{ textAlign: 'center', marginTop: 2 }}>
-            Your account was created on {new Date(createdAt).toLocaleDateString()}.
+            Tu cuenta fue creada el {new Date(createdAt).toLocaleDateString()}.
           </Typography>
           <Button variant="contained" color="secondary" onClick={handleShowGame}>
             Comenzar a jugar
@@ -148,7 +148,7 @@ const Login = ({setLogged}) => {
   ) : (
     <div>
       <Typography component="h1" variant="h5">
-        Login
+        Iniciar sesión
       </Typography>
       <TextField
         margin="normal"
@@ -166,7 +166,7 @@ const Login = ({setLogged}) => {
         onChange={(e) => setPassword(e.target.value)}
       />
       <Button variant="contained" color="primary" onClick={loginUser}>
-        Login
+        Iniciar sesión
       </Button>
       <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Login successful" />
       {error && (

webapp/src/components/Login.test.js

@@ -16,7 +16,7 @@ describe('Login component', () => {
 
     const usernameInput = screen.getByLabelText(/Username/i);
     const passwordInput = screen.getByLabelText(/Password/i);
-    const loginButton = screen.getByRole('button', { name: /Login/i });
+    const loginButton = screen.getByRole('button', { name: /Iniciar sesión/i });
 
     // Mock the axios.post request to simulate a successful response
     mockAxios.onPost('http://localhost:8000/login').reply(200, { createdAt: '2024-01-01T12:34:56Z' });
@@ -29,16 +29,16 @@ describe('Login component', () => {
       });
 
     // Verify that the user information is displayed
-    expect(screen.getByText(/Hello testUser!/i)).toBeInTheDocument();
-    expect(screen.getByText(/Your account was created on 1\/1\/2024/i)).toBeInTheDocument();
+    expect(screen.getByText(/Hola testUser!/i)).toBeInTheDocument();
+    expect(screen.getByText(/Tu cuenta fue creada el 1\/1\/2024/i)).toBeInTheDocument();
   });
 
   it('should handle error when logging in', async () => {
     render(<Login />);
 
     const usernameInput = screen.getByLabelText(/Username/i);
     const passwordInput = screen.getByLabelText(/Password/i);
-    const loginButton = screen.getByRole('button', { name: /Login/i });
+    const loginButton = screen.getByRole('button', { name: /Iniciar sesión/i });
 
     // Mock the axios.post request to simulate an error response
     mockAxios.onPost('http://localhost:8000/login').reply(401, { error: 'Unauthorized' });
@@ -56,7 +56,7 @@ describe('Login component', () => {
     });
 
     // Verify that the user information is not displayed
-    expect(screen.queryByText(/Hello testUser!/i)).toBeNull();
-    expect(screen.queryByText(/Your account was created on/i)).toBeNull();
+    expect(screen.queryByText(/Hola testUser!/i)).toBeNull();
+    expect(screen.queryByText(/Tu cuenta fue creada el/i)).toBeNull();
   });
 });

webapp/src/components/RecordList.js

@@ -11,7 +11,10 @@ const RecordList = ({ username }) => {
         const response = await axios.get(`${apiEndpoint}/getRecords/${username}`);
 
         if (response.status === 200) {
-          const userRecords = response.data;
+          const userRecords = response.data.map(record => ({
+            ...record,
+            date: new Date(record.date).toLocaleString(),
+          }));
           setListRecords(userRecords);
         } else {
           console.error('Error obtaining the user records list');
@@ -30,11 +33,11 @@ const RecordList = ({ username }) => {
       <table style={{ borderCollapse: 'collapse', width: '100%' }}>
         <thead>
           <tr style={{ border: '1px solid #ddd', padding: '8px', backgroundColor: '#f2f2f2' }}>
-            <th>Date</th>
-            <th>Time (seconds)</th>
-            <th>Money Earned</th>
-            <th>Correct Questions</th>
-            <th>Failed Questions</th>
+            <th>Fecha</th>
+            <th>Tiempo (segundos)</th>
+            <th>Dinero conseguido</th>
+            <th>Respuestas correctas</th>
+            <th>Respuestas falladas</th>
           </tr>
         </thead>
         <tbody>

webapp/src/components/UsersList.js

@@ -18,8 +18,10 @@ const UsersList = () => {
 
         const response = await axios.get(`${apiEndpoint}/getAllUsers`);
         if (response.status === 200)  {
-
-            const uList = response.data;
+          const uList = response.data.map(record => ({
+            ...record,
+            createdAt: new Date(record.createdAt).toLocaleString(),
+          }));
           setListUsers(uList);
 
         } else {
@@ -56,7 +58,7 @@ const UsersList = () => {
 
   return (
     <div>
-    <h2>Users List</h2>
+    <h2>Lista de usuarios</h2>
     <table style={{ borderCollapse: 'collapse', width: '100%' }}>
       <thead>
         <tr style={{ border: '1px solid #ddd', padding: '8px', backgroundColor: '#f2f2f2' }}>