admin/DoC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: unificar estilos de login y register, simplificar header con un solo botón para acceder en lugar de dos para iniciar sesión y registrarse.

Browse Source 
Añadir confirmación de contraseña en el registro.
This commit is contained in:
Alexis
2026-04-14 13:35:54 +02:00
parent 66231f9b7c
commit 16f82945c8
3 changed files with 59 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/layout/Header.jsx
+11 -7
View File
@@ -32,7 +32,7 @@ export default function Header() {
</Link> </Link>
<div className="flex items-center gap-4 whitespace-nowrap"> <div className="flex items-center gap-4 whitespace-nowrap">
<div className="flex items-center gap-1 mr-4"> <div className="flex items-center gap-1 mr-2">
<Link to="/editor" className={`text-sm font-bold px-4 py-2 rounded-lg transition-all ${isActive('/editor') ? 'text-blue-600' : 'text-slate-600 hover:text-blue-500'}`}> <Link to="/editor" className={`text-sm font-bold px-4 py-2 rounded-lg transition-all ${isActive('/editor') ? 'text-blue-600' : 'text-slate-600 hover:text-blue-500'}`}>
Editor Editor
</Link> </Link>
@@ -44,10 +44,10 @@ export default function Header() {
</div> </div>
{isAuthenticated ? ( {isAuthenticated ? (
<div className="relative"> <div className="relative border-l border-slate-200 pl-4">
<button <button
onClick={() => setIsDropdownOpen(!isDropdownOpen)} onClick={() => setIsDropdownOpen(!isDropdownOpen)}
className="w-10 h-10 rounded-full bg-blue-100 text-blue-700 font-bold flex items-center justify-center border-2 border-blue-200 hover:bg-blue-200" className="w-10 h-10 rounded-full bg-blue-100 text-blue-700 font-bold flex items-center justify-center border-2 border-blue-200 hover:bg-blue-200 transition-colors"
> >
{userInitial} {userInitial}
</button> </button>
@@ -60,7 +60,7 @@ export default function Header() {
<p className="text-xs font-bold text-slate-400 uppercase tracking-wider">Usuario</p> <p className="text-xs font-bold text-slate-400 uppercase tracking-wider">Usuario</p>
<p className="text-sm font-bold text-slate-700 truncate">{user?.username}</p> <p className="text-sm font-bold text-slate-700 truncate">{user?.username}</p>
</div> </div>
<button onClick={handleLogout} className="w-full text-left px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50"> <button onClick={handleLogout} className="w-full text-left px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 transition-colors">
🚪 Cerrar Sesión 🚪 Cerrar Sesión
</button> </button>
</div> </div>
@@ -68,9 +68,13 @@ export default function Header() {
)} )}
</div> </div>
) : ( ) : (
<div className="flex items-center gap-2 ml-2 border-l border-slate-200 pl-4"> <div className="flex items-center border-l border-slate-200 pl-4">
<Link to="/login" className="text-sm font-bold text-slate-600 px-4 py-2 hover:text-blue-600">Entrar</Link> <Link
<Link to="/register" className="text-sm font-bold bg-blue-600 text-white px-4 py-2 rounded-lg shadow-sm">Registrarse</Link> to="/login"
className="text-sm font-bold bg-blue-600 text-white px-5 py-2.5 rounded-xl shadow-sm hover:bg-blue-700 transition-all active:scale-95"
>
Acceder
</Link>
</div> </div>
)} )}
</div> </div>
frontend/src/pages/Login.jsx
+7 -5
View File
@@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef } from 'react'; import { useState, useEffect, useRef } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom'; import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import { useAuth } from '../context/AuthContext'; import { useAuth } from '../context/AuthContext';
import { authService } from '../services/authService'; import { authService } from '../services/authService';
@@ -44,7 +44,9 @@ export default function Login() {
} catch (err) { } catch (err) {
console.error("Error al decodificar el token de Google:", err); console.error("Error al decodificar el token de Google:", err);
setError("Error al procesar el login con Google. El token está corrupto."); setTimeout(() => {
setError("Error al procesar el login con Google. El token está corrupto.");
}, 0);
} }
} }
}, [searchParams, login, navigate]); }, [searchParams, login, navigate]);
@@ -66,12 +68,12 @@ export default function Login() {
}; };
return ( return (
<div className="flex-1 flex items-center justify-center py-4"> <div className="flex-1 flex items-center justify-center">
<div className="max-w-md w-full bg-white p-10 rounded-3xl shadow-sm border border-slate-200"> <div className="max-w-md w-full bg-white p-10 rounded-3xl shadow-sm border border-slate-200">
<div className="text-center mb-8"> <div className="text-center mb-8">
<h2 className="text-3xl font-black text-slate-800 tracking-tight">Deck of Cards</h2> <h2 className="text-3xl font-black text-slate-800 tracking-tight">Iniciar sesión</h2>
<p className="text-slate-500 mt-2">Accede a tu panel de control</p> <p className="text-slate-500 mt-2">Únete para guardar tu progreso</p>
</div> </div>
{error && ( {error && (
frontend/src/pages/Register.jsx
+41 -36
View File
@@ -7,6 +7,7 @@ export default function Register() {
const [username, setUsername] = useState(''); const [username, setUsername] = useState('');
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [error, setError] = useState(''); const [error, setError] = useState('');
const navigate = useNavigate(); const navigate = useNavigate();
const { login } = useAuth(); const { login } = useAuth();
@@ -15,6 +16,11 @@ export default function Register() {
e.preventDefault(); e.preventDefault();
setError(''); setError('');
if (password !== confirmPassword) {
setError('Las contraseñas no coinciden. Por favor, revísalas.');
return;
}
try { try {
const data = await authService.register(username, email, password); const data = await authService.register(username, email, password);
@@ -32,69 +38,68 @@ export default function Register() {
}; };
return ( return (
<div className="flex justify-center mt-4 sm:mt-8"> <div className="flex-1 flex items-center justify-center">
<div className="max-w-md w-full bg-white rounded-2xl shadow-sm border border-slate-200 p-8"> <div className="max-w-md w-full bg-white p-10 rounded-3xl shadow-sm border border-slate-200">
<div className="text-center mb-8"> <div className="text-center mb-8">
<h2 className="text-3xl font-bold text-slate-800">Crear Cuenta</h2> <h2 className="text-3xl font-black text-slate-800 tracking-tight">Crear Cuenta</h2>
<p className="text-slate-500 mt-2">Únete para guardar tu progreso</p> <p className="text-slate-500 mt-2">Únete para guardar tu progreso</p>
</div> </div>
{error && ( {error && (
<div className="bg-red-50 text-red-600 p-3 rounded-lg mb-6 text-sm font-medium border border-red-200"> <div className="bg-red-50 text-red-600 p-4 rounded-2xl text-sm font-bold mb-6 border border-red-100 text-center">
{error} {error}
</div> </div>
)} )}
<form onSubmit={handleSubmit} className="space-y-5"> <form onSubmit={handleSubmit} className="space-y-4">
<div> <div className="space-y-1">
<label className="block text-sm font-semibold text-slate-700 mb-1">Nombre de usuario</label> <label className="text-sm font-bold text-slate-700 ml-1">Nombre de usuario</label>
<input <input
type="text" type="text" required autoComplete="username"
required className="w-full px-5 py-3 rounded-2xl border border-slate-200 focus:ring-2 focus:ring-blue-500 outline-none transition-all bg-slate-50 focus:bg-white"
autoComplete="username" value={username} onChange={(e) => setUsername(e.target.value)}
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all" placeholder="Ej: usuario"
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="Ej: alexis99"
/> />
</div> </div>
<div> <div className="space-y-1">
<label className="block text-sm font-semibold text-slate-700 mb-1">Email</label> <label className="text-sm font-bold text-slate-700 ml-1">Email</label>
<input <input
type="email" type="email" required autoComplete="email"
required className="w-full px-5 py-3 rounded-2xl border border-slate-200 focus:ring-2 focus:ring-blue-500 outline-none transition-all bg-slate-50 focus:bg-white"
autoComplete="email" value={email} onChange={(e) => setEmail(e.target.value)}
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="tu@email.com" placeholder="tu@email.com"
/> />
</div> </div>
<div> <div className="space-y-1">
<label className="block text-sm font-semibold text-slate-700 mb-1">Contraseña</label> <label className="text-sm font-bold text-slate-700 ml-1">Contraseña</label>
<input <input
type="password" type="password" required autoComplete="new-password"
required className="w-full px-5 py-3 rounded-2xl border border-slate-200 focus:ring-2 focus:ring-blue-500 outline-none transition-all bg-slate-50 focus:bg-white"
autoComplete="new-password" value={password} onChange={(e) => setPassword(e.target.value)}
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••" placeholder="••••••••"
/> />
</div> </div>
<button <div className="space-y-1">
type="submit" <label className="text-sm font-bold text-slate-700 ml-1">Confirmar contraseña</label>
className="w-full py-3 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 transition-colors shadow-md mt-4" <input
> type="password" required autoComplete="new-password"
className="w-full px-5 py-3 rounded-2xl border border-slate-200 focus:ring-2 focus:ring-blue-500 outline-none transition-all bg-slate-50 focus:bg-white"
value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="••••••••"
/>
</div>
<button type="submit" className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl transition-all shadow-sm active:scale-95 mt-2">
Registrarse Registrarse
</button> </button>
</form> </form>
<p className="text-center mt-6 text-sm text-slate-600"> <p className="mt-8 text-center text-sm text-slate-500 font-medium">
¿Ya tienes cuenta? <Link to="/login" className="text-blue-600 font-bold hover:underline">Inicia sesión aquí</Link> ¿Ya tienes cuenta? <Link to="/login" className="text-blue-600 hover:underline font-extrabold">Inicia sesión aquí</Link>
</p> </p>
</div> </div>
</div> </div>