diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index d344643a..14183f87 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -10,10 +10,9 @@ function App() { const { i18n } = useTranslation(); React.useEffect(() => { - localStorage.setItem("lang", navigator.language); - i18n.changeLanguage(navigator.language); + localStorage.setItem("lang", navigator.language.slice(0, 2)); + i18n.changeLanguage(navigator.language.slice(0, 2)); }, [i18n]); - return ( diff --git a/webapp/src/common/Nav.tsx b/webapp/src/common/Nav.tsx index 67815981..977e158a 100644 --- a/webapp/src/common/Nav.tsx +++ b/webapp/src/common/Nav.tsx @@ -15,7 +15,6 @@ const NavBar: React.FC<{}> = () => const [anchorEl, setAnchorEl] = useState(null); const [open, setOpen] = useState(false); const [chevronRotated, setChevronRotated] = useState(true); - const [checked, setChecked] = useState(navigator.language==="es-ES"); const handleClick = (event: React.MouseEvent | React.MouseEvent) => { setAnchorEl(event.currentTarget); @@ -31,15 +30,13 @@ const NavBar: React.FC<{}> = () => const handleSwitch = () => { const language = localStorage.getItem("lang"); - if(language === "es" || language === null){ + if(language === "es"){ localStorage.setItem("lang", "en"); i18n.changeLanguage("en"); - setChecked(false); } else{ localStorage.setItem("lang", "es"); i18n.changeLanguage("es"); - setChecked(true) } }; @@ -67,8 +64,7 @@ const NavBar: React.FC<{}> = () => = () => = () => src={process.env.PUBLIC_URL + '/british-flag.png'} alt='British flag' /> - + {localStorage.getItem("lang") === 'en' && ( + + )} + {localStorage.getItem("lang") === 'es' && ( + + )} = ({nowHasGroup, setError, toggleCre - +

{t('create_group_group_name')}

 - setGroupName(e.target.value)} /> - +

{t('create_group_public_group')}

 - setPublic(e.target.value === "yes")} > - } label="Yes" /> - } label="No" /> + } label={t('create_group_yes')} /> + } label={t('create_group_no')} /> - -

{t('create_group_max_members')}

 - + +

{t('create_group_max_members')}

 + - +

{t('create_group_description')}

 - setDescription(e.target.value)} /> - + diff --git a/webapp/src/components/group/GroupTable.tsx b/webapp/src/components/group/GroupTable.tsx index 4ac519a0..470b9ea0 100644 --- a/webapp/src/components/group/GroupTable.tsx +++ b/webapp/src/components/group/GroupTable.tsx @@ -73,18 +73,18 @@ export const GroupTable = (props: TableProps) => { {loading ? : ( - - -

{groupName}

+ + +

{groupName}

 - -

{total}{t('group_table_points')}

+ +

{total}{t('group_table_points')}

 - -

{numberMembers}{t('group_table_members')}

+ +

{numberMembers}{t('group_table_members')}

 - - + + diff --git a/webapp/src/components/group/NoGroup.tsx b/webapp/src/components/group/NoGroup.tsx index a04a7bc2..dc77b0ac 100644 --- a/webapp/src/components/group/NoGroup.tsx +++ b/webapp/src/components/group/NoGroup.tsx @@ -135,7 +135,7 @@ const NoGroup = (props: ActionProps) => ))} - + diff --git a/webapp/src/components/init/Init.tsx b/webapp/src/components/init/Init.tsx index 8f99622a..6e4f17c1 100644 --- a/webapp/src/components/init/Init.tsx +++ b/webapp/src/components/init/Init.tsx @@ -20,10 +20,21 @@ const Init = (props:ActionProps) =>{ return ( - - diff --git a/webapp/src/components/login/Login.test.js b/webapp/src/components/login/Login.test.js index 22272c62..04abe8a5 100644 --- a/webapp/src/components/login/Login.test.js +++ b/webapp/src/components/login/Login.test.js @@ -13,7 +13,7 @@ describe('Login component', () => { mockAxios.reset(); }); - it('should login user successfully', async () => { + it('should handle error when logging in user', async () => { render( {}} /> @@ -24,13 +24,8 @@ describe('Login component', () => { const passwordInput = screen.getByLabelText(/Password/i); const loginButton = screen.getByRole('button', { name: /login/i }); - // Mock the axios.post request to simulate a successful response - mockAxios.onPost('http://localhost:8000/login').reply(200, { - username: 'testUser', - totalScore: 100, - nWins: 5, - uuid: '123456789' - }); + // Mock the axios.post request to simulate an error response + mockAxios.onPost('http://localhost:8000/login').reply(500, { error: 'Internal Server Error' }); // Simulate user input fireEvent.change(usernameInput, { target: { value: 'testUser' } }); @@ -39,22 +34,22 @@ describe('Login component', () => { // Trigger the login button click fireEvent.click(loginButton); - // Wait for the Snackbar to be open + // Wait for the error Snackbar to be open await waitFor(() => { - expect(screen.getByTestId("login-successfull-snackbar")).toBeInTheDocument(); + expect(screen.getByTestId('login-error-snackbar')).toBeInTheDocument(); }); - // Verify local storage is set correctly - expect(localStorage.getItem('username')).toBe('testUser'); - expect(localStorage.getItem('score')).toBe('100'); - expect(localStorage.getItem('nWins')).toBe('5'); - expect(localStorage.getItem('uuid')).toBe('123456789'); - expect(localStorage.getItem('isAuthenticated')).toBe('true'); - expect(localStorage.getItem('userUUID')).toBe('123456789'); - expect(localStorage.getItem('lang')).toBe('en'); + // Verify local storage is not set when there's an error + expect(localStorage.getItem('username')).toBeNull(); + expect(localStorage.getItem('score')).toBeNull(); + expect(localStorage.getItem('nWins')).toBeNull(); + expect(localStorage.getItem('uuid')).toBeNull(); + expect(localStorage.getItem('isAuthenticated')).toBeNull(); + expect(localStorage.getItem('userUUID')).toBeNull(); + expect(localStorage.getItem('lang')).toBeNull(); }); - it('should handle error when logging in user', async () => { + it('should login user successfully', async () => { render( {}} /> @@ -65,8 +60,13 @@ describe('Login component', () => { const passwordInput = screen.getByLabelText(/Password/i); const loginButton = screen.getByRole('button', { name: /login/i }); - // Mock the axios.post request to simulate an error response - mockAxios.onPost('http://localhost:8000/login').reply(500, { error: 'Internal Server Error' }); + // Mock the axios.post request to simulate a successful response + mockAxios.onPost('http://localhost:8000/login').reply(200, { + username: 'testUser', + totalScore: 100, + nWins: 5, + uuid: '123456789' + }); // Simulate user input fireEvent.change(usernameInput, { target: { value: 'testUser' } }); @@ -75,18 +75,20 @@ describe('Login component', () => { // Trigger the login button click fireEvent.click(loginButton); - // Wait for the error Snackbar to be open + // Wait for the Snackbar to be open await waitFor(() => { - expect(screen.getByTestId('login-error-snackbar')).toBeInTheDocument(); + expect(screen.getByTestId("login-successfull-snackbar")).toBeInTheDocument(); }); - // Verify local storage is not set when there's an error - expect(localStorage.getItem('username')).toBeNull(); - expect(localStorage.getItem('score')).toBeNull(); - expect(localStorage.getItem('nWins')).toBeNull(); - expect(localStorage.getItem('uuid')).toBeNull(); - expect(localStorage.getItem('isAuthenticated')).toBeNull(); - expect(localStorage.getItem('userUUID')).toBeNull(); - expect(localStorage.getItem('lang')).toBeNull(); + // Verify local storage is set correctly + expect(localStorage.getItem('username')).toBe('testUser'); + expect(localStorage.getItem('score')).toBe('100'); + expect(localStorage.getItem('nWins')).toBe('5'); + expect(localStorage.getItem('uuid')).toBe('123456789'); + expect(localStorage.getItem('isAuthenticated')).toBe('true'); + expect(localStorage.getItem('userUUID')).toBe('123456789'); + expect(localStorage.getItem('lang')).toBe('en'); }); + + }); \ No newline at end of file diff --git a/webapp/src/components/login/Login.tsx b/webapp/src/components/login/Login.tsx index 8b105c8d..8c353fed 100644 --- a/webapp/src/components/login/Login.tsx +++ b/webapp/src/components/login/Login.tsx @@ -28,8 +28,8 @@ const Login = (props: ActionProps) => { async function loginUser () { try { - localStorage.clear(); const user = await axios.post(`${apiEndpoint}/login`, { username, password }); + console.log(user.data); localStorage.setItem("username", user.data.username); localStorage.setItem("score", user.data.totalScore); @@ -38,7 +38,7 @@ const Login = (props: ActionProps) => { localStorage.setItem("isAuthenticated", JSON.stringify(true)); // Extract data from the response localStorage.setItem('userUUID', user.data.uuid); - localStorage.setItem('lang','en') + localStorage.setItem("lang", navigator.language.slice(0, 2)); setOpenSnackbar(true); navigate("/game") @@ -78,12 +78,13 @@ const Login = (props: ActionProps) => { value={password} onChange={(e) => setPassword(e.target.value)} onKeyDown={handleKeyPress} + sx={{ marginBottom: '30px' }} /> - - - diff --git a/webapp/src/components/register/Register.tsx b/webapp/src/components/register/Register.tsx index 9ff0c4e1..889ffcbd 100644 --- a/webapp/src/components/register/Register.tsx +++ b/webapp/src/components/register/Register.tsx @@ -25,7 +25,6 @@ const Register = (props:ActionProps) => { // checkear que el username no exista (tiene que ser unico) await axios.post(`${apiEndpoint}/adduser`, { username, password }); setOpenSnackbar(true); - localStorage.clear(); const user = await axios.post(`${apiEndpoint}/login`, { username, password }); console.log(user.data); @@ -36,7 +35,6 @@ const Register = (props:ActionProps) => { localStorage.setItem("isAuthenticated", JSON.stringify(true)); // Extract data from the response localStorage.setItem('userUUID', user.data.uuid); - localStorage.setItem('lang','en') setOpenSnackbar(true); navigate("/game") @@ -88,12 +86,13 @@ const Register = (props:ActionProps) => { value={password} onChange={(e) => setPassword(e.target.value)} onKeyDown={handleKeyPress} + sx={{ marginBottom: '30px' }} /> - - - diff --git a/webapp/src/i18n.ts b/webapp/src/i18n.ts index 9bc5a2d6..64a4986e 100644 --- a/webapp/src/i18n.ts +++ b/webapp/src/i18n.ts @@ -79,6 +79,15 @@ i18n no_group_close: 'Close', no_group_join_group: 'Join group', no_group_join_blank: 'Join', + create_group_group_name: 'Group name:', + create_group_group_name_label: 'Group name', + create_group_public_group: 'Public group:', + create_group_yes: 'Yes', + create_group_no: 'No', + create_group_max_members: 'Max nº of members:', + create_group_description: 'Description:', + create_group_description_label: 'Description', + create_group_button: 'Create Group', login_message: 'Login successful', register_message: 'You registered successfully', game_single_player: 'Single Player', @@ -171,6 +180,15 @@ i18n no_group_close: 'Cerrar', no_group_join_group: 'Unirse a grupo', no_group_join_blank: 'Unirse', + create_group_group_name: 'Nombre del grupo:', + create_group_group_name_label: 'Nombre del grupo', + create_group_public_group: 'Grupo público:', + create_group_yes: 'Sí', + create_group_no: 'No', + create_group_max_members: 'Máx. nº de miembros:', + create_group_description: 'Descripción:', + create_group_description_label: 'Descripción', + create_group_button: 'Crear Grupo', login_message: 'Inicio de sesión exitoso', register_message: 'Registro exitoso', game_single_player: 'Un Solo Jugador', diff --git a/webapp/src/pages/game/game-page.scss b/webapp/src/pages/game/game-page.scss index fa3c27b0..299ed858 100644 --- a/webapp/src/pages/game/game-page.scss +++ b/webapp/src/pages/game/game-page.scss @@ -7,6 +7,10 @@ } .game-page-button { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; width: 290px; font-size: 1.5em; padding: 15px 30px; diff --git a/webapp/src/pages/game/index.tsx b/webapp/src/pages/game/index.tsx index c3520e4d..e0fa0a02 100644 --- a/webapp/src/pages/game/index.tsx +++ b/webapp/src/pages/game/index.tsx @@ -9,12 +9,8 @@ export const GamePage: React.FC<{}> = () => { return (
- - + {t('game_single_player')} + {t('game_multiplayer')}
); }; \ No newline at end of file diff --git a/webapp/src/pages/init/index.tsx b/webapp/src/pages/init/index.tsx index b3d3c3dc..0fcb3c6a 100644 --- a/webapp/src/pages/init/index.tsx +++ b/webapp/src/pages/init/index.tsx @@ -29,8 +29,6 @@ export const InitPage: React.FC<{}> = () =>{ setShowGoogleLM(!showGoogleLM); setShowInit(!showInit); } */ - - localStorage.clear(); localStorage.setItem("isAuthenticated", JSON.stringify(false)); return ( diff --git a/webapp/src/pages/userProfile/index.tsx b/webapp/src/pages/userProfile/index.tsx index 4b5dc969..3589583d 100644 --- a/webapp/src/pages/userProfile/index.tsx +++ b/webapp/src/pages/userProfile/index.tsx @@ -31,7 +31,7 @@ const ProfilePage = () => { }; return ( - + {profileInfo && ( @@ -124,7 +124,7 @@ const ProfilePage = () => { > {t('profile_questions')} -
    +
      {profileInfo.lastGame.map((question, index) => (