mgonzalez/project.linkedcorp.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Milton Gonzalez
2026-09-09 09:00:06 -05:00
parent e02ea9ad93
commit 869094c622
13 changed files with 74 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Configuracion/SmtpSettingsPanel.jsx
+2 -1
View File
@@ -6,6 +6,7 @@ import { getSmtpConfig, updateSmtpConfig, testSmtpConfig } from '../../services/
import { Field, FieldRow } from '../../components/Field.jsx';
import { Button } from '../../components/Button.jsx';
import { InfoBar } from '../../components/InfoBar.jsx';
import { PasswordInput } from '../../components/PasswordInput.jsx';
export default function SmtpSettingsPanel() {
const { t, pushToast } = useUi();
@@ -66,7 +67,7 @@ export default function SmtpSettingsPanel() {
</Field>
</FieldRow>
<Field label={t('smtp_pass')} hint={config.configured ? t('smtp_pass_configured_hint') : undefined}>
<input className="input" type="password" value={form.pass} onChange={(e) => setForm((f) => ({ ...f, pass: e.target.value }))} />
<PasswordInput value={form.pass} onChange={(e) => setForm((f) => ({ ...f, pass: e.target.value }))} />
</Field>
<Button variant="accent" icon={Save} onClick={save}>{t('common_save')}</Button>
frontend/src/pages/Login/LoginPage.jsx
+2 -1
View File
@@ -5,6 +5,7 @@ import { useAuth } from '../../context/auth-context.jsx';
import { useUi } from '../../context/ui-context.jsx';
import { Field } from '../../components/Field.jsx';
import { Button } from '../../components/Button.jsx';
import { PasswordInput } from '../../components/PasswordInput.jsx';
import logoDark from '../../assets/logoLinkedCorpTxt.png';
import logoLight from '../../assets/logoLinkedCorpTxtBlack.png';
@@ -43,7 +44,7 @@ export default function LoginPage() {
<input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required autoFocus />
</Field>
<Field label={t('login_password')}>
<input className="input" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
<PasswordInput value={password} onChange={(e) => setPassword(e.target.value)} required />
</Field>
<Button variant="accent" icon={LogIn} type="submit" disabled={loading} style={{ width: '100%', justifyContent: 'center' }}>
{t('login_submit')}
frontend/src/pages/Login/RegisterPage.jsx
+3 -2
View File
@@ -6,6 +6,7 @@ import { useUi } from '../../context/ui-context.jsx';
import { register } from '../../services/auth.js';
import { Field } from '../../components/Field.jsx';
import { Button } from '../../components/Button.jsx';
import { PasswordInput } from '../../components/PasswordInput.jsx';
import logoDark from '../../assets/logoLinkedCorpTxt.png';
import logoLight from '../../assets/logoLinkedCorpTxtBlack.png';
@@ -61,10 +62,10 @@ export default function RegisterPage() {
<input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
</Field>
<Field label={t('login_password')}>
<input className="input" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
<PasswordInput value={password} onChange={(e) => setPassword(e.target.value)} required />
</Field>
<Field label={t('register_password_confirm')}>
<input className="input" type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} required />
<PasswordInput value={confirm} onChange={(e) => setConfirm(e.target.value)} required />
</Field>
<Button variant="accent" icon={UserPlus} type="submit" disabled={loading} style={{ width: '100%', justifyContent: 'center' }}>
{t('register_submit')}
frontend/src/pages/Login/ResetPasswordPage.jsx
+3 -2
View File
@@ -5,6 +5,7 @@ import { useUi } from '../../context/ui-context.jsx';
import { resetPassword } from '../../services/auth.js';
import { Field } from '../../components/Field.jsx';
import { Button } from '../../components/Button.jsx';
import { PasswordInput } from '../../components/PasswordInput.jsx';
import logoDark from '../../assets/logoLinkedCorpTxt.png';
import logoLight from '../../assets/logoLinkedCorpTxtBlack.png';
@@ -49,10 +50,10 @@ export default function ResetPasswordPage() {
) : (
<>
<Field label={t('reset_password_new')}>
<input className="input" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required autoFocus />
<PasswordInput value={password} onChange={(e) => setPassword(e.target.value)} required autoFocus />
</Field>
<Field label={t('register_password_confirm')}>
<input className="input" type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} required />
<PasswordInput value={confirm} onChange={(e) => setConfirm(e.target.value)} required />
</Field>
<Button variant="accent" icon={KeyRound} type="submit" disabled={loading || !token} style={{ width: '100%', justifyContent: 'center' }}>
{t('reset_password_submit')}
frontend/src/pages/Organizacion/UsersPanel.jsx
+2 -1
View File
@@ -12,6 +12,7 @@ import { Field, FieldRow } from '../../components/Field.jsx';
import { ComboBox } from '../../components/ComboBox.jsx';
import { Badge } from '../../components/Badge.jsx';
import { DetailPopup } from '../../components/DetailPopup.jsx';
import { PasswordInput } from '../../components/PasswordInput.jsx';
function flatten(nodes, acc = []) {
for (const n of nodes) { acc.push(n); if (n.children?.length) flatten(n.children, acc); }
@@ -169,7 +170,7 @@ export default function UsersPanel() {
</Field>
{!selected && (
<Field label={t('user_password')}>
<input className="input" type="password" value={form.password} onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))} />
<PasswordInput value={form.password} onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))} />
</Field>
)}
</FieldRow>