Bug fixes and improvments

gatewayservice/middleware/DataValidatorMiddleware.js

@@ -11,6 +11,10 @@ module.exports = function (req, res, next) {
 
   // Signup password validation
   if(req.originalUrl === "/adduser") {
+    if (username.trim().length === 0) {
+      res.status(400).json({ error: "Username should not be empty" });
+      return;
+    }
     if (password.length < 8) {
       res.status(400).json({ error: "Password must be at least 8 characters long" });
       return;

webapp/src/App.jsx

@@ -8,7 +8,6 @@ import About from "./views/About";
 import Ranking from "./views/Ranking";
 import Menu from "./views/Menu";
 import Game from "./views/Game";
-import Logout from "./views/components/Logout"
 import Account from "./views/Account";
 import Error from "./views/Error";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
@@ -135,7 +134,6 @@ export default function App() {
           <Route path="/home" element={<Home />} />
           <Route path="/signup" element={<Signup />} />
           <Route path="/login" element={<Login/>} />
-          <Route path="/logout" element={<Logout />} />
           <Route path="/about" element={<About />} />
           <Route path="/ranking" element={<Ranking />} />
           <Route path="/menu" element={<Menu />} />

webapp/src/views/Menu.jsx

@@ -9,7 +9,13 @@ const buttonConfig = {
     height: "5rem",
 }
 
-const buttonGroup = {display: "flex", justifyContent: "space-evenly", margin: "1rem 0"}
+const buttonGroup = {
+    display: "flex",
+    flexFlow: "row wrap",
+    justifyContent: "space-evenly",
+    margin: "1rem 0",
+    gap: "1rem"
+}
 
 const MyButton = ({text, link}) => {
     return (

webapp/src/views/components/Nav.jsx

@@ -21,7 +21,7 @@ const settings = [
 
 export default function Nav() {
 
-    const { isAuthenticated, getUser } = useContext(AuthContext)
+    const { isAuthenticated, getUser, logout } = useContext(AuthContext)
     const [anchorElNav, setAnchorElNav] = useState(null);
     const [anchorElUser, setAnchorElUser] = useState(null);
     const [width, setWidth] = useState(window.innerWidth);
@@ -95,6 +95,21 @@ export default function Nav() {
         );
     };
 
+    const generateMenuItems = () => {
+      return settings.map((setting) => {
+        if (isAuthenticated() !== setting.logged) return null
+        return (
+          <MenuItem
+            key={setting.displayed}
+            onClick={setting.link === '/logout' ? () => {handleCloseUserMenu(); logout()} : handleCloseUserMenu}
+            component={Link}
+            to={setting.link === '/logout' ? "/" : setting.link}>
+            <Typography textAlign="center">{setting.displayed}</Typography>
+          </MenuItem>
+        )
+      })
+    }
+
   return (
     <AppBar position="sticky">
       <Container maxWidth="xl">
@@ -119,12 +134,7 @@ export default function Nav() {
               open={Boolean(anchorElUser)}
               onClose={handleCloseUserMenu}
             >
-              {settings.map((setting) => {
-                if (isAuthenticated() !== setting.logged) return null
-                return (<MenuItem key={setting.displayed} onClick={handleCloseUserMenu} component={Link} to={setting.link}>
-                  <Typography textAlign="center">{setting.displayed}</Typography>
-                </MenuItem>)
-              })}
+              {generateMenuItems()}
             </Menu>
           </Box>
         </Toolbar>