feat: version 2.7.0 -- menu Contraseñas (repositorio de credenciales privado)
Nuevo modulo backend/src/modules/vault/: contraseña y notas cifradas en el servidor (AES-256-GCM, mismo mecanismo ya usado para la clave SMTP). Acceso al menu protegido con un PIN de 4 digitos independiente del login (token corto propio, header X-Vault-Token, nunca el JWT de sesion). El PIN no participa del cifrado -- cambiarlo o restablecerlo por correo nunca afecta las contraseñas ya guardadas. Privado por usuario, sin excepcion. Cada accion sensible (crear/editar/eliminar/ revelar/desbloquear) queda en audit_log. Compartir con otro usuario queda para una proxima version. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Milton Gonzalez
@@ -0,0 +1,333 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Plus, Trash2, Eye, EyeOff, Copy, Pencil, Save, X, RefreshCw, ShieldAlert } from 'lucide-react';
|
||||
import { useUi } from '../../context/ui-context.jsx';
|
||||
import { useAction } from '../../hooks/useAsync.js';
|
||||
import {
|
||||
getVaultStatus, createVaultPin, unlockVault, changeVaultPin, forgotVaultPin,
|
||||
listVaultEntries, getVaultEntry, createVaultEntry, updateVaultEntry, deleteVaultEntry,
|
||||
} from '../../services/vault.js';
|
||||
import { ListView } from '../../components/ListView.jsx';
|
||||
import { Button } from '../../components/Button.jsx';
|
||||
import { Field } from '../../components/Field.jsx';
|
||||
import { PasswordInput } from '../../components/PasswordInput.jsx';
|
||||
import { DetailPopup } from '../../components/DetailPopup.jsx';
|
||||
|
||||
const EMPTY_FORM = { title: '', url: '', username: '', password: '', notes: '' };
|
||||
|
||||
function randomPassword(length = 20) {
|
||||
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789!@#$%^&*';
|
||||
const bytes = crypto.getRandomValues(new Uint32Array(length));
|
||||
return Array.from(bytes, (b) => chars[b % chars.length]).join('');
|
||||
}
|
||||
|
||||
export default function ContrasenasPage() {
|
||||
const { t, pushToast, openDialog } = useUi();
|
||||
const runAction = useAction();
|
||||
|
||||
const [locked, setLocked] = useState(true);
|
||||
const [checking, setChecking] = useState(true);
|
||||
const [hasPinSet, setHasPinSet] = useState(null);
|
||||
const [entries, setEntries] = useState(null);
|
||||
|
||||
const [pin, setPin] = useState('');
|
||||
const [pinConfirm, setPinConfirm] = useState('');
|
||||
const [pinError, setPinError] = useState('');
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const [selected, setSelected] = useState(null); // entrada abierta en el popup
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [form, setForm] = useState(EMPTY_FORM);
|
||||
const [revealedPassword, setRevealedPassword] = useState(null);
|
||||
const [passwordVisible, setPasswordVisible] = useState(false);
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
const [changingPin, setChangingPin] = useState(false);
|
||||
const [pinChangeForm, setPinChangeForm] = useState({ current: '', next: '', next2: '' });
|
||||
const [pinChangeError, setPinChangeError] = useState('');
|
||||
|
||||
async function loadEntries() {
|
||||
const data = await listVaultEntries();
|
||||
setEntries(data);
|
||||
setLocked(false);
|
||||
}
|
||||
|
||||
async function checkAccess() {
|
||||
setChecking(true);
|
||||
try {
|
||||
await loadEntries();
|
||||
} catch {
|
||||
setLocked(true);
|
||||
try {
|
||||
const status = await getVaultStatus();
|
||||
setHasPinSet(status.hasPinSet);
|
||||
} catch { /* ignora, se reintenta al enviar el pin */ }
|
||||
} finally {
|
||||
setChecking(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { checkAccess(); }, []);
|
||||
|
||||
async function submitPin() {
|
||||
setPinError('');
|
||||
if (!/^\d{4}$/.test(pin)) { setPinError(t('vault_pin_invalid')); return; }
|
||||
setBusy(true);
|
||||
try {
|
||||
if (!hasPinSet) {
|
||||
if (pin !== pinConfirm) { setPinError(t('vault_pin_mismatch')); setBusy(false); return; }
|
||||
await createVaultPin(pin);
|
||||
}
|
||||
await unlockVault(pin);
|
||||
setPin(''); setPinConfirm('');
|
||||
await loadEntries();
|
||||
} catch (err) {
|
||||
setPinError(err.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleForgotPin() {
|
||||
await runAction(async () => {
|
||||
await forgotVaultPin();
|
||||
pushToast({ tone: 'success', message: t('vault_forgot_pin_sent') });
|
||||
});
|
||||
}
|
||||
|
||||
async function submitChangePin() {
|
||||
setPinChangeError('');
|
||||
if (!/^\d{4}$/.test(pinChangeForm.next)) { setPinChangeError(t('vault_pin_invalid')); return; }
|
||||
if (pinChangeForm.next !== pinChangeForm.next2) { setPinChangeError(t('vault_pin_mismatch')); return; }
|
||||
try {
|
||||
await changeVaultPin(pinChangeForm.current, pinChangeForm.next);
|
||||
setChangingPin(false);
|
||||
setPinChangeForm({ current: '', next: '', next2: '' });
|
||||
pushToast({ tone: 'success', message: t('common_saved') });
|
||||
} catch (err) {
|
||||
setPinChangeError(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function openEntry(entry) {
|
||||
setSelected(entry);
|
||||
setForm({ title: entry.title, url: entry.url || '', username: entry.username || '', password: '', notes: '' });
|
||||
setRevealedPassword(null);
|
||||
setPasswordVisible(false);
|
||||
setEditing(false);
|
||||
setCreating(false);
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
setSelected(null);
|
||||
setForm(EMPTY_FORM);
|
||||
setRevealedPassword(null);
|
||||
setPasswordVisible(false);
|
||||
setEditing(true);
|
||||
setCreating(true);
|
||||
}
|
||||
|
||||
function closePopup() {
|
||||
setSelected(null);
|
||||
setCreating(false);
|
||||
setEditing(false);
|
||||
}
|
||||
|
||||
async function reveal() {
|
||||
await runAction(async () => {
|
||||
const full = await getVaultEntry(selected.id);
|
||||
setRevealedPassword(full.password);
|
||||
setForm((f) => ({ ...f, notes: full.notes || '' }));
|
||||
setPasswordVisible(true);
|
||||
});
|
||||
}
|
||||
|
||||
function startEdit() {
|
||||
setForm((f) => ({ ...f, password: revealedPassword || '' }));
|
||||
setEditing(true);
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
if (creating) { closePopup(); return; }
|
||||
setEditing(false);
|
||||
openEntry(selected);
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (!form.title.trim()) return;
|
||||
await runAction(async () => {
|
||||
if (creating) {
|
||||
await createVaultEntry(form);
|
||||
pushToast({ tone: 'success', message: t('common_saved') });
|
||||
} else {
|
||||
await updateVaultEntry(selected.id, form);
|
||||
pushToast({ tone: 'success', message: t('common_saved') });
|
||||
}
|
||||
closePopup();
|
||||
await loadEntries();
|
||||
});
|
||||
}
|
||||
|
||||
function confirmDelete(entry) {
|
||||
openDialog({
|
||||
tone: 'warning',
|
||||
title: t('common_confirm_delete_title'),
|
||||
message: t('common_confirm_delete_msg'),
|
||||
actions: [
|
||||
{ label: t('common_cancel'), variant: 'standard' },
|
||||
{
|
||||
label: t('common_delete'), variant: 'danger',
|
||||
onClick: () => runAction(async () => {
|
||||
await deleteVaultEntry(entry.id);
|
||||
await loadEntries();
|
||||
pushToast({ tone: 'success', message: t('common_saved') });
|
||||
}),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
function copyToClipboard(value) {
|
||||
navigator.clipboard?.writeText(value);
|
||||
pushToast({ tone: 'success', message: t('vault_copied') });
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{ key: 'title', label: t('vault_field_title') },
|
||||
{ key: 'url', label: t('vault_field_url'), render: (r) => r.url ? <a href={r.url} target="_blank" rel="noreferrer" onClick={(e) => e.stopPropagation()} className="text-link">{r.url}</a> : '—' },
|
||||
{ key: 'username', label: t('vault_field_username'), render: (r) => r.username || '—' },
|
||||
{ key: 'updated_at', label: t('project_updated_at'), render: (r) => String(r.updated_at).slice(0, 16) },
|
||||
];
|
||||
|
||||
if (checking) return <div className="text-muted">{t('common_loading')}</div>;
|
||||
|
||||
if (locked) {
|
||||
return (
|
||||
<div style={{ maxWidth: 360, margin: '60px auto' }} className="panel-card">
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
|
||||
<ShieldAlert size={20} />
|
||||
<h3 style={{ margin: 0 }}>{hasPinSet ? t('vault_enter_pin_title') : t('vault_create_pin_title')}</h3>
|
||||
</div>
|
||||
{!hasPinSet && <p className="text-muted" style={{ fontSize: '.8rem' }}>{t('vault_create_pin_hint')}</p>}
|
||||
<Field label={t('vault_pin_label')}>
|
||||
<input
|
||||
className="input" type="password" inputMode="numeric" maxLength={4} autoFocus
|
||||
value={pin} onChange={(e) => setPin(e.target.value.replace(/\D/g, ''))}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') submitPin(); }}
|
||||
/>
|
||||
</Field>
|
||||
{!hasPinSet && (
|
||||
<Field label={t('vault_pin_confirm_label')}>
|
||||
<input
|
||||
className="input" type="password" inputMode="numeric" maxLength={4}
|
||||
value={pinConfirm} onChange={(e) => setPinConfirm(e.target.value.replace(/\D/g, ''))}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') submitPin(); }}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
{pinError && <div className="login-error">{pinError}</div>}
|
||||
<Button variant="accent" onClick={submitPin} disabled={busy} style={{ width: '100%', marginTop: 8 }}>
|
||||
{hasPinSet ? t('vault_unlock') : t('vault_create_pin_submit')}
|
||||
</Button>
|
||||
{hasPinSet && (
|
||||
<button type="button" className="link-button" style={{ marginTop: 10 }} onClick={handleForgotPin}>
|
||||
{t('vault_forgot_pin')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="toolbar">
|
||||
<h2 className="page-title mt-0" style={{ marginBottom: 0 }}>{t('nav_passwords')}</h2>
|
||||
<div style={{ flex: 1 }} />
|
||||
<Button variant="standard" icon={RefreshCw} onClick={() => setChangingPin(true)}>{t('vault_change_pin')}</Button>
|
||||
<Button variant="accent" icon={Plus} onClick={openCreate}>{t('vault_new_entry')}</Button>
|
||||
</div>
|
||||
|
||||
<ListView
|
||||
columns={columns}
|
||||
rows={entries}
|
||||
getRowKey={(r) => r.id}
|
||||
onRowClick={openEntry}
|
||||
rowActions={(r) => [
|
||||
{ label: t('common_delete'), icon: Trash2, danger: true, onClick: () => confirmDelete(r) },
|
||||
]}
|
||||
/>
|
||||
|
||||
<DetailPopup
|
||||
open={creating || !!selected}
|
||||
title={creating ? t('vault_new_entry') : (selected?.title || '')}
|
||||
onClose={closePopup}
|
||||
width={480}
|
||||
height={560}
|
||||
>
|
||||
<Field label={t('vault_field_title')}>
|
||||
<input className="input" value={form.title} disabled={!editing} onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))} />
|
||||
</Field>
|
||||
<Field label={t('vault_field_url')}>
|
||||
<input className="input" value={form.url} disabled={!editing} onChange={(e) => setForm((f) => ({ ...f, url: e.target.value }))} />
|
||||
</Field>
|
||||
<Field label={t('vault_field_username')}>
|
||||
<input className="input" value={form.username} disabled={!editing} onChange={(e) => setForm((f) => ({ ...f, username: e.target.value }))} />
|
||||
</Field>
|
||||
|
||||
<Field label={t('vault_field_password')}>
|
||||
{editing ? (
|
||||
<div style={{ display: 'flex', gap: 6 }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<PasswordInput value={form.password} onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))} />
|
||||
</div>
|
||||
<Button variant="standard" onClick={() => setForm((f) => ({ ...f, password: randomPassword() }))}>{t('vault_generate')}</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<input className="input" type={passwordVisible ? 'text' : 'password'} value={passwordVisible ? (revealedPassword || '') : '••••••••'} disabled readOnly style={{ flex: 1 }} />
|
||||
{!revealedPassword ? (
|
||||
<button className="icon-btn" title={t('vault_reveal')} onClick={reveal}><Eye size={16} /></button>
|
||||
) : (
|
||||
<>
|
||||
<button className="icon-btn" onClick={() => setPasswordVisible((v) => !v)}>{passwordVisible ? <EyeOff size={16} /> : <Eye size={16} />}</button>
|
||||
<button className="icon-btn" title={t('vault_copy')} onClick={() => copyToClipboard(revealedPassword)}><Copy size={16} /></button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field label={t('vault_field_notes')}>
|
||||
<textarea className="textarea" rows={3} disabled={!editing} value={form.notes} onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))} />
|
||||
</Field>
|
||||
|
||||
<div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
|
||||
{editing ? (
|
||||
<>
|
||||
<Button variant="accent" icon={Save} onClick={save} disabled={!form.title.trim()}>{t('common_save')}</Button>
|
||||
<Button variant="standard" icon={X} onClick={cancelEdit}>{t('common_cancel')}</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button variant="standard" icon={Pencil} onClick={startEdit}>{t('common_edit')}</Button>
|
||||
)}
|
||||
</div>
|
||||
</DetailPopup>
|
||||
|
||||
<DetailPopup open={changingPin} title={t('vault_change_pin')} onClose={() => setChangingPin(false)} width={360} height={360}>
|
||||
<Field label={t('vault_pin_current_label')}>
|
||||
<input className="input" type="password" inputMode="numeric" maxLength={4} value={pinChangeForm.current} onChange={(e) => setPinChangeForm((f) => ({ ...f, current: e.target.value.replace(/\D/g, '') }))} />
|
||||
</Field>
|
||||
<Field label={t('vault_pin_label')}>
|
||||
<input className="input" type="password" inputMode="numeric" maxLength={4} value={pinChangeForm.next} onChange={(e) => setPinChangeForm((f) => ({ ...f, next: e.target.value.replace(/\D/g, '') }))} />
|
||||
</Field>
|
||||
<Field label={t('vault_pin_confirm_label')}>
|
||||
<input className="input" type="password" inputMode="numeric" maxLength={4} value={pinChangeForm.next2} onChange={(e) => setPinChangeForm((f) => ({ ...f, next2: e.target.value.replace(/\D/g, '') }))} />
|
||||
</Field>
|
||||
{pinChangeError && <div className="login-error">{pinChangeError}</div>}
|
||||
<div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
|
||||
<Button variant="accent" onClick={submitChangePin}>{t('common_save')}</Button>
|
||||
<Button variant="standard" onClick={() => setChangingPin(false)}>{t('common_cancel')}</Button>
|
||||
</div>
|
||||
</DetailPopup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user