Ranking, stats y cambio de UI

webapp/package.json

@@ -3,13 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.3",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "axios": "^1.6.5",
+    "framer-motion": "^11.0.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.0",

webapp/src/App.css

@@ -6,71 +6,4 @@
   align-items: center;
   text-align: center;
   justify-content: space-between;
-  background-color: var(--background);
-  color: var(--text);
-
-  --shadow: rgba(0, 255, 192, 1);
-  --borders: #0F0F0F;
-  --background: #F0F0F0;
-  --text: #0F0F0F;
-}
-
-/* Estilos para el tema oscuro */
-#root[data-theme="light"] {
-  --shadow: rgba(0, 255, 192, 1);
-  --borders: #0F0F0F;
-  --background: #F0F0F0;
-  --text: #0F0F0F;
-}
-
-/* Estilos para el tema oscuro */
-#root[data-theme="dark"] {
-  --shadow: orange;
-  --borders: #F0F0F0;
-  --background: #0F0F0F;
-  --text: #F0F0F0;
-}
-
-h1 {
-  text-align: center;
 }
-
-input,
-button,
-a {
-  appearance: none;
-  background-color: transparent;
-  border: 0.13rem solid var(--borders);
-  border-radius: 15px;
-  box-sizing: border-box;
-  color: var(--text);
-  padding: 1rem;
-  text-align: center;
-  text-decoration: none;
-  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
-  user-select: none;
-  -webkit-user-select: none;
-  touch-action: manipulation;
-  width: 100%;
-  will-change: transform;
-  -webkit-box-shadow: 10px 10px 6px 0px var(--shadow);
-  -moz-box-shadow: 10px 10px 6px 0px var(--shadow);
-  box-shadow: 5px 5px 6px 0px var(--shadow);
-
-}
-
-input:hover,
-button:hover,
-a:hover {
-  -webkit-box-shadow: 0 0 0 0 #000, 0 0 0 2px var(--shadow);
-  box-shadow: 0 0 0 0 #000, 0 0 0 2px var(--shadow);
-}
-
-.logo {
-  font-family: oswald, sans-serif;
-  width: 100%;
-  font-size: 3rem;
-  font-weight: 700;
-  margin: 0;
-  text-shadow: 4px 4px 0 var(--shadow);
-}

webapp/src/App.js

@@ -1,5 +1,4 @@
 import React from "react";
-import Authenticate from "./pages/Authenticate/Authenticate.js";
 import Home from "./pages/Home/Home.js";
 import Clasico from "./pages/Clasico/Clasico.js";
 import Bateria from "./pages/Bateria/Bateria.js";
@@ -11,15 +10,17 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { ProtectedRoute } from "./routers/ProtectedRoute.js";
 import Sobre from "./pages/Sobre/Sobre.js";
 import Config from "./pages/Config/Config.js";
+import Login from "./components/Login/Login.js";
+import Register from "./components/Register/Register.js";
 
 function App() {
   return (
-    <BrowserRouter>
-      <Routes>
-        {/** Rutas públicas */}
-        <Route path="/" element={<Authenticate />} />
-        <Route path="/login" element={<Authenticate />} />
-
+      <BrowserRouter>
+        <Routes>
+          {/** Rutas públicas */}
+          <Route path="/" element={<Login />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/register" element={<Register />} />
         {/** Rutas privadas */}
         <Route element={<ProtectedRoute />}>
           <Route path="/home" element={<Home />} />
@@ -30,11 +31,20 @@ function App() {
           <Route path="/ranking" element={<Ranking />} />
           <Route path="/config" element={<Config />} />
         </Route>
+          {/** Rutas privadas */}
+          <Route element={<ProtectedRoute />}>
+            <Route path="/home" element={<Home />} />
+            <Route path="/sobre" element={<Sobre />} />
+            <Route path="/home/clasico" element={<Clasico />} />
+            <Route path="/home/bateria" element={<Bateria />} />
+            <Route path="/stats" element={<Stats />} />
+            <Route path="/config" element={<Config />} />
+          </Route>
 
-        {/* Ruta por defecto */}
-        <Route path="*" element={<WrongRoute />} />
-      </Routes>
-    </BrowserRouter>
+          {/* Ruta por defecto */}
+          <Route path="*" element={<WrongRoute />} />
+        </Routes>
+      </BrowserRouter>
   );
 }
 

webapp/src/components/CustomModal/CustomModal.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter } from '@chakra-ui/react';
+import { useDisclosure } from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
+
+const CustomModal = ({ title, text, route }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <Button onClick={onOpen}>{title}</Button>
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>{title}</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            {text}
+          </ModalBody>
+
+          <ModalFooter>
+            <Button colorScheme='blue' mr={3} onClick={onClose}>
+              Cerrar
+            </Button>
+            <Button variant='ghost' onClick={() => navigate(route)}>Jugar</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default CustomModal;

webapp/src/components/Footer/Footer.js

@@ -1,13 +1,17 @@
 import React from 'react';
-import './Footer.css';
+import { Box, Heading, Text, useColorMode } from '@chakra-ui/react';
 
 const Footer = () => {
+    const { colorMode } = useColorMode();
+    const bgColor = { light: 'gray.200', dark: 'gray.700' };
+    const textColor = { light: 'black', dark: 'white' };
+
     return(
-        <footer className="footer">
-            <h2>WIQ!</h2>
-            <p>Copyright 2024 ® Grupo 1A de Arquitectura del Software</p>
-        </footer>
+        <Box as="footer" textAlign="center" p={4} bg={bgColor[colorMode]} color={textColor[colorMode]} position="sticky" bottom="0" width="100%">
+            <Heading as="h2" fontSize="xl">WIQ!</Heading>
+            <Text fontSize="sm" mt={2}>Copyright 2024 ® Grupo 1A de Arquitectura del Software</Text>
+        </Box>
     );
 }
 
-export default Footer;
+export default Footer;

webapp/src/components/Login/Login.js

@@ -1,74 +1,131 @@
-// src/components/Login.js
-import React, { useState } from 'react';
-import axios from 'axios';
-import {useNavigate} from "react-router-dom";
-import './Login.css';
+import React, { useState } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import {
+  Link,
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Heading,
+  Alert,
+  AlertIcon,
+  useColorMode,
+  Switch,
+  Flex,
+  Spacer,
+} from "@chakra-ui/react";
+import Footer from "../Footer/Footer";
 
 const Login = () => {
+  const { colorMode, toggleColorMode } = useColorMode();
+  const isDarkTheme = colorMode === "dark";
+
   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 navigate = useNavigate();
 
   const apiEndpoint =
     process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000";
 
   const loginUser = async () => {
-    await axios
-      .post(`${apiEndpoint}/login`, { username, password })
-      .then((response) => {
-        const token = response.data;
-
-        setLoginSuccess(true);
-
-        setOpenSnackbar(true);
-        localStorage.setItem("token", token);
-
-        localStorage.setItem("username", username);
-      })
-      .catch((err) => {
-        setError(err.message);
+    try {
+      const response = await axios.post(`${apiEndpoint}/login`, {
+        username,
+        password,
       });
+      const token = response.data;
+
+      setLoginSuccess(true);
+      setOpenSnackbar(true);
+      localStorage.setItem("token", token);
+      localStorage.setItem("username", username);
+      navigate("/home");
+    } catch (err) {
+      setError(err.message);
+    }
   };
 
   return (
-    <div className="main">
-      <div className="login-container">
-        {loginSuccess ? (
-          navigate("/home")
-        ) : (
+    <>
+      <Flex alignItems="center" justifyContent="space-between" mt={4}>
+        <Spacer flex={0}/>
+        <Heading pl={6} as="h1" size="xl" color="teal.500">
+          WIQ
+        </Heading>
+        <Box pr={5}>
+          <Switch isChecked={isDarkTheme} onChange={toggleColorMode} />
+        </Box>
+      </Flex>
+
+      <Box
+        maxW="md"
+        mx="auto"
+        mt={8}
+        p={6}
+        borderWidth={1}
+        borderRadius={8}
+        boxShadow="lg"
+      >
+        {!loginSuccess && (
           <>
-            <h1 className="login-header">Identifícate</h1>
-            <label for="login-username">Introduce tu nombre:</label>
-            <input
-              className="login-input"
-              type="text"
-              placeholder="Username"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-            />
-            <label for="login-password">Introduce tu contraseña:</label>
-            <input
-              className="login-input"
-              type="password"
-              placeholder="Password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-            />
-            <button className="login-button" onClick={loginUser}>
+            <Heading as="h1" size="xl" mb={4}>
+              Identifícate
+            </Heading>
+            <FormControl>
+              <FormLabel htmlFor="login-username">
+                Introduce tu nombre:
+              </FormLabel>
+              <Input
+                id="login-username"
+                type="text"
+                placeholder="Username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
+            </FormControl>
+            <FormControl mt={4}>
+              <FormLabel htmlFor="login-password">
+                Introduce tu contraseña:
+              </FormLabel>
+              <Input
+                id="login-password"
+                type="password"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </FormControl>
+            <Button mt={4} colorScheme="blue" onClick={loginUser}>
               Login
-            </button>
+            </Button>
+            <Box mt={4}>
+              ¿No tienes cuenta?{" "}
+              <Link color="teal.500" href="/register">
+                Regístrate
+              </Link>
+            </Box>
             {openSnackbar && (
-              <div className="login-snackbar">Login successful</div>
+              <Alert status="success" mt={4}>
+                <AlertIcon />
+                Login successful
+              </Alert>
+            )}
+            {error && (
+              <Alert status="error" mt={4}>
+                <AlertIcon />
+                Error: {error}
+              </Alert>
             )}
-            {error && <div className="login-error">Error: {error}</div>}
           </>
         )}
-      </div>
-    </div>
+      </Box>
+      <Footer />
+    </>
   );
 };