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.
Añadir confirmación de contraseña en el registro.
This commit is contained in:
Alexis
@@ -32,7 +32,7 @@ export default function Header() {
|
||||
</Link>
|
||||
|
||||
<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'}`}>
|
||||
Editor
|
||||
</Link>
|
||||
@@ -44,10 +44,10 @@ export default function Header() {
|
||||
</div>
|
||||
|
||||
{isAuthenticated ? (
|
||||
<div className="relative">
|
||||
<div className="relative border-l border-slate-200 pl-4">
|
||||
<button
|
||||
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}
|
||||
</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-sm font-bold text-slate-700 truncate">{user?.username}</p>
|
||||
</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
|
||||
</button>
|
||||
</div>
|
||||
@@ -68,9 +68,13 @@ export default function Header() {
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 ml-2 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 to="/register" className="text-sm font-bold bg-blue-600 text-white px-4 py-2 rounded-lg shadow-sm">Registrarse</Link>
|
||||
<div className="flex items-center border-l border-slate-200 pl-4">
|
||||
<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>
|
||||
|
||||
@@ -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 { useAuth } from '../context/AuthContext';
|
||||
import { authService } from '../services/authService';
|
||||
@@ -44,7 +44,9 @@ export default function Login() {
|
||||
|
||||
} catch (err) {
|
||||
console.error("Error al decodificar el token de Google:", err);
|
||||
setTimeout(() => {
|
||||
setError("Error al procesar el login con Google. El token está corrupto.");
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}, [searchParams, login, navigate]);
|
||||
@@ -66,12 +68,12 @@ export default function Login() {
|
||||
};
|
||||
|
||||
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="text-center mb-8">
|
||||
<h2 className="text-3xl font-black text-slate-800 tracking-tight">Deck of Cards</h2>
|
||||
<p className="text-slate-500 mt-2">Accede a tu panel de control</p>
|
||||
<h2 className="text-3xl font-black text-slate-800 tracking-tight">Iniciar sesión</h2>
|
||||
<p className="text-slate-500 mt-2">Únete para guardar tu progreso</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
|
||||
@@ -7,6 +7,7 @@ export default function Register() {
|
||||
const [username, setUsername] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const navigate = useNavigate();
|
||||
const { login } = useAuth();
|
||||
@@ -15,6 +16,11 @@ export default function Register() {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
setError('Las contraseñas no coinciden. Por favor, revísalas.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const data = await authService.register(username, email, password);
|
||||
|
||||
@@ -32,69 +38,68 @@ export default function Register() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-center mt-4 sm:mt-8">
|
||||
<div className="max-w-md w-full bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
|
||||
<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="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>
|
||||
</div>
|
||||
|
||||
{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}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-1">Nombre de usuario</label>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-bold text-slate-700 ml-1">Nombre de usuario</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
autoComplete="username"
|
||||
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={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="Ej: alexis99"
|
||||
type="text" required autoComplete="username"
|
||||
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={username} onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="Ej: usuario"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-1">Email</label>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-bold text-slate-700 ml-1">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
autoComplete="email"
|
||||
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)}
|
||||
type="email" required autoComplete="email"
|
||||
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={email} onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="tu@email.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-slate-700 mb-1">Contraseña</label>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-bold text-slate-700 ml-1">Contraseña</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
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)}
|
||||
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={password} onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-3 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 transition-colors shadow-md mt-4"
|
||||
>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-bold text-slate-700 ml-1">Confirmar contraseña</label>
|
||||
<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
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="text-center mt-6 text-sm text-slate-600">
|
||||
¿Ya tienes cuenta? <Link to="/login" className="text-blue-600 font-bold hover:underline">Inicia sesión aquí</Link>
|
||||
<p className="mt-8 text-center text-sm text-slate-500 font-medium">
|
||||
¿Ya tienes cuenta? <Link to="/login" className="text-blue-600 hover:underline font-extrabold">Inicia sesión aquí</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user