feat: version 2.7.2 -- tarjetas con icono en Contraseñas + fix borrado de password al editar
Listado de Contraseñas pasa de tabla a tarjetas: icono elegible ( catalogo fijo, sin servicios externos de favicon por privacidad) o inicial del nombre como fallback, junto con nombre y enlace. Fix real: editar una credencial sin revelar la contraseña antes la dejaba vacia al guardar -- ahora se conserva la que ya estaba si no se escribe una nueva. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Milton Gonzalez
@@ -1,21 +1,44 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Plus, Trash2, Eye, EyeOff, Copy, Pencil, Save, X, RefreshCw, ShieldAlert } from 'lucide-react';
|
||||
import {
|
||||
Plus, Trash2, Eye, EyeOff, Copy, Pencil, Save, X, RefreshCw, ShieldAlert, MoreVertical,
|
||||
Mail, Globe, Server, Database, Cloud, Shield, Lock, Wifi, CreditCard, Building2, Printer,
|
||||
Smartphone, KeyRound, HardDrive, Router, UserCog,
|
||||
} from 'lucide-react';
|
||||
import { useUi } from '../../context/ui-context.jsx';
|
||||
import { useAction } from '../../hooks/useAsync.js';
|
||||
import {
|
||||
getVaultStatus, createVaultPin, unlockVault, changeVaultPin, forgotVaultPin, setVaultToken,
|
||||
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';
|
||||
import { Flyout, FlyoutItem } from '../../components/Flyout.jsx';
|
||||
|
||||
const EMPTY_FORM = { title: '', url: '', username: '', password: '', notes: '' };
|
||||
const EMPTY_FORM = { title: '', url: '', username: '', password: '', notes: '', iconKey: '' };
|
||||
const AUTO_LOCK_MS = 3 * 60 * 1000; // 3 minutos: salir solo del menu si queda abierto sin atencion
|
||||
|
||||
// Catalogo fijo de iconos (debe coincidir con backend/src/modules/vault/service.js#ICON_KEYS) --
|
||||
// a proposito NO se usa ningun servicio externo de favicon (ej. google/s2/favicons): revelaria a
|
||||
// terceros que urls internas tiene guardadas cada usuario, inaceptable para un repositorio de
|
||||
// credenciales. El usuario elige uno de esta lista, o se deja "Auto" (inicial del nombre).
|
||||
const ICONS = {
|
||||
mail: Mail, globe: Globe, server: Server, database: Database, cloud: Cloud, shield: Shield,
|
||||
lock: Lock, wifi: Wifi, card: CreditCard, building: Building2, printer: Printer,
|
||||
phone: Smartphone, key: KeyRound, disk: HardDrive, router: Router, user: UserCog,
|
||||
};
|
||||
|
||||
function EntryIcon({ iconKey, title, size = 22 }) {
|
||||
const Icon = ICONS[iconKey];
|
||||
return (
|
||||
<div className="vault-card-icon">
|
||||
{Icon ? <Icon size={size} /> : <span>{(title || '?').trim().charAt(0).toUpperCase()}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function randomPassword(length = 20) {
|
||||
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789!@#$%^&*';
|
||||
const bytes = crypto.getRandomValues(new Uint32Array(length));
|
||||
@@ -128,7 +151,7 @@ export default function ContrasenasPage() {
|
||||
|
||||
function openEntry(entry) {
|
||||
setSelected(entry);
|
||||
setForm({ title: entry.title, url: entry.url || '', username: entry.username || '', password: '', notes: '' });
|
||||
setForm({ title: entry.title, url: entry.url || '', username: entry.username || '', password: '', notes: '', iconKey: entry.icon_key || '' });
|
||||
setRevealedPassword(null);
|
||||
setPasswordVisible(false);
|
||||
setEditing(false);
|
||||
@@ -209,13 +232,6 @@ export default function ContrasenasPage() {
|
||||
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) {
|
||||
@@ -264,23 +280,57 @@ export default function ContrasenasPage() {
|
||||
<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) },
|
||||
]}
|
||||
/>
|
||||
{entries.length === 0 && <div className="text-muted">{t('common_empty')}</div>}
|
||||
|
||||
<div className="vault-grid">
|
||||
{entries.map((entry) => (
|
||||
<div key={entry.id} className="vault-card" onClick={() => openEntry(entry)}>
|
||||
<div className="vault-card-menu" onClick={(e) => e.stopPropagation()}>
|
||||
<Flyout trigger={({ onClick }) => (
|
||||
<button className="icon-btn row-menu-btn" onClick={onClick}><MoreVertical size={16} /></button>
|
||||
)}>
|
||||
<FlyoutItem icon={Trash2} danger onClick={() => confirmDelete(entry)}>{t('common_delete')}</FlyoutItem>
|
||||
</Flyout>
|
||||
</div>
|
||||
<EntryIcon iconKey={entry.icon_key} title={entry.title} />
|
||||
<div className="vault-card-title">{entry.title}</div>
|
||||
{entry.url && <div className="vault-card-url">{entry.url}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<DetailPopup
|
||||
open={creating || !!selected}
|
||||
title={creating ? t('vault_new_entry') : (selected?.title || '')}
|
||||
onClose={closePopup}
|
||||
width={480}
|
||||
height={560}
|
||||
height={640}
|
||||
>
|
||||
{editing && (
|
||||
<Field label={t('vault_field_icon')}>
|
||||
<div className="vault-icon-picker">
|
||||
<button
|
||||
type="button"
|
||||
className={`vault-icon-option ${!form.iconKey ? 'selected' : ''}`}
|
||||
title={t('vault_icon_auto')}
|
||||
onClick={() => setForm((f) => ({ ...f, iconKey: '' }))}
|
||||
>
|
||||
{(form.title || '?').trim().charAt(0).toUpperCase() || 'A'}
|
||||
</button>
|
||||
{Object.entries(ICONS).map(([key, Icon]) => (
|
||||
<button
|
||||
type="button"
|
||||
key={key}
|
||||
className={`vault-icon-option ${form.iconKey === key ? 'selected' : ''}`}
|
||||
onClick={() => setForm((f) => ({ ...f, iconKey: key }))}
|
||||
>
|
||||
<Icon size={18} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
<Field label={t('vault_field_title')}>
|
||||
<input className="input" value={form.title} disabled={!editing} onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))} />
|
||||
</Field>
|
||||
@@ -295,7 +345,11 @@ export default function ContrasenasPage() {
|
||||
{editing ? (
|
||||
<div style={{ display: 'flex', gap: 6 }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<PasswordInput 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 }))}
|
||||
placeholder={creating ? '' : t('vault_password_unchanged_hint')}
|
||||
/>
|
||||
</div>
|
||||
<Button variant="standard" onClick={() => setForm((f) => ({ ...f, password: randomPassword() }))}>{t('vault_generate')}</Button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user