Jota

userservice/authservice/auth-service.js

@@ -31,7 +31,6 @@ app.post('/login', async (req, res) => {
     validateRequiredFields(req, ['username', 'password']);
 
     const { username, password } = req.body;
-    console.log("LLEGA")
     // Find the user by username in the database
     const user = await User.findOne({ username });
     // Check if the user exists and verify the password

webapp/src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
 import AddUser from './components/AddUser';
 import Layout from './components/Pages/Layout';
@@ -9,7 +9,14 @@ import Estadisticas from './components/Pages/Estadisticas';
 import NotFound from './components/Pages/NotFound';
 
 function App() {
-  const [isLogged, setIsLogged] = useState(true);
+  const [isLogged, setIsLogged] = useState(false);
+
+  useEffect(() => {
+    const storedIsLogged = localStorage.getItem('isLogged');
+    if (storedIsLogged) {
+      setIsLogged(JSON.parse(storedIsLogged));
+    }
+  }, []);
 
 //Si intenta acceder a una ruta privada (en este caso Estadistica) se le redirigira al login
 function PrivateRoute({ element, ...props }) {
@@ -20,19 +27,21 @@ function PrivateRoute({ element, ...props }) {
     <>
       <Layout/>
       <Router>
-      <Routes>
-        <Route path="/" element={<Home/>}></Route>
-        <Route path="/game" element={<Juego />} /> 
-        <Route path="/login" element={<Login />} />
-        <Route path="*" element={<NotFound />} />
-        <Route path="/register" element={<AddUser/>}/>
-
-        <Route
-            path="/stats"
-            element={<PrivateRoute element={<Estadisticas />} />}
-        />
+        <Routes>
+          <Route path="/" element={<Home isLogged={isLogged}/>}></Route>
+          <Route path="/game" 
+          element={<PrivateRoute element={<Juego isLogged={isLogged} />} />}
+          />
+          <Route path="/login" element={<Login isLogged={isLogged} setIsLogged={setIsLogged} />} />
+          <Route path="*" element={<NotFound />} />
+          <Route path="/register" element={<AddUser isLogged={isLogged}/>}/>
+
+          <Route
+              path="/stats"
+              element={<PrivateRoute element={<Estadisticas />} />}
+          />
 
-      </Routes>
+        </Routes>
       </Router>
     </>
   );

webapp/src/components/AddUser.js

@@ -5,7 +5,7 @@ import { Container, Typography, TextField, Button, Snackbar } from '@mui/materia
 
 const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
-const AddUser = () => {
+const AddUser = ({isLogged}) => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');

webapp/src/components/Login.js

@@ -3,26 +3,24 @@ import React, { useState } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
 
-const Login = () => {
+const Login = ({isLogged, setIsLogged}) => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
-  const [loginSuccess, setLoginSuccess] = useState(false);
   const [createdAt, setCreatedAt] = useState('');
   const [openSnackbar, setOpenSnackbar] = useState(false);
 
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
-
+  
   const loginUser = async () => {
     try {
       const response = await axios.post(`${apiEndpoint}/login`, { username, password });
-
       // Extract data from the response
-      const { createdAt: userCreatedAt } = response.data;
-
-      setCreatedAt(userCreatedAt);
-      setLoginSuccess(true);
+      const datos = response.data;
 
+      setCreatedAt(datos.createdAt);
+      setIsLogged(true);
+      localStorage.setItem('isLogged', JSON.stringify(true));
       setOpenSnackbar(true);
     } catch (error) {
       setError(error.response.data.error);
@@ -35,7 +33,7 @@ const Login = () => {
 
   return (
     <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
-      {loginSuccess ? (
+      {isLogged ? (
         <div>
           <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
             Hello {username}!

webapp/src/components/Pages/Home.js

@@ -5,7 +5,7 @@ import { Container, Button } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 
 // Definimos el componente Home
-const Home = () => {
+const Home = ({isLogged, setIsLogged}) => {
   // Utilizamos el hook useNavigate para la navegación
   const navigate = useNavigate();
 
@@ -21,20 +21,49 @@ const Home = () => {
     navigate("/stats");
   }
 
+  // Definimos la función que se ejecutará al hacer clic en el botón "Estadísticas"
+  const clickIniciar = () => {
+    // Navegamos a la ruta "/login"
+    navigate("/login");
+  }
+
+  // Definimos la función que se ejecutará al hacer clic en el botón "Estadísticas"
+  const clickRegistro = () => {
+    // Navegamos a la ruta "/register"
+    navigate("/register");
+  }
+
   // Renderizamos el componente
   return (
-    // Utilizamos un contenedor de Material-UI para centrar el contenido
-    <Container component="main" maxWidth="xs" sx={{ marginTop: 4, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-      {/* Mostramos el título del juego */}
-      <h1 className="titulo">WIQ 5A</h1>
-      {/* Creamos un contenedor para los botones */}
-      <div className="button-container">
-        {/* Creamos el botón "Jugar" y le asignamos la función clickJugar al evento onClick */}
-        <Button variant="contained" color="primary" className="button" id="btJugar" onClick={clickJugar}>JUGAR</Button>
-        {/* Creamos el botón "Estadísticas" y le asignamos la función clickEstadisticas al evento onClick */}
-        <Button variant="contained" color="secondary" className="button" id="btEstadisticas" onClick={clickEstadisticas}>ESTADÍSTICAS</Button>
-      </div>
-    </Container>
+    <>
+    {!isLogged ? (
+      <Container component="main" maxWidth="xs" sx={{ marginTop: 4, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        {/* Mostramos el título del juego */}
+        <h1 className="titulo">WIQ 5A</h1>
+        {/* Creamos un contenedor para los botones */}
+        <div className="button-container">
+          {/* Creamos el botón "Jugar" y le asignamos la función clickJugar al evento onClick */}
+          <Button variant="contained" color="primary" className="button" id="btJugar" onClick={clickIniciar}>INICIA SESIÓN</Button>
+          {/* Creamos el botón "Estadísticas" y le asignamos la función clickEstadisticas al evento onClick */}
+          <Button variant="contained" color="secondary" className="button" id="btEstadisticas" onClick={clickRegistro}>REGÍSTRATE</Button>
+        </div>
+      </Container>) : (
+        <Container component="main" maxWidth="xs" sx={{ marginTop: 4, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        {/* Mostramos el título del juego */}
+        <h1 className="titulo">WIQ 5A</h1>
+        {/* Creamos un contenedor para los botones */}
+        <div className="button-container">
+          {/* Creamos el botón "Jugar" y le asignamos la función clickJugar al evento onClick */}
+          <Button variant="contained" color="primary" className="button" id="btJugar" onClick={clickJugar}>JUGAR</Button>
+          {/* Creamos el botón "Estadísticas" y le asignamos la función clickEstadisticas al evento onClick */}
+          <Button variant="contained" color="secondary" className="button" id="btEstadisticas" onClick={clickEstadisticas}>ESTADÍSTICAS</Button>
+        </div>
+      </Container>
+      )
+    } 
+
+    </>
+
   );
 };
 

webapp/src/components/Pages/Layout.js

@@ -1,7 +1,7 @@
 import { Outlet, Link } from "react-router-dom";
 import {Container, Nav, Navbar, NavDropdown} from 'react-bootstrap';
 
-const Layout = () => {
+const Layout = (isLogged) => {
   return (
     <>
         <Navbar collapseOnSelect expand="lg" className="bg-body-tertiary">