Conflicto solucionado

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 coverage
-docs/build
+docs/build
+.idea

users/userservice/user-service.js

@@ -31,6 +31,12 @@ app.post('/adduser', async (req, res) => {
         // Check if required fields are present in the request body
         validateRequiredFields(req, ['username', 'password']);
 
+        // Check if the user already exists
+        const existingUser = await User.findOne({ username: req.body.username });
+        if (existingUser) {
+            return res.status(400).json({ error: 'User already exists' });
+        }
+
         // Encrypt the password before saving it
         const hashedPassword = await bcrypt.hash(req.body.password, 10);
 

webapp/e2e/steps/register-form.steps.js

@@ -7,21 +7,18 @@ let page;
 let browser;
 
 defineFeature(feature, test => {
-  
+
   beforeAll(async () => {
     browser = process.env.GITHUB_ACTIONS
-      ? await puppeteer.launch()
-      : await puppeteer.launch({ headless: false, slowMo: 100 });
+        ? await puppeteer.launch()
+        : await puppeteer.launch({ headless: false, slowMo: 100 });
     page = await browser.newPage();
-    //Way of setting up the timeout
-    setDefaultOptions({ timeout: 10000 })
+    setDefaultOptions({ timeout: 10000 });
 
-    await page
-      .goto("http://localhost:3000", {
-        waitUntil: "networkidle0",
-      })
-      .catch(() => {});
-  });
+    await page.goto("http://localhost:3000/login", {
+      waitUntil: "networkidle0",
+    }).catch(() => {});
+  }, 60000);
 
   test('The user is not registered in the site', ({given,when,then}) => {
 
@@ -31,7 +28,7 @@ defineFeature(feature, test => {
     given('An unregistered user', async () => {
       username = "pablo"
       password = "pabloasw"
-      await expect(page).toClick("button", { text: "Don't have an account? Register here." });
+      await expect(page).toClick("a", { text: "Don't have an account? Register here." });
     });
 
     when('I fill the data in the form and press submit', async () => {

webapp/package.json

@@ -12,6 +12,7 @@
     "axios": "^1.6.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^3.5.1"
   },

webapp/public/index.html

@@ -10,6 +10,17 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.13.1/css/all.css"
+      integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q"
+      crossorigin="anonymous"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@700&display=swap"
+      rel="stylesheet"
+    />
+
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

webapp/public/manifest.json

@@ -22,4 +22,4 @@
   "display": "standalone",
   "theme_color": "#000000",
   "background_color": "#ffffff"
-}
+}

webapp/src/App.css

@@ -1,38 +1,6 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: 'PT Sans', sans-serif;
+}

webapp/src/App.js

@@ -1,38 +1,36 @@
-import React, { useState } from 'react';
-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 Link from '@mui/material/Link';
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Layout from './components/Layout'; // Asegúrate de importar el nuevo componente Layout
+import Home from './components/pages/Home';
+import Historial from './components/pages/Historial';
+import Jugar from './components/pages/Jugar';
+import SignUp from './components/AddUser';
+import LogIn from './components/Login';
+import { AuthProvider } from './AuthContext';
+import Logout from "./components/Logout";
+import AboutUS from "./components/pages/AboutUS";
+import Error404Page from "./components/pages/Error404Page";
 
 function App() {
-  const [showLogin, setShowLogin] = useState(true);
+    return (
+        <AuthProvider> {/* Envolver con AuthProvider */}
+            <Router>
+                <Routes>
+                    {/* Rutas que incluyen el Navbar a través del componente Layout */}
+                    <Route path="/" element={<Layout><Home /></Layout>} />
+                    <Route path="/historial" element={<Layout><Historial /></Layout>} />
+                    <Route path="/jugar" element={<Layout><Jugar /></Layout>} />
+                    <Route path="/sign-up" element={<Layout><SignUp /></Layout>} />
+                    <Route path="/logout" element={<Layout><Logout /></Layout>} />
+                    <Route path="/login" element={<Layout><LogIn /></Layout>} />
+                    <Route path="/aboutus" element={<Layout><AboutUS/></Layout>} />
 
-  const handleToggleView = () => {
-    setShowLogin(!showLogin);
-  };
-
-  return (
-    <Container component="main" maxWidth="xs">
-      <CssBaseline />
-      <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-        Welcome to wiq_es04d
-      </Typography>
-      {showLogin ? <Login /> : <AddUser />}
-      <Typography component="div" align="center" sx={{ marginTop: 2 }}>
-        {showLogin ? (
-          <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
-            Don't have an account? Register here.
-          </Link>
-        ) : (
-          <Link component="button" variant="body2" onClick={handleToggleView}>
-            Already have an account? Login here.
-          </Link>
-        )}
-      </Typography>
-    </Container>
-  );
+                    {/* Ruta NotFoundPage sin Layout para evitar mostrar el Navbar */}
+                    <Route path="*" element={<Error404Page />} />
+                </Routes>
+            </Router>
+        </AuthProvider>
+    );
 }
 
 export default App;

webapp/src/AuthContext.js

@@ -0,0 +1,25 @@
+// AuthContext.js
+import React, { createContext, useState } from 'react';
+
+export const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+    const [isLoggedIn, setIsLoggedIn] = useState(false);
+    const [username, setUsername] = useState("unknown"); // Cambio de "unknow" a "unknown"
+
+    const handleLogin = (username) => {
+        setIsLoggedIn(true);
+        setUsername(username); // Establecer el nombre de usuario al iniciar sesión
+    };
+
+    const handleLogout = () => {
+        setIsLoggedIn(false);
+        setUsername("unknown"); // Restablecer el nombre de usuario al cerrar sesión
+    };
+
+    return (
+        <AuthContext.Provider value={{ isLoggedIn, username, handleLogin, handleLogout }}>
+            {children}
+        </AuthContext.Provider>
+    );
+};