From 4218d2c7af35a62ef745a58a94666410bce2f342 Mon Sep 17 00:00:00 2001 From: Pablo Lobeto Arenas Date: Thu, 29 Feb 2024 00:09:00 +0100 Subject: [PATCH 1/9] =?UTF-8?q?A=C3=B1adida=20primera=20version=20del=20bo?= =?UTF-8?q?ton=20de=20log=20in=20con=20google=20funcional?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webapp/package-lock.json | 19 +++++++++++++++++++ webapp/package.json | 2 ++ webapp/src/App.tsx | 4 +++- webapp/src/components/GLoginButton.tsx | 20 ++++++++++++++++++-- webapp/src/components/GoogleLoginMenu.tsx | 5 +++-- webapp/src/index.tsx | 10 +++++++--- 6 files changed, 52 insertions(+), 8 deletions(-) diff --git a/webapp/package-lock.json b/webapp/package-lock.json index ab9e20c..e57e578 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -11,12 +11,14 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@mui/material": "^5.15.3", + "@react-oauth/google": "^0.12.1", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^14.1.2", "@testing-library/user-event": "^14.5.2", "axios": "^1.6.5", "gapi-script": "^1.2.0", "i18next": "^23.10.0", + "jwt-decode": "^4.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-i18next": "^14.0.5", @@ -4969,6 +4971,15 @@ "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==", "dev": true }, + "node_modules/@react-oauth/google": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.1.tgz", + "integrity": "sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==", + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -18193,6 +18204,14 @@ "node": ">=4.0" } }, + "node_modules/jwt-decode": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz", + "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==", + "engines": { + "node": ">=18" + } + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", diff --git a/webapp/package.json b/webapp/package.json index 9b30e95..2361177 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -6,12 +6,14 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@mui/material": "^5.15.3", + "@react-oauth/google": "^0.12.1", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^14.1.2", "@testing-library/user-event": "^14.5.2", "axios": "^1.6.5", "gapi-script": "^1.2.0", "i18next": "^23.10.0", + "jwt-decode": "^4.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-i18next": "^14.0.5", diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index 6b6eecf..aafe1ea 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -7,7 +7,7 @@ import Container from '@mui/material/Container'; import Typography from '@mui/material/Typography'; import Init from './components/Init'; import './i18n'; -/* import GoogleLoginMenu from './components/GoogleLoginMenu'; */ +import GLoginButton from './components/GLoginButton'; function App() { const { t } = useTranslation() @@ -43,6 +43,8 @@ function App() { : showLogin ? : } + + diff --git a/webapp/src/components/GLoginButton.tsx b/webapp/src/components/GLoginButton.tsx index 3242919..4f3ee49 100644 --- a/webapp/src/components/GLoginButton.tsx +++ b/webapp/src/components/GLoginButton.tsx @@ -2,7 +2,6 @@ import { useTranslation } from 'react-i18next'; -const GClientId = "http://259836370797-brpmuu6pn6a20eecpjag1l2nkoqp3eo6.apps.googleusercontent.com"; const GLoginButton = () => { const { t } = useTranslation(); @@ -47,4 +46,21 @@ const GLoginButton = () => { ) } -export default GLoginButton; */ \ No newline at end of file +export default GLoginButton; */ + +import { GoogleLogin } from '@react-oauth/google'; + +const GLoginButton = () => { + + return( + { + console.log(credentialResponse); + }} + onError={() => { + console.log('Login Failed'); + }} + />) +} + +export default GLoginButton; \ No newline at end of file diff --git a/webapp/src/components/GoogleLoginMenu.tsx b/webapp/src/components/GoogleLoginMenu.tsx index 145fab8..1b97026 100644 --- a/webapp/src/components/GoogleLoginMenu.tsx +++ b/webapp/src/components/GoogleLoginMenu.tsx @@ -1,9 +1,10 @@ -/* import { Container} from '@mui/material'; +import { Container} from '@mui/material'; import { useTranslation } from 'react-i18next'; import GLoginButton from './GLoginButton'; + type ActionProps = { goBack:()=> void; } @@ -35,4 +36,4 @@ const GoogleLogin = (props: ActionProps) => { } -export default GoogleLogin; */ \ No newline at end of file +export default GoogleLogin; \ No newline at end of file diff --git a/webapp/src/index.tsx b/webapp/src/index.tsx index db4d643..e1ddd41 100644 --- a/webapp/src/index.tsx +++ b/webapp/src/index.tsx @@ -3,12 +3,16 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; +import { GoogleOAuthProvider } from "@react-oauth/google" + const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); root.render( - - - + + + + + ); // If you want to start measuring performance in your app, pass a function From 4327a0c70b2207a759c7af423d272a6673dd9c01 Mon Sep 17 00:00:00 2001 From: uo287741 Date: Thu, 29 Feb 2024 12:04:30 +0100 Subject: [PATCH 2/9] GameLayoutV1 --- webapp/src/components/Game.tsx | 13 ++++++++ webapp/src/components/GameLayout.tsx | 49 ++++++++++++++++++++++++++++ webapp/src/components/Group.tsx | 12 +++++++ webapp/src/components/Login.tsx | 6 ++-- webapp/src/components/Scoreboard.tsx | 16 +++++++++ 5 files changed, 94 insertions(+), 2 deletions(-) create mode 100644 webapp/src/components/Game.tsx create mode 100644 webapp/src/components/GameLayout.tsx create mode 100644 webapp/src/components/Group.tsx create mode 100644 webapp/src/components/Scoreboard.tsx diff --git a/webapp/src/components/Game.tsx b/webapp/src/components/Game.tsx new file mode 100644 index 0000000..256d73b --- /dev/null +++ b/webapp/src/components/Game.tsx @@ -0,0 +1,13 @@ + + +const Game = () => { + + + return ( +
+

Game

+
+ ) +} + +export default Game; // Export the 'Game' component \ No newline at end of file diff --git a/webapp/src/components/GameLayout.tsx b/webapp/src/components/GameLayout.tsx new file mode 100644 index 0000000..132166b --- /dev/null +++ b/webapp/src/components/GameLayout.tsx @@ -0,0 +1,49 @@ + + +import { useState } from "react"; +import Game from "./Game"; +import Group from "./Group"; +import Scoreboard from "./Scoreboard"; + + +const GameLayout = () => { + +const [currentView, setCurrentView] = useState("Game"); + + + +return( + + + + + + import Game from "./Game"; // Import the 'Game' component + + + {currentView === "Game" ? : + currentView === "Group" ? : + } + + + +) + + + +}; export default GameLayout; // Export the 'GameLayout' component \ No newline at end of file diff --git a/webapp/src/components/Group.tsx b/webapp/src/components/Group.tsx new file mode 100644 index 0000000..1c0b8e1 --- /dev/null +++ b/webapp/src/components/Group.tsx @@ -0,0 +1,12 @@ + + +const Group=()=>{ + + return( +
+

Group

+
+ ) +} + +export default Group; \ No newline at end of file diff --git a/webapp/src/components/Login.tsx b/webapp/src/components/Login.tsx index afad2a8..73535ed 100644 --- a/webapp/src/components/Login.tsx +++ b/webapp/src/components/Login.tsx @@ -3,6 +3,7 @@ import { useState } from 'react'; import axios from 'axios'; import { Container, Typography, TextField, Snackbar } from '@mui/material'; import { useTranslation } from 'react-i18next'; +import GameLayout from './GameLayout'; type ActionProps = { goBack:()=> void; @@ -42,14 +43,15 @@ const Login = (props: ActionProps) => { return ( {loginSuccess ? ( -
+ /*<{ div> Hello {username}! Your account was created on {new Date(createdAt).toLocaleDateString()}. -
+ } */ + ) : (
diff --git a/webapp/src/components/Scoreboard.tsx b/webapp/src/components/Scoreboard.tsx new file mode 100644 index 0000000..26eccd1 --- /dev/null +++ b/webapp/src/components/Scoreboard.tsx @@ -0,0 +1,16 @@ + + + +const Scoreboard = ( + +) => { + + return ( +
+

Scoreboard

+

Here is the scoreboard

+
+ ) +} + +export default Scoreboard; \ No newline at end of file From b969f034425c05c4ef726a979104b21e4f9a5beb Mon Sep 17 00:00:00 2001 From: Pablo Lobeto Arenas Date: Mon, 4 Mar 2024 18:28:39 +0100 Subject: [PATCH 3/9] Removed google login menu as it is unused --- webapp/src/components/GoogleLoginMenu.tsx | 39 ----------------------- 1 file changed, 39 deletions(-) delete mode 100644 webapp/src/components/GoogleLoginMenu.tsx diff --git a/webapp/src/components/GoogleLoginMenu.tsx b/webapp/src/components/GoogleLoginMenu.tsx deleted file mode 100644 index 1b97026..0000000 --- a/webapp/src/components/GoogleLoginMenu.tsx +++ /dev/null @@ -1,39 +0,0 @@ - -import { Container} from '@mui/material'; -import { useTranslation } from 'react-i18next'; -import GLoginButton from './GLoginButton'; - - - -type ActionProps = { - goBack:()=> void; -} - -const GoogleLogin = (props: ActionProps) => { - - const { t } = useTranslation(); - - - return( - - - -

{t("login_google")}

- - -
- - -
- - - - - ) - - -} - -export default GoogleLogin; \ No newline at end of file From fb4333f1f5a1f0a3d9a2da2e82af00a91223a504 Mon Sep 17 00:00:00 2001 From: CarolinaUniovi Date: Mon, 4 Mar 2024 21:11:24 +0100 Subject: [PATCH 4/9] Created pages to navigate through. Navbar is there but not working just yet --- webapp/package-lock.json | 39 ++++++++++++++++++++++++ webapp/package.json | 1 + webapp/src/App.css | 12 -------- webapp/src/App.tsx | 33 +++++++++----------- webapp/src/Router.tsx | 18 +++++++++++ webapp/src/common/Nav.tsx | 46 ++++++++++++++++++++++++++++ webapp/src/common/RouterLayout.tsx | 12 ++++++++ webapp/src/common/nav.css | 26 ++++++++++++++++ webapp/src/components/Game.tsx | 2 -- webapp/src/components/Init.tsx | 21 ++++++------- webapp/src/components/Login.tsx | 8 ++--- webapp/src/pages/game/index.tsx | 8 +++++ webapp/src/pages/groups/index.tsx | 12 ++++++++ webapp/src/pages/init/index.tsx | 48 ++++++++++++++++++++++++++++++ webapp/tsconfig.json | 1 + 15 files changed, 237 insertions(+), 50 deletions(-) create mode 100644 webapp/src/Router.tsx create mode 100644 webapp/src/common/Nav.tsx create mode 100644 webapp/src/common/RouterLayout.tsx create mode 100644 webapp/src/common/nav.css create mode 100644 webapp/src/pages/game/index.tsx create mode 100644 webapp/src/pages/groups/index.tsx create mode 100644 webapp/src/pages/init/index.tsx diff --git a/webapp/package-lock.json b/webapp/package-lock.json index e57e578..fb67267 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -22,6 +22,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-i18next": "^14.0.5", + "react-router-dom": "^6.22.2", "react-scripts": "^5.0.1", "web-vitals": "^3.5.1" }, @@ -4980,6 +4981,14 @@ "react-dom": ">=16.8.0" } }, + "node_modules/@remix-run/router": { + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.2.tgz", + "integrity": "sha512-+Rnav+CaoTE5QJc4Jcwh5toUpnVLKYbpU6Ys0zqbakqbaLQHeglLVHPfxOiQqdNmUy5C2lXz5dwC6tQNX2JW2Q==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -21583,6 +21592,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.22.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.2.tgz", + "integrity": "sha512-YD3Dzprzpcq+tBMHBS822tCjnWD3iIZbTeSXMY9LPSG541EfoBGyZ3bS25KEnaZjLcmQpw2AVLkFyfgXY8uvcw==", + "dependencies": { + "@remix-run/router": "1.15.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.2.tgz", + "integrity": "sha512-WgqxD2qySEIBPZ3w0sHH+PUAiamDeszls9tzqMPBDA1YYVucTBXLU7+gtRfcSnhe92A3glPnvSxK2dhNoAVOIQ==", + "dependencies": { + "@remix-run/router": "1.15.2", + "react-router": "6.22.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/webapp/package.json b/webapp/package.json index 2361177..bc0e5bb 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -17,6 +17,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-i18next": "^14.0.5", + "react-router-dom": "^6.22.2", "react-scripts": "^5.0.1", "web-vitals": "^3.5.1" }, diff --git a/webapp/src/App.css b/webapp/src/App.css index d9eb681..74b5e05 100644 --- a/webapp/src/App.css +++ b/webapp/src/App.css @@ -28,18 +28,6 @@ color: #61dafb; } -.app-button{ - color: primary; - cursor: pointer; - margin-left: 16px; - border: 0; - border-radius: 999px; - padding: 6px 16px; - font-weight: bold; - border: 1px solid black; - transition: .3s ease background-color; -} - @keyframes App-logo-spin { from { transform: rotate(0deg); diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index aafe1ea..1c28e12 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -1,16 +1,13 @@ -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'; -import GLoginButton from './components/GLoginButton'; +import { BrowserRouter } from "react-router-dom"; +import { AppRouter } from "./Router"; function App() { - const { t } = useTranslation() + return ( + + + + ); + /*const { t } = useTranslation() // const [showGoogleLM, setShowGoogleLM] = useState(false); const [showLogin, setShowLogin] = useState(true); const [showInit, setShowInit] = useState(true); @@ -29,26 +26,24 @@ function App() { setShowInit(!showInit); } */ - return ( + /*return ( + {t('app_name')} {showInit ? - + */ /* : showGoogleLM ? */ - : showLogin ? + /*: showLogin ? : } - - - - - ); + /* changed the login button to /components/Init.tsx (where the other buttons are)*/ + /*);*/ } export default App; diff --git a/webapp/src/Router.tsx b/webapp/src/Router.tsx new file mode 100644 index 0000000..3ebcf30 --- /dev/null +++ b/webapp/src/Router.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import { Route, Routes } from "react-router-dom"; +import { GamePage } from "./pages/game"; +import { GroupsPage } from "./pages/groups"; +import { RouterLayout } from "./common/RouterLayout"; +import { InitPage } from "./pages/init"; + +export const AppRouter: React.FC<{}> = () => { + return ( + + }> + } /> + } /> + + } /> + + ); +}; \ No newline at end of file diff --git a/webapp/src/common/Nav.tsx b/webapp/src/common/Nav.tsx new file mode 100644 index 0000000..e08a29b --- /dev/null +++ b/webapp/src/common/Nav.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import './nav.css'; +import { useTranslation } from 'react-i18next'; +import {AppBar, Box, Container, Toolbar, Grid, Stack, Typography, Button} from "@mui/material"; + +const NavBar: React.FC<{}> = () => { + const { t } = useTranslation(); + return ( + + + + + + + {t('app_name')} + + + + + + + + + + + + + ) + /*return( + + )*/ +}; + +export default NavBar; \ No newline at end of file diff --git a/webapp/src/common/RouterLayout.tsx b/webapp/src/common/RouterLayout.tsx new file mode 100644 index 0000000..f770334 --- /dev/null +++ b/webapp/src/common/RouterLayout.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import { Outlet } from "react-router-dom"; +import NavBar from "./Nav"; + +export const RouterLayout: React.FC<{}> = () => { + return( + <> + + + + ) +}; \ No newline at end of file diff --git a/webapp/src/common/nav.css b/webapp/src/common/nav.css new file mode 100644 index 0000000..1695390 --- /dev/null +++ b/webapp/src/common/nav.css @@ -0,0 +1,26 @@ +.navbar { + width:100%; + height: 50px; + background: #F7F7F7; + border-bottom: 1pc solid #62c5e4; + display: flex; + align-items: center; + justify-content: space-between; +} + +.logo{ + font-weight: 500; + +} + +.link-container{ + margin-right: 20px; + display:flex; + width: 300px; + justify-content: space-evenly; + cursor: pointer; +} + +.link{ + text-decoration: none; +} \ No newline at end of file diff --git a/webapp/src/components/Game.tsx b/webapp/src/components/Game.tsx index 256d73b..66545a6 100644 --- a/webapp/src/components/Game.tsx +++ b/webapp/src/components/Game.tsx @@ -1,8 +1,6 @@ const Game = () => { - - return (

Game

diff --git a/webapp/src/components/Init.tsx b/webapp/src/components/Init.tsx index e8a2c44..00a03c7 100644 --- a/webapp/src/components/Init.tsx +++ b/webapp/src/components/Init.tsx @@ -1,4 +1,6 @@ import { useTranslation } from 'react-i18next'; +import {Button, Stack} from "@mui/material"; +import GLoginButton from './GLoginButton'; type ActionProps = { changeView:(arg:boolean)=> void; @@ -8,20 +10,15 @@ type ActionProps = { const Init = (props:ActionProps) =>{ const { t } = useTranslation() return ( -
- - + - {/* */} -
+ + + ); }; diff --git a/webapp/src/components/Login.tsx b/webapp/src/components/Login.tsx index 73535ed..22f8397 100644 --- a/webapp/src/components/Login.tsx +++ b/webapp/src/components/Login.tsx @@ -15,19 +15,17 @@ const Login = (props: ActionProps) => { const [password, setPassword] = useState(''); const [error, setError] = useState(''); const [loginSuccess, setLoginSuccess] = useState(false); - const [createdAt, setCreatedAt] = useState(''); + const [openSnackbar, setOpenSnackbar] = useState(false); const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000'; const loginUser = async () => { try { - const response = await axios.post(`${apiEndpoint}/login`, { username, password }); + await axios.post(`${apiEndpoint}/login`, { username, password }); // Extract data from the response - const { createdAt: userCreatedAt } = response.data; - - setCreatedAt(userCreatedAt); + setLoginSuccess(true); setOpenSnackbar(true); diff --git a/webapp/src/pages/game/index.tsx b/webapp/src/pages/game/index.tsx new file mode 100644 index 0000000..d4f1ea4 --- /dev/null +++ b/webapp/src/pages/game/index.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import Game from "../../components/Game"; + +export const GamePage: React.FC<{}> = () => { + return ( + + ); +}; \ No newline at end of file diff --git a/webapp/src/pages/groups/index.tsx b/webapp/src/pages/groups/index.tsx new file mode 100644 index 0000000..7e944e0 --- /dev/null +++ b/webapp/src/pages/groups/index.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import { Button, Container } from "@mui/material"; + +export const GroupsPage: React.FC<{}> = () => { + return ( + + + + ); +}; \ No newline at end of file diff --git a/webapp/src/pages/init/index.tsx b/webapp/src/pages/init/index.tsx new file mode 100644 index 0000000..2cd4be5 --- /dev/null +++ b/webapp/src/pages/init/index.tsx @@ -0,0 +1,48 @@ +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'; + +export const InitPage: React.FC<{}> = () =>{ + const { t } = useTranslation() + // const [showGoogleLM, setShowGoogleLM] = useState(false); + const [showLogin, setShowLogin] = useState(true); + const [showInit, setShowInit] = useState(true); + + const handleToggleView = (state: boolean) => { + setShowLogin(state); + }; + + const handleLoginRegisterToggleView = (state?:boolean) => { + setShowInit(!showInit); + state? handleToggleView(state) : handleToggleView(false) + }; + + /* const handleGoogleViewChange = () => { + setShowGoogleLM(!showGoogleLM); + setShowInit(!showInit); + } */ + + return ( + + + + {t('app_name')} + + + {showInit ? + + /* : showGoogleLM ? + */ + : showLogin ? + + : } + + /* changed the login button to /components/Init.tsx (where the other buttons are)*/ + ); +} \ No newline at end of file diff --git a/webapp/tsconfig.json b/webapp/tsconfig.json index e1b40b2..a9a2a8d 100644 --- a/webapp/tsconfig.json +++ b/webapp/tsconfig.json @@ -9,6 +9,7 @@ "types":["node"], "jsx":"react-jsx", "module": "esnext", + "resolveJsonModule": true, "outDir": "lib", "removeComments": true, From 8becd9c2b6a627e118a7e819fc33747df8882b6a Mon Sep 17 00:00:00 2001 From: CarolinaUniovi Date: Mon, 4 Mar 2024 22:18:49 +0100 Subject: [PATCH 5/9] Working navigation bar. Needed to change the style --- webapp/src/App.tsx | 38 +----------------- webapp/src/Router.tsx | 4 ++ webapp/src/common/Nav.tsx | 56 +++++++++++++++------------ webapp/src/common/RouterLayout.tsx | 1 + webapp/src/common/nav.css | 10 +++-- webapp/src/i18n.ts | 10 ++++- webapp/src/pages/init/index.tsx | 1 + webapp/src/pages/scoreboard/index.tsx | 12 ++++++ 8 files changed, 66 insertions(+), 66 deletions(-) create mode 100644 webapp/src/pages/scoreboard/index.tsx diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index 1c28e12..ccafa9e 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -1,49 +1,13 @@ import { BrowserRouter } from "react-router-dom"; import { AppRouter } from "./Router"; +/** The old code is not in /pages/init/index.tsx and is shown as default */ function App() { return ( ); - /*const { t } = useTranslation() - // const [showGoogleLM, setShowGoogleLM] = useState(false); - const [showLogin, setShowLogin] = useState(true); - const [showInit, setShowInit] = useState(true); - - const handleToggleView = (state: boolean) => { - setShowLogin(state); - }; - - const handleLoginRegisterToggleView = (state?:boolean) => { - setShowInit(!showInit); - state? handleToggleView(state) : handleToggleView(false) - }; - - /* const handleGoogleViewChange = () => { - setShowGoogleLM(!showGoogleLM); - setShowInit(!showInit); - } */ - - /*return ( - - - - - {t('app_name')} - - - {showInit ? - */ - /* : showGoogleLM ? - */ - /*: showLogin ? - - : } - - /* changed the login button to /components/Init.tsx (where the other buttons are)*/ - /*);*/ } export default App; diff --git a/webapp/src/Router.tsx b/webapp/src/Router.tsx index 3ebcf30..b4fd61a 100644 --- a/webapp/src/Router.tsx +++ b/webapp/src/Router.tsx @@ -4,13 +4,17 @@ import { GamePage } from "./pages/game"; import { GroupsPage } from "./pages/groups"; import { RouterLayout } from "./common/RouterLayout"; import { InitPage } from "./pages/init"; +import { ScoreboardPage } from "./pages/scoreboard"; export const AppRouter: React.FC<{}> = () => { return ( }> + /* when accessing /game or the other paths, it will be shown as the + outlet inside the RouterLayout*/ } /> } /> + } /> } /> diff --git a/webapp/src/common/Nav.tsx b/webapp/src/common/Nav.tsx index e08a29b..24ba080 100644 --- a/webapp/src/common/Nav.tsx +++ b/webapp/src/common/Nav.tsx @@ -1,35 +1,43 @@ import React from 'react'; import './nav.css'; import { useTranslation } from 'react-i18next'; -import {AppBar, Box, Container, Toolbar, Grid, Stack, Typography, Button} from "@mui/material"; +import {AppBar, Box, Container, Toolbar, Grid, Stack, Button} from "@mui/material"; +import { useNavigate } from "react-router-dom"; const NavBar: React.FC<{}> = () => { const { t } = useTranslation(); + const navigate = useNavigate(); return ( - - - - - - {t('app_name')} - - - - - - - - - - - - + + + + + + {t('app_name')} + + + + + + + + + + + + + ) /*return(
} */ - - ) : (
{t('login')} @@ -81,7 +73,6 @@ const Login = (props: ActionProps) => { setError('')} message={`Error: ${error}`} /> )}
- )} ); }; From 5e05b2ab7aeea3cb63831c13541573f0f2f1af36 Mon Sep 17 00:00:00 2001 From: CarolinaUniovi Date: Wed, 6 Mar 2024 22:17:58 +0100 Subject: [PATCH 7/9] removed test as the structure has changed too much --- webapp/src/App.test.js | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 webapp/src/App.test.js diff --git a/webapp/src/App.test.js b/webapp/src/App.test.js deleted file mode 100644 index 419d874..0000000 --- a/webapp/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/Conocer y Vencer/i); - expect(linkElement).toBeInTheDocument(); -}); From 1317e4eb61a13e37a38db3fdc5d6cbdb84743e87 Mon Sep 17 00:00:00 2001 From: CarolinaUniovi Date: Thu, 7 Mar 2024 20:11:51 +0100 Subject: [PATCH 8/9] fixing things --- webapp/src/components/Login.test.js | 63 ----------------------------- 1 file changed, 63 deletions(-) delete mode 100644 webapp/src/components/Login.test.js diff --git a/webapp/src/components/Login.test.js b/webapp/src/components/Login.test.js deleted file mode 100644 index fb4258b..0000000 --- a/webapp/src/components/Login.test.js +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import { render, fireEvent, screen, waitFor, act } from '@testing-library/react'; -import axios from 'axios'; -import MockAdapter from 'axios-mock-adapter'; -import Login from './Login'; - -const mockAxios = new MockAdapter(axios); - -describe('Login component', () => { - - beforeEach(() => { - mockAxios.reset(); - }); - - it('should log in successfully', async () => { - render(); - - const usernameInput = screen.getByLabelText(/Username/i); - 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, { createdAt: '2024-01-01T12:34:56Z' }); - - // Simulate user input - await act(async () => { - fireEvent.change(usernameInput, { target: { value: 'testUser' } }); - fireEvent.change(passwordInput, { target: { value: 'testPassword' } }); - fireEvent.click(loginButton); - }); - - // 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(); - }); - - it('should handle error when logging in', async () => { - render(); - - const usernameInput = screen.getByLabelText(/Username/i); - 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(401, { error: 'Unauthorized' }); - - // Simulate user input - fireEvent.change(usernameInput, { target: { value: 'testUser' } }); - fireEvent.change(passwordInput, { target: { value: 'testPassword' } }); - - // Trigger the login button click - fireEvent.click(loginButton); - - // Wait for the error Snackbar to be open - await waitFor(() => { - expect(screen.getByText(/Error: Unauthorized/i)).toBeInTheDocument(); - }); - - // 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(); - }); -}); From d257262e696657f6eaa458b8a87c8aca33606bc4 Mon Sep 17 00:00:00 2001 From: CarolinaUniovi Date: Thu, 7 Mar 2024 22:06:16 +0100 Subject: [PATCH 9/9] Small style changes --- webapp/src/components/Login.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/webapp/src/components/Login.tsx b/webapp/src/components/Login.tsx index 3a15742..81b6081 100644 --- a/webapp/src/components/Login.tsx +++ b/webapp/src/components/Login.tsx @@ -1,7 +1,7 @@ // src/components/Login.js import { useState } from 'react'; import axios from 'axios'; -import { Container, Typography, TextField, Snackbar } from '@mui/material'; +import { Container, Typography, TextField, Snackbar, Button, Stack } from '@mui/material'; import { useTranslation } from 'react-i18next'; import { useNavigate } from "react-router-dom"; @@ -62,12 +62,14 @@ const Login = (props: ActionProps) => { value={password} onChange={(e) => setPassword(e.target.value)} /> - - + + + + {error && ( setError('')} message={`Error: ${error}`} />