From 87452eb08bf98ae1e73111ffb3a93176c62c2f74 Mon Sep 17 00:00:00 2001 From: CarolinaUniovi Date: Thu, 7 Mar 2024 23:47:20 +0100 Subject: [PATCH 1/8] starting the profile view --- webapp/src/Router.tsx | 2 ++ webapp/src/i18n.ts | 6 ++++++ webapp/src/pages/init/index.tsx | 2 +- webapp/src/pages/userProfile/index.tsx | 16 ++++++++++++++++ 4 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 webapp/src/pages/userProfile/index.tsx diff --git a/webapp/src/Router.tsx b/webapp/src/Router.tsx index b4fd61a..e973b9e 100644 --- a/webapp/src/Router.tsx +++ b/webapp/src/Router.tsx @@ -5,6 +5,7 @@ import { GroupsPage } from "./pages/groups"; import { RouterLayout } from "./common/RouterLayout"; import { InitPage } from "./pages/init"; import { ScoreboardPage } from "./pages/scoreboard"; +import ProfilePage from "./pages/userProfile"; export const AppRouter: React.FC<{}> = () => { return ( @@ -15,6 +16,7 @@ export const AppRouter: React.FC<{}> = () => { } /> } /> } /> + } /> } /> diff --git a/webapp/src/i18n.ts b/webapp/src/i18n.ts index a246b67..05d3fd3 100644 --- a/webapp/src/i18n.ts +++ b/webapp/src/i18n.ts @@ -21,6 +21,9 @@ i18n nav_game: 'Game', nav_groups: 'Groups', nav_scoreboard: 'Scoreboard', + profile_name:'Nombre:', + profile_email:'Email:', + profile_points:'Puntos totales:', } }, es: { @@ -34,6 +37,9 @@ i18n nav_game: 'Juego', nav_groups: 'Grupos', nav_scoreboard: 'Tabla de puntos', + profile_name:'Name:', + profile_email:'Email:', + profile_points:'Total points:', } }, diff --git a/webapp/src/pages/init/index.tsx b/webapp/src/pages/init/index.tsx index 9681d9a..6a92c3e 100644 --- a/webapp/src/pages/init/index.tsx +++ b/webapp/src/pages/init/index.tsx @@ -10,7 +10,7 @@ import '../../i18n'; /** Code that was beforehand in App.tsx */ export const InitPage: React.FC<{}> = () =>{ - const { t } = useTranslation() + const { t } = useTranslation(); // const [showGoogleLM, setShowGoogleLM] = useState(false); const [showLogin, setShowLogin] = useState(true); const [showInit, setShowInit] = useState(true); diff --git a/webapp/src/pages/userProfile/index.tsx b/webapp/src/pages/userProfile/index.tsx new file mode 100644 index 0000000..0ebeea4 --- /dev/null +++ b/webapp/src/pages/userProfile/index.tsx @@ -0,0 +1,16 @@ +import { useTranslation } from 'react-i18next'; + +const ProfilePage = () => { + const { t } = useTranslation(); + return( +
+
+

{t('profile_name')}

+

{t('profile_email')}

+

{t('profile_points')}

+
+
+ ) +} + +export default ProfilePage; \ No newline at end of file From 82f36e4682764ca668f8662d54f9287fdbe34399 Mon Sep 17 00:00:00 2001 From: CarolinaUniovi Date: Mon, 11 Mar 2024 02:28:15 +0100 Subject: [PATCH 2/8] UseContext not updating the data --- webapp/src/App.tsx | 20 +++++++++++++++++--- webapp/src/common/types.tsx | 10 ++++++++++ webapp/src/components/Login.tsx | 25 ++++++++++++++++++------- webapp/src/pages/game/index.tsx | 5 ++++- webapp/src/pages/userProfile/index.tsx | 12 ++++++++---- 5 files changed, 57 insertions(+), 15 deletions(-) create mode 100644 webapp/src/common/types.tsx diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index ccafa9e..b409ec4 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -1,12 +1,26 @@ import { BrowserRouter } from "react-router-dom"; import { AppRouter } from "./Router"; +import { createContext, useContext, useState } from "react" +import { User, UserContexType } from "./common/types"; + +export const UserContext = createContext({} as UserContexType); +export const UserData = () => useContext(UserContext); /** The old code is not in /pages/init/index.tsx and is shown as default */ function App() { + let myUser: User = { + name: "Usuario", points: "0", isAuthenticated: false + } + const [user, setUser] = useState(myUser); + + //const userProviderValue: UserContexType = useMemo(()=>({AuthUser : user, setAuthUser: setUser}), [user, setUser]) + return ( - - - + + + + + ); } diff --git a/webapp/src/common/types.tsx b/webapp/src/common/types.tsx new file mode 100644 index 0000000..9d21d86 --- /dev/null +++ b/webapp/src/common/types.tsx @@ -0,0 +1,10 @@ +export type User = { + name: string; + points: string; + isAuthenticated: boolean; + } + +export type UserContexType = { + AuthUser: User; + setAuthUser: (value: User) => void; +} \ No newline at end of file diff --git a/webapp/src/components/Login.tsx b/webapp/src/components/Login.tsx index 81b6081..5be6982 100644 --- a/webapp/src/components/Login.tsx +++ b/webapp/src/components/Login.tsx @@ -1,35 +1,47 @@ // src/components/Login.js -import { useState } from 'react'; +import { useState } from 'react'; import axios from 'axios'; import { Container, Typography, TextField, Snackbar, Button, Stack } from '@mui/material'; import { useTranslation } from 'react-i18next'; import { useNavigate } from "react-router-dom"; +import { UserData } from 'src/App'; +import { User } from "../common/types"; + type ActionProps = { goBack:()=> void; } + + const Login = (props: ActionProps) => { const navigate = useNavigate(); const { t } = useTranslation(); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); - const [loginSuccess, setLoginSuccess] = useState(false); - + const { setAuthUser} = UserData(); const [openSnackbar, setOpenSnackbar] = useState(false); const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000'; const loginUser = async () => { + try { await axios.post(`${apiEndpoint}/login`, { username, password }); + + var user:User = { + name: username, + points: "10", + isAuthenticated: true + } + + setAuthUser(user); // Extract data from the response - - setLoginSuccess(true); setOpenSnackbar(true); + navigate("/game") } catch (error) { setError(error.response.data.error); } @@ -37,10 +49,9 @@ const Login = (props: ActionProps) => { const handleCloseSnackbar = () => { setOpenSnackbar(false); - if(loginSuccess) - navigate("/game"); }; + return (
diff --git a/webapp/src/pages/game/index.tsx b/webapp/src/pages/game/index.tsx index d4f1ea4..6300a1b 100644 --- a/webapp/src/pages/game/index.tsx +++ b/webapp/src/pages/game/index.tsx @@ -1,8 +1,11 @@ import React from "react"; import Game from "../../components/Game"; +import { Container } from "@mui/material"; export const GamePage: React.FC<{}> = () => { return ( - + + + ); }; \ No newline at end of file diff --git a/webapp/src/pages/userProfile/index.tsx b/webapp/src/pages/userProfile/index.tsx index 0ebeea4..054b5dc 100644 --- a/webapp/src/pages/userProfile/index.tsx +++ b/webapp/src/pages/userProfile/index.tsx @@ -1,15 +1,19 @@ import { useTranslation } from 'react-i18next'; +import { UserData } from 'src/App'; +import { Container } from '@mui/material'; const ProfilePage = () => { const { t } = useTranslation(); + const {AuthUser} = UserData(); return( -
-
+ +

{t('profile_name')}

-

{t('profile_email')}

+

{AuthUser.name}

{t('profile_points')}

+

{AuthUser.points}

-
+ ) } From 95198edb6c1e8843eaf18f42c9e91193cf5a57e3 Mon Sep 17 00:00:00 2001 From: CarolinaUniovi Date: Mon, 11 Mar 2024 15:54:33 +0100 Subject: [PATCH 3/8] user saved with localStorage --- webapp/src/App.tsx | 14 +------------- webapp/src/common/types.tsx | 10 ---------- webapp/src/components/Login.tsx | 21 ++++++++------------- webapp/src/pages/userProfile/index.tsx | 13 +++++++------ 4 files changed, 16 insertions(+), 42 deletions(-) delete mode 100644 webapp/src/common/types.tsx diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index b409ec4..8387448 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -1,26 +1,14 @@ import { BrowserRouter } from "react-router-dom"; import { AppRouter } from "./Router"; -import { createContext, useContext, useState } from "react" -import { User, UserContexType } from "./common/types"; -export const UserContext = createContext({} as UserContexType); -export const UserData = () => useContext(UserContext); + /** The old code is not in /pages/init/index.tsx and is shown as default */ function App() { - let myUser: User = { - name: "Usuario", points: "0", isAuthenticated: false - } - const [user, setUser] = useState(myUser); - - //const userProviderValue: UserContexType = useMemo(()=>({AuthUser : user, setAuthUser: setUser}), [user, setUser]) - return ( - - ); } diff --git a/webapp/src/common/types.tsx b/webapp/src/common/types.tsx deleted file mode 100644 index 9d21d86..0000000 --- a/webapp/src/common/types.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export type User = { - name: string; - points: string; - isAuthenticated: boolean; - } - -export type UserContexType = { - AuthUser: User; - setAuthUser: (value: User) => void; -} \ No newline at end of file diff --git a/webapp/src/components/Login.tsx b/webapp/src/components/Login.tsx index 5be6982..7fa80d5 100644 --- a/webapp/src/components/Login.tsx +++ b/webapp/src/components/Login.tsx @@ -4,8 +4,6 @@ import axios from 'axios'; import { Container, Typography, TextField, Snackbar, Button, Stack } from '@mui/material'; import { useTranslation } from 'react-i18next'; import { useNavigate } from "react-router-dom"; -import { UserData } from 'src/App'; -import { User } from "../common/types"; type ActionProps = { @@ -20,7 +18,6 @@ const Login = (props: ActionProps) => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); - const { setAuthUser} = UserData(); const [openSnackbar, setOpenSnackbar] = useState(false); const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000'; @@ -28,16 +25,14 @@ const Login = (props: ActionProps) => { const loginUser = async () => { try { - await axios.post(`${apiEndpoint}/login`, { username, password }); - - var user:User = { - name: username, - points: "10", - isAuthenticated: true - } - - - setAuthUser(user); + 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); + localStorage.setItem("nWins", user.data.nWins); + localStorage.setItem("uuid", user.data.uuid); // Extract data from the response setOpenSnackbar(true); diff --git a/webapp/src/pages/userProfile/index.tsx b/webapp/src/pages/userProfile/index.tsx index 054b5dc..0efe90f 100644 --- a/webapp/src/pages/userProfile/index.tsx +++ b/webapp/src/pages/userProfile/index.tsx @@ -1,17 +1,18 @@ import { useTranslation } from 'react-i18next'; -import { UserData } from 'src/App'; import { Container } from '@mui/material'; const ProfilePage = () => { const { t } = useTranslation(); - const {AuthUser} = UserData(); + const user = localStorage.getItem("username"); + const score = localStorage.getItem("totalScore"); + const nwins = localStorage.getItem("nwins"); + return(
-

{t('profile_name')}

-

{AuthUser.name}

-

{t('profile_points')}

-

{AuthUser.points}

+

{t('profile_name')} { JSON.stringify(user)}

+

{t('profile_points')} { JSON.stringify(Number(score)) }

+

{t('profile_nwins')} { JSON.stringify(Number(nwins)) }

 ) From c5e98fde895189069b352beb709cd75770e54696 Mon Sep 17 00:00:00 2001 From: CarolinaUniovi Date: Mon, 11 Mar 2024 16:09:03 +0100 Subject: [PATCH 4/8] removed quotation marks from the json stringify --- webapp/src/pages/userProfile/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/webapp/src/pages/userProfile/index.tsx b/webapp/src/pages/userProfile/index.tsx index 0efe90f..37da729 100644 --- a/webapp/src/pages/userProfile/index.tsx +++ b/webapp/src/pages/userProfile/index.tsx @@ -3,14 +3,14 @@ import { Container } from '@mui/material'; const ProfilePage = () => { const { t } = useTranslation(); - const user = localStorage.getItem("username"); + const user = JSON.stringify(localStorage.getItem("username")).replace("\"", "").replace("\"", ""); const score = localStorage.getItem("totalScore"); - const nwins = localStorage.getItem("nwins"); + const nwins = localStorage.getItem("nwins"); return(
-

{t('profile_name')} { JSON.stringify(user)}

+

{t('profile_name')} { user}

{t('profile_points')} { JSON.stringify(Number(score)) }

{t('profile_nwins')} { JSON.stringify(Number(nwins)) }

From d5e99e77fdafd5490c505f0bd0d87ff3d0bcf619 Mon Sep 17 00:00:00 2001 From: CarolinaUniovi Date: Mon, 11 Mar 2024 18:46:48 +0100 Subject: [PATCH 5/8] only authenticated users are allowed to enter the application --- webapp/src/App.tsx | 1 + webapp/src/common/Nav.tsx | 6 ++++++ webapp/src/components/Login.tsx | 1 + webapp/src/pages/init/index.tsx | 2 ++ 4 files changed, 10 insertions(+) diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index 8387448..792dc60 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -5,6 +5,7 @@ import { AppRouter } from "./Router"; /** The old code is not in /pages/init/index.tsx and is shown as default */ function App() { + return ( diff --git a/webapp/src/common/Nav.tsx b/webapp/src/common/Nav.tsx index ca76b40..337ac1c 100644 --- a/webapp/src/common/Nav.tsx +++ b/webapp/src/common/Nav.tsx @@ -7,6 +7,12 @@ import { useNavigate } from "react-router-dom"; const NavBar: React.FC<{}> = () => { const { t } = useTranslation(); const navigate = useNavigate(); + const value :string= JSON.stringify( localStorage.getItem("isAuthenticated")).replace("\"","").replace("\"",""); + + if(value === "false"){ + navigate("/"); + } + return ( diff --git a/webapp/src/components/Login.tsx b/webapp/src/components/Login.tsx index 7fa80d5..d07bece 100644 --- a/webapp/src/components/Login.tsx +++ b/webapp/src/components/Login.tsx @@ -33,6 +33,7 @@ const Login = (props: ActionProps) => { localStorage.setItem("score", user.data.totalScore); localStorage.setItem("nWins", user.data.nWins); localStorage.setItem("uuid", user.data.uuid); + localStorage.setItem("isAuthenticated", JSON.stringify(true)); // Extract data from the response setOpenSnackbar(true); diff --git a/webapp/src/pages/init/index.tsx b/webapp/src/pages/init/index.tsx index 6a92c3e..923a186 100644 --- a/webapp/src/pages/init/index.tsx +++ b/webapp/src/pages/init/index.tsx @@ -29,6 +29,8 @@ export const InitPage: React.FC<{}> = () =>{ setShowInit(!showInit); } */ + localStorage.clear(); + localStorage.setItem("isAuthenticated", JSON.stringify(false)); return ( From a0f21acf537b7b16038f812752742c22d3783f8d Mon Sep 17 00:00:00 2001 From: CarolinaUniovi Date: Mon, 11 Mar 2024 20:19:11 +0100 Subject: [PATCH 6/8] Working navBar. Position needs to be fixed --- webapp/package-lock.json | 23 +++++++++++++++++++++++ webapp/package.json | 3 ++- webapp/src/common/Nav.tsx | 21 +++++++++++++++++---- 3 files changed, 42 insertions(+), 5 deletions(-) diff --git a/webapp/package-lock.json b/webapp/package-lock.json index fb67267..9a82f2a 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -24,6 +24,7 @@ "react-i18next": "^14.0.5", "react-router-dom": "^6.22.2", "react-scripts": "^5.0.1", + "react-sf-building-blocks": "^1.0.87", "web-vitals": "^3.5.1" }, "devDependencies": { @@ -21423,6 +21424,17 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, + "node_modules/react-bootstrap-icons": { + "version": "1.11.3", + "resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.11.3.tgz", + "integrity": "sha512-f/DAy4UXnjdbaZyUcZKR2I3xim56uCznb9t+u3ojwzDG1p2RUrua/d8R4xplAQ8Bj/LVZwHVSrvO+npvp3l3pw==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": ">=16.8.6" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -22723,6 +22735,17 @@ "node": ">=10" } }, + "node_modules/react-sf-themes": { + "version": "1.0.24", + "resolved": "https://registry.npmjs.org/react-sf-themes/-/react-sf-themes-1.0.24.tgz", + "integrity": "sha512-oVV+aw5ElRTrGp/XyyiApQp9RYDLzKp6bVqDigjdLEwD8qZc/WhCVDSOVgWopMHfA3sYYSikZ1gZSjaSIqT2ZQ==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16.0.0||^17.0.0||^18.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/webapp/package.json b/webapp/package.json index 37bae60..c077597 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -19,6 +19,7 @@ "react-i18next": "^14.0.5", "react-router-dom": "^6.22.2", "react-scripts": "^5.0.1", + "react-sf-building-blocks": "^1.0.87", "web-vitals": "^3.5.1" }, "scripts": { @@ -28,7 +29,7 @@ "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!axios)/'", "test:e2e": "start-server-and-test 'node e2e/test-environment-setup.js' http://localhost:8000/health prod 3000 \"cd e2e && jest\"", "eject": "react-scripts eject", - "test-only:e2e":"cd e2e && jest" + "test-only:e2e": "cd e2e && jest" }, "eslintConfig": { "extends": [ diff --git a/webapp/src/common/Nav.tsx b/webapp/src/common/Nav.tsx index 337ac1c..1327535 100644 --- a/webapp/src/common/Nav.tsx +++ b/webapp/src/common/Nav.tsx @@ -1,13 +1,16 @@ -import React from 'react'; +import React, { useState } from 'react'; import './nav.css'; import { useTranslation } from 'react-i18next'; -import {AppBar, Container, Toolbar, Grid, Stack, Button} from "@mui/material"; +import {AppBar, Container, Toolbar, Grid, Stack, Button, Menu, MenuItem} from "@mui/material"; import { useNavigate } from "react-router-dom"; const NavBar: React.FC<{}> = () => { const { t } = useTranslation(); const navigate = useNavigate(); const value :string= JSON.stringify( localStorage.getItem("isAuthenticated")).replace("\"","").replace("\"",""); + const user = JSON.stringify(localStorage.getItem("username")).replace("\"", "").replace("\"", ""); + const [open, setOpenMenu] = useState(false); + if(value === "false"){ navigate("/"); @@ -36,9 +39,19 @@ const NavBar: React.FC<{}> = () => { - - + + + + + + + setOpenMenu(!open)}> + navigate("/profile")}>My account + navigate("/")}>Logout + From f507300a34e12bf10f95995268dd1af02d977031 Mon Sep 17 00:00:00 2001 From: CarolinaUniovi Date: Mon, 11 Mar 2024 20:30:31 +0100 Subject: [PATCH 7/8] Navigation done --- webapp/src/common/Nav.tsx | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/webapp/src/common/Nav.tsx b/webapp/src/common/Nav.tsx index 1327535..1d239af 100644 --- a/webapp/src/common/Nav.tsx +++ b/webapp/src/common/Nav.tsx @@ -9,8 +9,15 @@ const NavBar: React.FC<{}> = () => { const navigate = useNavigate(); const value :string= JSON.stringify( localStorage.getItem("isAuthenticated")).replace("\"","").replace("\"",""); const user = JSON.stringify(localStorage.getItem("username")).replace("\"", "").replace("\"", ""); - const [open, setOpenMenu] = useState(false); - + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl) + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget) + } + + const handleClose =() => { + setAnchorEl(null) + } if(value === "false"){ navigate("/"); @@ -24,6 +31,7 @@ const NavBar: React.FC<{}> = () => { container direction="row" alignItems="center" + justifyContent="space-between" > {t('app_name')} @@ -41,14 +49,20 @@ const NavBar: React.FC<{}> = () => { - - - setOpenMenu(!open)}> + handleClose()} anchorEl={anchorEl}> navigate("/profile")}>My account navigate("/")}>Logout From 0056203d33aba7dbdc731f5ca11f26685d2aea0e Mon Sep 17 00:00:00 2001 From: CarolinaUniovi Date: Mon, 11 Mar 2024 20:35:02 +0100 Subject: [PATCH 8/8] npm install needed? --- webapp/package-lock.json | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 9a82f2a..d1af8c5 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -22735,6 +22735,21 @@ "node": ">=10" } }, + "node_modules/react-sf-building-blocks": { + "version": "1.0.87", + "resolved": "https://registry.npmjs.org/react-sf-building-blocks/-/react-sf-building-blocks-1.0.87.tgz", + "integrity": "sha512-eOCXYQq4d5CH/pJy5K5IKwGGM71lxVc6d1fiRt/BcaGRoJm2k62ZxpluhoPo2YtGwd7IEW6Cu0xEDquW60glxQ==", + "dependencies": { + "react-bootstrap-icons": "^1.10.2", + "react-sf-themes": "^1.0.23" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16.0.0||^17.0.0||^18.0.0" + } + }, "node_modules/react-sf-themes": { "version": "1.0.24", "resolved": "https://registry.npmjs.org/react-sf-themes/-/react-sf-themes-1.0.24.tgz",