From 605f07d5ea323a7964ba97bb610870be60b4f396 Mon Sep 17 00:00:00 2001 From: CANCI0 Date: Mon, 11 Mar 2024 21:44:21 +0100 Subject: [PATCH 1/7] Mejoras en la interfaz del landing --- webapp/src/components/Login/Login.css | 1 + webapp/src/components/Login/Login.js | 62 +++++++-------- webapp/src/components/Register/Register.css | 15 ++++ webapp/src/components/Register/Register.js | 78 +++++++++++-------- .../src/pages/Authenticate/Authenticate.css | 8 ++ webapp/src/pages/Authenticate/Authenticate.js | 26 +++---- 6 files changed, 107 insertions(+), 83 deletions(-) create mode 100644 webapp/src/components/Register/Register.css create mode 100644 webapp/src/pages/Authenticate/Authenticate.css diff --git a/webapp/src/components/Login/Login.css b/webapp/src/components/Login/Login.css index c73fe721..99bf775f 100644 --- a/webapp/src/components/Login/Login.css +++ b/webapp/src/components/Login/Login.css @@ -2,6 +2,7 @@ display: grid; grid-template-columns: 1fr; gap: 1rem; + justify-content: center; } .login-container h1{ diff --git a/webapp/src/components/Login/Login.js b/webapp/src/components/Login/Login.js index 1704fd7a..ffbe342f 100644 --- a/webapp/src/components/Login/Login.js +++ b/webapp/src/components/Login/Login.js @@ -1,41 +1,37 @@ // 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 "./Login.css"; const Login = () => { - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); - const [error, setError] = useState(''); + 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 apiEndpoint = + process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000"; const loginUser = async () => { - try { - const response = await axios.post(`${apiEndpoint}/login`, { username, password }); - console.log(response); - // Extract data from the response - //const { createdAt: userCreatedAt } = response.data; - const token = response.data; - - //setCreatedAt(userCreatedAt); - setLoginSuccess(true); + await axios + .post(`${apiEndpoint}/login`, { username, password }) + .then((response) => { + const token = response.data; - setOpenSnackbar(true); - localStorage.setItem('token', token); + setLoginSuccess(true); - localStorage.setItem('username', username); + setOpenSnackbar(true); + localStorage.setItem("token", token); - } catch (error) { - //console.log(error); - setError(error.response.data.error); - } + localStorage.setItem("username", username); + }) + .catch((err) => { + setError(err.message); + }); }; return ( @@ -63,19 +59,13 @@ const Login = () => { Login {openSnackbar && ( -
- Login successful -
- )} - {error && ( -
- Error: {error} -
+
Login successful
)} + {error &&
Error: {error}
} )} - - ) -} + + ); +}; export default Login; diff --git a/webapp/src/components/Register/Register.css b/webapp/src/components/Register/Register.css new file mode 100644 index 00000000..ee1f0322 --- /dev/null +++ b/webapp/src/components/Register/Register.css @@ -0,0 +1,15 @@ +.register-container{ + display: grid; + grid-template-columns: 1fr; + gap: 1rem; + justify-content: center; + align-items: center; +} + +.register-container label{ + margin-top: 1rem; +} + +.register-button{ + box-shadow: none; +} \ No newline at end of file diff --git a/webapp/src/components/Register/Register.js b/webapp/src/components/Register/Register.js index 2b9e7742..11e16b44 100644 --- a/webapp/src/components/Register/Register.js +++ b/webapp/src/components/Register/Register.js @@ -1,14 +1,15 @@ -// src/components/AddUser.js -import React, { useState } from 'react'; -import axios from 'axios'; -import { Container, Typography, TextField, Button, Snackbar } from '@mui/material'; +import React, { useState } from "react"; +import axios from "axios"; +import "./Register.css"; -const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000'; +const apiEndpoint = + process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000"; const AddUser = () => { - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); - const [error, setError] = useState(''); + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + const [passwordR, setPasswordR] = useState(""); + const [error, setError] = useState(""); const [openSnackbar, setOpenSnackbar] = useState(false); const addUser = async () => { @@ -20,42 +21,53 @@ const AddUser = () => { } }; - const handleCloseSnackbar = () => { - setOpenSnackbar(false); + const handleRegister = () => { + if (password !== passwordR) { + setError("Las contraseñas no coinciden"); + return; + } + axios + .post(`${apiEndpoint}/adduser`, { username, password }) + .then(() => setOpenSnackbar(true)) + .catch((error) => setError(error.message)); }; return ( - - - Add User - - +

Regístrate

+ + setUsername(e.target.value)} /> - Introduce tu contraseña: + setPassword(e.target.value)} /> - - - {error && ( - setError('')} message={`Error: ${error}`} /> + + setPasswordR(e.target.value)} + /> + + {openSnackbar && ( +
Usuario registrado exitosamente
)} - + {error &&
Error: {error}
} + ); }; diff --git a/webapp/src/pages/Authenticate/Authenticate.css b/webapp/src/pages/Authenticate/Authenticate.css new file mode 100644 index 00000000..4840d467 --- /dev/null +++ b/webapp/src/pages/Authenticate/Authenticate.css @@ -0,0 +1,8 @@ +.gotoregister, +.gotologin { + box-shadow: none; + border: none; + text-decoration: underline; + padding: 0.2rem; + margin-top: 1rem; +} diff --git a/webapp/src/pages/Authenticate/Authenticate.js b/webapp/src/pages/Authenticate/Authenticate.js index 6517775d..3e28d3c4 100644 --- a/webapp/src/pages/Authenticate/Authenticate.js +++ b/webapp/src/pages/Authenticate/Authenticate.js @@ -2,10 +2,8 @@ import React, { useState } from 'react'; import AddUser from '../../components/Register/Register'; import Login from '../../components/Login/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 Footer from '../../components/Footer/Footer.js'; +import './Authenticate.css'; function Authenticate() { const [showLogin, setShowLogin] = useState(true); @@ -15,25 +13,25 @@ function Authenticate() { }; return ( - +
- - Bienvenido a WIQ - +

+ WIQ +

{showLogin ? : } - +
{showLogin ? ( - + ) : ( - + )} - +
- +
); } From b0baa59405b9a1aeca74dad72ed6996dabb8cf25 Mon Sep 17 00:00:00 2001 From: CANCI0 Date: Mon, 11 Mar 2024 22:03:35 +0100 Subject: [PATCH 2/7] Empezando cambios en el nav --- webapp/src/components/Login/Login.js | 2 +- webapp/src/components/Nav/Nav.css | 41 +++++++--------------- webapp/src/components/Nav/Nav.js | 28 ++++++--------- webapp/src/components/Register/Register.js | 9 ----- 4 files changed, 23 insertions(+), 57 deletions(-) diff --git a/webapp/src/components/Login/Login.js b/webapp/src/components/Login/Login.js index ffbe342f..b85456bd 100644 --- a/webapp/src/components/Login/Login.js +++ b/webapp/src/components/Login/Login.js @@ -40,7 +40,7 @@ const Login = () => { navigate("/home") ) : ( <> -

Login

+

Identifícate

*:not(.logo){ + height: 6.5%; + width: 10rem; + text-align: center; } \ No newline at end of file diff --git a/webapp/src/components/Nav/Nav.js b/webapp/src/components/Nav/Nav.js index 2acbaae5..8b772f1f 100644 --- a/webapp/src/components/Nav/Nav.js +++ b/webapp/src/components/Nav/Nav.js @@ -5,11 +5,10 @@ import "./Nav.css"; const Nav = () => { // Definimos el estado para controlar el tema actual const [isDarkTheme, setIsDarkTheme] = useState(false); - const navigate = useNavigate() - + const navigate = useNavigate(); + // Función para alternar entre temas claro y oscuro const toggleTheme = () => { - const root = document.getElementById("root"); const currentTheme = root.getAttribute("data-theme"); const newTheme = currentTheme === "light" ? "dark" : "light"; @@ -19,31 +18,24 @@ const Nav = () => { const Logout = () => { localStorage.removeItem("token"); - navigate("/") + navigate("/"); }; return ( ); }; diff --git a/webapp/src/components/Register/Register.js b/webapp/src/components/Register/Register.js index 11e16b44..5e96cc78 100644 --- a/webapp/src/components/Register/Register.js +++ b/webapp/src/components/Register/Register.js @@ -12,15 +12,6 @@ const AddUser = () => { const [error, setError] = useState(""); const [openSnackbar, setOpenSnackbar] = useState(false); - const addUser = async () => { - try { - await axios.post(`${apiEndpoint}/adduser`, { username, password }); - setOpenSnackbar(true); - } catch (error) { - setError(error.response.data.error); - } - }; - const handleRegister = () => { if (password !== passwordR) { setError("Las contraseñas no coinciden"); From e18ee47380c1c845e8ed3f8c487b0bdc91406c59 Mon Sep 17 00:00:00 2001 From: CANCI0 Date: Mon, 11 Mar 2024 22:44:02 +0100 Subject: [PATCH 3/7] Mejoras + barra de tiempo restante --- webapp/src/components/Nav/Nav.css | 40 ++++++++++++++++++++++------- webapp/src/components/Nav/Nav.js | 31 +++++++++++++--------- webapp/src/pages/Clasico/Clasico.js | 13 +++++++++- 3 files changed, 62 insertions(+), 22 deletions(-) diff --git a/webapp/src/components/Nav/Nav.css b/webapp/src/components/Nav/Nav.css index 3c4e8a99..e738f7e4 100644 --- a/webapp/src/components/Nav/Nav.css +++ b/webapp/src/components/Nav/Nav.css @@ -5,22 +5,44 @@ font-weight: 700; margin: 0; text-shadow: 4px 4px 0 var(--shadow); - justify-self: baseline; + margin-right: 3rem; } nav { width: 100%; - gap: 3rem; display: grid; grid-auto-flow: column; - border: 3px solid var(--borders); - justify-content: center; + border-bottom: 3px solid var(--borders); + justify-content: space-between; align-items: center; - padding: 1rem; } -nav > *:not(.logo){ - height: 6.5%; - width: 10rem; - text-align: center; +nav * { + margin: 1rem; +} + +.menuItems *, .rightItems * { + height: 100%; +} + +.rightItems{ + display: grid; + grid-auto-flow: column; + column-gap: 2rem; + align-items: center; +} + +.disconnect{ + margin-left: auto; +} + +.theme-toggle{ + background-size: contain; +} + +.progressBar{ + background-color: var(--shadow); + height: 1rem; + border-radius: 1rem; + margin-top: 0.5rem; } \ No newline at end of file diff --git a/webapp/src/components/Nav/Nav.js b/webapp/src/components/Nav/Nav.js index 8b772f1f..83a535ad 100644 --- a/webapp/src/components/Nav/Nav.js +++ b/webapp/src/components/Nav/Nav.js @@ -24,18 +24,25 @@ const Nav = () => { return ( ); }; diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js index 8b8b81be..181c9849 100644 --- a/webapp/src/pages/Clasico/Clasico.js +++ b/webapp/src/pages/Clasico/Clasico.js @@ -6,18 +6,20 @@ import Footer from "../../components/Footer/Footer.js"; const JuegoPreguntas = () => { const URL = process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000" + const SECS_PER_QUESTION = 10 const [isLoading, setIsLoading] = useState(true); const [indicePregunta, setIndicePregunta] = useState(0); const [puntuacion, setPuntuacion] = useState(0); const [respuestaSeleccionada, setRespuestaSeleccionada] = useState(null); - const [tiempoRestante, setTiempoRestante] = useState(10); + const [tiempoRestante, setTiempoRestante] = useState(SECS_PER_QUESTION); const [juegoTerminado, setJuegoTerminado] = useState(false); const [preguntaTerminada, setPreguntaTerminada] = useState(false); const [mostrarMenu, setMostrarMenu] = useState(false); // Estado para mostrar el menú al finalizar el juego const [preguntas, setPreguntas] = useState([]); const [preguntaActual, setPreguntaActual] = useState(""); const navigate = useNavigate(); + const [progressPercent, setProgressPercent] = useState(100); //Used for user stats const [preguntasCorrectas, setPreguntasCorrectas] = useState(0); @@ -47,6 +49,7 @@ const JuegoPreguntas = () => { },[]); useEffect(() => { + setProgressPercent( tiempoRestante / SECS_PER_QUESTION * 100); if (tiempoRestante === 0) { setPreguntaTerminada(true); setTimeout(() => { @@ -101,6 +104,8 @@ const JuegoPreguntas = () => { setRespuestaSeleccionada(null); setTiempoRestante(10); + setProgressPercent(100); + if (indicePregunta + 1 < preguntas.length) { setIndicePregunta(indicePregunta + 1); setPreguntaActual(preguntas[indicePregunta + 1]); @@ -196,6 +201,12 @@ const JuegoPreguntas = () => {
Tiempo restante: {tiempoRestante}
Puntuación: {puntuacion}
+
+
+
)}