Skip to content

Commit

Permalink
Merge pull request #64 from Arquisoft/Mejorar-IU
Browse files Browse the repository at this point in the history
Mejorar UI
  • Loading branch information
CANCI0 authored Mar 12, 2024
2 parents 2aa4151 + b615189 commit 534754d
Show file tree
Hide file tree
Showing 15 changed files with 282 additions and 197 deletions.
9 changes: 9 additions & 0 deletions webapp/src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -64,3 +64,12 @@ 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);
}
4 changes: 4 additions & 0 deletions webapp/src/components/Footer/Footer.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.footer{
border-top: 3px solid var(--borders);
width: 100%;
}
2 changes: 1 addition & 1 deletion webapp/src/components/Footer/Footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import './Footer.css';

const Footer = () => {
return(
<footer>
<footer className="footer">
<h2>WIQ!</h2>
<p>Copyright 2024 ® Grupo 1A de Arquitectura del Software</p>
</footer>
Expand Down
6 changes: 6 additions & 0 deletions webapp/src/components/Login/Login.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
.main .logo{
margin-top: 3rem;
}

.login-container {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
justify-content: center;
margin: auto 0;
}

.login-container h1{
Expand Down
118 changes: 56 additions & 62 deletions webapp/src/components/Login/Login.js
Original file line number Diff line number Diff line change
@@ -1,81 +1,75 @@
// 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 (
<div className="login-container">
{loginSuccess ? (
navigate("/home")
) : (
<>
<h1 className="login-header">Login</h1>
<input
className="login-input"
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<input
className="login-input"
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button className="login-button" onClick={loginUser}>
Login
</button>
{openSnackbar && (
<div className="login-snackbar">
Login successful
</div>
)}
{error && (
<div className="login-error">
Error: {error}
</div>
)}
</>
)}
<div className="main">
<div className="login-container">
{loginSuccess ? (
navigate("/home")
) : (
<>
<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}>
Login
</button>
{openSnackbar && (
<div className="login-snackbar">Login successful</div>
)}
{error && <div className="login-error">Error: {error}</div>}
</>
)}
</div>
)
}
</div>
);
};

export default Login;
57 changes: 28 additions & 29 deletions webapp/src/components/Nav/Nav.css
Original file line number Diff line number Diff line change
@@ -1,43 +1,42 @@
.logo {
font-family: oswald, sans-serif;
width: 100%;
font-size: 5rem;
font-weight: 700;
margin: 0;
text-shadow: 4px 4px 0 var(--shadow);
nav .logo{
margin-left: 3rem;
}

nav {
width: 80vw;
display: flex;
flex-wrap: wrap;
border: 3px solid var(--borders);
border-radius: 1rem;
padding: 1rem;
width: 100%;
display: grid;
grid-auto-flow: column;
border-bottom: 3px solid var(--borders);
justify-content: space-between;
align-items: center;
}

nav * {
margin: 1rem;
justify-content: center;
-webkit-box-shadow: 10px 10px 5px 0px var(--shadow);
-moz-box-shadow: 10px 10px 5px 0px var(--shadow);
box-shadow: 10px 10px 5px 0px var(--shadow);
}

nav ul {
display: flex;
justify-content: center;
flex-direction: row;
.menuItems *, .rightItems * {
height: 100%;
}

nav li {
display: flex;
flex-direction: row;
.rightItems{
display: grid;
grid-auto-flow: column;
column-gap: 2rem;
align-items: center;
}

.disconnect{
margin-left: auto;
}

.theme-toggle{
width: 5%;
height: 10%;
margin-left: 90%;
background-size: contain;
}

.disconnect{
margin-left: 70%;
.progressBar{
background-color: var(--shadow);
height: 1rem;
border-radius: 1rem;
margin-top: 0.5rem;
}
49 changes: 26 additions & 23 deletions webapp/src/components/Nav/Nav.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -19,31 +18,35 @@ const Nav = () => {

const Logout = () => {
localStorage.removeItem("token");
navigate("/")
navigate("/");
};

return (
<nav>
<input
type="checkbox"
class="theme-toggle"
onChange={toggleTheme}
checked={isDarkTheme}
value="Texto dentro del input"
/>
<h1 className="logo">WIQ!</h1>
<ul>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/sobre">Sobre nosotros</Link>
</li>
<li>
<Link to="/stats">Stats</Link>
</li>
</ul>
<button class="disconnect" onClick={() => Logout()}>Desconectarse</button>
<div className="menuItems">
<Link to="/home">Home</Link>
<Link to="/sobre">Sobre nosotros</Link>
<Link to="/stats">Stats</Link>
<Link to="/ranking">Ránking</Link>
</div>
<div className="rightItems">
<input
type="checkbox"
class="theme-toggle"
onChange={toggleTheme}
checked={isDarkTheme}
/>
<button className="profile">
Perfil
</button>
<button className="profile">
Opciones
</button>
<button className="disconnect" onClick={() => Logout()}>
Desconectarse
</button>
</div>
</nav>
);
};
Expand Down
15 changes: 15 additions & 0 deletions webapp/src/components/Register/Register.css
Original file line number Diff line number Diff line change
@@ -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;
}
Loading

0 comments on commit 534754d

Please sign in to comment.