refactor(ext/popup): extract Login to types/login.ts on shared helpers
This commit is contained in:
adlee-was-taken
@@ -1,374 +1,33 @@
|
|||||||
/// Typed-item detail view — dispatches on `item.type`. Slice 6 delivers
|
/// Typed-item detail view dispatcher. Each type's renderDetail lives in
|
||||||
/// full Login parity; all other types show a "coming soon" placeholder.
|
/// its own module under ./types/. Document stays "coming soon" until γ.
|
||||||
///
|
|
||||||
/// Autofill uses the (capturedTabId, capturedUrl) pair snapshotted at
|
|
||||||
/// popup-open (see PopupState + router/popup-only.ts#handleFillCredentials)
|
|
||||||
/// so the SW can reject the fill if the tab navigated.
|
|
||||||
|
|
||||||
import { getState, setState, sendMessage, navigate, escapeHtml } from '../popup';
|
import { navigate } from '../popup';
|
||||||
import type { Item, ItemId, ManifestEntry, LoginCore, TotpConfig } from '../../shared/types';
|
import type { Item } from '../../shared/types';
|
||||||
|
import { getState } from '../popup';
|
||||||
|
import * as login from './types/login';
|
||||||
|
|
||||||
let totpInterval: ReturnType<typeof setInterval> | null = null;
|
export async function renderItemDetail(app: HTMLElement): Promise<void> {
|
||||||
|
const item = getState().selectedItem;
|
||||||
|
if (!item) { navigate('list'); return; }
|
||||||
|
|
||||||
function stopTotpTimer(): void {
|
switch (item.type) {
|
||||||
if (totpInterval !== null) {
|
case 'login': return login.renderDetail(app, item);
|
||||||
clearInterval(totpInterval);
|
case 'secure_note':
|
||||||
totpInterval = null;
|
case 'identity':
|
||||||
|
case 'card':
|
||||||
|
case 'key':
|
||||||
|
case 'totp':
|
||||||
|
case 'document': return renderComingSoon(app, item);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function copyToClipboard(text: string): Promise<void> {
|
|
||||||
try {
|
|
||||||
await navigator.clipboard.writeText(text);
|
|
||||||
} catch {
|
|
||||||
// Fallback for older browsers.
|
|
||||||
const ta = document.createElement('textarea');
|
|
||||||
ta.value = text;
|
|
||||||
ta.style.position = 'fixed';
|
|
||||||
ta.style.left = '-9999px';
|
|
||||||
document.body.appendChild(ta);
|
|
||||||
ta.select();
|
|
||||||
document.execCommand('copy');
|
|
||||||
document.body.removeChild(ta);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function renderItemDetail(app: HTMLElement): void {
|
|
||||||
const state = getState();
|
|
||||||
const item = state.selectedItem;
|
|
||||||
if (!item) {
|
|
||||||
navigate('list');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
stopTotpTimer();
|
|
||||||
|
|
||||||
if (item.type === 'login') {
|
|
||||||
renderLogin(app, item);
|
|
||||||
} else {
|
|
||||||
renderComingSoon(app, item);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Login detail ------------------------------------------------------
|
|
||||||
|
|
||||||
function renderLogin(app: HTMLElement, item: Item): void {
|
|
||||||
const core = item.core as (LoginCore & { type: 'login' });
|
|
||||||
const hasTotp = core.totp !== undefined;
|
|
||||||
|
|
||||||
let html = `
|
|
||||||
<div class="detail-header">
|
|
||||||
<span class="detail-title">${escapeHtml(item.title)}</span>
|
|
||||||
<button class="btn" id="back-btn" style="font-size:11px;">esc</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
if (core.url) {
|
|
||||||
html += `
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">url</div>
|
|
||||||
<div class="field-value"><a href="${escapeHtml(core.url)}" target="_blank" rel="noopener noreferrer" style="color:#58a6ff; text-decoration:none;">${escapeHtml(core.url)}</a></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (core.username) {
|
|
||||||
html += `
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">username</div>
|
|
||||||
<div class="field-value" id="username-val" style="cursor:pointer;" title="click to copy">${escapeHtml(core.username)}</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
html += `
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">password</div>
|
|
||||||
<div class="field-value" id="password-val" style="cursor:pointer;" title="click to toggle">
|
|
||||||
<span id="password-display">********</span>
|
|
||||||
<button class="btn" id="password-copy" style="font-size:10px; margin-left:8px; padding:2px 6px;">copy</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
if (hasTotp) {
|
|
||||||
html += `
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">totp</div>
|
|
||||||
<div class="totp-code" id="totp-code">------</div>
|
|
||||||
<div class="totp-bar"><div class="totp-bar-fill" id="totp-bar-fill" style="width:100%;"></div></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (item.notes) {
|
|
||||||
html += `
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">notes</div>
|
|
||||||
<div class="field-value" style="white-space:pre-wrap;">${escapeHtml(item.notes)}</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (item.group) {
|
|
||||||
html += `
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">group</div>
|
|
||||||
<div class="field-value">${escapeHtml(item.group)}</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
html += `
|
|
||||||
<div class="field">
|
|
||||||
<div class="muted">modified ${escapeHtml(new Date(item.modified * 1000).toISOString())}</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
html += `
|
|
||||||
<div class="form-actions" style="padding:8px 12px;">
|
|
||||||
<button class="btn btn-primary" id="fill-btn">autofill</button>
|
|
||||||
<button class="btn" id="edit-btn">edit</button>
|
|
||||||
<button class="btn btn-danger" id="trash-btn" style="margin-left:auto;">trash</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
html += `
|
|
||||||
<div class="keyhints">
|
|
||||||
<span><kbd>c</kbd> copy user</span>
|
|
||||||
<span><kbd>p</kbd> copy pass</span>
|
|
||||||
${hasTotp ? '<span><kbd>t</kbd> copy totp</span>' : ''}
|
|
||||||
<span><kbd>f</kbd> autofill</span>
|
|
||||||
<span><kbd>e</kbd> edit</span>
|
|
||||||
<span><kbd>d</kbd> trash</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
app.innerHTML = html;
|
|
||||||
|
|
||||||
// --- Password toggle ---
|
|
||||||
let passwordVisible = false;
|
|
||||||
const passwordDisplay = document.getElementById('password-display');
|
|
||||||
const passwordVal = document.getElementById('password-val');
|
|
||||||
const password = core.password ?? '';
|
|
||||||
passwordVal?.addEventListener('click', (e) => {
|
|
||||||
// Ignore clicks originating on the copy button.
|
|
||||||
if ((e.target as HTMLElement).id === 'password-copy') return;
|
|
||||||
passwordVisible = !passwordVisible;
|
|
||||||
if (passwordDisplay) passwordDisplay.textContent = passwordVisible ? password : '********';
|
|
||||||
});
|
|
||||||
document.getElementById('password-copy')?.addEventListener('click', async (e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
await copyToClipboard(password);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (core.username) {
|
|
||||||
document.getElementById('username-val')?.addEventListener('click', async () => {
|
|
||||||
await copyToClipboard(core.username ?? '');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('back-btn')?.addEventListener('click', goBack);
|
|
||||||
|
|
||||||
document.getElementById('fill-btn')?.addEventListener('click', async () => {
|
|
||||||
const { capturedTabId, capturedUrl } = getState();
|
|
||||||
if (capturedTabId === null) {
|
|
||||||
setState({ error: 'No active tab captured' });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const resp = await sendMessage({
|
|
||||||
type: 'fill_credentials',
|
|
||||||
id: item.id,
|
|
||||||
capturedTabId,
|
|
||||||
capturedUrl,
|
|
||||||
});
|
|
||||||
if (!resp.ok) {
|
|
||||||
setState({ error: resp.error });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
window.close();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('edit-btn')?.addEventListener('click', () => {
|
|
||||||
document.removeEventListener('keydown', handler);
|
|
||||||
stopTotpTimer();
|
|
||||||
navigate('edit');
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('trash-btn')?.addEventListener('click', () => {
|
|
||||||
showDeleteConfirm(item.id, item.title, handler);
|
|
||||||
});
|
|
||||||
|
|
||||||
// --- TOTP timer ---
|
|
||||||
if (hasTotp) {
|
|
||||||
void refreshTotp(item.id);
|
|
||||||
totpInterval = setInterval(() => { void refreshTotp(item.id); }, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Keyboard shortcuts ---
|
|
||||||
const handler = async (e: KeyboardEvent) => {
|
|
||||||
// Bail if the user is typing into any editable field — don't steal
|
|
||||||
// printable keystrokes meant for an input/textarea/contenteditable element.
|
|
||||||
const t = e.target;
|
|
||||||
if (t instanceof HTMLElement) {
|
|
||||||
const tag = t.tagName;
|
|
||||||
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || t.isContentEditable) return;
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (e.key) {
|
|
||||||
case 'Escape':
|
|
||||||
document.removeEventListener('keydown', handler);
|
|
||||||
goBack();
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'c':
|
|
||||||
if (core.username) await copyToClipboard(core.username);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'p':
|
|
||||||
await copyToClipboard(password);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 't':
|
|
||||||
if (hasTotp) {
|
|
||||||
const codeEl = document.getElementById('totp-code');
|
|
||||||
if (codeEl) await copyToClipboard(codeEl.textContent ?? '');
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'f': {
|
|
||||||
const { capturedTabId, capturedUrl } = getState();
|
|
||||||
if (capturedTabId === null) {
|
|
||||||
setState({ error: 'No active tab captured' });
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
const resp = await sendMessage({
|
|
||||||
type: 'fill_credentials',
|
|
||||||
id: item.id,
|
|
||||||
capturedTabId,
|
|
||||||
capturedUrl,
|
|
||||||
});
|
|
||||||
if (!resp.ok) setState({ error: resp.error });
|
|
||||||
else window.close();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'e':
|
|
||||||
document.removeEventListener('keydown', handler);
|
|
||||||
stopTotpTimer();
|
|
||||||
navigate('edit');
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'd':
|
|
||||||
e.preventDefault();
|
|
||||||
showDeleteConfirm(item.id, item.title, handler);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
document.addEventListener('keydown', handler);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function refreshTotp(id: ItemId): Promise<void> {
|
|
||||||
const resp = await sendMessage({ type: 'get_totp', id });
|
|
||||||
if (resp.ok) {
|
|
||||||
const data = resp.data as { code: string; expires_at: number };
|
|
||||||
const codeEl = document.getElementById('totp-code');
|
|
||||||
const barEl = document.getElementById('totp-bar-fill');
|
|
||||||
if (codeEl) codeEl.textContent = data.code;
|
|
||||||
if (barEl) {
|
|
||||||
const now = Math.floor(Date.now() / 1000);
|
|
||||||
const remaining = Math.max(0, data.expires_at - now);
|
|
||||||
// Period is 30 by default; compute ratio against 30.
|
|
||||||
barEl.style.width = `${(remaining / 30) * 100}%`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Suppress unused warning; TotpConfig referenced for typing only below.
|
|
||||||
void ({} as TotpConfig);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Coming-soon for non-login types -----------------------------------
|
|
||||||
|
|
||||||
function renderComingSoon(app: HTMLElement, item: Item): void {
|
function renderComingSoon(app: HTMLElement, item: Item): void {
|
||||||
app.innerHTML = `
|
app.innerHTML = `
|
||||||
<div class="detail-header">
|
<div class="pad">
|
||||||
<span class="detail-title">${escapeHtml(item.title)}</span>
|
<div class="detail-title" style="margin-bottom:16px;">${item.title}</div>
|
||||||
<button class="btn" id="back-btn" style="font-size:11px;">esc</button>
|
<p class="muted">The <strong>${item.type}</strong> item type is not editable in the extension yet.</p>
|
||||||
</div>
|
<div class="form-actions"><button class="btn" id="back-btn">back</button></div>
|
||||||
<div class="pad" style="text-align:center; padding:32px 16px;">
|
|
||||||
<div style="font-size:32px; margin-bottom:12px;">${typeEmoji(item.type)}</div>
|
|
||||||
<div style="font-size:14px; color:#c9d1d9; margin-bottom:4px;">${escapeHtml(item.type.replace('_', ' '))}</div>
|
|
||||||
<p class="muted">read/write for this type is coming in a later slice.</p>
|
|
||||||
<p class="muted" style="margin-top:8px;">use the CLI for now.</p>
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
document.getElementById('back-btn')?.addEventListener('click', () => navigate('list'));
|
||||||
document.getElementById('back-btn')?.addEventListener('click', goBack);
|
|
||||||
|
|
||||||
const handler = (e: KeyboardEvent) => {
|
|
||||||
if (e.key === 'Escape') {
|
|
||||||
document.removeEventListener('keydown', handler);
|
|
||||||
goBack();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
document.addEventListener('keydown', handler);
|
|
||||||
}
|
|
||||||
|
|
||||||
function typeEmoji(t: Item['type']): string {
|
|
||||||
switch (t) {
|
|
||||||
case 'login': return '🔑';
|
|
||||||
case 'secure_note': return '📝';
|
|
||||||
case 'identity': return '🪪';
|
|
||||||
case 'card': return '💳';
|
|
||||||
case 'key': return '🗝';
|
|
||||||
case 'document': return '📄';
|
|
||||||
case 'totp': return '⏱';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Shared helpers ----------------------------------------------------
|
|
||||||
|
|
||||||
function goBack(): void {
|
|
||||||
stopTotpTimer();
|
|
||||||
// Reload the item list.
|
|
||||||
void sendMessage({ type: 'list_items' }).then(resp => {
|
|
||||||
if (resp.ok) {
|
|
||||||
const data = resp.data as { items: Array<[ItemId, ManifestEntry]> };
|
|
||||||
navigate('list', {
|
|
||||||
entries: data.items,
|
|
||||||
selectedId: null,
|
|
||||||
selectedItem: null,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function showDeleteConfirm(id: ItemId, title: string, parentHandler: (e: KeyboardEvent) => void): void {
|
|
||||||
const overlay = document.createElement('div');
|
|
||||||
overlay.className = 'confirm-overlay';
|
|
||||||
overlay.innerHTML = `
|
|
||||||
<div class="confirm-box">
|
|
||||||
<p>Trash <strong>${escapeHtml(title)}</strong>?</p>
|
|
||||||
<button class="btn" id="cancel-delete">cancel</button>
|
|
||||||
<button class="btn btn-danger" id="confirm-delete">trash</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
document.body.appendChild(overlay);
|
|
||||||
|
|
||||||
document.getElementById('cancel-delete')?.addEventListener('click', () => {
|
|
||||||
overlay.remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('confirm-delete')?.addEventListener('click', async () => {
|
|
||||||
overlay.remove();
|
|
||||||
setState({ loading: true });
|
|
||||||
const resp = await sendMessage({ type: 'delete_item', id });
|
|
||||||
if (resp.ok) {
|
|
||||||
document.removeEventListener('keydown', parentHandler);
|
|
||||||
stopTotpTimer();
|
|
||||||
goBack();
|
|
||||||
} else {
|
|
||||||
setState({ loading: false, error: resp.error });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,281 +1,33 @@
|
|||||||
/// Typed-item add/edit form. Slice 6 ships full Login parity; other
|
/// Typed-item add/edit form dispatcher. Each type's renderForm lives in
|
||||||
/// types show a coming-soon placeholder (use the CLI for now).
|
/// its own module under ./types/. Document stays "coming soon" until γ.
|
||||||
///
|
|
||||||
/// Carry-forward from Slice 5 review M3: on edit, trashed_at is
|
|
||||||
/// explicitly reset to undefined so stale trash state cannot survive an
|
|
||||||
/// edit. (The capture path already uses spread + fetched item; this
|
|
||||||
/// popup flow uses state.selectedItem.)
|
|
||||||
|
|
||||||
import { getState, setState, sendMessage, navigate, escapeHtml } from '../popup';
|
import { navigate, getState } from '../popup';
|
||||||
import type {
|
import type { Item, ItemType } from '../../shared/types';
|
||||||
Item, ItemId, ItemType, ManifestEntry, LoginCore, TotpConfig,
|
import * as login from './types/login';
|
||||||
} from '../../shared/types';
|
|
||||||
import { DEFAULT_PASSWORD_REQUEST } from '../../shared/types';
|
|
||||||
import { base32Decode, base32Encode } from '../../shared/base32';
|
|
||||||
|
|
||||||
// Which types support add/edit in Slice 6.
|
|
||||||
function isEditableType(t: ItemType): boolean {
|
|
||||||
return t === 'login';
|
|
||||||
}
|
|
||||||
|
|
||||||
export function renderItemForm(app: HTMLElement, mode: 'add' | 'edit'): void {
|
export function renderItemForm(app: HTMLElement, mode: 'add' | 'edit'): void {
|
||||||
const state = getState();
|
const state = getState();
|
||||||
const existing = mode === 'edit' ? state.selectedItem : null;
|
const existing = mode === 'edit' ? state.selectedItem : null;
|
||||||
|
const type: ItemType = existing?.type ?? state.newType ?? 'login';
|
||||||
|
|
||||||
// Determine the type we're editing/creating. Add defaults to login.
|
switch (type) {
|
||||||
const type: ItemType = existing?.type ?? 'login';
|
case 'login': return login.renderForm(app, mode, existing);
|
||||||
|
case 'secure_note':
|
||||||
if (!isEditableType(type)) {
|
case 'identity':
|
||||||
renderComingSoon(app, type);
|
case 'card':
|
||||||
return;
|
case 'key':
|
||||||
|
case 'totp':
|
||||||
|
case 'document': return renderComingSoon(app, type);
|
||||||
}
|
}
|
||||||
|
|
||||||
renderLoginForm(app, mode, existing);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- Coming-soon -------------------------------------------------------
|
|
||||||
|
|
||||||
function renderComingSoon(app: HTMLElement, type: ItemType): void {
|
function renderComingSoon(app: HTMLElement, type: ItemType): void {
|
||||||
app.innerHTML = `
|
app.innerHTML = `
|
||||||
<div class="pad">
|
<div class="pad">
|
||||||
<div class="detail-title" style="margin-bottom:16px;">${escapeHtml(type.replace('_', ' '))}</div>
|
<div class="detail-title" style="margin-bottom:16px;">${type.replace('_', ' ')}</div>
|
||||||
<p class="muted">editing ${escapeHtml(type)} items is coming in a later slice.</p>
|
<p class="muted">Editing <strong>${type}</strong> items is not available yet.</p>
|
||||||
<p class="muted" style="margin-top:8px;">use the CLI for now.</p>
|
<div class="form-actions"><button class="btn" id="back-btn">back</button></div>
|
||||||
<div class="form-actions">
|
|
||||||
<button class="btn" id="back-btn">back</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
document.getElementById('back-btn')?.addEventListener('click', () => navigate('list'));
|
document.getElementById('back-btn')?.addEventListener('click', () => navigate('list'));
|
||||||
const handler = (e: KeyboardEvent) => {
|
|
||||||
if (e.key === 'Escape') {
|
|
||||||
document.removeEventListener('keydown', handler);
|
|
||||||
navigate('list');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
document.addEventListener('keydown', handler);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Login add/edit ----------------------------------------------------
|
|
||||||
|
|
||||||
/// Encode TotpConfig secret bytes back to a base32 display string.
|
|
||||||
function totpSecretToBase32(totp: TotpConfig | undefined): string {
|
|
||||||
if (!totp) return '';
|
|
||||||
return base32Encode(new Uint8Array(totp.secret));
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderLoginForm(app: HTMLElement, mode: 'add' | 'edit', existing: Item | null): void {
|
|
||||||
const state = getState();
|
|
||||||
const existingCore = (existing?.core.type === 'login')
|
|
||||||
? (existing.core as LoginCore & { type: 'login' })
|
|
||||||
: null;
|
|
||||||
|
|
||||||
const title = existing?.title ?? '';
|
|
||||||
const url = existingCore?.url ?? '';
|
|
||||||
const username = existingCore?.username ?? '';
|
|
||||||
const password = existingCore?.password ?? '';
|
|
||||||
const totpStr = totpSecretToBase32(existingCore?.totp);
|
|
||||||
const group = existing?.group ?? '';
|
|
||||||
const notes = existing?.notes ?? '';
|
|
||||||
|
|
||||||
app.innerHTML = `
|
|
||||||
<div class="pad">
|
|
||||||
<div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new login' : 'edit login'}</div>
|
|
||||||
${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="label" for="f-title">title *</label>
|
|
||||||
<input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="GitHub">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="label" for="f-url">url</label>
|
|
||||||
<input id="f-url" type="text" value="${escapeHtml(url)}" placeholder="https://github.com/login">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="label" for="f-username">username</label>
|
|
||||||
<input id="f-username" type="text" value="${escapeHtml(username)}" placeholder="alice@example.com">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="label" for="f-password">password</label>
|
|
||||||
<div class="inline-row">
|
|
||||||
<input id="f-password" type="password" value="${escapeHtml(password)}">
|
|
||||||
<button class="btn" id="gen-btn" title="generate">gen</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="label" for="f-totp">totp secret (base32)</label>
|
|
||||||
<input id="f-totp" type="text" value="${escapeHtml(totpStr)}" placeholder="JBSWY3DPEHPK3PXP">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="label" for="f-group">group</label>
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// --- Generate password ---
|
|
||||||
document.getElementById('gen-btn')?.addEventListener('click', async () => {
|
|
||||||
const resp = await sendMessage({ type: 'generate_password', request: DEFAULT_PASSWORD_REQUEST });
|
|
||||||
if (resp.ok) {
|
|
||||||
const data = resp.data as { password: string };
|
|
||||||
const pwInput = document.getElementById('f-password') as HTMLInputElement;
|
|
||||||
pwInput.value = data.password;
|
|
||||||
pwInput.type = 'text'; // Show generated password.
|
|
||||||
} else {
|
|
||||||
setState({ error: resp.error });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// --- Cancel ---
|
|
||||||
document.getElementById('cancel-btn')?.addEventListener('click', () => goBack(mode));
|
|
||||||
|
|
||||||
// --- Save ---
|
|
||||||
document.getElementById('save-btn')?.addEventListener('click', async () => {
|
|
||||||
await saveLogin(mode, existing);
|
|
||||||
});
|
|
||||||
|
|
||||||
// --- Escape to cancel ---
|
|
||||||
const escHandler = (e: KeyboardEvent) => {
|
|
||||||
if (e.key === 'Escape') {
|
|
||||||
document.removeEventListener('keydown', escHandler);
|
|
||||||
goBack(mode);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
document.addEventListener('keydown', escHandler);
|
|
||||||
|
|
||||||
// Focus the title field.
|
|
||||||
(document.getElementById('f-title') as HTMLInputElement | null)?.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
function goBack(mode: 'add' | 'edit'): void {
|
|
||||||
const s = getState();
|
|
||||||
if (mode === 'edit' && s.selectedId && s.selectedItem) {
|
|
||||||
navigate('detail');
|
|
||||||
} else {
|
|
||||||
navigate('list');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Normalize a URL input so the Rust-side `url::Url::parse` accepts it.
|
|
||||||
///
|
|
||||||
/// Prepends `https://` when the input looks like a bare host (no scheme),
|
|
||||||
/// then validates via the JS URL constructor. Returns { ok, value, error }.
|
|
||||||
function normalizeUrl(raw: string): { ok: true; value: string } | { ok: false; error: string } {
|
|
||||||
if (!raw) return { ok: true, value: '' };
|
|
||||||
const trimmed = raw.trim();
|
|
||||||
// If it already has a scheme, pass through. Otherwise assume https://.
|
|
||||||
const candidate = /^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(trimmed)
|
|
||||||
? trimmed
|
|
||||||
: `https://${trimmed}`;
|
|
||||||
try {
|
|
||||||
const u = new URL(candidate);
|
|
||||||
// url::Url rejects schemes without an authority (host). Require a host.
|
|
||||||
if (!u.host) return { ok: false, error: 'URL must include a host (e.g. https://example.com)' };
|
|
||||||
return { ok: true, value: u.toString() };
|
|
||||||
} catch {
|
|
||||||
return { ok: false, error: 'URL is not valid — try something like https://example.com' };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function saveLogin(mode: 'add' | 'edit', existing: Item | null): Promise<void> {
|
|
||||||
const state = getState();
|
|
||||||
|
|
||||||
const title = (document.getElementById('f-title') as HTMLInputElement).value.trim();
|
|
||||||
const rawUrl = (document.getElementById('f-url') as HTMLInputElement).value;
|
|
||||||
const username = (document.getElementById('f-username') as HTMLInputElement).value.trim();
|
|
||||||
const password = (document.getElementById('f-password') as HTMLInputElement).value;
|
|
||||||
const totpStr = (document.getElementById('f-totp') as HTMLInputElement).value.trim();
|
|
||||||
const group = (document.getElementById('f-group') as HTMLInputElement).value.trim();
|
|
||||||
const notes = (document.getElementById('f-notes') as HTMLTextAreaElement).value;
|
|
||||||
|
|
||||||
if (!title) {
|
|
||||||
setState({ error: 'Title is required' });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const urlResult = normalizeUrl(rawUrl);
|
|
||||||
if (!urlResult.ok) {
|
|
||||||
setState({ error: urlResult.error });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const url = urlResult.value;
|
|
||||||
|
|
||||||
let totp: TotpConfig | undefined;
|
|
||||||
if (totpStr) {
|
|
||||||
try {
|
|
||||||
const bytes = base32Decode(totpStr);
|
|
||||||
totp = {
|
|
||||||
secret: Array.from(bytes),
|
|
||||||
algorithm: 'sha1',
|
|
||||||
digits: 6,
|
|
||||||
period_seconds: 30,
|
|
||||||
kind: 'totp',
|
|
||||||
};
|
|
||||||
} catch (err) {
|
|
||||||
setState({ error: `Invalid TOTP secret: ${err instanceof Error ? err.message : String(err)}` });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const now = Math.floor(Date.now() / 1000);
|
|
||||||
const core: LoginCore & { type: 'login' } = {
|
|
||||||
type: 'login',
|
|
||||||
username: username || undefined,
|
|
||||||
password: password || undefined,
|
|
||||||
url: url || undefined,
|
|
||||||
totp,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Build the Item. On edit we preserve id/created/tags/favorite/sections/
|
|
||||||
// attachments/field_history from the existing item, but we EXPLICITLY
|
|
||||||
// set trashed_at: undefined — never preserve stale trash state through
|
|
||||||
// an edit (carry-forward from Slice 5 review M3).
|
|
||||||
const item: Item = {
|
|
||||||
id: existing?.id ?? '', // SW fills in for add_item.
|
|
||||||
title,
|
|
||||||
type: 'login',
|
|
||||||
tags: existing?.tags ?? [],
|
|
||||||
favorite: existing?.favorite ?? false,
|
|
||||||
group: group || undefined,
|
|
||||||
notes: notes || undefined,
|
|
||||||
created: existing?.created ?? now,
|
|
||||||
modified: now,
|
|
||||||
trashed_at: undefined,
|
|
||||||
core,
|
|
||||||
sections: existing?.sections ?? [],
|
|
||||||
attachments: existing?.attachments ?? [],
|
|
||||||
field_history: existing?.field_history ?? {},
|
|
||||||
};
|
|
||||||
|
|
||||||
setState({ loading: true, error: null });
|
|
||||||
|
|
||||||
let resp;
|
|
||||||
if (mode === 'add') {
|
|
||||||
resp = await sendMessage({ type: 'add_item', item });
|
|
||||||
} else {
|
|
||||||
if (!state.selectedId) {
|
|
||||||
setState({ loading: false, error: 'Missing item id' });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
resp = await sendMessage({ type: 'update_item', id: state.selectedId, item });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (resp.ok) {
|
|
||||||
const listResp = await sendMessage({ type: 'list_items' });
|
|
||||||
if (listResp.ok) {
|
|
||||||
const data = listResp.data as { items: Array<[ItemId, ManifestEntry]> };
|
|
||||||
navigate('list', { entries: data.items, selectedId: null, selectedItem: null });
|
|
||||||
} else {
|
|
||||||
navigate('list');
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setState({ loading: false, error: resp.error });
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
283
extension/src/popup/components/types/login.ts
Normal file
283
extension/src/popup/components/types/login.ts
Normal file
@@ -0,0 +1,283 @@
|
|||||||
|
/// Login type detail + form. Reference implementation for the shared
|
||||||
|
/// 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 { DEFAULT_PASSWORD_REQUEST } from '../../../shared/types';
|
||||||
|
import { base32Decode, base32Encode } from '../../../shared/base32';
|
||||||
|
import {
|
||||||
|
renderRow,
|
||||||
|
renderConcealedRow,
|
||||||
|
renderSignatureBlock,
|
||||||
|
wireFieldHandlers,
|
||||||
|
} from '../fields';
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
// Detail view
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
export async function renderDetail(app: HTMLElement, item: Item): Promise<void> {
|
||||||
|
if (item.core.type !== 'login') return;
|
||||||
|
const core = item.core as LoginCore & { type: 'login' };
|
||||||
|
const password = core.password ?? '';
|
||||||
|
const username = core.username ?? '';
|
||||||
|
const url = core.url ?? '';
|
||||||
|
const hasTotp = core.totp !== undefined;
|
||||||
|
|
||||||
|
const sigInner = `
|
||||||
|
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||||
|
<div style="font-size:14px;font-weight:600;color:#c9d1d9;">${escapeHtml(item.title)}</div>
|
||||||
|
${url ? `<a href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer" style="font-size:11px;color:#58a6ff;">open ↗</a>` : ''}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
app.innerHTML = `
|
||||||
|
<div class="pad">
|
||||||
|
<div style="margin-bottom:12px;">
|
||||||
|
${renderSignatureBlock({ accent: 'blue', children: sigInner })}
|
||||||
|
</div>
|
||||||
|
${username ? renderRow({ label: 'username', value: username, copyable: true }) : ''}
|
||||||
|
${renderConcealedRow({ id: 'login-password', label: 'password', value: password })}
|
||||||
|
${url ? renderRow({ label: 'url', value: url, href: url }) : ''}
|
||||||
|
${hasTotp ? `
|
||||||
|
<div class="field-row">
|
||||||
|
<span class="field-row__label">totp</span>
|
||||||
|
<span class="field-row__value monospace" id="totp-code">…</span>
|
||||||
|
<span class="field-row__actions"><span id="totp-countdown" style="font-variant-numeric:tabular-nums;">…</span></span>
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
${item.notes ? renderRow({ label: 'notes', value: item.notes, multiline: true }) : ''}
|
||||||
|
<div class="form-actions" style="margin-top:14px;">
|
||||||
|
<button class="btn" id="back-btn">back</button>
|
||||||
|
<button class="btn" id="edit-btn">edit</button>
|
||||||
|
<button class="btn" id="fill-btn">autofill</button>
|
||||||
|
<button class="btn danger" id="trash-btn">trash</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
wireFieldHandlers(app);
|
||||||
|
|
||||||
|
document.getElementById('back-btn')?.addEventListener('click', () => navigate('list'));
|
||||||
|
document.getElementById('edit-btn')?.addEventListener('click', () => navigate('edit'));
|
||||||
|
document.getElementById('trash-btn')?.addEventListener('click', async () => {
|
||||||
|
if (!confirm(`Move "${item.title}" to trash?`)) return;
|
||||||
|
const resp = await sendMessage({ type: 'delete_item', id: item.id });
|
||||||
|
if (!resp.ok) { setState({ error: resp.error }); return; }
|
||||||
|
const listResp = await sendMessage({ type: 'list_items' });
|
||||||
|
if (listResp.ok) {
|
||||||
|
const data = listResp.data as { items: Array<[ItemId, ManifestEntry]> };
|
||||||
|
navigate('list', { entries: data.items, selectedId: null, selectedItem: null });
|
||||||
|
} else navigate('list');
|
||||||
|
});
|
||||||
|
document.getElementById('fill-btn')?.addEventListener('click', async () => {
|
||||||
|
const { capturedTabId, capturedUrl } = getState();
|
||||||
|
if (capturedTabId === null) { setState({ error: 'No active tab captured' }); return; }
|
||||||
|
const resp = await sendMessage({
|
||||||
|
type: 'fill_credentials', id: item.id, capturedTabId, capturedUrl,
|
||||||
|
});
|
||||||
|
if (!resp.ok) setState({ error: resp.error });
|
||||||
|
else window.close();
|
||||||
|
});
|
||||||
|
|
||||||
|
if (hasTotp) startTotpTicker(item.id);
|
||||||
|
|
||||||
|
const handler = (e: KeyboardEvent) => {
|
||||||
|
const t = e.target;
|
||||||
|
if (t instanceof HTMLElement) {
|
||||||
|
const tag = t.tagName;
|
||||||
|
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || t.isContentEditable) return;
|
||||||
|
}
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
document.removeEventListener('keydown', handler);
|
||||||
|
stopTotpTicker();
|
||||||
|
navigate('list');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('keydown', handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
// TOTP ticker
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
let totpTickerId: ReturnType<typeof setInterval> | null = null;
|
||||||
|
function stopTotpTicker(): void {
|
||||||
|
if (totpTickerId !== null) { clearInterval(totpTickerId); totpTickerId = null; }
|
||||||
|
}
|
||||||
|
function startTotpTicker(id: ItemId): void {
|
||||||
|
stopTotpTicker();
|
||||||
|
const tick = async () => {
|
||||||
|
const r = await sendMessage({ type: 'get_totp', id });
|
||||||
|
if (!r.ok) return;
|
||||||
|
const { code, expires_at } = r.data as { code: string; expires_at: number };
|
||||||
|
const codeEl = document.getElementById('totp-code');
|
||||||
|
const cdEl = document.getElementById('totp-countdown');
|
||||||
|
if (codeEl) codeEl.textContent = code;
|
||||||
|
if (cdEl) cdEl.textContent = `${Math.max(0, expires_at - Math.floor(Date.now() / 1000))}s`;
|
||||||
|
};
|
||||||
|
void tick();
|
||||||
|
totpTickerId = setInterval(() => void tick(), 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
// Form (add / edit)
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Item | null): void {
|
||||||
|
const state = getState();
|
||||||
|
const existingCore = (existing?.core.type === 'login')
|
||||||
|
? (existing.core as LoginCore & { type: 'login' })
|
||||||
|
: null;
|
||||||
|
|
||||||
|
const title = existing?.title ?? '';
|
||||||
|
const url = existingCore?.url ?? '';
|
||||||
|
const username = existingCore?.username ?? '';
|
||||||
|
const password = existingCore?.password ?? '';
|
||||||
|
const totpStr = existingCore?.totp ? base32Encode(new Uint8Array(existingCore.totp.secret)) : '';
|
||||||
|
const group = existing?.group ?? '';
|
||||||
|
const notes = existing?.notes ?? '';
|
||||||
|
|
||||||
|
app.innerHTML = `
|
||||||
|
<div class="pad">
|
||||||
|
<div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new login' : 'edit login'}</div>
|
||||||
|
${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
|
||||||
|
<div class="form-group"><label class="label" for="f-title">title *</label>
|
||||||
|
<input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="GitHub"></div>
|
||||||
|
<div class="form-group"><label class="label" for="f-url">url</label>
|
||||||
|
<input id="f-url" type="text" value="${escapeHtml(url)}" placeholder="https://github.com/login"></div>
|
||||||
|
<div class="form-group"><label class="label" for="f-username">username</label>
|
||||||
|
<input id="f-username" type="text" value="${escapeHtml(username)}" placeholder="alice@example.com"></div>
|
||||||
|
<div class="form-group"><label class="label" for="f-password">password</label>
|
||||||
|
<div class="inline-row">
|
||||||
|
<input id="f-password" type="password" value="${escapeHtml(password)}">
|
||||||
|
<button class="btn" id="gen-btn" title="generate">gen</button>
|
||||||
|
</div></div>
|
||||||
|
<div class="form-group"><label class="label" for="f-totp">totp secret (base32)</label>
|
||||||
|
<input id="f-totp" type="text" value="${escapeHtml(totpStr)}" placeholder="JBSWY3DPEHPK3PXP"></div>
|
||||||
|
<div class="form-group"><label class="label" for="f-group">group</label>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.getElementById('gen-btn')?.addEventListener('click', async () => {
|
||||||
|
const resp = await sendMessage({ type: 'generate_password', request: DEFAULT_PASSWORD_REQUEST });
|
||||||
|
if (resp.ok) {
|
||||||
|
const data = resp.data as { password: string };
|
||||||
|
const pw = document.getElementById('f-password') as HTMLInputElement;
|
||||||
|
pw.value = data.password;
|
||||||
|
pw.type = 'text';
|
||||||
|
} else setState({ error: resp.error });
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('cancel-btn')?.addEventListener('click', () => {
|
||||||
|
setState({ error: null });
|
||||||
|
navigate(mode === 'edit' ? 'detail' : 'list');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('save-btn')?.addEventListener('click', async () => {
|
||||||
|
await saveLogin(mode, existing);
|
||||||
|
});
|
||||||
|
|
||||||
|
const escHandler = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
document.removeEventListener('keydown', escHandler);
|
||||||
|
setState({ error: null });
|
||||||
|
navigate(mode === 'edit' ? 'detail' : 'list');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('keydown', escHandler);
|
||||||
|
|
||||||
|
(document.getElementById('f-title') as HTMLInputElement | null)?.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeUrl(raw: string): { ok: true; value: string } | { ok: false; error: string } {
|
||||||
|
if (!raw) return { ok: true, value: '' };
|
||||||
|
const trimmed = raw.trim();
|
||||||
|
const candidate = /^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(trimmed) ? trimmed : `https://${trimmed}`;
|
||||||
|
try {
|
||||||
|
const u = new URL(candidate);
|
||||||
|
if (!u.host) return { ok: false, error: 'URL must include a host (e.g. https://example.com)' };
|
||||||
|
return { ok: true, value: u.toString() };
|
||||||
|
} catch {
|
||||||
|
return { ok: false, error: 'URL is not valid — try something like https://example.com' };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveLogin(mode: 'add' | 'edit', existing: Item | null): Promise<void> {
|
||||||
|
const state = getState();
|
||||||
|
const title = (document.getElementById('f-title') as HTMLInputElement).value.trim();
|
||||||
|
const rawUrl = (document.getElementById('f-url') as HTMLInputElement).value;
|
||||||
|
const username = (document.getElementById('f-username') as HTMLInputElement).value.trim();
|
||||||
|
const password = (document.getElementById('f-password') as HTMLInputElement).value;
|
||||||
|
const totpStr = (document.getElementById('f-totp') as HTMLInputElement).value.trim();
|
||||||
|
const group = (document.getElementById('f-group') as HTMLInputElement).value.trim();
|
||||||
|
const notes = (document.getElementById('f-notes') as HTMLTextAreaElement).value;
|
||||||
|
|
||||||
|
if (!title) { setState({ error: 'Title is required' }); return; }
|
||||||
|
|
||||||
|
const urlResult = normalizeUrl(rawUrl);
|
||||||
|
if (!urlResult.ok) { setState({ error: urlResult.error }); return; }
|
||||||
|
const url = urlResult.value;
|
||||||
|
|
||||||
|
let totp: TotpConfig | undefined;
|
||||||
|
if (totpStr) {
|
||||||
|
try {
|
||||||
|
const bytes = base32Decode(totpStr);
|
||||||
|
totp = {
|
||||||
|
secret: Array.from(bytes),
|
||||||
|
algorithm: 'sha1', digits: 6, period_seconds: 30, kind: 'totp',
|
||||||
|
};
|
||||||
|
} catch (err) {
|
||||||
|
setState({ error: `Invalid TOTP secret: ${err instanceof Error ? err.message : String(err)}` });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const now = Math.floor(Date.now() / 1000);
|
||||||
|
const core: LoginCore & { type: 'login' } = {
|
||||||
|
type: 'login',
|
||||||
|
username: username || undefined,
|
||||||
|
password: password || undefined,
|
||||||
|
url: url || undefined,
|
||||||
|
totp,
|
||||||
|
};
|
||||||
|
|
||||||
|
const item: Item = {
|
||||||
|
id: existing?.id ?? '',
|
||||||
|
title, type: 'login',
|
||||||
|
tags: existing?.tags ?? [],
|
||||||
|
favorite: existing?.favorite ?? false,
|
||||||
|
group: group || undefined,
|
||||||
|
notes: notes || undefined,
|
||||||
|
created: existing?.created ?? now,
|
||||||
|
modified: now,
|
||||||
|
trashed_at: undefined,
|
||||||
|
core,
|
||||||
|
sections: existing?.sections ?? [],
|
||||||
|
attachments: existing?.attachments ?? [],
|
||||||
|
field_history: existing?.field_history ?? {},
|
||||||
|
};
|
||||||
|
|
||||||
|
setState({ loading: true, error: null });
|
||||||
|
|
||||||
|
const resp = mode === 'add'
|
||||||
|
? await sendMessage({ type: 'add_item', item })
|
||||||
|
: await sendMessage({ type: 'update_item', id: state.selectedId!, item });
|
||||||
|
|
||||||
|
if (resp.ok) {
|
||||||
|
const listResp = await sendMessage({ type: 'list_items' });
|
||||||
|
if (listResp.ok) {
|
||||||
|
const data = listResp.data as { items: Array<[ItemId, ManifestEntry]> };
|
||||||
|
navigate('list', { entries: data.items, selectedId: null, selectedItem: null });
|
||||||
|
} else navigate('list');
|
||||||
|
} else {
|
||||||
|
setState({ loading: false, error: resp.error });
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -38,6 +38,7 @@ export interface PopupState {
|
|||||||
// to the content script. See router/popup-only.ts#handleFillCredentials.
|
// to the content script. See router/popup-only.ts#handleFillCredentials.
|
||||||
capturedTabId: number | null;
|
capturedTabId: number | null;
|
||||||
capturedUrl: string;
|
capturedUrl: string;
|
||||||
|
newType: import('../shared/types').ItemType | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
let currentState: PopupState = {
|
let currentState: PopupState = {
|
||||||
@@ -52,6 +53,7 @@ let currentState: PopupState = {
|
|||||||
loading: false,
|
loading: false,
|
||||||
capturedTabId: null,
|
capturedTabId: null,
|
||||||
capturedUrl: '',
|
capturedUrl: '',
|
||||||
|
newType: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
export function getState(): PopupState {
|
export function getState(): PopupState {
|
||||||
|
|||||||
Reference in New Issue
Block a user