feat: boton de mostrar/ocultar clave en todos los campos de contraseña

Componente reutilizable PasswordInput (icono de ojo) usado en login, registro, restablecer clave, cambiar clave, crear usuario y la clave SMTP de Configuracion, para que el usuario pueda verificar que la esta escribiendo correctamente. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-09 09:00:06 -05:00
parent e02ea9ad93
commit 869094c622
13 changed files with 74 additions and 13 deletions
@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+import { useUi } from '../context/ui-context.jsx';
+
+export function PasswordInput({ value, onChange, required, autoFocus, placeholder, id }) {
+  const { t } = useUi();
+  const [visible, setVisible] = useState(false);
+  return (
+    <div className="password-input">
+      <input
+        id={id}
+        className="input"
+        type={visible ? 'text' : 'password'}
+        value={value}
+        onChange={onChange}
+        required={required}
+        autoFocus={autoFocus}
+        placeholder={placeholder}
+      />
+      <button
+        type="button"
+        className="icon-btn password-toggle"
+        onClick={() => setVisible((v) => !v)}
+        tabIndex={-1}
+        aria-label={visible ? t('password_hide') : t('password_show')}
+        title={visible ? t('password_hide') : t('password_show')}
+      >
+        {visible ? <EyeOff /> : <Eye />}
+      </button>
+    </div>
+  );
+}