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

add: añadir componente para icono de ojo abierto/cerrado para ver/ocultar la contraseña en el input de login/registro

Browse Source
This commit is contained in:
Alexis
2026-04-14 14:04:17 +02:00
parent 16f82945c8
commit 2ba01164ff
3 changed files with 71 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/EyeIcon.jsx
+12
View File
@@ -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>
);
}
frontend/src/pages/Login.jsx
+18 -4
View File
@@ -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>
<div className="relative">
<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"
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>
frontend/src/pages/Register.jsx
+30 -13
View File
@@ -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>
<div className="relative">
<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"
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>
<div className="relative">
<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"
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">