First version of the profile view and user save through localStorage

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": [

webapp/src/App.tsx

@@ -1,12 +1,15 @@
 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 (
-    <BrowserRouter>
-      <AppRouter />
-    </BrowserRouter>
+      <BrowserRouter>
+        <AppRouter />      
+      </BrowserRouter>
   );
 }
 

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<{}> = () => {
         <Route path="/game" element={<GamePage />} />
         <Route path="/groups" element={<GroupsPage />} />
         <Route path="/scoreboard" element={<ScoreboardPage />} />
+        <Route path="/profile" element={<ProfilePage />} />
       </Route>
       <Route path="/" element={<InitPage/>} />
     </Routes>

webapp/src/common/Nav.tsx

@@ -1,12 +1,28 @@
-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 [anchorEl, setAnchorEl] = useState<null|HTMLElement>(null);
+    const open = Boolean(anchorEl)
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget)
+    }
+
+    const handleClose =() => {
+        setAnchorEl(null)
+    }
+
+    if(value === "false"){
+        navigate("/");
+    } 
+
     return (
         <AppBar className="nav_appBar">
             <Toolbar>
@@ -15,6 +31,7 @@ const NavBar: React.FC<{}> = () => {
                     container
                     direction="row"
                     alignItems="center"
+                    justifyContent="space-between"
                     >
                         <Grid item className="logo">
                             {t('app_name')}
@@ -30,9 +47,25 @@ const NavBar: React.FC<{}> = () => {
                                 <Button variant="contained" onClick={() => navigate("/scoreboard")}>
                                     {t('nav_scoreboard')}
                                 </Button>
-                        </Stack>
-                    </Grid>
+                            </Stack>
+                        </Grid>
+                        <Grid >
+                            <Button variant="text" 
+                                id="menu-button" 
+                                color='inherit' 
+                                onClick={handleClick} 
+                                aria-control={open? 'menu' : undefined} 
+                                aria-haspopup='true' aria-expanded={open? 'true' : undefined}>
+                                {user}
+                            </Button>
+                        </Grid>
                     </Grid>
+
+                    <Menu id="menu" open={open} MenuListProps={{'aria-labelledby':'menu-button'}} 
+                        onClose={()=>handleClose()} anchorEl={anchorEl}>
+                        <MenuItem onClick={()=> navigate("/profile")}>My account</MenuItem>
+                        <MenuItem onClick={()=> navigate("/")}>Logout</MenuItem>
+                    </Menu>
                 </Container>
             </Toolbar>
         </AppBar>

webapp/src/components/Login.tsx

@@ -1,46 +1,53 @@
 // 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";
 
+
 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 [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 });
 
+    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);
+      localStorage.setItem("nWins", user.data.nWins);
+      localStorage.setItem("uuid", user.data.uuid);
+      localStorage.setItem("isAuthenticated", JSON.stringify(true));
       // Extract data from the response
-
-      setLoginSuccess(true);
 
       setOpenSnackbar(true);
+      navigate("/game")
     } catch (error) {
       setError(error.response.data.error);
     }
   };
 
   const handleCloseSnackbar = () => {
     setOpenSnackbar(false);
-    if(loginSuccess)
-      navigate("/game");
   };
 
+
   return (
     <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
         <div>

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:',
                 }
             },
 

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 (
-    <Game/>
+    <Container sx={{ mt: 9 }} maxWidth="xl">
+      <Game/>
+    </Container>
   );
 };

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);
@@ -29,6 +29,8 @@ export const InitPage: React.FC<{}> = () =>{
     setShowInit(!showInit);
   } */
 
+  localStorage.clear();
+  localStorage.setItem("isAuthenticated", JSON.stringify(false));
   return (
     <Container component="main" maxWidth="xs">
       <CssBaseline />

webapp/src/pages/userProfile/index.tsx

@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next';
+import { Container } from '@mui/material';
+
+const ProfilePage = () => {
+    const { t } = useTranslation();
+    const user =  JSON.stringify(localStorage.getItem("username")).replace("\"", "").replace("\"", "");
+    const score = localStorage.getItem("totalScore");
+    const nwins =  localStorage.getItem("nwins");
+
+    return(
+        <Container sx={{ mt: 9 }} maxWidth="xl">
+            <div >
+                <p>{t('profile_name')} { user}</p>
+                <p>{t('profile_points')} { JSON.stringify(Number(score)) }</p>
+                <p>{t('profile_nwins')} { JSON.stringify(Number(nwins)) }</p>
+            </div>
+        </Container>
+    )
+}
+
+export default ProfilePage;