From 2ba01164ff3c06fe6c12cbd73bc460d0b9f80f3e Mon Sep 17 00:00:00 2001
From: Alexis <isalexis.design@gmail.com>
Date: Tue, 14 Apr 2026 14:04:17 +0200
Subject: [PATCH] =?UTF-8?q?add:=20a=C3=B1adir=20componente=20para=20icono?=
 =?UTF-8?q?=20de=20ojo=20abierto/cerrado=20para=20ver/ocultar=20la=20contr?=
 =?UTF-8?q?ase=C3=B1a=20en=20el=20input=20de=20login/registro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/EyeIcon.jsx | 12 ++++++
 frontend/src/pages/Login.jsx        | 28 ++++++++++----
 frontend/src/pages/Register.jsx     | 59 +++++++++++++++++++----------
 3 files changed, 71 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/components/EyeIcon.jsx

diff --git a/frontend/src/components/EyeIcon.jsx b/frontend/src/components/EyeIcon.jsx
new file mode 100644
index 0000000..70437ac
--- /dev/null
+++ b/frontend/src/components/EyeIcon.jsx
@@ -0,0 +1,12 @@
+export default function EyeIcon({ isOpen }) {
+  return isOpen ? (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-5 h-5">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+  ) : (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-5 h-5">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
+    </svg>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index 12b60c9..8f3ff7a 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -2,10 +2,12 @@ import { useState, useEffect, useRef } from 'react';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { authService } from '../services/authService';
+import EyeIcon from '../components/EyeIcon';
 
 export default function Login() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState('');
   
   const navigate = useNavigate();
@@ -72,8 +74,8 @@ export default function Login() {
       <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">Iniciar sesión</h2>
-          <p className="text-slate-500 mt-2">Únete para guardar tu progreso</p>
+          <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 historial y gráficas guardadas</p>
         </div>
 
         {error && (
@@ -91,14 +93,26 @@ export default function Login() {
               placeholder="correo@ejemplo.com" 
             />
           </div>
+          
           <div className="space-y-1">
             <label className="text-sm font-bold text-slate-700 ml-1">Contraseña</label>
-            <input 
-              type="password" required value={password} onChange={(e) => setPassword(e.target.value)}
-              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" 
-              placeholder="••••••••" 
-            />
+            <div className="relative">
+              <input 
+                type={showPassword ? "text" : "password"}
+                required value={password} onChange={(e) => setPassword(e.target.value)}
+                className="w-full pl-5 pr-12 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" 
+                placeholder="••••••••" 
+              />
+              <button 
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors focus:outline-none"
+              >
+                <EyeIcon isOpen={showPassword} />
+              </button>
+            </div>
           </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">
             Entrar
           </button>
diff --git a/frontend/src/pages/Register.jsx b/frontend/src/pages/Register.jsx
index ad80d0c..cdc38fc 100644
--- a/frontend/src/pages/Register.jsx
+++ b/frontend/src/pages/Register.jsx
@@ -2,12 +2,17 @@ import { useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { authService } from '../services/authService';
+import EyeIcon from '../components/EyeIcon';
 
 export default function Register() {
     const [username, setUsername] = useState('');
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [confirmPassword, setConfirmPassword] = useState('');
+    
+    const [showPassword, setShowPassword] = useState(false);
+    const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+    
     const [error, setError] = useState('');
     const navigate = useNavigate();
     const { login } = useAuth();
@@ -23,13 +28,7 @@ export default function Register() {
 
         try {
             const data = await authService.register(username, email, password);
-            
-            const userData = {
-                id: data.user_id,
-                username: username,
-                email: email
-            };
-            
+            const userData = { id: data.user_id, username: username, email: email };
             login(userData, data.token);
             navigate('/');
         } catch (err) {
@@ -43,7 +42,7 @@ export default function Register() {
         
         <div className="text-center mb-8">
           <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">Inicia sesión para guardar tu progreso</p>
         </div>
 
         {error && (
@@ -59,7 +58,7 @@ export default function Register() {
               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"
+              placeholder="Ej: usuario99"
             />
           </div>
 
@@ -75,22 +74,40 @@ export default function Register() {
 
           <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-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 className="relative">
+              <input 
+                type={showPassword ? "text" : "password"} 
+                required autoComplete="new-password"
+                className="w-full pl-5 pr-12 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="••••••••"
+              />
+              <button 
+                type="button" onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors focus:outline-none"
+              >
+                <EyeIcon isOpen={showPassword} />
+              </button>
+            </div>
           </div>
 
           <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 className="relative">
+              <input 
+                type={showConfirmPassword ? "text" : "password"} 
+                required autoComplete="new-password"
+                className="w-full pl-5 pr-12 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="••••••••"
+              />
+              <button 
+                type="button" onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors focus:outline-none"
+              >
+                <EyeIcon isOpen={showConfirmPassword} />
+              </button>
+            </div>
           </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">