alee/relicario
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat(ext/popup): wire custom-field editor into all 6 type forms

Browse Source 
Each typed-item form now mounts the collapsible sections editor before
the form-actions. Save functions accept sectionsDraft and persist it
via Item.sections so custom fields round-trip correctly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
2026-04-24 18:17:22 -04:00
parent 3264cccb60
commit e1d32b0379
7 changed files with 193 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
extension/src/popup/components/types/__tests__/sections-save.test.ts Normal file
View File

@@ -0,0 +1,58 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
vi.mock('../../../popup', async () => {
const navigate = vi.fn();
const setState = vi.fn();
const sendMessage = vi.fn();
const getState = vi.fn(() => ({
view: 'add', entries: [], selectedId: null, selectedItem: null, selectedIndex: 0,
searchQuery: '', activeGroup: null, error: null, loading: false,
capturedTabId: null, capturedUrl: '', newType: 'login',
vaultSettings: null, generatorDefaults: null,
}));
const escapeHtml = (s: string) => s
.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
return { navigate, setState, sendMessage, getState, escapeHtml };
});
import { renderForm } from '../login';
import { sendMessage } from '../../../popup';
describe('Login form packs sectionsDraft into Item.sections', () => {
beforeEach(() => {
document.body.innerHTML = '<div id="app"></div>';
vi.mocked(sendMessage).mockReset();
vi.mocked(sendMessage).mockResolvedValue({ ok: true, data: { id: 'fakeid0000000000', items: [] } });
});
it('persists added sections and fields', async () => {
const app = document.getElementById('app')!;
renderForm(app, 'add', null);
(document.getElementById('f-title') as HTMLInputElement).value = 'Example';
(document.querySelector('.disclosure__toggle') as HTMLButtonElement).click();
(document.querySelector('.add-section') as HTMLButtonElement).click();
(document.querySelector('[data-add-field="text"]') as HTMLButtonElement).click();
const labelInput = document.querySelector('[data-field-label="0-0"]') as HTMLInputElement;
labelInput.value = 'recovery email';
labelInput.dispatchEvent(new Event('input', { bubbles: true }));
const valueInput = document.querySelector('[data-field-value-input="0-0"]') as HTMLInputElement;
valueInput.value = 'backup@example.com';
valueInput.dispatchEvent(new Event('input', { bubbles: true }));
document.getElementById('save-btn')!.click();
await new Promise((r) => setTimeout(r, 5));
const calls = vi.mocked(sendMessage).mock.calls;
const addCall = calls.find(([msg]) => (msg as { type: string }).type === 'add_item');
const msg = addCall![0] as { type: 'add_item'; item: any };
expect(msg.item.sections).toHaveLength(1);
expect(msg.item.sections[0].fields).toHaveLength(1);
expect(msg.item.sections[0].fields[0].label).toBe('recovery email');
expect(msg.item.sections[0].fields[0].value).toEqual({ kind: 'text', value: 'backup@example.com' });
expect(msg.item.sections[0].fields[0].id).toMatch(/^[0-9a-f]{16}$/);
});
});

25
extension/src/popup/components/types/card.ts
View File

@@ -2,15 +2,17 @@
/// Detail view has a styled card-silhouette signature block.
import { getState, setState, sendMessage, navigate, escapeHtml } from '../../popup';
import type { Item, ItemId, ManifestEntry, CardKind } from '../../../shared/types';
import type { Item, ItemId, ManifestEntry, CardKind, Section } from '../../../shared/types';
import {
renderConcealedRow, renderSignatureBlock, wireFieldHandlers, renderSections,
renderSectionsEditor, wireSectionsEditor,
} from '../fields';
const CARD_KINDS: CardKind[] = ['credit', 'debit', 'gift', 'loyalty', 'other'];
let activeKeyHandler: ((e: KeyboardEvent) => void) | null = null;
let activeFormEscHandler: ((e: KeyboardEvent) => void) | null = null;
let sectionsExpanded = false;
export function teardown(): void {
if (activeKeyHandler) {
@@ -21,6 +23,7 @@ export function teardown(): void {
document.removeEventListener('keydown', activeFormEscHandler);
activeFormEscHandler = null;
}
sectionsExpanded = false;
}
function brandFromNumber(num: string): string {
@@ -140,6 +143,10 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
const c = (existing?.core.type === 'card') ? existing.core : null;
const currentYear = new Date().getFullYear();
const sectionsDraft: Section[] = existing
? JSON.parse(JSON.stringify(existing.sections)) as Section[]
: [];
const monthOptions = Array.from({ length: 12 }, (_, i) => {
const m = String(i + 1).padStart(2, '0');
const sel = c?.expiry?.month === i + 1 ? 'selected' : '';
@@ -176,6 +183,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
<input id="f-pin" type="password" inputmode="numeric" maxlength="8" value="${escapeHtml(c?.pin ?? '')}"></div>
<div class="form-group"><label class="label" for="f-kind">kind</label>
<select id="f-kind">${kindOptions}</select></div>
${renderSectionsEditor(sectionsDraft, sectionsExpanded)}
<div class="form-actions">
<button class="btn" id="cancel-btn">cancel</button>
<button class="btn btn-primary" id="save-btn">save</button>
@@ -183,12 +191,21 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
</div>
`;
const rerender = (): void => {
const disclosure = app.querySelector('.disclosure');
if (!disclosure) return;
sectionsExpanded = disclosure.getAttribute('data-expanded') === 'true';
disclosure.outerHTML = renderSectionsEditor(sectionsDraft, sectionsExpanded);
wireSectionsEditor(app, sectionsDraft, rerender);
};
wireSectionsEditor(app, sectionsDraft, rerender);
document.getElementById('cancel-btn')?.addEventListener('click', () => {
setState({ error: null });
navigate(mode === 'edit' ? 'detail' : 'list');
});
document.getElementById('save-btn')?.addEventListener('click', async () => {
await saveCard(mode, existing);
await saveCard(mode, existing, sectionsDraft);
});
const escHandler = (e: KeyboardEvent) => {
@@ -203,7 +220,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
(document.getElementById('f-title') as HTMLInputElement | null)?.focus();
}
async function saveCard(mode: 'add' | 'edit', existing: Item | null): Promise<void> {
async function saveCard(mode: 'add' | 'edit', existing: Item | null, sectionsDraft: Section[]): Promise<void> {
const state = getState();
const title = (document.getElementById('f-title') as HTMLInputElement).value.trim();
if (!title) { setState({ error: 'Title is required' }); return; }
@@ -242,7 +259,7 @@ async function saveCard(mode: 'add' | 'edit', existing: Item | null): Promise<vo
created: existing?.created ?? now,
modified: now, trashed_at: undefined,
core,
sections: existing?.sections ?? [],
sections: sectionsDraft,
attachments: existing?.attachments ?? [],
field_history: existing?.field_history ?? {},
};

25
extension/src/popup/components/types/identity.ts
View File

@@ -2,13 +2,15 @@
/// Detail view shows a "profile card" signature block + plain rows.
import { getState, setState, sendMessage, navigate, escapeHtml } from '../../popup';
import type { Item, ItemId, ManifestEntry } from '../../../shared/types';
import type { Item, ItemId, ManifestEntry, Section } from '../../../shared/types';
import {
renderRow, renderSignatureBlock, wireFieldHandlers, renderSections,
renderSectionsEditor, wireSectionsEditor,
} from '../fields';
let activeKeyHandler: ((e: KeyboardEvent) => void) | null = null;
let activeFormEscHandler: ((e: KeyboardEvent) => void) | null = null;
let sectionsExpanded = false;
export function teardown(): void {
if (activeKeyHandler) {
@@ -19,6 +21,7 @@ export function teardown(): void {
document.removeEventListener('keydown', activeFormEscHandler);
activeFormEscHandler = null;
}
sectionsExpanded = false;
}
function initials(name: string | undefined): string {
@@ -115,6 +118,10 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
const title = existing?.title ?? '';
const c = (existing?.core.type === 'identity') ? existing.core : null;
const sectionsDraft: Section[] = existing
? JSON.parse(JSON.stringify(existing.sections)) as Section[]
: [];
app.innerHTML = `
<div class="pad">
<div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new identity' : 'edit identity'}</div>
@@ -131,6 +138,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
<textarea id="f-address" rows="3" placeholder="street, city, postcode...">${escapeHtml(c?.address ?? '')}</textarea></div>
<div class="form-group"><label class="label" for="f-dob">date of birth</label>
<input id="f-dob" type="date" value="${escapeHtml(c?.date_of_birth ?? '')}"></div>
${renderSectionsEditor(sectionsDraft, sectionsExpanded)}
<div class="form-actions">
<button class="btn" id="cancel-btn">cancel</button>
<button class="btn btn-primary" id="save-btn">save</button>
@@ -138,12 +146,21 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
</div>
`;
const rerender = (): void => {
const disclosure = app.querySelector('.disclosure');
if (!disclosure) return;
sectionsExpanded = disclosure.getAttribute('data-expanded') === 'true';
disclosure.outerHTML = renderSectionsEditor(sectionsDraft, sectionsExpanded);
wireSectionsEditor(app, sectionsDraft, rerender);
};
wireSectionsEditor(app, sectionsDraft, rerender);
document.getElementById('cancel-btn')?.addEventListener('click', () => {
setState({ error: null });
navigate(mode === 'edit' ? 'detail' : 'list');
});
document.getElementById('save-btn')?.addEventListener('click', async () => {
await saveIdentity(mode, existing);
await saveIdentity(mode, existing, sectionsDraft);
});
const escHandler = (e: KeyboardEvent) => {
@@ -158,7 +175,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
(document.getElementById('f-title') as HTMLInputElement | null)?.focus();
}
async function saveIdentity(mode: 'add' | 'edit', existing: Item | null): Promise<void> {
async function saveIdentity(mode: 'add' | 'edit', existing: Item | null, sectionsDraft: Section[]): Promise<void> {
const state = getState();
const title = (document.getElementById('f-title') as HTMLInputElement).value.trim();
if (!title) { setState({ error: 'Title is required' }); return; }
@@ -184,7 +201,7 @@ async function saveIdentity(mode: 'add' | 'edit', existing: Item | null): Promis
created: existing?.created ?? now,
modified: now, trashed_at: undefined,
core,
sections: existing?.sections ?? [],
sections: sectionsDraft,
attachments: existing?.attachments ?? [],
field_history: existing?.field_history ?? {},
};

25
extension/src/popup/components/types/key.ts
View File

@@ -3,13 +3,15 @@
/// since <textarea type="password"> isn't a thing.
import { getState, setState, sendMessage, navigate, escapeHtml } from '../../popup';
import type { Item, ItemId, ManifestEntry } from '../../../shared/types';
import type { Item, ItemId, ManifestEntry, Section } from '../../../shared/types';
import {
renderRow, renderConcealedRow, renderSignatureBlock, wireFieldHandlers, renderSections,
renderSectionsEditor, wireSectionsEditor,
} from '../fields';
let activeKeyHandler: ((e: KeyboardEvent) => void) | null = null;
let activeFormEscHandler: ((e: KeyboardEvent) => void) | null = null;
let sectionsExpanded = false;
export function teardown(): void {
if (activeKeyHandler) {
@@ -20,6 +22,7 @@ export function teardown(): void {
document.removeEventListener('keydown', activeFormEscHandler);
activeFormEscHandler = null;
}
sectionsExpanded = false;
}
export async function renderDetail(app: HTMLElement, item: Item): Promise<void> {
@@ -104,6 +107,10 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
const title = existing?.title ?? '';
const c = (existing?.core.type === 'key') ? existing.core : null;
const sectionsDraft: Section[] = existing
? JSON.parse(JSON.stringify(existing.sections)) as Section[]
: [];
app.innerHTML = `
<div class="pad">
<div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new key' : 'edit key'}</div>
@@ -121,6 +128,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
<input id="f-algorithm" type="text" value="${escapeHtml(c?.algorithm ?? '')}" placeholder="ed25519"></div>
<div class="form-group"><label class="label" for="f-public-key">public key</label>
<textarea id="f-public-key" rows="4" style="font-family:monospace;" placeholder="ssh-ed25519 AAAA...">${escapeHtml(c?.public_key ?? '')}</textarea></div>
${renderSectionsEditor(sectionsDraft, sectionsExpanded)}
<div class="form-actions">
<button class="btn" id="cancel-btn">cancel</button>
<button class="btn btn-primary" id="save-btn">save</button>
@@ -128,6 +136,15 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
</div>
`;
const rerender = (): void => {
const disclosure = app.querySelector('.disclosure');
if (!disclosure) return;
sectionsExpanded = disclosure.getAttribute('data-expanded') === 'true';
disclosure.outerHTML = renderSectionsEditor(sectionsDraft, sectionsExpanded);
wireSectionsEditor(app, sectionsDraft, rerender);
};
wireSectionsEditor(app, sectionsDraft, rerender);
// Show/hide toggle for the key_material textarea.
let revealed = false;
document.getElementById('key-show-btn')?.addEventListener('click', () => {
@@ -142,7 +159,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
navigate(mode === 'edit' ? 'detail' : 'list');
});
document.getElementById('save-btn')?.addEventListener('click', async () => {
await saveKey(mode, existing);
await saveKey(mode, existing, sectionsDraft);
});
const escHandler = (e: KeyboardEvent) => {
@@ -157,7 +174,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
(document.getElementById('f-title') as HTMLInputElement | null)?.focus();
}
async function saveKey(mode: 'add' | 'edit', existing: Item | null): Promise<void> {
async function saveKey(mode: 'add' | 'edit', existing: Item | null, sectionsDraft: Section[]): Promise<void> {
const state = getState();
const title = (document.getElementById('f-title') as HTMLInputElement).value.trim();
if (!title) { setState({ error: 'Title is required' }); return; }
@@ -185,7 +202,7 @@ async function saveKey(mode: 'add' | 'edit', existing: Item | null): Promise<voi
created: existing?.created ?? now,
modified: now, trashed_at: undefined,
core,
sections: existing?.sections ?? [],
sections: sectionsDraft,
attachments: existing?.attachments ?? [],
field_history: existing?.field_history ?? {},
};

26
extension/src/popup/components/types/login.ts
View File

@@ -2,7 +2,7 @@
/// field helpers introduced in Slice 2.
import { getState, setState, sendMessage, navigate, escapeHtml } from '../../popup';
import type { Item, ItemId, LoginCore, ManifestEntry, TotpConfig } from '../../../shared/types';
import type { Item, ItemId, LoginCore, ManifestEntry, Section, TotpConfig } from '../../../shared/types';
import { DEFAULT_PASSWORD_REQUEST } from '../../../shared/types';
import { base32Decode, base32Encode } from '../../../shared/base32';
import {
@@ -11,6 +11,8 @@ import {
renderSignatureBlock,
wireFieldHandlers,
renderSections,
renderSectionsEditor,
wireSectionsEditor,
} from '../fields';
/// Called by the dispatcher before each render. Stops any in-flight
@@ -25,6 +27,7 @@ export function teardown(): void {
document.removeEventListener('keydown', activeFormEscHandler);
activeFormEscHandler = null;
}
sectionsExpanded = false;
}
// ----------------------------------------------------------------------
@@ -181,6 +184,7 @@ export async function renderDetail(app: HTMLElement, item: Item): Promise<void>
let totpTickerId: ReturnType<typeof setInterval> | null = null;
let activeKeyHandler: ((e: KeyboardEvent) => void) | null = null;
let activeFormEscHandler: ((e: KeyboardEvent) => void) | null = null;
let sectionsExpanded = false;
function stopTotpTicker(): void {
if (totpTickerId !== null) { clearInterval(totpTickerId); totpTickerId = null; }
}
@@ -217,6 +221,10 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
const group = existing?.group ?? '';
const notes = existing?.notes ?? '';
const sectionsDraft: Section[] = existing
? JSON.parse(JSON.stringify(existing.sections)) as Section[]
: [];
app.innerHTML = `
<div class="pad">
<div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new login' : 'edit login'}</div>
@@ -238,6 +246,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
<input id="f-group" type="text" value="${escapeHtml(group)}" placeholder="work"></div>
<div class="form-group"><label class="label" for="f-notes">notes</label>
<textarea id="f-notes" placeholder="recovery codes, security questions...">${escapeHtml(notes)}</textarea></div>
${renderSectionsEditor(sectionsDraft, sectionsExpanded)}
<div class="form-actions">
<button class="btn" id="cancel-btn">cancel</button>
<button class="btn btn-primary" id="save-btn">${state.loading ? '<span class="spinner"></span>' : 'save'}</button>
@@ -245,6 +254,15 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
</div>
`;
const rerender = (): void => {
const disclosure = app.querySelector('.disclosure');
if (!disclosure) return;
sectionsExpanded = disclosure.getAttribute('data-expanded') === 'true';
disclosure.outerHTML = renderSectionsEditor(sectionsDraft, sectionsExpanded);
wireSectionsEditor(app, sectionsDraft, rerender);
};
wireSectionsEditor(app, sectionsDraft, rerender);
document.getElementById('gen-btn')?.addEventListener('click', async () => {
const resp = await sendMessage({ type: 'generate_password', request: DEFAULT_PASSWORD_REQUEST });
if (resp.ok) {
@@ -261,7 +279,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
});
document.getElementById('save-btn')?.addEventListener('click', async () => {
await saveLogin(mode, existing);
await saveLogin(mode, existing, sectionsDraft);
});
const escHandler = (e: KeyboardEvent) => {
@@ -289,7 +307,7 @@ function normalizeUrl(raw: string): { ok: true; value: string } | { ok: false; e
}
}
async function saveLogin(mode: 'add' | 'edit', existing: Item | null): Promise<void> {
async function saveLogin(mode: 'add' | 'edit', existing: Item | null, sectionsDraft: Section[]): Promise<void> {
const state = getState();
const title = (document.getElementById('f-title') as HTMLInputElement).value.trim();
const rawUrl = (document.getElementById('f-url') as HTMLInputElement).value;
@@ -339,7 +357,7 @@ async function saveLogin(mode: 'add' | 'edit', existing: Item | null): Promise<v
modified: now,
trashed_at: undefined,
core,
sections: existing?.sections ?? [],
sections: sectionsDraft,
attachments: existing?.attachments ?? [],
field_history: existing?.field_history ?? {},
};

25
extension/src/popup/components/types/secure-note.ts
View File

@@ -2,13 +2,15 @@
/// detail view; the form is just a big <textarea>.
import { getState, setState, sendMessage, navigate, escapeHtml } from '../../popup';
import type { Item, ItemId, ManifestEntry } from '../../../shared/types';
import type { Item, ItemId, ManifestEntry, Section } from '../../../shared/types';
import {
renderConcealedRow, renderSignatureBlock, wireFieldHandlers, renderSections,
renderSectionsEditor, wireSectionsEditor,
} from '../fields';
let activeKeyHandler: ((e: KeyboardEvent) => void) | null = null;
let activeFormEscHandler: ((e: KeyboardEvent) => void) | null = null;
let sectionsExpanded = false;
export function teardown(): void {
if (activeKeyHandler) {
@@ -19,6 +21,7 @@ export function teardown(): void {
document.removeEventListener('keydown', activeFormEscHandler);
activeFormEscHandler = null;
}
sectionsExpanded = false;
}
export async function renderDetail(app: HTMLElement, item: Item): Promise<void> {
@@ -93,6 +96,10 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
const title = existing?.title ?? '';
const body = (existing?.core.type === 'secure_note') ? existing.core.body ?? '' : '';
const sectionsDraft: Section[] = existing
? JSON.parse(JSON.stringify(existing.sections)) as Section[]
: [];
app.innerHTML = `
<div class="pad">
<div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new secure note' : 'edit secure note'}</div>
@@ -101,6 +108,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
<input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="My recovery codes"></div>
<div class="form-group"><label class="label" for="f-body">body</label>
<textarea id="f-body" rows="10" placeholder="paste secrets here">${escapeHtml(body)}</textarea></div>
${renderSectionsEditor(sectionsDraft, sectionsExpanded)}
<div class="form-actions">
<button class="btn" id="cancel-btn">cancel</button>
<button class="btn btn-primary" id="save-btn">save</button>
@@ -108,12 +116,21 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
</div>
`;
const rerender = (): void => {
const disclosure = app.querySelector('.disclosure');
if (!disclosure) return;
sectionsExpanded = disclosure.getAttribute('data-expanded') === 'true';
disclosure.outerHTML = renderSectionsEditor(sectionsDraft, sectionsExpanded);
wireSectionsEditor(app, sectionsDraft, rerender);
};
wireSectionsEditor(app, sectionsDraft, rerender);
document.getElementById('cancel-btn')?.addEventListener('click', () => {
setState({ error: null });
navigate(mode === 'edit' ? 'detail' : 'list');
});
document.getElementById('save-btn')?.addEventListener('click', async () => {
await saveSecureNote(mode, existing);
await saveSecureNote(mode, existing, sectionsDraft);
});
const escHandler = (e: KeyboardEvent) => {
@@ -128,7 +145,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
(document.getElementById('f-title') as HTMLInputElement | null)?.focus();
}
async function saveSecureNote(mode: 'add' | 'edit', existing: Item | null): Promise<void> {
async function saveSecureNote(mode: 'add' | 'edit', existing: Item | null, sectionsDraft: Section[]): Promise<void> {
const state = getState();
const title = (document.getElementById('f-title') as HTMLInputElement).value.trim();
const body = (document.getElementById('f-body') as HTMLTextAreaElement).value;
@@ -146,7 +163,7 @@ async function saveSecureNote(mode: 'add' | 'edit', existing: Item | null): Prom
modified: now,
trashed_at: undefined,
core: { type: 'secure_note', body },
sections: existing?.sections ?? [],
sections: sectionsDraft,
attachments: existing?.attachments ?? [],
field_history: existing?.field_history ?? {},
};

36
extension/src/popup/components/types/totp.ts
View File

@@ -3,10 +3,11 @@
/// (TOTP vs Steam Guard) and a single secret input.
import { getState, setState, sendMessage, navigate, escapeHtml } from '../../popup';
import type { Item, ItemId, ManifestEntry, TotpKind } from '../../../shared/types';
import type { Item, ItemId, ManifestEntry, Section, TotpKind } from '../../../shared/types';
import { base32Decode, base32Encode } from '../../../shared/base32';
import {
renderRow, renderConcealedRow, renderSignatureBlock, wireFieldHandlers, renderSections,
renderSectionsEditor, wireSectionsEditor,
} from '../fields';
// ----------------------------------------------------------------------
@@ -16,6 +17,7 @@ import {
let totpTickerId: ReturnType<typeof setInterval> | null = null;
let activeKeyHandler: ((e: KeyboardEvent) => void) | null = null;
let activeFormEscHandler: ((e: KeyboardEvent) => void) | null = null;
let sectionsExpanded = false;
function stopTotpTicker(): void {
if (totpTickerId !== null) { clearInterval(totpTickerId); totpTickerId = null; }
@@ -33,6 +35,7 @@ export function teardown(): void {
document.removeEventListener('keydown', activeFormEscHandler);
activeFormEscHandler = null;
}
sectionsExpanded = false;
}
// ----------------------------------------------------------------------
@@ -194,6 +197,10 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
formKind = c?.config.kind === 'steam' ? 'steam' : 'totp';
const secretB32 = c?.config.secret ? base32Encode(new Uint8Array(c.config.secret)) : '';
const sectionsDraft: Section[] = existing
? JSON.parse(JSON.stringify(existing.sections)) as Section[]
: [];
const renderInner = (): string => `
<div class="pad">
<div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new totp' : 'edit totp'}</div>
@@ -213,6 +220,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
<input id="f-issuer" type="text" value="${escapeHtml(c?.issuer ?? '')}" placeholder="GitHub"></div>
<div class="form-group"><label class="label" for="f-label">label</label>
<input id="f-label" type="text" value="${escapeHtml(c?.label ?? '')}" placeholder="alice@github.com"></div>
${renderSectionsEditor(sectionsDraft, sectionsExpanded)}
<div class="form-actions">
<button class="btn" id="cancel-btn">cancel</button>
<button class="btn btn-primary" id="save-btn">save</button>
@@ -235,7 +243,20 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
(document.getElementById('f-issuer') as HTMLInputElement).value = issuerVal;
(document.getElementById('f-label') as HTMLInputElement).value = labelVal;
wireKindToggle();
wireFormButtons(mode, existing);
wireFormButtons(mode, existing, sectionsDraft);
wireSectionsEditor(app, sectionsDraft, sectionsRerender);
};
// Rerender only the sections editor in place (used by structural section
// mutations — add/remove). Reuses the form-wide reRender for simplicity
// since kind toggle already re-mounts the full inner DOM; here we just
// need to preserve sectionsExpanded and swap the disclosure block.
const sectionsRerender = (): void => {
const disclosure = app.querySelector('.disclosure');
if (!disclosure) return;
sectionsExpanded = disclosure.getAttribute('data-expanded') === 'true';
disclosure.outerHTML = renderSectionsEditor(sectionsDraft, sectionsExpanded);
wireSectionsEditor(app, sectionsDraft, sectionsRerender);
};
const wireKindToggle = (): void => {
@@ -250,7 +271,8 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
};
wireKindToggle();
wireFormButtons(mode, existing);
wireFormButtons(mode, existing, sectionsDraft);
wireSectionsEditor(app, sectionsDraft, sectionsRerender);
const escHandler = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
@@ -264,17 +286,17 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
(document.getElementById('f-title') as HTMLInputElement | null)?.focus();
}
function wireFormButtons(mode: 'add' | 'edit', existing: Item | null): void {
function wireFormButtons(mode: 'add' | 'edit', existing: Item | null, sectionsDraft: Section[]): void {
document.getElementById('cancel-btn')?.addEventListener('click', () => {
setState({ error: null });
navigate(mode === 'edit' ? 'detail' : 'list');
});
document.getElementById('save-btn')?.addEventListener('click', async () => {
await saveTotp(mode, existing);
await saveTotp(mode, existing, sectionsDraft);
});
}
async function saveTotp(mode: 'add' | 'edit', existing: Item | null): Promise<void> {
async function saveTotp(mode: 'add' | 'edit', existing: Item | null, sectionsDraft: Section[]): Promise<void> {
const state = getState();
const title = (document.getElementById('f-title') as HTMLInputElement).value.trim();
if (!title) { setState({ error: 'Title is required' }); return; }
@@ -317,7 +339,7 @@ async function saveTotp(mode: 'add' | 'edit', existing: Item | null): Promise<vo
created: existing?.created ?? now,
modified: now, trashed_at: undefined,
core,
sections: existing?.sections ?? [],
sections: sectionsDraft,
attachments: existing?.attachments ?? [],
field_history: existing?.field_history ?? {},
};