Routing, nav and login first version.

webapp/package.json

@@ -6,15 +6,18 @@
     "@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",
+    "react-router-dom": "^6.22.2",
     "react-scripts": "^5.0.1",
     "web-vitals": "^3.5.1"
   },

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);

webapp/src/App.tsx

@@ -1,51 +1,12 @@
-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 GoogleLoginMenu from './components/GoogleLoginMenu'; */
+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() {
-  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 (
-    <Container component="main" maxWidth="xs">
-      <CssBaseline />
-      <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-        {t('app_name')}
-      </Typography>
-
-      {showInit ? 
-       <Init changeView={handleLoginRegisterToggleView}/*  changeGoogleView={handleGoogleViewChange} */ />
-       /* : showGoogleLM ?
-        <GoogleLoginMenu goBack={handleGoogleViewChange} /> */
-          : showLogin ?
-            <Login goBack={handleLoginRegisterToggleView} /> 
-            : <AddUser goBack={handleLoginRegisterToggleView} />}
-
-
-    </Container>
+    <BrowserRouter>
+      <AppRouter />
+    </BrowserRouter>
   );
 }
 

webapp/src/Router.tsx

@@ -0,0 +1,22 @@
+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";
+import { ScoreboardPage } from "./pages/scoreboard";
+
+export const AppRouter: React.FC<{}> = () => {
+  return (
+    <Routes>
+      <Route element={<RouterLayout />}>
+        /* when accessing /game or the other paths, it will be shown as the  
+            outlet inside the RouterLayout*/
+        <Route path="/game" element={<GamePage />} />
+        <Route path="/groups" element={<GroupsPage />} />
+        <Route path="/scoreboard" element={<ScoreboardPage />} />
+      </Route>
+      <Route path="/" element={<InitPage/>} />
+    </Routes>
+  );
+};

webapp/src/common/Nav.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import './nav.css';
+import { useTranslation } from 'react-i18next';
+import {AppBar, 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 (
+        <AppBar className="nav_appBar">
+            <Toolbar>
+                <Container maxWidth="xl">
+                    <Grid
+                    container
+                    direction="row"
+                    alignItems="center"
+                    >
+                        <Grid item className="logo">
+                            {t('app_name')}
+                        </Grid>
+                        <Grid item>
+                            <Stack direction="row" spacing={2}>
+                                <Button variant="contained" onClick={() => navigate("/game")}>
+                                    {t('nav_game')}
+                                </Button>
+                                <Button variant="contained" onClick={() => navigate("/groups")}>
+                                    {t('nav_groups')}
+                                </Button>
+                                <Button variant="contained" onClick={() => navigate("/scoreboard")}>
+                                    {t('nav_scoreboard')}
+                                </Button>
+                        </Stack>
+                    </Grid>
+                    </Grid>
+                </Container>
+            </Toolbar>
+        </AppBar>
+    )
+};
+
+export default NavBar;

webapp/src/common/RouterLayout.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import  NavBar  from "./Nav";
+
+/* This shows the NavBar and behind the element passed <RouterLayout> here </RouterLayout> */
+export const RouterLayout: React.FC<{}> = () => {
+  return(
+    <>
+      <NavBar />
+      <Outlet />
+    </>
+  )
+};

webapp/src/common/nav.css

@@ -0,0 +1,30 @@
+.navbar {
+    width:100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+
+}
+
+.nav_appBar{
+    background: #D9D9D9;
+    position: fixed;
+    justify-content: space-between;
+}
+
+.logo{
+    font-weight: 500;
+    font-size: large;    
+}
+
+.link-container{
+    margin-right: 20px;
+    display:flex;
+    width: 300px;
+    justify-content: space-evenly;
+    cursor: pointer;
+}
+
+.link{
+    text-decoration: none;
+}

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; */
+export default GLoginButton; */
+
+import { GoogleLogin } from '@react-oauth/google';
+
+const GLoginButton = () => {
+
+    return(
+      <GoogleLogin
+         onSuccess={(credentialResponse) => {
+                console.log(credentialResponse);
+            }}
+         onError={() => {
+                console.log('Login Failed');
+            }}
+    />)
+}
+
+export default GLoginButton;

webapp/src/components/Game.tsx

@@ -0,0 +1,11 @@
+
+
+const Game = () => {
+    return (
+        <div>
+            <h1>Game</h1>
+        </div>
+    )
+}
+
+export default Game; // Export the 'Game' component