From 66981588e752a736b8f8f2560b658b59cd7a0bf3 Mon Sep 17 00:00:00 2001 From: adlee-was-taken Date: Thu, 30 Apr 2026 18:43:35 -0400 Subject: [PATCH] =?UTF-8?q?feat(ext/vault):=20Import=20panel=20=E2=80=94?= =?UTF-8?q?=20LastPass=20CSV?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit New vault.html#import panel with a file picker, parse-preview ("N logins, M notes, K skipped — proceed?"), confirm/cancel buttons, inline progress, and a post-import warnings list. The popup's settings-vault view links to it via a new "LastPass CSV →" button next to "Backup & restore →". Co-Authored-By: Claude Opus 4.7 --- .../src/popup/components/settings-vault.ts | 8 + .../src/vault/components/import-panel.ts | 182 ++++++++++++++++++ extension/src/vault/vault.ts | 8 +- 3 files changed, 197 insertions(+), 1 deletion(-) create mode 100644 extension/src/vault/components/import-panel.ts diff --git a/extension/src/popup/components/settings-vault.ts b/extension/src/popup/components/settings-vault.ts index a5fc0e4..84e7935 100644 --- a/extension/src/popup/components/settings-vault.ts +++ b/extension/src/popup/components/settings-vault.ts @@ -165,6 +165,13 @@ export function renderVaultSettings(app: HTMLElement): void { +
+
import
+
+ +
+
+
@@ -195,6 +202,7 @@ export function renderVaultSettings(app: HTMLElement): void { document.getElementById('back-btn')?.addEventListener('click', () => navigate('list')); document.getElementById('discard-btn')?.addEventListener('click', () => navigate('list')); document.getElementById('open-backup')?.addEventListener('click', () => openVaultTab('backup')); + document.getElementById('open-import')?.addEventListener('click', () => openVaultTab('import')); document.getElementById('trash-retention')?.addEventListener('change', (e) => { if (!pendingSettings) return; diff --git a/extension/src/vault/components/import-panel.ts b/extension/src/vault/components/import-panel.ts new file mode 100644 index 0000000..c6089b8 --- /dev/null +++ b/extension/src/vault/components/import-panel.ts @@ -0,0 +1,182 @@ +import { sendMessage } from '../../shared/state'; +import type { Item } from '../../shared/types'; + +type ViewMode = 'idle' | 'parsing' | 'preview' | 'committing' | 'done'; + +interface PreviewState { + items: Item[]; + warnings: Array<{ row: number; title?: string; message: string }>; + loginCount: number; + noteCount: number; +} + +let mode: ViewMode = 'idle'; +let preview: PreviewState | null = null; + +export function renderImportPanel(app: HTMLElement): void { + app.innerHTML = ` +
+

Import

+ +
+

LastPass CSV

+

Pick the CSV exported from LastPass + (More options → Advanced → Export). + Items are added to the unlocked vault with fresh IDs. + Title collisions are kept — no dedup. Failed rows are + skipped and reported below.

+ + + + + + + + +
+
+ `; + + wireImport(app); +} + +function wireImport(scope: HTMLElement): void { + const fileEl = scope.querySelector('#lp-file') as HTMLInputElement; + const previewEl = scope.querySelector('#lp-preview') as HTMLElement; + const previewTx = scope.querySelector('#lp-preview-text') as HTMLElement; + const confirmBt = scope.querySelector('#lp-confirm-btn') as HTMLButtonElement; + const cancelBt = scope.querySelector('#lp-cancel-btn') as HTMLButtonElement; + const progressE = scope.querySelector('#lp-progress') as HTMLElement; + const progressT = scope.querySelector('#lp-progress-text') as HTMLElement; + const warningsE = scope.querySelector('#lp-warnings') as HTMLElement; + const warningsL = scope.querySelector('#lp-warning-list') as HTMLElement; + + fileEl.addEventListener('change', async () => { + const file = fileEl.files?.[0]; + if (!file) return; + if (mode !== 'idle' && mode !== 'done') return; + resetPanels(previewEl, progressE, warningsE); + + mode = 'parsing'; + progressE.classList.remove('hidden'); + progressT.textContent = 'Parsing…'; + + try { + const bytes = await file.arrayBuffer(); + const resp = await sendMessage({ type: 'parse_lastpass_csv', bytes }); + progressE.classList.add('hidden'); + if (!resp.ok) { + previewTx.textContent = `Failed to parse: ${resp.error}`; + previewEl.classList.remove('hidden'); + confirmBt.classList.add('hidden'); + cancelBt.classList.remove('hidden'); + mode = 'idle'; + return; + } + + const data = (resp as { ok: true; data: PreviewState }).data; + preview = aggregate(data); + previewTx.textContent = + `${preview.loginCount} logins, ${preview.noteCount} notes, ` + + `${preview.warnings.length} skipped/warn — proceed?`; + previewEl.classList.remove('hidden'); + confirmBt.classList.remove('hidden'); + cancelBt.classList.remove('hidden'); + confirmBt.disabled = preview.items.length === 0; + mode = 'preview'; + } catch (e) { + progressE.classList.add('hidden'); + previewTx.textContent = `Failed: ${(e as Error).message}`; + previewEl.classList.remove('hidden'); + mode = 'idle'; + } + }); + + cancelBt.addEventListener('click', () => { + preview = null; + fileEl.value = ''; + resetPanels(previewEl, progressE, warningsE); + mode = 'idle'; + }); + + confirmBt.addEventListener('click', async () => { + if (mode !== 'preview' || !preview) return; + mode = 'committing'; + confirmBt.disabled = true; + cancelBt.disabled = true; + progressE.classList.remove('hidden'); + progressT.textContent = `Importing ${preview.items.length} items…`; + + try { + const resp = await sendMessage({ + type: 'import_lastpass_commit', + items: preview.items, + }); + progressE.classList.add('hidden'); + if (!resp.ok) { + previewTx.textContent = `Import failed: ${resp.error}`; + mode = 'idle'; + confirmBt.disabled = false; + cancelBt.disabled = false; + return; + } + + const data = (resp as { ok: true; data: { summary: { itemCount: number } } }).data; + previewTx.textContent = + `Imported ${data.summary.itemCount} items. Reload the sidebar to see them.`; + confirmBt.classList.add('hidden'); + cancelBt.textContent = 'Done'; + + if (preview.warnings.length > 0) { + warningsL.innerHTML = preview.warnings + .map((w) => { + const head = w.title ? `row ${w.row} (${escapeText(w.title)})` : `row ${w.row}`; + return `
  • ${head}: ${escapeText(w.message)}
    • `; + }) + .join(''); + warningsE.classList.remove('hidden'); + } + mode = 'done'; + } catch (e) { + progressE.classList.add('hidden'); + previewTx.textContent = `Failed: ${(e as Error).message}`; + confirmBt.disabled = false; + cancelBt.disabled = false; + mode = 'idle'; + } + }); +} + +function aggregate(data: PreviewState): PreviewState { + let loginCount = 0; + let noteCount = 0; + for (const item of data.items) { + if (item.type === 'login') loginCount += 1; + else if (item.type === 'secure_note') noteCount += 1; + } + return { ...data, loginCount, noteCount }; +} + +function resetPanels(preview: HTMLElement, progress: HTMLElement, warnings: HTMLElement): void { + preview.classList.add('hidden'); + progress.classList.add('hidden'); + warnings.classList.add('hidden'); +} + +function escapeText(s: string): string { + return s.replace(/&/g, '&').replace(//g, '>'); +} + +export function teardown(): void { + preview = null; + mode = 'idle'; +} diff --git a/extension/src/vault/vault.ts b/extension/src/vault/vault.ts index f8ef705..a651d03 100644 --- a/extension/src/vault/vault.ts +++ b/extension/src/vault/vault.ts @@ -17,6 +17,7 @@ import { renderSettings } from '../popup/components/settings'; import { renderVaultSettings as renderVaultSettingsView } from '../popup/components/settings-vault'; import { renderFieldHistory, teardown as teardownFieldHistory } from '../popup/components/field-history'; import { renderBackupPanel, teardown as teardownBackup } from './components/backup-panel'; +import { renderImportPanel, teardown as teardownImport } from './components/import-panel'; // --------------------------------------------------------------------------- // Helpers @@ -67,7 +68,7 @@ function typeLabel(t: ItemType): string { // Hash routing // --------------------------------------------------------------------------- -type VaultView = 'list' | 'detail' | 'add' | 'edit' | 'trash' | 'devices' | 'settings' | 'settings-vault' | 'field-history' | 'backup'; +type VaultView = 'list' | 'detail' | 'add' | 'edit' | 'trash' | 'devices' | 'settings' | 'settings-vault' | 'field-history' | 'backup' | 'import'; interface HashRoute { view: VaultView; @@ -94,6 +95,7 @@ function parseHash(): HashRoute { case 'settings-vault': case 'field-history': case 'backup': + case 'import': return { view }; default: return { view: 'list' }; @@ -421,6 +423,7 @@ function teardownPaneComponents(): void { teardownDevices(); teardownFieldHistory(); teardownBackup(); + teardownImport(); } function renderPane(): void { @@ -470,6 +473,9 @@ function renderPane(): void { case 'backup': renderBackupPanel(pane); break; + case 'import': + renderImportPanel(pane); + break; default: pane.className = 'vault-pane vault-pane--empty'; pane.innerHTML = 'select an item';