From 16f82945c8164d53492e10330fb33714dc76da2b Mon Sep 17 00:00:00 2001
From: Alexis <isalexis.design@gmail.com>
Date: Tue, 14 Apr 2026 13:35:54 +0200
Subject: [PATCH] =?UTF-8?q?refactor:=20unificar=20estilos=20de=20login=20y?=
 =?UTF-8?q?=20register,=20simplificar=20header=20con=20un=20solo=20bot?=
 =?UTF-8?q?=C3=B3n=20para=20acceder=20en=20lugar=20de=20dos=20para=20inici?=
 =?UTF-8?q?ar=20sesi=C3=B3n=20y=20registrarse.=20A=C3=B1adir=20confirmaci?=
 =?UTF-8?q?=C3=B3n=20de=20contrase=C3=B1a=20en=20el=20registro.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/layout/Header.jsx | 18 +++---
 frontend/src/pages/Login.jsx              | 12 ++--
 frontend/src/pages/Register.jsx           | 77 ++++++++++++-----------
 3 files changed, 59 insertions(+), 48 deletions(-)

diff --git a/frontend/src/components/layout/Header.jsx b/frontend/src/components/layout/Header.jsx
index 98a6b7f..7596a6a 100644
--- a/frontend/src/components/layout/Header.jsx
+++ b/frontend/src/components/layout/Header.jsx
@@ -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>
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index c75e3fd..12b60c9 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -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);
-        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]);
@@ -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 && (
diff --git a/frontend/src/pages/Register.jsx b/frontend/src/pages/Register.jsx
index 3055c9d..ad80d0c 100644
--- a/frontend/src/pages/Register.jsx
+++ b/frontend/src/pages/Register.jsx
@@ -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>