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
|
||||
/// full Login parity; all other types show a "coming soon" placeholder.
|
||||
///
|
||||
/// 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.
|
||||
/// Typed-item detail view dispatcher. Each type's renderDetail lives in
|
||||
/// its own module under ./types/. Document stays "coming soon" until γ.
|
||||
|
||||
import { getState, setState, sendMessage, navigate, escapeHtml } from '../popup';
|
||||
import type { Item, ItemId, ManifestEntry, LoginCore, TotpConfig } from '../../shared/types';
|
||||
import { navigate } from '../popup';
|
||||
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 {
|
||||
if (totpInterval !== null) {
|
||||
clearInterval(totpInterval);
|
||||
totpInterval = null;
|
||||
switch (item.type) {
|
||||
case 'login': return login.renderDetail(app, item);
|
||||
case 'secure_note':
|
||||
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 {
|
||||
app.innerHTML = `
|
||||
<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>
|
||||
<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 class="pad">
|
||||
<div class="detail-title" style="margin-bottom:16px;">${item.title}</div>
|
||||
<p class="muted">The <strong>${item.type}</strong> item type is not editable in the extension yet.</p>
|
||||
<div class="form-actions"><button class="btn" id="back-btn">back</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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 });
|
||||
}
|
||||
});
|
||||
document.getElementById('back-btn')?.addEventListener('click', () => navigate('list'));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user