From 0aa24329422c833bfa724567c363694088abbfd0 Mon Sep 17 00:00:00 2001 From: NguyenND Date: Mon, 20 Apr 2026 18:05:41 -0400 Subject: [PATCH] 04/20/2026 enhance the extension totp --- app/static/css/app.css | 1674 +++++-------------- app/static/js/vault.js | 2736 +++++++++++++++++++++----------- app/templates/vault/index.html | 435 ++--- extension/popup/popup.css | 30 + extension/popup/popup.js | 106 +- 5 files changed, 2469 insertions(+), 2512 deletions(-) diff --git a/app/static/css/app.css b/app/static/css/app.css index 4fa1786..5207732 100644 --- a/app/static/css/app.css +++ b/app/static/css/app.css @@ -314,6 +314,92 @@ ul { color: #1558b0; } +/* ── Vault list items ────────────────────────────────────────────── */ +.vault-item { + display: flex; + align-items: center; + gap: 12px; + padding: 10px 14px; + border-bottom: 1px solid var(--color-border); + cursor: default; + transition: background var(--transition); +} + +.vault-item:last-child { + border-bottom: none; +} + +.vault-item:hover { + background: #f9fafb; +} + +.item-icon { + font-size: 20px; + flex-shrink: 0; +} + +.item-info { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 2px; +} + +.item-name { + font-size: 14px; + font-weight: 600; + color: var(--color-text); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.item-sub { + font-size: 12px; + color: var(--color-text-muted); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.item-actions { + display: flex; + align-items: center; + gap: 2px; + flex-shrink: 0; +} + +/* ── TOTP live display in vault item ─────────────────────────────── */ +.item-totp { + display: inline-flex; + align-items: center; + gap: 0; + font-size: 12px; + font-weight: 700; + font-family: "Courier New", Courier, monospace; + color: #1a73e8; + margin-top: 1px; + letter-spacing: 0.5px; +} + +.totp-timer { + font-size: 11px; + font-weight: 400; + color: #9ca3af; + font-family: inherit; +} + +/* Copy TOTP button — distinct teal so it reads as 2FA, not password */ +.btn-icon[data-action="copy-totp"] { + color: #0891b2; +} + +.btn-icon[data-action="copy-totp"]:hover { + background: #e0f2fe; + color: #0369a1; +} + /* Password strength */ .password-strength { margin-top: 6px; @@ -355,34 +441,13 @@ ul { } /* ── Sidebar ─────────────────────────────────────────────────────── */ + +/* ── Base sidebar styles (shared by mobile and desktop) ─────────── */ .sidebar { - width: 240px; - flex-shrink: 0; background: var(--color-sidebar-bg); color: var(--color-sidebar-text); display: flex; flex-direction: column; - overflow: hidden; - /* No transition here — added back in the >768px media query so it - never interferes with display:none on mobile in Chrome */ -} - -.sidebar.collapsed { - width: 72px; -} - -/* Sidebar width transition only on non-mobile — prevents Chrome from - deferring display:none while a transition is active */ -@media (min-width: 769px) { - .sidebar { - transition: width 0.22s ease; - } -} - -/* Sidebar must not clip its children when collapsed — tooltips need to escape */ -.sidebar.collapsed .sidebar-nav, -.sidebar.collapsed .sidebar-footer { - overflow: visible; } .sidebar-header { @@ -393,20 +458,11 @@ ul { border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; min-height: 56px; - overflow: hidden; -} - -/* When collapsed: centre the toggle button, hide everything else */ -.sidebar.collapsed .sidebar-header { - justify-content: center; - padding: 14px 0; - overflow: visible; } .sidebar-header .logo-icon { font-size: 22px; flex-shrink: 0; - transition: opacity 0.15s ease; } .sidebar-header .logo-text { @@ -416,42 +472,6 @@ ul { flex: 1; white-space: nowrap; overflow: hidden; - transition: opacity 0.15s ease; -} - -.sidebar.collapsed .sidebar-header .logo-icon, -.sidebar.collapsed .sidebar-header .logo-text { - opacity: 0; - width: 0; - pointer-events: none; -} - -/* Toggle button — always visible, always clickable */ -.btn-sidebar-toggle { - background: none; - border: none; - color: rgba(255, 255, 255, 0.5); - font-size: 14px; - cursor: pointer; - padding: 6px 8px; - border-radius: 4px; - line-height: 1; - flex-shrink: 0; - transition: - color var(--transition), - transform 0.22s ease; - margin-left: auto; - z-index: 10; -} - -.btn-sidebar-toggle:hover { - color: #fff; - background: rgba(255, 255, 255, 0.12); -} - -.sidebar.collapsed .btn-sidebar-toggle { - transform: rotate(180deg); - margin-left: 0; } .sidebar-nav { @@ -469,14 +489,6 @@ ul { color: rgba(255, 255, 255, 0.35); white-space: nowrap; overflow: hidden; - transition: opacity 0.15s ease; -} - -.sidebar.collapsed .sidebar-section-header { - opacity: 0; - pointer-events: none; - height: 0; - padding: 0; } .sidebar-item { @@ -484,7 +496,6 @@ ul { align-items: center; gap: 10px; padding: 9px 16px; - border-radius: 0; color: var(--color-sidebar-text); cursor: pointer; transition: background var(--transition); @@ -512,28 +523,112 @@ ul { text-align: center; } -/* Labels — fade out when collapsed; use max-width so icon stays visible */ .sidebar-label { + white-space: nowrap; + overflow: hidden; +} + +.sidebar-footer { + padding: 12px 0; + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +/* ── DESKTOP sidebar (body.is-desktop) ───────────────────────────── */ +body.is-desktop .sidebar { + width: 240px; + flex-shrink: 0; + overflow: hidden; + /* Transition only on desktop so display:none on mobile is instant */ + transition: width 0.22s ease; +} + +body.is-desktop .sidebar.collapsed { + width: 72px; +} + +body.is-desktop .sidebar.collapsed .sidebar-nav, +body.is-desktop .sidebar.collapsed .sidebar-footer { + overflow: visible; +} + +body.is-desktop .sidebar.collapsed .sidebar-header { + justify-content: center; + padding: 14px 0; + overflow: visible; +} + +body.is-desktop .sidebar-header .logo-icon { + transition: opacity 0.15s ease; +} + +body.is-desktop .sidebar-header .logo-text { + flex: 1; + transition: opacity 0.15s ease; +} + +body.is-desktop .sidebar.collapsed .sidebar-header .logo-icon, +body.is-desktop .sidebar.collapsed .sidebar-header .logo-text { + opacity: 0; + width: 0; + pointer-events: none; +} + +body.is-desktop .btn-sidebar-toggle { + background: none; + border: none; + color: rgba(255, 255, 255, 0.5); + font-size: 14px; + cursor: pointer; + padding: 6px 8px; + border-radius: 4px; + line-height: 1; + flex-shrink: 0; + transition: + color var(--transition), + transform 0.22s ease; + margin-left: auto; +} + +body.is-desktop .btn-sidebar-toggle:hover { + color: #fff; + background: rgba(255, 255, 255, 0.12); +} + +body.is-desktop .sidebar.collapsed .btn-sidebar-toggle { + transform: rotate(180deg); + margin-left: 0; +} + +body.is-desktop .sidebar-section-header { + transition: opacity 0.15s ease; +} + +body.is-desktop .sidebar.collapsed .sidebar-section-header { + opacity: 0; + pointer-events: none; + height: 0; + padding: 0; +} + +body.is-desktop .sidebar-label { transition: opacity 0.15s ease, max-width 0.22s ease; max-width: 200px; - overflow: hidden; } -.sidebar.collapsed .sidebar-label { +body.is-desktop .sidebar.collapsed .sidebar-label { opacity: 0; max-width: 0; } -.sidebar.collapsed .sidebar-item { +body.is-desktop .sidebar.collapsed .sidebar-item { justify-content: center; padding: 10px 0; overflow: visible; } -/* Tooltip — appears to the right of the 72px rail */ -.sidebar.collapsed .sidebar-item::after { +body.is-desktop .sidebar.collapsed .sidebar-item::after { content: attr(data-tooltip); position: fixed; left: 80px; @@ -550,15 +645,145 @@ ul { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } -.sidebar.collapsed .sidebar-item:hover::after { +body.is-desktop .sidebar.collapsed .sidebar-item:hover::after { opacity: 1; } -.sidebar-footer { - padding: 12px 0; - border-top: 1px solid rgba(255, 255, 255, 0.08); +/* ── MOBILE sidebar (body.is-mobile) ─────────────────────────────── */ +body.is-mobile .sidebar { + /* Hidden by default — no layout space, no transitions to fight */ + display: none; + position: fixed; + top: 0; + left: 0; + width: 280px; + height: 100%; + z-index: 90; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + /* No width/opacity transitions on mobile */ } +body.is-mobile .sidebar.mobile-open { + display: flex; + flex-direction: column; +} + +/* Mobile sidebar always shows full labels regardless of collapsed state */ +body.is-mobile .sidebar .sidebar-label { + opacity: 1; + max-width: none; +} + +body.is-mobile .sidebar .sidebar-section-header { + opacity: 1; + height: auto; + padding: 12px 16px 4px; + pointer-events: auto; +} + +body.is-mobile .sidebar .sidebar-item { + justify-content: flex-start; + padding: 9px 16px; +} + +body.is-mobile .sidebar .sidebar-header { + justify-content: flex-start; + padding: 14px 12px; +} + +body.is-mobile .sidebar .sidebar-header .logo-icon, +body.is-mobile .sidebar .sidebar-header .logo-text { + opacity: 1; + width: auto; + pointer-events: auto; +} + +body.is-mobile .sidebar .sidebar-item::after { + display: none; +} + +body.is-mobile .btn-sidebar-toggle { + display: none; +} + +/* ── Mobile top bar — only on body.is-mobile ─────────────────────── */ +.mobile-topbar { + display: none; + align-items: center; + gap: 12px; + padding: 0 16px; + height: 54px; + background: var(--color-sidebar-bg); + color: #fff; + flex-shrink: 0; + position: sticky; + top: 0; + z-index: 50; +} + +body.is-mobile .mobile-topbar { + display: flex; +} + +.btn-mobile-menu { + font-size: 22px; + color: rgba(255, 255, 255, 0.8); + background: none; + border: none; + padding: 4px 6px; + cursor: pointer; + flex-shrink: 0; +} + +.btn-mobile-menu:hover { + color: #fff; +} + +.mobile-logo { + flex: 1; + font-size: 16px; + font-weight: 700; + color: #fff; +} + +.btn-fab-mobile { + width: 36px; + height: 36px; + font-size: 20px; + flex-shrink: 0; +} + +/* Sidebar backdrop */ +.sidebar-backdrop { + display: none; + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 89; +} + +.sidebar-backdrop.open { + display: block; +} + +/* ── App layout ──────────────────────────────────────────────────── */ +body.is-desktop .app-layout { + display: flex; + height: 100vh; + height: calc(var(--vh, 1vh) * 100); +} + +body.is-mobile .app-layout { + display: flex; + flex-direction: column; + height: 100vh; + height: -webkit-fill-available; + height: calc(var(--vh, 1vh) * 100); + overflow: hidden; +} + +/* ── Folder items ────────────────────────────────────────────────── */ .folder-item { justify-content: space-between; } @@ -650,1152 +875,10 @@ ul { background: rgba(255, 255, 255, 0.1); } -/* ── Vault main ──────────────────────────────────────────────────── */ -.vault-main { - flex: 1; - display: flex; - flex-direction: column; - overflow: hidden; - background: var(--color-bg); -} - -#view-vault, -#view-security { - display: flex; - flex-direction: column; - flex: 1; - overflow: hidden; - min-height: 0; - position: relative; -} - -#view-vault.hidden, -#view-security.hidden { - display: none; -} - -.vault-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 16px 24px; - background: var(--color-surface); - border-bottom: 1px solid var(--color-border); - gap: 16px; -} - -/* Inner wrapper constrains content width on very large screens */ -.vault-header-inner { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - max-width: 900px; - margin: 0 auto; - gap: 16px; -} - -.vault-title { - font-size: 18px; - font-weight: 600; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.vault-toolbar { - display: flex; - align-items: center; - gap: 12px; - flex: 1; - justify-content: flex-end; -} - -.search-wrapper { - display: flex; - align-items: center; - background: var(--color-bg); - border: 1px solid var(--color-border); - border-radius: 20px; - padding: 6px 14px; - gap: 8px; - flex: 1; - max-width: 360px; -} - -.search-icon { - color: var(--color-text-muted); -} - -#search-input { - border: none; - background: none; - outline: none; - flex: 1; - font-size: 14px; -} - -.btn-fab { - width: 40px; - height: 40px; - border-radius: 50%; - background: var(--color-primary); - color: #fff; - font-size: 24px; - font-weight: 300; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 2px 8px rgba(208, 2, 27, 0.35); - transition: - background var(--transition), - box-shadow var(--transition); - flex-shrink: 0; -} - -.btn-fab:hover { - background: var(--color-primary-dark); - box-shadow: 0 4px 14px rgba(208, 2, 27, 0.45); -} - -/* ── Vault list ──────────────────────────────────────────────────── */ -/* Outer scroll container */ -.vault-list { - flex: 1; - overflow-y: auto; - padding: 12px 24px 24px; - -webkit-overflow-scrolling: touch; -} - -/* Content max-width — keeps items readable on very wide screens */ -.vault-list-inner { - max-width: 900px; - margin: 0 auto; -} - -.vault-group-header { - font-size: 12px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.06em; - color: var(--color-text-muted); - padding: 16px 0 6px; - border-bottom: 1px solid var(--color-border); - margin-bottom: 4px; -} - -.vault-empty { - text-align: center; - color: var(--color-text-muted); - padding: 60px 0; - font-size: 15px; -} - -.vault-item { - display: flex; - align-items: center; - gap: 12px; - background: var(--color-surface); - border: 1px solid var(--color-border); - border-radius: var(--radius); - padding: 12px 14px; - margin-bottom: 6px; - cursor: pointer; - transition: - box-shadow var(--transition), - border-color var(--transition); -} - -.vault-item:hover { - box-shadow: var(--shadow); - border-color: #c9ccd4; -} - -.item-icon { - font-size: 22px; - flex-shrink: 0; -} - -.item-info { - flex: 1; - min-width: 0; -} - -.item-name { - display: block; - font-weight: 500; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.item-sub { - display: block; - font-size: 12px; - color: var(--color-text-muted); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* Actions always visible — no hover-only opacity trick on desktop */ -.item-actions { - display: flex; - gap: 4px; -} - -.vault-item:hover .item-actions { - opacity: 1; -} - -.btn-icon { - width: 36px; - height: 36px; - border-radius: 6px; - display: flex; - align-items: center; - justify-content: center; - font-size: 15px; - color: var(--color-text-muted); - transition: - background var(--transition), - color var(--transition); - /* Expand touch target without changing visual size */ - touch-action: manipulation; -} - -.btn-icon:hover { - background: var(--color-bg); - color: var(--color-text); -} - -@media (max-width: 768px) { - .btn-icon { - min-width: 44px; - min-height: 44px; - } -} - -/* ── Spinner ─────────────────────────────────────────────────────── */ -.spinner-overlay { - position: absolute; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - background: rgba(255, 255, 255, 0.7); - z-index: 10; -} - -.spinner-overlay.hidden { - display: none; -} - -.spinner { - width: 36px; - height: 36px; - border: 3px solid var(--color-border); - border-top-color: var(--color-primary); - border-radius: 50%; - animation: spin 0.7s linear infinite; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -/* ── Modal ───────────────────────────────────────────────────────── */ -.modal-overlay { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.45); - display: none; - align-items: center; - justify-content: center; - z-index: 100; - padding: 16px; -} - -.modal-overlay.open { - display: flex; -} - -.modal { - background: var(--color-surface); - border-radius: var(--radius); - box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2); - width: 100%; - max-width: 480px; - max-height: 90vh; - max-height: calc(var(--vh, 1vh) * 90); - overflow-y: auto; - -webkit-overflow-scrolling: touch; - padding: 28px; -} - -.modal-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 20px; -} - -.modal-header h3 { - font-size: 18px; - font-weight: 600; -} - -.btn-close { - font-size: 18px; - color: var(--color-text-muted); - padding: 4px; - border-radius: 4px; -} - -.btn-close:hover { - background: var(--color-bg); - color: var(--color-text); -} - -.modal-actions { - display: flex; - gap: 10px; - justify-content: flex-end; - margin-top: 20px; -} - -.required { - color: var(--color-primary); -} - -/* ── Toast ───────────────────────────────────────────────────────── */ -.toast { - position: fixed; - bottom: 24px; - left: 50%; - transform: translateX(-50%) translateY(20px); - background: #1a1a2e; - color: #fff; - padding: 10px 20px; - border-radius: 20px; - font-size: 14px; - font-weight: 500; - opacity: 0; - transition: - opacity 0.25s, - transform 0.25s; - pointer-events: none; - z-index: 200; - white-space: nowrap; -} - -.toast.show { - opacity: 1; - transform: translateX(-50%) translateY(0); -} - -.toast.toast-error { - background: #c00; -} - -/* ── Unlock overlay ──────────────────────────────────────────────── */ -.modal-unlock { - max-width: 380px; -} - -.unlock-logo { - margin-bottom: 16px; -} - -.unlock-title { - margin-bottom: 4px; -} - -.unlock-subtitle { - color: var(--color-text-muted); - font-size: 13px; - margin-bottom: 20px; -} - -.btn-link { - padding: 10px 20px; - border-radius: var(--radius); - text-decoration: none; -} - -/* ── Auth step hint ─────────────────────────────────────────────── */ -.auth-step-hint { - color: var(--color-text-muted); - font-size: 13px; - margin-bottom: 16px; -} - -#mfa-code { - font-size: 22px; - letter-spacing: 0.2em; - text-align: center; -} - -/* ── Panel body (sharing / emergency) ───────────────────────────── */ -.panel-body { - flex: 1; - overflow-y: auto; - padding: 20px 24px; - -webkit-overflow-scrolling: touch; -} - -/* ── Tabs ────────────────────────────────────────────────────────── */ -.panel-tabs { - display: flex; - gap: 4px; - margin-bottom: 16px; - border-bottom: 2px solid var(--color-border); - padding-bottom: 0; -} - -.tab-btn { - padding: 8px 16px; - border-radius: 6px 6px 0 0; - font-size: 13px; - font-weight: 500; - color: var(--color-text-muted); - border-bottom: 2px solid transparent; - margin-bottom: -2px; - transition: - color var(--transition), - border-color var(--transition); -} - -.tab-btn:hover { - color: var(--color-text); -} - -.tab-btn.active { - color: var(--color-primary); - border-bottom-color: var(--color-primary); -} - -/* ── Share / Emergency lists ────────────────────────────────────── */ -.share-list { - display: flex; - flex-direction: column; - gap: 8px; -} - -.share-item { - display: flex; - align-items: center; - gap: 12px; - background: var(--color-surface); - border: 1px solid var(--color-border); - border-radius: var(--radius); - padding: 12px 14px; -} - -.share-icon { - font-size: 22px; - flex-shrink: 0; -} - -.share-info { - flex: 1; - min-width: 0; -} - -.share-name { - display: block; - font-weight: 500; -} - -.share-meta { - display: block; - font-size: 12px; - color: var(--color-text-muted); - margin-top: 2px; -} - -.share-actions { - display: flex; - gap: 6px; - align-items: center; - flex-shrink: 0; -} - -/* ── Badges ──────────────────────────────────────────────────────── */ -.badge { - display: inline-block; - padding: 3px 8px; - border-radius: 12px; - font-size: 12px; - font-weight: 500; -} - -.badge-warn { - background: #fff8e1; - color: #e65100; - border: 1px solid #ffb74d; -} - -.badge-info { - background: #e3f2fd; - color: #1565c0; - border: 1px solid #90caf9; -} - -/* ── Settings modal ──────────────────────────────────────────────── */ -.modal-settings { - max-width: 520px; -} - -.settings-section { - padding: 16px 0; - border-bottom: 1px solid var(--color-border); -} - -.settings-section:last-child { - border-bottom: none; -} - -.settings-section-title { - font-size: 15px; - font-weight: 600; - margin-bottom: 8px; -} - -.settings-desc { - font-size: 13px; - color: var(--color-text-muted); - margin-bottom: 10px; - line-height: 1.5; -} - -.mfa-qr { - display: block; - margin: 12px auto; - max-width: 180px; - border: 1px solid var(--color-border); - border-radius: 4px; -} - -.mfa-secret-text { - font-family: monospace; - font-size: 12px; -} - -.mfa-secret-text code { - background: var(--color-bg); - padding: 2px 6px; - border-radius: 4px; - user-select: all; -} - -/* ── Sort control ────────────────────────────────────────────────── */ -.sort-wrapper select { - padding: 6px 10px; - border: 1px solid var(--color-border); - border-radius: 20px; - background: var(--color-bg); - color: var(--color-text); - font-size: 13px; - cursor: pointer; - outline: none; -} - -.sort-wrapper select:focus { - border-color: var(--color-primary); -} - -/* ── Modal item (wider for address/card forms) ───────────────────── */ -.modal-item { - max-width: 540px; -} - -/* ── Multi-column form rows ──────────────────────────────────────── */ -.form-row { - display: flex; - gap: 12px; -} - -.form-row .form-group { - flex: 1; -} - -/* ── Btn small ───────────────────────────────────────────────────── */ -.btn-sm { - padding: 5px 12px; - font-size: 12px; - border-radius: 6px; -} - -/* ── Security dashboard ──────────────────────────────────────────── */ -.security-dashboard { - flex: 1; - overflow-y: auto; - padding: 24px; - display: flex; - flex-direction: column; - gap: 24px; - -webkit-overflow-scrolling: touch; -} - -.sec-notice { - text-align: center; - color: var(--color-text-muted); - padding: 40px 0; - font-size: 15px; -} - -.security-summary { - display: flex; - gap: 20px; - align-items: center; - background: var(--color-surface); - border: 1px solid var(--color-border); - border-radius: var(--radius); - padding: 24px; - flex-wrap: wrap; -} - -.sec-score-card { - text-align: center; - flex-shrink: 0; -} - -.sec-score { - font-size: 56px; - font-weight: 700; - line-height: 1; -} - -.sec-score.score-good { - color: #2e7d32; -} - -.sec-score.score-fair { - color: #e65100; -} - -.sec-score.score-poor { - color: #c62828; -} - -.sec-score-label { - font-size: 16px; - font-weight: 600; - margin-top: 4px; -} - -.sec-score-desc { - font-size: 12px; - color: var(--color-text-muted); - margin-top: 2px; -} - -.sec-stats { - display: flex; - gap: 16px; - flex-wrap: wrap; -} - -.sec-stat { - text-align: center; - background: var(--color-bg); - border: 1px solid var(--color-border); - border-radius: var(--radius); - padding: 12px 20px; - min-width: 80px; -} - -.sec-stat-warn { - border-color: #ffb74d; - background: #fff8e1; -} - -.sec-stat-info { - border-color: #90caf9; - background: #e3f2fd; -} - -.sec-stat-ok { - border-color: #a5d6a7; - background: #e8f5e9; -} - -.sec-stat-num { - display: block; - font-size: 28px; - font-weight: 700; -} - -.sec-stat-label { - display: block; - font-size: 12px; - color: var(--color-text-muted); - margin-top: 2px; -} - -.sec-section { - background: var(--color-surface); - border: 1px solid var(--color-border); - border-radius: var(--radius); - overflow: hidden; -} - -.sec-section-header { - display: flex; - align-items: flex-start; - gap: 12px; - padding: 16px 20px; - border-bottom: 1px solid var(--color-border); - background: var(--color-bg); -} - -.sec-section-icon { - font-size: 20px; - flex-shrink: 0; -} - -.sec-section-title { - font-weight: 600; - font-size: 15px; -} - -.sec-section-desc { - font-size: 12px; - color: var(--color-text-muted); - margin-top: 2px; -} - -.sec-item-list { - padding: 0; -} - -.sec-item { - display: flex; - align-items: center; - gap: 12px; - padding: 10px 20px; - border-bottom: 1px solid var(--color-border); -} - -.sec-item:last-child { - border-bottom: none; -} - -.sec-item-name { - font-weight: 500; - flex: 1; -} - -.sec-item-sub { - font-size: 12px; - color: var(--color-text-muted); - flex: 1; -} - -/* ── Item Detail Modal ───────────────────────────────────────────── */ -.modal-detail { - max-height: 80vh; - display: flex; - flex-direction: column; -} - -.detail-body { - flex: 1; - overflow-y: auto; - padding: 4px 0; -} - -.detail-field { - display: flex; - align-items: flex-start; - gap: 12px; - padding: 10px 0; - border-bottom: 1px solid var(--color-border); -} - -.detail-field:last-child { - border-bottom: none; -} - -.detail-label { - font-size: 12px; - color: var(--color-text-muted); - width: 140px; - flex-shrink: 0; - padding-top: 4px; -} - -.detail-val-row { - display: flex; - align-items: center; - gap: 6px; - flex: 1; - flex-wrap: wrap; -} - -.detail-val { - font-size: 14px; - word-break: break-all; -} - -.detail-sensitive { - display: inline-flex; - align-items: center; - font-family: monospace; - font-size: 14px; -} - -.detail-masked { - letter-spacing: 2px; -} - -.detail-actual { - word-break: break-all; -} - -.btn-reveal, -.btn-copy-field { - background: none; - border: none; - cursor: pointer; - padding: 2px 4px; - font-size: 14px; - color: var(--color-text-muted); - flex-shrink: 0; -} - -.btn-reveal:hover, -.btn-copy-field:hover { - color: var(--color-primary); -} - -/* ── Emergency Vault Panel ───────────────────────────────────────── */ -.em-vault-panel { - padding: 8px 0; -} - -.em-vault-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 4px 0 16px; - border-bottom: 2px solid var(--color-border); - margin-bottom: 8px; -} - -.em-vault-header h4 { - margin: 0; - font-size: 15px; - font-weight: 600; -} - -.em-vault-list { - list-style: none; - padding: 0; - margin: 0; -} - -.em-vault-item { - border-bottom: 1px solid var(--color-border); -} - -.em-vault-item:last-child { - border-bottom: none; -} - -.em-vault-item-header { - display: flex; - align-items: center; - gap: 10px; - width: 100%; - background: none; - border: none; - padding: 12px 4px; - cursor: pointer; - text-align: left; -} - -.em-vault-item-header:hover { - background: var(--color-sidebar-hover); - border-radius: var(--radius); -} - -.em-vault-icon { - font-size: 18px; - flex-shrink: 0; -} - -.em-vault-name { - font-weight: 500; - flex: 1; -} - -.em-vault-type { - font-size: 12px; - color: var(--color-text-muted); -} - -.em-vault-chevron { - font-size: 12px; - color: var(--color-text-muted); - flex-shrink: 0; -} - -.em-vault-item-body { - padding: 0 8px 12px 36px; -} - -.em-detail-body .detail-field { - padding: 8px 0; -} - -/* ── Responsive ──────────────────────────────────────────────────── */ - -/* Mobile top bar — hidden on tablet+ */ -.mobile-topbar { - display: none; - align-items: center; - gap: 12px; - padding: 0 16px; - height: 54px; - background: var(--color-sidebar-bg); - color: #fff; - flex-shrink: 0; - position: sticky; - top: 0; - z-index: 50; -} - -.btn-mobile-menu { - font-size: 22px; - color: rgba(255, 255, 255, 0.8); - background: none; - border: none; - padding: 4px 6px; - cursor: pointer; - flex-shrink: 0; -} - -.btn-mobile-menu:hover { - color: #fff; -} - -.mobile-logo { - flex: 1; - font-size: 16px; - font-weight: 700; - color: #fff; -} - -.btn-fab-mobile { - width: 36px; - height: 36px; - font-size: 20px; - flex-shrink: 0; -} - -/* Sidebar backdrop */ -.sidebar-backdrop { - display: none; - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.5); - z-index: 89; -} - -.sidebar-backdrop.open { - display: block; -} - -/* ── Phone + iPad portrait (≤ 768px) ───────────────────────────── */ -@media (max-width: 768px) { - .app-layout { - flex-direction: column; - height: 100vh; - height: calc(var(--vh, 1vh) * 100); - overflow: hidden; - } - - .mobile-topbar { - display: flex; - } - - /* Sidebar: completely out of layout flow — fixed overlay only */ - .sidebar { - display: none !important; - position: fixed !important; - top: 0; - left: 0; - bottom: 0; - width: 280px !important; - height: 100% !important; - /* Chrome needs explicit height on position:fixed */ - z-index: 90; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - transition: none; - } - - .sidebar.mobile-open { - display: flex !important; - flex-direction: column; - } - - /* Cancel all collapsed-state overrides inside mobile sidebar */ - .sidebar.collapsed { - display: none !important; - } - - .sidebar.collapsed.mobile-open { - display: flex !important; - } - - /* Mobile sidebar: always show full expanded state */ - .sidebar .sidebar-label { - opacity: 1 !important; - max-width: none !important; - overflow: visible !important; - } - - .sidebar .sidebar-section-header { - opacity: 1 !important; - height: auto !important; - padding: 12px 16px 4px !important; - pointer-events: auto !important; - } - - .sidebar .sidebar-item { - justify-content: flex-start !important; - padding: 9px 16px !important; - overflow: hidden !important; - } - - .sidebar .sidebar-item::after { - display: none !important; - } - - .sidebar .sidebar-header { - justify-content: flex-start !important; - padding: 14px 12px !important; - overflow: hidden !important; - } - - .sidebar .sidebar-header .logo-icon, - .sidebar .sidebar-header .logo-text { - opacity: 1 !important; - width: auto !important; - pointer-events: auto !important; - } - - .btn-sidebar-toggle { - display: none !important; - } - - .vault-main { - flex: 1; - overflow: hidden; - min-height: 0; - } - - .vault-header { - padding: 12px 16px; - gap: 8px; - } - - .vault-title { - font-size: 16px; - } - - .vault-list { - padding: 8px 12px 80px; - } - - .panel-body { - padding: 16px; - } - - .security-dashboard { - padding: 12px; - gap: 16px; - } - - .vault-toolbar { - gap: 8px; - } - - .search-wrapper { - max-width: none; - } - - .sort-wrapper { - display: none; - } - - .vault-header .btn-fab { - display: none; - } - - .form-row { - flex-direction: column; - gap: 0; - } - - .modal-actions { - flex-wrap: wrap; - } - - .modal-overlay { - padding: 0; - align-items: flex-end; - } - - .modal { - max-width: 100% !important; - max-height: calc(var(--vh, 1vh) * 92); - border-radius: 16px 16px 0 0; - padding: 20px 16px; - } - - .security-summary { - padding: 16px; - gap: 12px; - flex-wrap: wrap; - } - - .sec-score { - font-size: 40px; - } - - .sec-stats { - gap: 8px; - flex-wrap: wrap; - } - - .sec-stat { - padding: 8px 12px; - min-width: 68px; - } - - .sec-stat-num { - font-size: 22px; - } - - .detail-field { - flex-direction: column; - gap: 4px; - } - - .detail-label { - width: auto; - } -} - -/* ── iPad landscape / small laptop (769px – 1024px) ─────────────── */ +/* ── Breakpoint-driven padding adjustments ───────────────────────── */ +/* Tablet (769–1024px) */ @media (min-width: 769px) and (max-width: 1024px) { - .sidebar:not(.collapsed) { + body.is-desktop .sidebar:not(.collapsed) { width: 200px; } @@ -1835,24 +918,9 @@ ul { } } -/* ── Laptop (1025px – 1440px) ───────────────────────────────────── */ -@media (min-width: 1025px) and (max-width: 1440px) { - .vault-header { - padding: 16px 24px; - } - - .vault-list { - padding: 12px 24px 24px; - } - - .security-dashboard { - padding: 20px 24px; - } -} - -/* ── Large PC (> 1440px) ────────────────────────────────────────── */ +/* Large PC (> 1440px) */ @media (min-width: 1441px) { - .sidebar:not(.collapsed) { + body.is-desktop .sidebar:not(.collapsed) { width: 260px; } @@ -1894,7 +962,106 @@ ul { } } -/* ── Auth pages — phone ──────────────────────────────────────────── */ +/* Mobile padding and layout overrides */ +body.is-mobile .vault-main { + flex: 1; + overflow: hidden; + min-height: 0; +} + +body.is-mobile .vault-header { + padding: 12px 16px; + gap: 8px; +} + +body.is-mobile .vault-title { + font-size: 16px; +} + +body.is-mobile .vault-list { + padding: 8px 12px 80px; +} + +body.is-mobile .panel-body { + padding: 16px; +} + +body.is-mobile .security-dashboard { + padding: 12px; + gap: 16px; +} + +body.is-mobile .vault-toolbar { + gap: 8px; +} + +body.is-mobile .search-wrapper { + max-width: none; +} + +body.is-mobile .sort-wrapper { + display: none; +} + +body.is-mobile .vault-header .btn-fab { + display: none; +} + +body.is-mobile .form-row { + flex-direction: column; + gap: 0; +} + +body.is-mobile .modal-actions { + flex-wrap: wrap; +} + +body.is-mobile .modal-overlay { + padding: 0; + align-items: flex-end; +} + +body.is-mobile .modal { + max-width: 100%; + max-height: calc(var(--vh, 1vh) * 92); + border-radius: 16px 16px 0 0; + padding: 20px 16px; +} + +body.is-mobile .security-summary { + padding: 16px; + gap: 12px; + flex-wrap: wrap; +} + +body.is-mobile .sec-score { + font-size: 40px; +} + +body.is-mobile .sec-stats { + gap: 8px; + flex-wrap: wrap; +} + +body.is-mobile .sec-stat { + padding: 8px 12px; + min-width: 68px; +} + +body.is-mobile .sec-stat-num { + font-size: 22px; +} + +body.is-mobile .detail-field { + flex-direction: column; + gap: 4px; +} + +body.is-mobile .detail-label { + width: auto; +} + +/* Auth page — phone */ @media (max-width: 480px) { .auth-container { padding: 12px; @@ -1910,6 +1077,13 @@ ul { } } +/* iOS input font-size — prevent auto-zoom on focus */ +body.is-mobile .form-group input, +body.is-mobile .form-group select, +body.is-mobile .form-group textarea { + font-size: 16px; +} + /* ── Settings — new sections (Phase 6) ──────────────────────────── */ .settings-section-danger { border-top: 2px solid var(--color-danger, #e53e3e); diff --git a/app/static/js/vault.js b/app/static/js/vault.js index dafb05c..563bc55 100644 --- a/app/static/js/vault.js +++ b/app/static/js/vault.js @@ -8,33 +8,60 @@ const Vault = (() => { let _items = []; let _folders = []; - let _currentView = 'vault'; + let _currentView = "vault"; let _activeFilter = null; - let _sortOrder = 'name-asc'; + let _sortOrder = "name-asc"; const FIELD_LABELS = { - url: 'Website URL', username: 'Username', password: 'Password', notes: 'Notes', - note_body: 'Note', cardholder_name: 'Cardholder Name', card_number: 'Card Number', - expiry_month: 'Expiry Month', expiry_year: 'Expiry Year', cvv: 'CVV', - bank_name: 'Bank Name', account_type: 'Account Type', routing_number: 'Routing Number', - account_number: 'Account Number', first_name: 'First Name', last_name: 'Last Name', - company: 'Company', address_line: 'Street Address', city: 'City', state: 'State', - zip: 'ZIP', country: 'Country', phone: 'Phone', email: 'Email', - ssn_number: 'Social Security Number', + url: "Website URL", + username: "Username", + password: "Password", + notes: "Notes", + note_body: "Note", + cardholder_name: "Cardholder Name", + card_number: "Card Number", + expiry_month: "Expiry Month", + expiry_year: "Expiry Year", + cvv: "CVV", + bank_name: "Bank Name", + account_type: "Account Type", + routing_number: "Routing Number", + account_number: "Account Number", + first_name: "First Name", + last_name: "Last Name", + company: "Company", + address_line: "Street Address", + city: "City", + state: "State", + zip: "ZIP", + country: "Country", + phone: "Phone", + email: "Email", + ssn_number: "Social Security Number", }; - const SENSITIVE_FIELDS = new Set(['password', 'cvv', 'card_number', 'account_number', 'routing_number', 'ssn_number']); + const SENSITIVE_FIELDS = new Set([ + "password", + "cvv", + "card_number", + "account_number", + "routing_number", + "ssn_number", + ]); // ── API helpers ─────────────────────────────────────────────────────────── async function apiFetch(path, options = {}) { - let token = sessionStorage.getItem('access_token'); - if (!token) { redirectToLogin(); return null; } + let token = sessionStorage.getItem("access_token"); + if (!token) { + redirectToLogin(); + return null; + } const defaults = { headers: { - 'Content-Type': 'application/json', - 'Authorization': `Bearer ${token}`, - 'X-CSRFToken': csrfToken(), + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + "X-CSRFToken": csrfToken(), }, }; const merged = { ...defaults, ...options }; @@ -44,8 +71,12 @@ const Vault = (() => { if (res.status === 401) { const refreshed = await tryRefreshToken(); - if (!refreshed) { redirectToLogin(); return null; } - merged.headers['Authorization'] = `Bearer ${sessionStorage.getItem('access_token')}`; + if (!refreshed) { + redirectToLogin(); + return null; + } + merged.headers["Authorization"] = + `Bearer ${sessionStorage.getItem("access_token")}`; res = await fetch(path, merged); } @@ -62,64 +93,85 @@ const Vault = (() => { // don't each fire a separate rotation (which would blacklist each other's tokens). if (_refreshPromise) return _refreshPromise; _refreshPromise = (async () => { - const refreshToken = localStorage.getItem('refresh_token'); + const refreshToken = localStorage.getItem("refresh_token"); if (!refreshToken) return false; try { - const res = await fetch('/api/auth/refresh', { - method: 'POST', - headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken() }, + const res = await fetch("/api/auth/refresh", { + method: "POST", + headers: { + "Content-Type": "application/json", + "X-CSRFToken": csrfToken(), + }, body: JSON.stringify({ refresh_token: refreshToken }), }); if (!res.ok) return false; const data = await res.json(); - sessionStorage.setItem('access_token', data.access_token); - if (data.refresh_token) localStorage.setItem('refresh_token', data.refresh_token); + sessionStorage.setItem("access_token", data.access_token); + if (data.refresh_token) + localStorage.setItem("refresh_token", data.refresh_token); return true; - } catch { return false; } - })().finally(() => { _refreshPromise = null; }); + } catch { + return false; + } + })().finally(() => { + _refreshPromise = null; + }); return _refreshPromise; } function csrfToken() { - return document.querySelector('meta[name="csrf-token"]')?.content || ''; + return document.querySelector('meta[name="csrf-token"]')?.content || ""; } function redirectToLogin() { VaultSession.clear(); SharingSession.clear(); - sessionStorage.removeItem('access_token'); - window.dispatchEvent(new CustomEvent('passkeeper:logout')); - window.location.href = '/login'; + sessionStorage.removeItem("access_token"); + window.dispatchEvent(new CustomEvent("passkeeper:logout")); + window.location.href = "/login"; } // ── Load ────────────────────────────────────────────────────────────────── async function loadVault() { const vaultKey = VaultSession.getKey(); - if (!vaultKey) { showUnlockOverlay(); return; } + if (!vaultKey) { + showUnlockOverlay(); + return; + } showLoadingState(true); try { const [itemsRes, foldersRes] = await Promise.all([ - apiFetch('/api/vault'), apiFetch('/api/folders'), + apiFetch("/api/vault"), + apiFetch("/api/folders"), ]); - if (!itemsRes || !foldersRes) { showUnlockOverlay(); return; } + if (!itemsRes || !foldersRes) { + showUnlockOverlay(); + return; + } const rawItems = await itemsRes.json(); _folders = await foldersRes.json(); - _items = await Promise.all(rawItems.map(async item => { - try { - const plain = await Crypto.decryptItem(vaultKey, item.enc_data, item.iv); - return { ...item, plain }; - } catch { - return { ...item, plain: null, decryptError: true }; - } - })); + _items = await Promise.all( + rawItems.map(async (item) => { + try { + const plain = await Crypto.decryptItem( + vaultKey, + item.enc_data, + item.iv, + ); + return { ...item, plain }; + } catch { + return { ...item, plain: null, decryptError: true }; + } + }), + ); renderFolderList(); applyCurrentFilter(); } catch (err) { - showToast('Failed to load vault: ' + err.message, 'error'); + showToast("Failed to load vault: " + err.message, "error"); } finally { showLoadingState(false); } @@ -127,12 +179,12 @@ const Vault = (() => { async function loadFolders() { try { - const res = await apiFetch('/api/folders'); + const res = await apiFetch("/api/folders"); if (!res) return; _folders = await res.json(); renderFolderList(); } catch (err) { - showToast('Could not refresh folders: ' + err.message, 'error'); + showToast("Could not refresh folders: " + err.message, "error"); } } @@ -140,43 +192,53 @@ const Vault = (() => { function switchView(view) { _currentView = view; - ['vault', 'security', 'sharing', 'emergency'].forEach(v => { - document.getElementById(`view-${v}`)?.classList.toggle('hidden', v !== view); + ["vault", "security", "sharing", "emergency"].forEach((v) => { + document + .getElementById(`view-${v}`) + ?.classList.toggle("hidden", v !== view); }); - document.querySelectorAll('.sidebar-item[data-view]').forEach(el => { - el.classList.toggle('active', el.dataset.view === view); + document.querySelectorAll(".sidebar-item[data-view]").forEach((el) => { + el.classList.toggle("active", el.dataset.view === view); }); - if (view !== 'vault') { - document.querySelectorAll('.sidebar-item[data-type-filter], .sidebar-item[data-folder-id]') - .forEach(el => el.classList.remove('active')); + if (view !== "vault") { + document + .querySelectorAll( + ".sidebar-item[data-type-filter], .sidebar-item[data-folder-id]", + ) + .forEach((el) => el.classList.remove("active")); } - if (view === 'security') renderSecurityDashboard(); - if (view === 'sharing') loadSharingView(); - if (view === 'emergency') loadEmergencyView(); + if (view === "security") renderSecurityDashboard(); + if (view === "sharing") loadSharingView(); + if (view === "emergency") loadEmergencyView(); } // ── Vault render ────────────────────────────────────────────────────────── function renderFolderList() { - const ul = document.getElementById('sidebar-folders'); + const ul = document.getElementById("sidebar-folders"); if (!ul) return; - ul.innerHTML = ''; - _folders.forEach(folder => { - const li = document.createElement('li'); - li.className = 'sidebar-item folder-item'; + ul.innerHTML = ""; + _folders.forEach((folder) => { + const li = document.createElement("li"); + li.className = "sidebar-item folder-item"; li.dataset.folderId = folder.id; - const label = document.createElement('span'); - label.className = 'folder-label'; + const label = document.createElement("span"); + label.className = "folder-label"; label.innerHTML = `📁 ${escHtml(folder.name)}`; - label.addEventListener('click', () => filterByFolder(folder.id, folder.name)); + label.addEventListener("click", () => + filterByFolder(folder.id, folder.name), + ); - const delBtn = document.createElement('button'); - delBtn.className = 'btn-delete-folder'; - delBtn.title = 'Delete folder'; - delBtn.textContent = '🗑'; - delBtn.addEventListener('click', e => { e.stopPropagation(); confirmDeleteFolder(folder); }); + const delBtn = document.createElement("button"); + delBtn.className = "btn-delete-folder"; + delBtn.title = "Delete folder"; + delBtn.textContent = "🗑"; + delBtn.addEventListener("click", (e) => { + e.stopPropagation(); + confirmDeleteFolder(folder); + }); li.appendChild(label); li.appendChild(delBtn); @@ -187,293 +249,463 @@ const Vault = (() => { function getSortedItems(items) { const sorted = [...items]; switch (_sortOrder) { - case 'name-asc': sorted.sort((a, b) => a.name.localeCompare(b.name)); break; - case 'name-desc': sorted.sort((a, b) => b.name.localeCompare(a.name)); break; - case 'date-desc': sorted.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); break; - case 'date-asc': sorted.sort((a, b) => new Date(a.created_at) - new Date(b.created_at)); break; - case 'folder': sorted.sort((a, b) => folderName(a.folder_id).localeCompare(folderName(b.folder_id)) || a.name.localeCompare(b.name)); break; + case "name-asc": + sorted.sort((a, b) => a.name.localeCompare(b.name)); + break; + case "name-desc": + sorted.sort((a, b) => b.name.localeCompare(a.name)); + break; + case "date-desc": + sorted.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); + break; + case "date-asc": + sorted.sort((a, b) => new Date(a.created_at) - new Date(b.created_at)); + break; + case "folder": + sorted.sort( + (a, b) => + folderName(a.folder_id).localeCompare(folderName(b.folder_id)) || + a.name.localeCompare(b.name), + ); + break; } return sorted; } function folderName(id) { - if (!id) return '(No folder)'; - return _folders.find(f => f.id === id)?.name || 'Unknown'; + if (!id) return "(No folder)"; + return _folders.find((f) => f.id === id)?.name || "Unknown"; } function renderItemList(items) { - const list = document.getElementById('vault-list'); + const list = document.getElementById("vault-list"); if (!list) return; - list.innerHTML = ''; + list.innerHTML = ""; if (items.length === 0) { - list.innerHTML = '
  • No items found. Click + to add one.
    • '; + list.innerHTML = + '
  • No items found. Click + to add one.
    • '; return; } const sorted = getSortedItems(items); const groups = {}; - sorted.forEach(item => { + sorted.forEach((item) => { const key = folderName(item.folder_id); if (!groups[key]) groups[key] = []; groups[key].push(item); }); - const keys = _sortOrder === 'folder' - ? Object.keys(groups).sort() - : ['(No folder)', ..._folders.map(f => f.name)].filter(k => groups[k]); - Object.keys(groups).forEach(k => { if (!keys.includes(k)) keys.push(k); }); + const keys = + _sortOrder === "folder" + ? Object.keys(groups).sort() + : ["(No folder)", ..._folders.map((f) => f.name)].filter( + (k) => groups[k], + ); + Object.keys(groups).forEach((k) => { + if (!keys.includes(k)) keys.push(k); + }); - keys.forEach(groupName => { + keys.forEach((groupName) => { if (!groups[groupName]) return; - const header = document.createElement('li'); - header.className = 'vault-group-header'; + const header = document.createElement("li"); + header.className = "vault-group-header"; header.textContent = groupName; list.appendChild(header); - groups[groupName].forEach(item => list.appendChild(createItemElement(item))); + groups[groupName].forEach((item) => + list.appendChild(createItemElement(item)), + ); }); } function createItemElement(item) { - const li = document.createElement('li'); - li.className = 'vault-item'; + const li = document.createElement("li"); + li.className = "vault-item"; li.dataset.id = item.id; - const iconMap = { password: '🔑', note: '📝', card: '💳', bank: '🏦', address: '🏠', ssn: '🪪', passkey: '🔐' }; - const icon = iconMap[item.item_type] || '🔑'; + const iconMap = { + password: "🔑", + note: "📝", + card: "💳", + bank: "🏦", + address: "🏠", + ssn: "🪪", + passkey: "🔐", + }; + const icon = iconMap[item.item_type] || "🔑"; - let subText = ''; + let subText = ""; if (item.plain) { switch (item.item_type) { - case 'password': subText = item.plain.username || item.plain.url || ''; break; - case 'note': subText = (item.plain.note_body || '').slice(0, 60); break; - case 'card': subText = item.plain.card_number ? '•••• ' + String(item.plain.card_number).replace(/\s/g, '').slice(-4) : ''; break; - case 'bank': subText = item.plain.bank_name || ''; break; - case 'address': subText = [item.plain.first_name, item.plain.last_name].filter(Boolean).join(' '); break; - case 'ssn': subText = '•••-••-••••'; break; + case "password": + subText = item.plain.username || item.plain.url || ""; + break; + case "note": + subText = (item.plain.note_body || "").slice(0, 60); + break; + case "card": + subText = item.plain.card_number + ? "•••• " + + String(item.plain.card_number).replace(/\s/g, "").slice(-4) + : ""; + break; + case "bank": + subText = item.plain.bank_name || ""; + break; + case "address": + subText = [item.plain.first_name, item.plain.last_name] + .filter(Boolean) + .join(" "); + break; + case "ssn": + subText = "•••-••-••••"; + break; } } - const showCopyUser = item.item_type === 'password'; - const showCopyPass = ['password', 'card', 'bank', 'ssn'].includes(item.item_type); - const showLaunch = item.item_type === 'password' && item.plain?.url; + const showCopyUser = item.item_type === "password"; + const showCopyPass = ["password", "card", "bank", "ssn"].includes( + item.item_type, + ); + const showLaunch = item.item_type === "password" && item.plain?.url; + const showTotp = item.item_type === "password" && !!extractTotpSecret(item.plain?.totp_uri); li.innerHTML = `
    ${icon}
    ${escHtml(item.name)} ${escHtml(subText)} + ${showTotp ? `······` : ""}
    - ${showLaunch ? `` : ''} - ${showCopyUser ? `` : ''} - ${showCopyPass ? `` : ''} + ${showLaunch ? `` : ""} + ${showCopyUser ? `` : ""} + ${showCopyPass ? `` : ""} + ${showTotp ? `` : ""}
    `; + if (showTotp) { + // Start a live TOTP ticker for this item. + const secret = extractTotpSecret(item.plain.totp_uri); + const displayEl = li.querySelector(`#totp-display-${item.id}`); + const codeEl = displayEl.querySelector(".totp-code"); + const timerEl = displayEl.querySelector(".totp-timer"); + + async function refreshTotp() { + const code = await getTotpCode(secret).catch(() => null); + if (!code) return; + // Insert a space in the middle for readability: 123 456 + codeEl.textContent = code.slice(0, 3) + " " + code.slice(3); + const secs = totpSecondsLeft(); + timerEl.textContent = " (" + secs + "s)"; + // Colour the timer red when it's about to expire. + timerEl.style.color = secs <= 5 ? "#dc2626" : "#9ca3af"; + } + refreshTotp(); + // Refresh every second. Store interval id on the element for cleanup. + const intervalId = setInterval(refreshTotp, 1000); + li.dataset.totpInterval = intervalId; + } + if (showLaunch) { - li.querySelector('[data-action="launch"]').addEventListener('click', e => { - e.stopPropagation(); - let url = item.plain?.url || ''; - if (url && !/^https?:\/\//i.test(url)) url = 'https://' + url; - window.open(url, '_blank', 'noopener,noreferrer'); - }); + li.querySelector('[data-action="launch"]').addEventListener( + "click", + (e) => { + e.stopPropagation(); + let url = item.plain?.url || ""; + if (url && !/^https?:\/\//i.test(url)) url = "https://" + url; + window.open(url, "_blank", "noopener,noreferrer"); + }, + ); } if (showCopyUser) { - li.querySelector('[data-action="copy-user"]').addEventListener('click', e => { - e.stopPropagation(); copyToClipboard(item.plain?.username || '', 'Username copied'); - }); + li.querySelector('[data-action="copy-user"]').addEventListener( + "click", + (e) => { + e.stopPropagation(); + copyToClipboard(item.plain?.username || "", "Username copied"); + }, + ); } if (showCopyPass) { - li.querySelector('[data-action="copy-pass"]').addEventListener('click', e => { - e.stopPropagation(); - const s = item.item_type === 'password' ? item.plain?.password - : item.item_type === 'card' ? item.plain?.cvv - : item.item_type === 'bank' ? item.plain?.account_number - : item.plain?.ssn_number; - copyToClipboard(s || '', 'Copied to clipboard'); - }); + li.querySelector('[data-action="copy-pass"]').addEventListener( + "click", + (e) => { + e.stopPropagation(); + const s = + item.item_type === "password" + ? item.plain?.password + : item.item_type === "card" + ? item.plain?.cvv + : item.item_type === "bank" + ? item.plain?.account_number + : item.plain?.ssn_number; + copyToClipboard(s || "", "Copied to clipboard"); + }, + ); } - li.querySelector('[data-action="edit"]').addEventListener('click', e => { e.stopPropagation(); openModal('edit', item); }); - li.querySelector('[data-action="delete"]').addEventListener('click', e => { e.stopPropagation(); confirmDeleteItem(item); }); - li.addEventListener('click', () => openModal('edit', item)); + if (showTotp) { + li.querySelector('[data-action="copy-totp"]').addEventListener( + "click", + async (e) => { + e.stopPropagation(); + const secret = extractTotpSecret(item.plain?.totp_uri); + const code = await getTotpCode(secret).catch(() => null); + if (code) copyToClipboard(code, "2FA code copied"); + }, + ); + } + li.querySelector('[data-action="edit"]').addEventListener("click", (e) => { + e.stopPropagation(); + openModal("edit", item); + }); + li.querySelector('[data-action="delete"]').addEventListener( + "click", + (e) => { + e.stopPropagation(); + confirmDeleteItem(item); + }, + ); + li.addEventListener("click", () => openModal("edit", item)); return li; } // ── Security Dashboard ──────────────────────────────────────────────────── function renderSecurityDashboard() { - const summaryEl = document.getElementById('security-summary'); - const sectionsEl = document.getElementById('security-sections'); + const summaryEl = document.getElementById("security-summary"); + const sectionsEl = document.getElementById("security-sections"); if (!summaryEl || !sectionsEl) return; // If vault hasn't loaded yet, wait for it then re-render if (!_items.length && VaultSession.getKey()) { summaryEl.innerHTML = '
    Loading…
    '; - sectionsEl.innerHTML = ''; + sectionsEl.innerHTML = ""; loadVault().then(() => renderSecurityDashboard()); return; } - const pwItems = _items.filter(i => i.item_type === 'password' && i.plain?.password); + const pwItems = _items.filter( + (i) => i.item_type === "password" && i.plain?.password, + ); if (!pwItems.length) { - summaryEl.innerHTML = '
    No passwords to analyze.
    '; - sectionsEl.innerHTML = ''; + summaryEl.innerHTML = + '
    No passwords to analyze.
    '; + sectionsEl.innerHTML = ""; return; } - const weak = pwItems.filter(i => { + const weak = pwItems.filter((i) => { const p = i.plain.password; if (p.length < 10) return true; - return [/[A-Z]/, /[a-z]/, /[0-9]/, /[^A-Za-z0-9]/].filter(r => r.test(p)).length < 2; + return ( + [/[A-Z]/, /[a-z]/, /[0-9]/, /[^A-Za-z0-9]/].filter((r) => r.test(p)) + .length < 2 + ); }); const passCounts = {}; - pwItems.forEach(i => { const p = i.plain.password; (passCounts[p] = passCounts[p] || []).push(i); }); - const reused = Object.values(passCounts).filter(a => a.length > 1).flat(); + pwItems.forEach((i) => { + const p = i.plain.password; + (passCounts[p] = passCounts[p] || []).push(i); + }); + const reused = Object.values(passCounts) + .filter((a) => a.length > 1) + .flat(); const cutoff = Date.now() - 180 * 86400000; - const old = pwItems.filter(i => new Date(i.created_at).getTime() < cutoff); + const old = pwItems.filter( + (i) => new Date(i.created_at).getTime() < cutoff, + ); const total = pwItems.length; - const score = Math.max(0, Math.round(100 - (weak.length / total) * 40 - (reused.length / total) * 30 - (old.length / total) * 15)); - const cls = score >= 80 ? 'score-good' : score >= 50 ? 'score-fair' : 'score-poor'; - const label = score >= 80 ? 'Good' : score >= 50 ? 'Fair' : 'Needs attention'; + const score = Math.max( + 0, + Math.round( + 100 - + (weak.length / total) * 40 - + (reused.length / total) * 30 - + (old.length / total) * 15, + ), + ); + const cls = + score >= 80 ? "score-good" : score >= 50 ? "score-fair" : "score-poor"; + const label = + score >= 80 ? "Good" : score >= 50 ? "Fair" : "Needs attention"; summaryEl.innerHTML = `
    ${score}
    ${label}
    -
    Based on ${total} password${total !== 1 ? 's' : ''}
    +
    Based on ${total} password${total !== 1 ? "s" : ""}
    -
    ${weak.length}Weak
    -
    ${reused.length}Reused
    -
    ${old.length}Old (>180d)
    +
    ${weak.length}Weak
    +
    ${reused.length}Reused
    +
    ${old.length}Old (>180d)
    `; - sectionsEl.innerHTML = ''; + sectionsEl.innerHTML = ""; const makeSection = (title, icon, items, desc) => { if (!items.length) return; - const sec = document.createElement('div'); - sec.className = 'sec-section'; + const sec = document.createElement("div"); + sec.className = "sec-section"; sec.innerHTML = `
    ${icon}
    ${title} (${items.length})
    ${desc}
    `; - sec.querySelectorAll('[data-sec-edit]').forEach(btn => { - btn.addEventListener('click', () => { - const item = _items.find(it => it.id === parseInt(btn.dataset.secEdit)); - if (item) { switchView('vault'); openModal('edit', item); } + sec.querySelectorAll("[data-sec-edit]").forEach((btn) => { + btn.addEventListener("click", () => { + const item = _items.find( + (it) => it.id === parseInt(btn.dataset.secEdit), + ); + if (item) { + switchView("vault"); + openModal("edit", item); + } }); }); sectionsEl.appendChild(sec); }; - makeSection('Weak Passwords', '⚠️', weak, 'Short or low-complexity passwords.'); - makeSection('Reused Passwords', '♻️', [...new Set(reused.map(i => i.id))].map(id => _items.find(i => i.id === id)).filter(Boolean), 'Same password used on multiple sites.'); - makeSection('Old Passwords', '🕐', old, 'Not changed in over 180 days.'); + makeSection( + "Weak Passwords", + "⚠️", + weak, + "Short or low-complexity passwords.", + ); + makeSection( + "Reused Passwords", + "♻️", + [...new Set(reused.map((i) => i.id))] + .map((id) => _items.find((i) => i.id === id)) + .filter(Boolean), + "Same password used on multiple sites.", + ); + makeSection("Old Passwords", "🕐", old, "Not changed in over 180 days."); } // ── Sharing View ────────────────────────────────────────────────────────── async function loadSharingView() { try { - const keysRes = await apiFetch('/api/sharing/keys'); + const keysRes = await apiFetch("/api/sharing/keys"); if (!keysRes) return; const keysData = await keysRes.json(); - const notice = document.getElementById('sharing-keys-notice'); + const notice = document.getElementById("sharing-keys-notice"); if (!keysData.keys_setup) { - notice.classList.remove('hidden'); + notice.classList.remove("hidden"); } else { - notice.classList.add('hidden'); + notice.classList.add("hidden"); // Load sharing private key into SharingSession if vault key available const vaultKey = VaultSession.getKey(); if (vaultKey && !SharingSession.isReady()) { try { const privKey = await SharingCrypto.decryptPrivateKey( - vaultKey, keysData.private_key_enc, keysData.private_key_iv + vaultKey, + keysData.private_key_enc, + keysData.private_key_iv, ); SharingSession.setKey(privKey); } catch (err) { - console.warn('[PassKeeper] Could not load sharing private key:', err); + console.warn( + "[PassKeeper] Could not load sharing private key:", + err, + ); } } } await Promise.all([loadSharedOut(), loadSharedIn()]); } catch (err) { - showToast('Could not load sharing data: ' + err.message, 'error'); + showToast("Could not load sharing data: " + err.message, "error"); } } async function loadSharedOut() { try { - const res = await apiFetch('/api/sharing'); + const res = await apiFetch("/api/sharing"); if (!res) return; const shares = await res.json(); renderSharedOut(shares); } catch (err) { - console.error('loadSharedOut:', err); + console.error("loadSharedOut:", err); } } async function loadSharedIn() { try { - const res = await apiFetch('/api/sharing/inbox'); + const res = await apiFetch("/api/sharing/inbox"); if (!res) return; const shares = await res.json(); renderSharedIn(shares); } catch (err) { - console.error('loadSharedIn:', err); + console.error("loadSharedIn:", err); } } function renderSharedOut(shares) { - const ul = document.getElementById('shared-out-list'); + const ul = document.getElementById("shared-out-list"); if (!ul) return; if (!shares.length) { - ul.innerHTML = '
  • You haven\'t shared any items yet.
    • '; + ul.innerHTML = + '
  • You haven\'t shared any items yet.
    • '; return; } - ul.innerHTML = shares.map(s => ` + ul.innerHTML = shares + .map( + (s) => `
  • -
    • `).join(''); + `, + ) + .join(""); - ul.querySelectorAll('[data-revoke]').forEach(btn => { - btn.addEventListener('click', async () => { - if (!confirm('Remove this share?')) return; + ul.querySelectorAll("[data-revoke]").forEach((btn) => { + btn.addEventListener("click", async () => { + if (!confirm("Remove this share?")) return; try { - await apiFetch(`/api/sharing/${btn.dataset.revoke}`, { method: 'DELETE' }); - showToast('Share removed'); + await apiFetch(`/api/sharing/${btn.dataset.revoke}`, { + method: "DELETE", + }); + showToast("Share removed"); loadSharedOut(); - } catch (err) { showToast(err.message, 'error'); } + } catch (err) { + showToast(err.message, "error"); + } }); }); } function renderSharedIn(shares) { - const ul = document.getElementById('shared-in-list'); + const ul = document.getElementById("shared-in-list"); if (!ul) return; if (!shares.length) { - ul.innerHTML = '
  • No items have been shared with you.
    • '; + ul.innerHTML = + '
  • No items have been shared with you.
    • '; return; } - ul.innerHTML = shares.map(s => ` + ul.innerHTML = shares + .map( + (s) => `
  • ${!s.accepted - ? `` - : `` - } -
    • `).join(''); + ? `` + : `` + } + `, + ) + .join(""); - ul.querySelectorAll('[data-accept]').forEach(btn => { - btn.addEventListener('click', async () => { + ul.querySelectorAll("[data-accept]").forEach((btn) => { + btn.addEventListener("click", async () => { try { - await apiFetch(`/api/sharing/inbox/${btn.dataset.accept}/accept`, { method: 'POST' }); - showToast('Share accepted'); + await apiFetch(`/api/sharing/inbox/${btn.dataset.accept}/accept`, { + method: "POST", + }); + showToast("Share accepted"); loadSharedIn(); - } catch (err) { showToast(err.message, 'error'); } + } catch (err) { + showToast(err.message, "error"); + } }); }); - ul.querySelectorAll('[data-view-share]').forEach(btn => { - btn.addEventListener('click', async () => { - if (!SharingSession.isReady()) { showToast('Sharing keys not loaded. Check Settings.', 'error'); return; } + ul.querySelectorAll("[data-view-share]").forEach((btn) => { + btn.addEventListener("click", async () => { + if (!SharingSession.isReady()) { + showToast("Sharing keys not loaded. Check Settings.", "error"); + return; + } try { - const ownerPubKey = await SharingCrypto.importPublicKey(btn.dataset.ownerKey); - const sharedKey = await SharingCrypto.deriveSharedKey(SharingSession.getKey(), ownerPubKey); - const plain = await SharingCrypto.decryptShare(sharedKey, btn.dataset.enc, btn.dataset.iv); + const ownerPubKey = await SharingCrypto.importPublicKey( + btn.dataset.ownerKey, + ); + const sharedKey = await SharingCrypto.deriveSharedKey( + SharingSession.getKey(), + ownerPubKey, + ); + const plain = await SharingCrypto.decryptShare( + sharedKey, + btn.dataset.enc, + btn.dataset.iv, + ); showSharedItemDetails(btn.dataset.name, btn.dataset.type, plain); - } catch (err) { showToast('Could not decrypt: ' + err.message, 'error'); } + } catch (err) { + showToast("Could not decrypt: " + err.message, "error"); + } }); }); } function showSharedItemDetails(name, itemType, plain) { - document.getElementById('detail-modal-title').textContent = `${itemIcon(itemType || 'password')} ${name}`; - renderDetailFields(document.getElementById('detail-modal-body'), plain); - document.getElementById('detail-modal').classList.add('open'); + document.getElementById("detail-modal-title").textContent = + `${itemIcon(itemType || "password")} ${name}`; + renderDetailFields(document.getElementById("detail-modal-body"), plain); + document.getElementById("detail-modal").classList.add("open"); } function renderDetailFields(container, plain) { - container.innerHTML = Object.entries(plain) - .filter(([, v]) => v) - .map(([k, v]) => { - const label = FIELD_LABELS[k] || k.replace(/_/g, ' '); - const val = String(v); - const sensitive = SENSITIVE_FIELDS.has(k); - const valHtml = sensitive - ? ` + container.innerHTML = + Object.entries(plain) + .filter(([, v]) => v) + .map(([k, v]) => { + const label = FIELD_LABELS[k] || k.replace(/_/g, " "); + const val = String(v); + const sensitive = SENSITIVE_FIELDS.has(k); + const valHtml = sensitive + ? ` •••••••• ` - : `${escHtml(val)}`; - return `
    + : `${escHtml(val)}`; + return `
    ${escHtml(label)}
    ${valHtml}
    `; - }).join('') || '

    No fields to display.

    '; + }) + .join("") || '

    No fields to display.

    '; - container.querySelectorAll('.btn-reveal').forEach(btn => { - btn.addEventListener('click', () => { + container.querySelectorAll(".btn-reveal").forEach((btn) => { + btn.addEventListener("click", () => { const span = btn.previousElementSibling; - const revealed = span.dataset.revealed === 'true'; + const revealed = span.dataset.revealed === "true"; span.dataset.revealed = String(!revealed); - span.querySelector('.detail-masked').classList.toggle('hidden', !revealed); - span.querySelector('.detail-actual').classList.toggle('hidden', revealed); + span + .querySelector(".detail-masked") + .classList.toggle("hidden", !revealed); + span + .querySelector(".detail-actual") + .classList.toggle("hidden", revealed); }); }); - container.querySelectorAll('.btn-copy-field').forEach(btn => { - btn.addEventListener('click', () => { - navigator.clipboard.writeText(btn.dataset.copy).then(() => showToast('Copied!')); + container.querySelectorAll(".btn-copy-field").forEach((btn) => { + btn.addEventListener("click", () => { + navigator.clipboard + .writeText(btn.dataset.copy) + .then(() => showToast("Copied!")); }); }); } async function handleShareFormSubmit(e) { e.preventDefault(); - const errEl = document.getElementById('share-error'); - errEl.classList.add('hidden'); + const errEl = document.getElementById("share-error"); + errEl.classList.add("hidden"); if (!SharingSession.isReady()) { - showToast('Set up sharing keys first (Settings)', 'error'); + showToast("Set up sharing keys first (Settings)", "error"); return; } - const itemId = parseInt(document.getElementById('share-item-select').value); - const recipientEmail = document.getElementById('share-recipient-email').value.trim().toLowerCase(); + const itemId = parseInt(document.getElementById("share-item-select").value); + const recipientEmail = document + .getElementById("share-recipient-email") + .value.trim() + .toLowerCase(); if (!itemId || !recipientEmail) { - errEl.textContent = 'Please select an item and enter a recipient email.'; - errEl.classList.remove('hidden'); + errEl.textContent = "Please select an item and enter a recipient email."; + errEl.classList.remove("hidden"); return; } try { // Fetch recipient's public key - const pkRes = await apiFetch(`/api/sharing/public-key?email=${encodeURIComponent(recipientEmail)}`); + const pkRes = await apiFetch( + `/api/sharing/public-key?email=${encodeURIComponent(recipientEmail)}`, + ); if (!pkRes) return; const pkData = await pkRes.json(); - const recipientPubKey = await SharingCrypto.importPublicKey(pkData.public_key); - const sharedKey = await SharingCrypto.deriveSharedKey(SharingSession.getKey(), recipientPubKey); + const recipientPubKey = await SharingCrypto.importPublicKey( + pkData.public_key, + ); + const sharedKey = await SharingCrypto.deriveSharedKey( + SharingSession.getKey(), + recipientPubKey, + ); // Find item plaintext - const item = _items.find(i => i.id === itemId); - if (!item?.plain) { showToast('Item not found or not decrypted', 'error'); return; } + const item = _items.find((i) => i.id === itemId); + if (!item?.plain) { + showToast("Item not found or not decrypted", "error"); + return; + } - const { enc_data, iv } = await SharingCrypto.encryptForShare(sharedKey, item.plain); + const { enc_data, iv } = await SharingCrypto.encryptForShare( + sharedKey, + item.plain, + ); - const res = await apiFetch('/api/sharing', { - method: 'POST', + const res = await apiFetch("/api/sharing", { + method: "POST", body: JSON.stringify({ item_id: itemId, recipient_email: recipientEmail, - enc_data, iv, + enc_data, + iv, item_name: item.name, item_type: item.item_type, }), }); if (!res) return; - closeModal('share-modal'); - showToast('Item shared successfully'); + closeModal("share-modal"); + showToast("Item shared successfully"); loadSharedOut(); } catch (err) { errEl.textContent = err.message; - errEl.classList.remove('hidden'); + errEl.classList.remove("hidden"); } } function openShareModal() { - const sel = document.getElementById('share-item-select'); - sel.innerHTML = _items.map(i => - `` - ).join(''); - document.getElementById('share-recipient-email').value = ''; - document.getElementById('share-error').classList.add('hidden'); - document.getElementById('share-modal').classList.add('open'); + const sel = document.getElementById("share-item-select"); + sel.innerHTML = _items + .map( + (i) => + ``, + ) + .join(""); + document.getElementById("share-recipient-email").value = ""; + document.getElementById("share-error").classList.add("hidden"); + document.getElementById("share-modal").classList.add("open"); } // ── Emergency Access View ───────────────────────────────────────────────── async function loadEmergencyView() { try { - const res = await apiFetch('/api/emergency'); + const res = await apiFetch("/api/emergency"); if (!res) return; const data = await res.json(); renderEmergencyGrants(data.grants); renderEmergencyAccess(data.access); } catch (err) { - showToast('Could not load emergency access data: ' + err.message, 'error'); + showToast( + "Could not load emergency access data: " + err.message, + "error", + ); } } function renderEmergencyGrants(grants) { - const ul = document.getElementById('em-grants-list'); + const ul = document.getElementById("em-grants-list"); if (!ul) return; if (!grants.length) { - ul.innerHTML = '
  • No trusted contacts set up yet.
    • '; + ul.innerHTML = + '
  • No trusted contacts set up yet.
    • '; return; } - ul.innerHTML = grants.map(g => { - let actions = ''; - if (g.status === 'accepted') { - actions = ``; - } - if (g.status === 'pending') { - const waitInfo = g.wait_elapsed ? 'Wait period elapsed' : 'Access requested'; - actions = `${waitInfo} + ul.innerHTML = grants + .map((g) => { + let actions = ""; + if (g.status === "accepted") { + actions = ``; + } + if (g.status === "pending") { + const waitInfo = g.wait_elapsed + ? "Wait period elapsed" + : "Access requested"; + actions = `${waitInfo} `; - } - return ``; - }).join(''); + }) + .join(""); - ul.querySelectorAll('[data-provide]').forEach(btn => { - btn.addEventListener('click', () => handleProvideEmergencyData(parseInt(btn.dataset.provide))); + ul.querySelectorAll("[data-provide]").forEach((btn) => { + btn.addEventListener("click", () => + handleProvideEmergencyData(parseInt(btn.dataset.provide)), + ); }); - ul.querySelectorAll('[data-deny]').forEach(btn => { - btn.addEventListener('click', async () => { - if (!confirm('Deny this access request?')) return; + ul.querySelectorAll("[data-deny]").forEach((btn) => { + btn.addEventListener("click", async () => { + if (!confirm("Deny this access request?")) return; try { - await apiFetch(`/api/emergency/${btn.dataset.deny}/deny`, { method: 'POST' }); - showToast('Access request denied'); + await apiFetch(`/api/emergency/${btn.dataset.deny}/deny`, { + method: "POST", + }); + showToast("Access request denied"); loadEmergencyView(); - } catch (err) { showToast(err.message, 'error'); } + } catch (err) { + showToast(err.message, "error"); + } }); }); - ul.querySelectorAll('[data-remove-ea]').forEach(btn => { - btn.addEventListener('click', async () => { - if (!confirm('Remove this emergency access grant?')) return; + ul.querySelectorAll("[data-remove-ea]").forEach((btn) => { + btn.addEventListener("click", async () => { + if (!confirm("Remove this emergency access grant?")) return; try { - await apiFetch(`/api/emergency/${btn.dataset.removeEa}`, { method: 'DELETE' }); - showToast('Emergency access removed'); + await apiFetch(`/api/emergency/${btn.dataset.removeEa}`, { + method: "DELETE", + }); + showToast("Emergency access removed"); loadEmergencyView(); - } catch (err) { showToast(err.message, 'error'); } + } catch (err) { + showToast(err.message, "error"); + } }); }); } async function handleProvideEmergencyData(eaId) { if (!SharingSession.isReady()) { - showToast('Set up sharing keys first (Settings → Sharing Keys)', 'error'); + showToast("Set up sharing keys first (Settings → Sharing Keys)", "error"); return; } - if (!confirm('This will create an encrypted snapshot of all your vault items for your trusted contact. Continue?')) return; + if ( + !confirm( + "This will create an encrypted snapshot of all your vault items for your trusted contact. Continue?", + ) + ) + return; try { // Get grantee's public key from the emergency record - const listRes = await apiFetch('/api/emergency'); + const listRes = await apiFetch("/api/emergency"); const listData = await listRes.json(); - const ea = listData.grants.find(g => g.id === eaId); - if (!ea) { showToast('Emergency access record not found', 'error'); return; } + const ea = listData.grants.find((g) => g.id === eaId); + if (!ea) { + showToast("Emergency access record not found", "error"); + return; + } // Fetch grantee's public key - const pkRes = await apiFetch(`/api/sharing/public-key?email=${encodeURIComponent(ea.grantee_email)}`); + const pkRes = await apiFetch( + `/api/sharing/public-key?email=${encodeURIComponent(ea.grantee_email)}`, + ); if (!pkRes) return; const pkData = await pkRes.json(); - const granteePubKey = await SharingCrypto.importPublicKey(pkData.public_key); - const sharedKey = await SharingCrypto.deriveSharedKey(SharingSession.getKey(), granteePubKey); + const granteePubKey = await SharingCrypto.importPublicKey( + pkData.public_key, + ); + const sharedKey = await SharingCrypto.deriveSharedKey( + SharingSession.getKey(), + granteePubKey, + ); // Re-encrypt all decrypted vault items const encItems = await Promise.all( - _items.filter(i => i.plain).map(async i => { - const { enc_data, iv } = await SharingCrypto.encryptForShare(sharedKey, i.plain); - return { id: i.id, name: i.name, item_type: i.item_type, enc_data, iv }; - }) + _items + .filter((i) => i.plain) + .map(async (i) => { + const { enc_data, iv } = await SharingCrypto.encryptForShare( + sharedKey, + i.plain, + ); + return { + id: i.id, + name: i.name, + item_type: i.item_type, + enc_data, + iv, + }; + }), ); await apiFetch(`/api/emergency/${eaId}/provide`, { - method: 'POST', + method: "POST", body: JSON.stringify({ enc_vault: JSON.stringify(encItems) }), }); - showToast('Recovery data provided'); + showToast("Recovery data provided"); loadEmergencyView(); } catch (err) { - showToast('Failed to provide recovery data: ' + err.message, 'error'); + showToast("Failed to provide recovery data: " + err.message, "error"); } } function renderEmergencyAccess(access) { - const ul = document.getElementById('em-access-list'); + const ul = document.getElementById("em-access-list"); if (!ul) return; if (!access.length) { - ul.innerHTML = '
  • No one has designated you as an emergency contact.
    • '; + ul.innerHTML = + '
  • No one has designated you as an emergency contact.
    • '; return; } - ul.innerHTML = access.map(a => { - let actions = ''; - if (a.status === 'invited') { - actions = ``; - } else if (a.status === 'ready') { - actions = ``; - } else if (a.status === 'pending') { - let daysLeft = a.wait_days; - if (a.request_initiated_at) { - const elapsed = (Date.now() - new Date(a.request_initiated_at).getTime()) / 86400000; - daysLeft = Math.max(0, Math.ceil(a.wait_days - elapsed)); + ul.innerHTML = access + .map((a) => { + let actions = ""; + if (a.status === "invited") { + actions = ``; + } else if (a.status === "ready") { + actions = ``; + } else if (a.status === "pending") { + let daysLeft = a.wait_days; + if (a.request_initiated_at) { + const elapsed = + (Date.now() - new Date(a.request_initiated_at).getTime()) / + 86400000; + daysLeft = Math.max(0, Math.ceil(a.wait_days - elapsed)); + } + actions = a.wait_elapsed + ? `` + : `Waiting (~${daysLeft} day${daysLeft !== 1 ? "s" : ""} left)`; } - actions = a.wait_elapsed - ? `` - : `Waiting (~${daysLeft} day${daysLeft !== 1 ? 's' : ''} left)`; - } - return ``; - }).join(''); + }) + .join(""); - ul.querySelectorAll('[data-accept-ea]').forEach(btn => { - btn.addEventListener('click', async () => { + ul.querySelectorAll("[data-accept-ea]").forEach((btn) => { + btn.addEventListener("click", async () => { try { - await apiFetch(`/api/emergency/${btn.dataset.acceptEa}/accept`, { method: 'POST' }); - showToast('Emergency access accepted'); + await apiFetch(`/api/emergency/${btn.dataset.acceptEa}/accept`, { + method: "POST", + }); + showToast("Emergency access accepted"); loadEmergencyView(); - } catch (err) { showToast(err.message, 'error'); } + } catch (err) { + showToast(err.message, "error"); + } }); }); - ul.querySelectorAll('[data-request-ea]').forEach(btn => { - btn.addEventListener('click', async () => { - if (!confirm('Request emergency access? This will start the waiting period. The vault owner will be notified.')) return; + ul.querySelectorAll("[data-request-ea]").forEach((btn) => { + btn.addEventListener("click", async () => { + if ( + !confirm( + "Request emergency access? This will start the waiting period. The vault owner will be notified.", + ) + ) + return; try { - await apiFetch(`/api/emergency/${btn.dataset.requestEa}/request`, { method: 'POST' }); - showToast('Access request sent — wait period has started'); + await apiFetch(`/api/emergency/${btn.dataset.requestEa}/request`, { + method: "POST", + }); + showToast("Access request sent — wait period has started"); loadEmergencyView(); - } catch (err) { showToast(err.message, 'error'); } + } catch (err) { + showToast(err.message, "error"); + } }); }); - ul.querySelectorAll('[data-get-vault]').forEach(btn => { - btn.addEventListener('click', () => handleGetEmergencyVault(parseInt(btn.dataset.getVault))); + ul.querySelectorAll("[data-get-vault]").forEach((btn) => { + btn.addEventListener("click", () => + handleGetEmergencyVault(parseInt(btn.dataset.getVault)), + ); }); } async function handleGetEmergencyVault(eaId) { if (!SharingSession.isReady()) { - showToast('Set up sharing keys first (Settings → Sharing Keys)', 'error'); + showToast("Set up sharing keys first (Settings → Sharing Keys)", "error"); return; } try { @@ -799,43 +1144,57 @@ const Vault = (() => { if (!res) return; const data = await res.json(); - const grantorPubKey = await SharingCrypto.importPublicKey(data.grantor_public_key); - const sharedKey = await SharingCrypto.deriveSharedKey(SharingSession.getKey(), grantorPubKey); + const grantorPubKey = await SharingCrypto.importPublicKey( + data.grantor_public_key, + ); + const sharedKey = await SharingCrypto.deriveSharedKey( + SharingSession.getKey(), + grantorPubKey, + ); const encItems = JSON.parse(data.enc_vault); - const decItems = await Promise.all(encItems.map(async i => { - try { - const plain = await SharingCrypto.decryptShare(sharedKey, i.enc_data, i.iv); - return { ...i, plain }; - } catch { - return { ...i, plain: null }; - } - })); + const decItems = await Promise.all( + encItems.map(async (i) => { + try { + const plain = await SharingCrypto.decryptShare( + sharedKey, + i.enc_data, + i.iv, + ); + return { ...i, plain }; + } catch { + return { ...i, plain: null }; + } + }), + ); renderEmergencyVaultPanel(decItems); } catch (err) { - showToast('Could not retrieve vault: ' + err.message, 'error'); + showToast("Could not retrieve vault: " + err.message, "error"); } } function renderEmergencyVaultPanel(items) { - const list = document.getElementById('em-access-list'); - const panel = document.getElementById('em-vault-panel'); - const vaultList = document.getElementById('em-vault-list'); + const list = document.getElementById("em-access-list"); + const panel = document.getElementById("em-vault-panel"); + const vaultList = document.getElementById("em-vault-list"); if (!panel || !vaultList) return; - list.classList.add('hidden'); - panel.classList.remove('hidden'); + list.classList.add("hidden"); + panel.classList.remove("hidden"); if (!items.length) { - vaultList.innerHTML = '
  • No items in emergency vault.
    • '; + vaultList.innerHTML = + '
  • No items in emergency vault.
    • '; return; } - vaultList.innerHTML = items.map((item, idx) => { - const icon = itemIcon(item.item_type); - const hasFields = item.plain && Object.values(item.plain).some(v => v); - return `
  • + vaultList.innerHTML = items + .map((item, idx) => { + const icon = itemIcon(item.item_type); + const hasFields = + item.plain && Object.values(item.plain).some((v) => v); + return `
    • `; - }).join(''); + }) + .join(""); // Populate detail fields and wire expand/collapse items.forEach((item, idx) => { const header = vaultList.querySelector(`[data-em-idx="${idx}"]`); const body = document.getElementById(`em-vault-body-${idx}`); - const detailBody = body?.querySelector('.em-detail-body'); + const detailBody = body?.querySelector(".em-detail-body"); if (detailBody && item.plain) renderDetailFields(detailBody, item.plain); - header?.addEventListener('click', () => { - const expanded = header.getAttribute('aria-expanded') === 'true'; - header.setAttribute('aria-expanded', String(!expanded)); - header.querySelector('.em-vault-chevron').textContent = expanded ? '▸' : '▾'; - body?.classList.toggle('hidden', expanded); + header?.addEventListener("click", () => { + const expanded = header.getAttribute("aria-expanded") === "true"; + header.setAttribute("aria-expanded", String(!expanded)); + header.querySelector(".em-vault-chevron").textContent = expanded + ? "▸" + : "▾"; + body?.classList.toggle("hidden", expanded); }); }); - document.getElementById('btn-em-vault-back')?.addEventListener('click', () => { - panel.classList.add('hidden'); - list.classList.remove('hidden'); - }); + document + .getElementById("btn-em-vault-back") + ?.addEventListener("click", () => { + panel.classList.add("hidden"); + list.classList.remove("hidden"); + }); } // ── Password Generator ──────────────────────────────────────────────── const GEN_CHARSETS = { - upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', - lower: 'abcdefghijklmnopqrstuvwxyz', - digits: '0123456789', - symbols: '!@#$%^&*()-_=+[]{}|;:,.<>?', + upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", + lower: "abcdefghijklmnopqrstuvwxyz", + digits: "0123456789", + symbols: "!@#$%^&*()-_=+[]{}|;:,.<>?", }; - function generatePassword(length = 20, opts = { upper: true, lower: true, digits: true, symbols: true }) { - let pool = ''; + function generatePassword( + length = 20, + opts = { upper: true, lower: true, digits: true, symbols: true }, + ) { + let pool = ""; const required = []; - if (opts.upper) { pool += GEN_CHARSETS.upper; required.push(GEN_CHARSETS.upper); } - if (opts.lower) { pool += GEN_CHARSETS.lower; required.push(GEN_CHARSETS.lower); } - if (opts.digits) { pool += GEN_CHARSETS.digits; required.push(GEN_CHARSETS.digits); } - if (opts.symbols) { pool += GEN_CHARSETS.symbols; required.push(GEN_CHARSETS.symbols); } + if (opts.upper) { + pool += GEN_CHARSETS.upper; + required.push(GEN_CHARSETS.upper); + } + if (opts.lower) { + pool += GEN_CHARSETS.lower; + required.push(GEN_CHARSETS.lower); + } + if (opts.digits) { + pool += GEN_CHARSETS.digits; + required.push(GEN_CHARSETS.digits); + } + if (opts.symbols) { + pool += GEN_CHARSETS.symbols; + required.push(GEN_CHARSETS.symbols); + } if (!pool) pool = GEN_CHARSETS.lower; const arr = new Uint32Array(length + required.length); @@ -904,11 +1284,11 @@ const Vault = (() => { const j = shuffle[i] % (i + 1); [chars[i], chars[j]] = [chars[j], chars[i]]; } - return chars.slice(0, length).join(''); + return chars.slice(0, length).join(""); } function scorePassword(pw) { - if (!pw) return { score: 0, label: '', cls: '' }; + if (!pw) return { score: 0, label: "", cls: "" }; let score = 0; if (pw.length >= 8) score++; if (pw.length >= 12) score++; @@ -918,60 +1298,69 @@ const Vault = (() => { if (/[0-9]/.test(pw)) score++; if (/[^A-Za-z0-9]/.test(pw)) score++; // clamp to 5 bands - const band = Math.min(5, Math.ceil(score / 7 * 5)); - const labels = ['', 'Very Weak', 'Weak', 'Fair', 'Strong', 'Very Strong']; - const clses = ['', 'strength-1', 'strength-2', 'strength-3', 'strength-4', 'strength-5']; + const band = Math.min(5, Math.ceil((score / 7) * 5)); + const labels = ["", "Very Weak", "Weak", "Fair", "Strong", "Very Strong"]; + const clses = [ + "", + "strength-1", + "strength-2", + "strength-3", + "strength-4", + "strength-5", + ]; return { score: band, label: labels[band], cls: clses[band] }; } // Attach strength meter + generate button to the password field in the item modal function initPasswordFieldEnhancements() { - const pwInput = document.getElementById('field-password'); + const pwInput = document.getElementById("field-password"); if (!pwInput) return; // Strength bar below the password field - if (!document.getElementById('field-password-strength')) { - const bar = document.createElement('div'); - bar.id = 'field-password-strength'; - bar.className = 'password-strength'; - pwInput.closest('.input-with-toggle').insertAdjacentElement('afterend', bar); + if (!document.getElementById("field-password-strength")) { + const bar = document.createElement("div"); + bar.id = "field-password-strength"; + bar.className = "password-strength"; + pwInput + .closest(".input-with-toggle") + .insertAdjacentElement("afterend", bar); } - pwInput.addEventListener('input', () => { + pwInput.addEventListener("input", () => { const { label, cls } = scorePassword(pwInput.value); - const bar = document.getElementById('field-password-strength'); - bar.textContent = pwInput.value ? label : ''; - bar.className = 'password-strength ' + (pwInput.value ? cls : ''); + const bar = document.getElementById("field-password-strength"); + bar.textContent = pwInput.value ? label : ""; + bar.className = "password-strength " + (pwInput.value ? cls : ""); }); // Generate button — add only once - if (!document.getElementById('btn-generate-pass')) { - const btn = document.createElement('button'); - btn.type = 'button'; - btn.id = 'btn-generate-pass'; - btn.className = 'btn-secondary btn-sm'; - btn.textContent = '⚡ Generate'; - btn.style.marginTop = '6px'; - pwInput.closest('.form-group').appendChild(btn); + if (!document.getElementById("btn-generate-pass")) { + const btn = document.createElement("button"); + btn.type = "button"; + btn.id = "btn-generate-pass"; + btn.className = "btn-secondary btn-sm"; + btn.textContent = "⚡ Generate"; + btn.style.marginTop = "6px"; + pwInput.closest(".form-group").appendChild(btn); } - document.getElementById('btn-generate-pass').onclick = () => { + document.getElementById("btn-generate-pass").onclick = () => { const pw = generatePassword(20); pwInput.value = pw; - pwInput.type = 'text'; // reveal so user can see what was generated - pwInput.dispatchEvent(new Event('input')); // trigger strength bar + pwInput.type = "text"; // reveal so user can see what was generated + pwInput.dispatchEvent(new Event("input")); // trigger strength bar }; } function openPasswordGeneratorModal() { // Build modal content dynamically — keeps the HTML lean - let modal = document.getElementById('gen-modal'); + let modal = document.getElementById("gen-modal"); if (!modal) { - modal = document.createElement('div'); - modal.id = 'gen-modal'; - modal.className = 'modal-overlay'; - modal.setAttribute('role', 'dialog'); - modal.setAttribute('aria-modal', 'true'); + modal = document.createElement("div"); + modal.id = "gen-modal"; + modal.className = "modal-overlay"; + modal.setAttribute("role", "dialog"); + modal.setAttribute("aria-modal", "true"); modal.innerHTML = `
    @@ -1003,57 +1392,68 @@ const Vault = (() => {
    `; document.body.appendChild(modal); - const lengthSlider = document.getElementById('gen-length'); - const lengthDisplay = document.getElementById('gen-length-display'); - const output = document.getElementById('gen-output'); - const strengthEl = document.getElementById('gen-strength'); + const lengthSlider = document.getElementById("gen-length"); + const lengthDisplay = document.getElementById("gen-length-display"); + const output = document.getElementById("gen-output"); + const strengthEl = document.getElementById("gen-strength"); function refreshGen() { const pw = generatePassword(parseInt(lengthSlider.value), { - upper: document.getElementById('gen-upper').checked, - lower: document.getElementById('gen-lower').checked, - digits: document.getElementById('gen-digits').checked, - symbols: document.getElementById('gen-symbols').checked, + upper: document.getElementById("gen-upper").checked, + lower: document.getElementById("gen-lower").checked, + digits: document.getElementById("gen-digits").checked, + symbols: document.getElementById("gen-symbols").checked, }); output.value = pw; const { label, cls } = scorePassword(pw); strengthEl.textContent = label; - strengthEl.className = 'password-strength ' + cls; + strengthEl.className = "password-strength " + cls; } - lengthSlider.addEventListener('input', () => { + lengthSlider.addEventListener("input", () => { lengthDisplay.textContent = lengthSlider.value; refreshGen(); }); - ['gen-upper', 'gen-lower', 'gen-digits', 'gen-symbols'].forEach(id => { - document.getElementById(id).addEventListener('change', refreshGen); + ["gen-upper", "gen-lower", "gen-digits", "gen-symbols"].forEach((id) => { + document.getElementById(id).addEventListener("change", refreshGen); }); - document.getElementById('btn-regenerate').addEventListener('click', refreshGen); - document.getElementById('btn-gen-copy').addEventListener('click', () => { - navigator.clipboard.writeText(output.value).then(() => showToast('Password copied')); + document + .getElementById("btn-regenerate") + .addEventListener("click", refreshGen); + document.getElementById("btn-gen-copy").addEventListener("click", () => { + navigator.clipboard + .writeText(output.value) + .then(() => showToast("Password copied")); + }); + const closeGen = () => modal.classList.remove("open"); + document + .getElementById("btn-close-gen-modal") + .addEventListener("click", closeGen); + document + .getElementById("btn-close-gen-modal2") + .addEventListener("click", closeGen); + modal.addEventListener("click", (e) => { + if (e.target === modal) closeGen(); }); - const closeGen = () => modal.classList.remove('open'); - document.getElementById('btn-close-gen-modal').addEventListener('click', closeGen); - document.getElementById('btn-close-gen-modal2').addEventListener('click', closeGen); - modal.addEventListener('click', e => { if (e.target === modal) closeGen(); }); refreshGen(); } - modal.classList.add('open'); + modal.classList.add("open"); // Regenerate fresh password each time modal opens - const lengthSlider = document.getElementById('gen-length'); - document.getElementById('gen-length-display').textContent = lengthSlider.value; + const lengthSlider = document.getElementById("gen-length"); + document.getElementById("gen-length-display").textContent = + lengthSlider.value; const pw = generatePassword(parseInt(lengthSlider.value), { - upper: document.getElementById('gen-upper').checked, - lower: document.getElementById('gen-lower').checked, - digits: document.getElementById('gen-digits').checked, - symbols: document.getElementById('gen-symbols').checked, + upper: document.getElementById("gen-upper").checked, + lower: document.getElementById("gen-lower").checked, + digits: document.getElementById("gen-digits").checked, + symbols: document.getElementById("gen-symbols").checked, }); - document.getElementById('gen-output').value = pw; + document.getElementById("gen-output").value = pw; const { label, cls } = scorePassword(pw); - const strengthEl = document.getElementById('gen-strength'); + const strengthEl = document.getElementById("gen-strength"); strengthEl.textContent = label; - strengthEl.className = 'password-strength ' + cls; + strengthEl.className = "password-strength " + cls; } // ── Account Settings ────────────────────────────────────────────────────── @@ -1061,139 +1461,165 @@ const Vault = (() => { let _pendingMfaSecret = null; async function openSettingsModal() { - document.getElementById('settings-modal').classList.add('open'); + document.getElementById("settings-modal").classList.add("open"); // Reset change password fields - ['cp-current', 'cp-new', 'cp-confirm'].forEach(id => { - const el = document.getElementById(id); if (el) el.value = ''; + ["cp-current", "cp-new", "cp-confirm"].forEach((id) => { + const el = document.getElementById(id); + if (el) el.value = ""; }); - document.getElementById('cp-error')?.classList.add('hidden'); + document.getElementById("cp-error")?.classList.add("hidden"); // Reset delete account area - document.getElementById('delete-confirm-area')?.classList.add('hidden'); - document.getElementById('btn-delete-account')?.classList.remove('hidden'); - document.getElementById('delete-password').value = ''; - document.getElementById('delete-error')?.classList.add('hidden'); + document.getElementById("delete-confirm-area")?.classList.add("hidden"); + document.getElementById("btn-delete-account")?.classList.remove("hidden"); + document.getElementById("delete-password").value = ""; + document.getElementById("delete-error")?.classList.add("hidden"); // Reset recovery display - document.getElementById('recovery-code-display')?.classList.add('hidden'); - await Promise.all([loadMfaStatus(), loadSharingKeysStatus(), loadRecoveryStatus()]); + document.getElementById("recovery-code-display")?.classList.add("hidden"); + await Promise.all([ + loadMfaStatus(), + loadSharingKeysStatus(), + loadRecoveryStatus(), + ]); } async function loadMfaStatus() { try { - const res = await apiFetch('/api/auth/mfa/status'); + const res = await apiFetch("/api/auth/mfa/status"); if (!res) return; const data = await res.json(); renderMfaStatus(data.totp_enabled); } catch (err) { - console.error('loadMfaStatus:', err); + console.error("loadMfaStatus:", err); } } function renderMfaStatus(enabled) { - const statusText = document.getElementById('mfa-status-text'); - const actions = document.getElementById('mfa-actions'); - document.getElementById('mfa-setup-area').classList.add('hidden'); - document.getElementById('mfa-disable-area').classList.add('hidden'); + const statusText = document.getElementById("mfa-status-text"); + const actions = document.getElementById("mfa-actions"); + document.getElementById("mfa-setup-area").classList.add("hidden"); + document.getElementById("mfa-disable-area").classList.add("hidden"); if (enabled) { - statusText.textContent = '✅ Two-factor authentication is enabled.'; - actions.innerHTML = ''; - document.getElementById('btn-mfa-disable')?.addEventListener('click', () => { - document.getElementById('mfa-disable-area').classList.remove('hidden'); - document.getElementById('mfa-actions').innerHTML = ''; - document.getElementById('mfa-disable-code').focus(); - }); + statusText.textContent = "✅ Two-factor authentication is enabled."; + actions.innerHTML = + ''; + document + .getElementById("btn-mfa-disable") + ?.addEventListener("click", () => { + document + .getElementById("mfa-disable-area") + .classList.remove("hidden"); + document.getElementById("mfa-actions").innerHTML = ""; + document.getElementById("mfa-disable-code").focus(); + }); } else { - statusText.textContent = 'Two-factor authentication is not enabled.'; - actions.innerHTML = ''; - document.getElementById('btn-mfa-setup')?.addEventListener('click', handleMfaSetup); + statusText.textContent = "Two-factor authentication is not enabled."; + actions.innerHTML = + ''; + document + .getElementById("btn-mfa-setup") + ?.addEventListener("click", handleMfaSetup); } } async function handleMfaSetup() { try { - const res = await apiFetch('/api/auth/mfa/setup'); + const res = await apiFetch("/api/auth/mfa/setup"); if (!res) return; const data = await res.json(); _pendingMfaSecret = data.secret; - document.getElementById('mfa-qr-img').src = data.qr_code; - document.getElementById('mfa-secret-display').textContent = data.secret; - document.getElementById('mfa-setup-area').classList.remove('hidden'); - document.getElementById('mfa-actions').innerHTML = ''; - document.getElementById('mfa-status-text').textContent = 'Scan the QR code below with your authenticator app.'; - document.getElementById('mfa-verify-code').value = ''; - document.getElementById('mfa-verify-code').focus(); + document.getElementById("mfa-qr-img").src = data.qr_code; + document.getElementById("mfa-secret-display").textContent = data.secret; + document.getElementById("mfa-setup-area").classList.remove("hidden"); + document.getElementById("mfa-actions").innerHTML = ""; + document.getElementById("mfa-status-text").textContent = + "Scan the QR code below with your authenticator app."; + document.getElementById("mfa-verify-code").value = ""; + document.getElementById("mfa-verify-code").focus(); } catch (err) { - showToast('Could not start MFA setup: ' + err.message, 'error'); + showToast("Could not start MFA setup: " + err.message, "error"); } } async function handleMfaConfirm() { - const code = document.getElementById('mfa-verify-code').value.trim(); + const code = document.getElementById("mfa-verify-code").value.trim(); if (!code || !_pendingMfaSecret) return; try { - const res = await apiFetch('/api/auth/mfa/enable', { - method: 'POST', + const res = await apiFetch("/api/auth/mfa/enable", { + method: "POST", body: JSON.stringify({ secret: _pendingMfaSecret, totp_code: code }), }); if (!res) return; _pendingMfaSecret = null; - showToast('MFA enabled successfully'); + showToast("MFA enabled successfully"); renderMfaStatus(true); } catch (err) { - showToast('Failed to enable MFA: ' + err.message, 'error'); + showToast("Failed to enable MFA: " + err.message, "error"); } } async function handleMfaDisableConfirm() { - const code = document.getElementById('mfa-disable-code').value.trim(); + const code = document.getElementById("mfa-disable-code").value.trim(); if (!code) return; try { - const res = await apiFetch('/api/auth/mfa/disable', { - method: 'POST', + const res = await apiFetch("/api/auth/mfa/disable", { + method: "POST", body: JSON.stringify({ totp_code: code }), }); if (!res) return; - showToast('MFA disabled'); + showToast("MFA disabled"); renderMfaStatus(false); } catch (err) { - showToast('Failed to disable MFA: ' + err.message, 'error'); + showToast("Failed to disable MFA: " + err.message, "error"); } } async function loadSharingKeysStatus() { try { - const res = await apiFetch('/api/sharing/keys'); + const res = await apiFetch("/api/sharing/keys"); if (!res) return; const data = await res.json(); - const statusEl = document.getElementById('sharing-keys-status'); - const actionsEl = document.getElementById('sharing-keys-actions'); + const statusEl = document.getElementById("sharing-keys-status"); + const actionsEl = document.getElementById("sharing-keys-actions"); if (data.keys_setup) { - statusEl.textContent = '✅ Sharing keys are set up. You can share items and use emergency access.'; - actionsEl.innerHTML = ''; - document.getElementById('btn-regen-keys')?.addEventListener('click', handleGenerateKeys); + statusEl.textContent = + "✅ Sharing keys are set up. You can share items and use emergency access."; + actionsEl.innerHTML = + ''; + document + .getElementById("btn-regen-keys") + ?.addEventListener("click", handleGenerateKeys); } else { - statusEl.textContent = 'No sharing keys set up. Generate keys to enable item sharing and emergency access.'; - actionsEl.innerHTML = ''; - document.getElementById('btn-gen-keys')?.addEventListener('click', handleGenerateKeys); + statusEl.textContent = + "No sharing keys set up. Generate keys to enable item sharing and emergency access."; + actionsEl.innerHTML = + ''; + document + .getElementById("btn-gen-keys") + ?.addEventListener("click", handleGenerateKeys); } } catch (err) { - console.error('loadSharingKeysStatus:', err); + console.error("loadSharingKeysStatus:", err); } } async function handleGenerateKeys() { const vaultKey = VaultSession.getKey(); - if (!vaultKey) { showToast('Vault is locked. Unlock first.', 'error'); return; } + if (!vaultKey) { + showToast("Vault is locked. Unlock first.", "error"); + return; + } try { const keyPair = await SharingCrypto.generateKeyPair(); const public_key = await SharingCrypto.exportPublicKey(keyPair.publicKey); - const { private_key_enc, private_key_iv } = await SharingCrypto.encryptPrivateKey(vaultKey, keyPair.privateKey); + const { private_key_enc, private_key_iv } = + await SharingCrypto.encryptPrivateKey(vaultKey, keyPair.privateKey); - const res = await apiFetch('/api/sharing/keys', { - method: 'POST', + const res = await apiFetch("/api/sharing/keys", { + method: "POST", body: JSON.stringify({ public_key, private_key_enc, private_key_iv }), }); if (!res) return; @@ -1201,58 +1627,62 @@ const Vault = (() => { // Cache private key in session SharingSession.setKey(keyPair.privateKey); - showToast('Sharing keys generated'); + showToast("Sharing keys generated"); await loadSharingKeysStatus(); } catch (err) { - showToast('Key generation failed: ' + err.message, 'error'); + showToast("Key generation failed: " + err.message, "error"); } } // ── Change Password ─────────────────────────────────────────────────────── async function handleChangePassword() { - const cpError = document.getElementById('cp-error'); - cpError.classList.add('hidden'); + const cpError = document.getElementById("cp-error"); + cpError.classList.add("hidden"); - const currentPass = document.getElementById('cp-current').value; - const newPass = document.getElementById('cp-new').value; - const confirmPass = document.getElementById('cp-confirm').value; + const currentPass = document.getElementById("cp-current").value; + const newPass = document.getElementById("cp-new").value; + const confirmPass = document.getElementById("cp-confirm").value; if (!currentPass || !newPass || !confirmPass) { - cpError.textContent = 'All fields are required.'; - cpError.classList.remove('hidden'); + cpError.textContent = "All fields are required."; + cpError.classList.remove("hidden"); return; } if (newPass !== confirmPass) { - cpError.textContent = 'New passwords do not match.'; - cpError.classList.remove('hidden'); + cpError.textContent = "New passwords do not match."; + cpError.classList.remove("hidden"); return; } if (newPass.length < 12) { - cpError.textContent = 'New password must be at least 12 characters.'; - cpError.classList.remove('hidden'); + cpError.textContent = "New password must be at least 12 characters."; + cpError.classList.remove("hidden"); return; } if (currentPass === newPass) { - cpError.textContent = 'New password must be different from the current password.'; - cpError.classList.remove('hidden'); + cpError.textContent = + "New password must be different from the current password."; + cpError.classList.remove("hidden"); return; } - const btn = document.getElementById('btn-change-password'); + const btn = document.getElementById("btn-change-password"); const originalText = btn.textContent; btn.disabled = true; - btn.textContent = 'Re-encrypting vault…'; + btn.textContent = "Re-encrypting vault…"; try { const vaultKey = VaultSession.getKey(); - if (!vaultKey) { showToast('Vault is locked. Reload and unlock first.', 'error'); return; } + if (!vaultKey) { + showToast("Vault is locked. Reload and unlock first.", "error"); + return; + } // Fetch current user email from session storage - const encKeySalt = sessionStorage.getItem('enc_key_salt'); + const encKeySalt = sessionStorage.getItem("enc_key_salt"); // We need the email to derive auth hashes — fetch it from the profile - const profileRes = await apiFetch('/api/auth/me'); + const profileRes = await apiFetch("/api/auth/me"); if (!profileRes) return; const profile = await profileRes.json(); const email = profile.email; @@ -1264,7 +1694,7 @@ const Vault = (() => { const newVaultKey = await Crypto.deriveVaultKey(newPass, newEncKeySalt); // Fetch all vault items and re-encrypt - const itemsRes = await apiFetch('/api/vault'); + const itemsRes = await apiFetch("/api/vault"); if (!itemsRes) return; const items = await itemsRes.json(); @@ -1272,14 +1702,18 @@ const Vault = (() => { const reEncrypted = []; for (const item of items) { - const plain = await Crypto.decryptItem(vaultKey, item.enc_data, item.iv); + const plain = await Crypto.decryptItem( + vaultKey, + item.enc_data, + item.iv, + ); const { enc_data, iv } = await Crypto.encryptItem(newVaultKey, plain); reEncrypted.push({ id: item.id, enc_data, iv }); } // Submit atomic password change - const res = await apiFetch('/api/auth/change-password', { - method: 'POST', + const res = await apiFetch("/api/auth/change-password", { + method: "POST", body: JSON.stringify({ current_auth_hash: currentAuthHash, new_auth_hash: newAuthHash, @@ -1290,16 +1724,16 @@ const Vault = (() => { if (!res) return; const data = await res.json(); if (!res.ok) { - cpError.textContent = data.error || 'Password change failed.'; - cpError.classList.remove('hidden'); + cpError.textContent = data.error || "Password change failed."; + cpError.classList.remove("hidden"); return; } - showToast('Password changed. Please log in again.'); + showToast("Password changed. Please log in again."); setTimeout(() => redirectToLogin(), 1500); } catch (err) { - cpError.textContent = 'An error occurred: ' + err.message; - cpError.classList.remove('hidden'); + cpError.textContent = "An error occurred: " + err.message; + cpError.classList.remove("hidden"); console.error(err); } finally { btn.disabled = false; @@ -1311,70 +1745,86 @@ const Vault = (() => { async function loadRecoveryStatus() { try { - const res = await apiFetch('/api/auth/recovery/status'); + const res = await apiFetch("/api/auth/recovery/status"); if (!res) return; const data = await res.json(); - const statusEl = document.getElementById('recovery-status-text'); - const actionsEl = document.getElementById('recovery-actions'); + const statusEl = document.getElementById("recovery-status-text"); + const actionsEl = document.getElementById("recovery-actions"); if (data.recovery_configured) { - statusEl.textContent = '✅ A recovery code is configured for your account.'; - actionsEl.innerHTML = ''; + statusEl.textContent = + "✅ A recovery code is configured for your account."; + actionsEl.innerHTML = + ''; } else { - statusEl.textContent = 'No recovery code set up. If you forget your master password, your vault cannot be recovered.'; - actionsEl.innerHTML = ''; + statusEl.textContent = + "No recovery code set up. If you forget your master password, your vault cannot be recovered."; + actionsEl.innerHTML = + ''; } - document.getElementById('btn-gen-recovery')?.addEventListener('click', handleSetupRecovery); - document.getElementById('btn-regen-recovery')?.addEventListener('click', handleSetupRecovery); + document + .getElementById("btn-gen-recovery") + ?.addEventListener("click", handleSetupRecovery); + document + .getElementById("btn-regen-recovery") + ?.addEventListener("click", handleSetupRecovery); } catch (err) { - console.error('loadRecoveryStatus:', err); + console.error("loadRecoveryStatus:", err); } } async function handleSetupRecovery() { const vaultKey = VaultSession.getKey(); - if (!vaultKey) { showToast('Vault is locked. Unlock first.', 'error'); return; } + if (!vaultKey) { + showToast("Vault is locked. Unlock first.", "error"); + return; + } try { - const encKeySalt = sessionStorage.getItem('enc_key_salt'); - if (!encKeySalt) { showToast('Session error. Please reload.', 'error'); return; } + const encKeySalt = sessionStorage.getItem("enc_key_salt"); + if (!encKeySalt) { + showToast("Session error. Please reload.", "error"); + return; + } // Generate a random 128-bit (16-byte) recovery code displayed as hex const rawBytes = window.crypto.getRandomValues(new Uint8Array(16)); - const recoveryCode = Array.from(rawBytes).map(b => b.toString(16).padStart(2, '0')).join(''); + const recoveryCode = Array.from(rawBytes) + .map((b) => b.toString(16).padStart(2, "0")) + .join(""); // Derive recovery key from the code const recoveryKeyMaterial = await window.crypto.subtle.importKey( - 'raw', + "raw", new TextEncoder().encode(recoveryCode), - 'PBKDF2', + "PBKDF2", false, - ['deriveKey'] + ["deriveKey"], ); const recoveryKey = await window.crypto.subtle.deriveKey( { - name: 'PBKDF2', - salt: new TextEncoder().encode('passkeeper-recovery'), + name: "PBKDF2", + salt: new TextEncoder().encode("passkeeper-recovery"), iterations: 200_000, - hash: 'SHA-256', + hash: "SHA-256", }, recoveryKeyMaterial, - { name: 'AES-GCM', length: 256 }, + { name: "AES-GCM", length: 256 }, false, - ['encrypt'] + ["encrypt"], ); // Encrypt enc_key_salt with recovery key const iv = window.crypto.getRandomValues(new Uint8Array(12)); const ciphertext = await window.crypto.subtle.encrypt( - { name: 'AES-GCM', iv }, + { name: "AES-GCM", iv }, recoveryKey, - new TextEncoder().encode(encKeySalt) + new TextEncoder().encode(encKeySalt), ); function bytesToBase64(bytes) { - let bin = ''; - new Uint8Array(bytes).forEach(b => (bin += String.fromCharCode(b))); + let bin = ""; + new Uint8Array(bytes).forEach((b) => (bin += String.fromCharCode(b))); return btoa(bin); } @@ -1382,21 +1832,23 @@ const Vault = (() => { const recovery_iv = bytesToBase64(iv); // Store on server - const res = await apiFetch('/api/auth/recovery/setup', { - method: 'POST', + const res = await apiFetch("/api/auth/recovery/setup", { + method: "POST", body: JSON.stringify({ recovery_enc_salt, recovery_iv }), }); if (!res) return; // Display the code to the user — formatted in groups of 4 - const formatted = recoveryCode.match(/.{1,4}/g).join('-'); - document.getElementById('recovery-code-value').textContent = formatted; - document.getElementById('recovery-code-display').classList.remove('hidden'); - document.getElementById('recovery-actions').innerHTML = ''; - document.getElementById('recovery-status-text').textContent = 'Your new recovery code is shown below.'; - + const formatted = recoveryCode.match(/.{1,4}/g).join("-"); + document.getElementById("recovery-code-value").textContent = formatted; + document + .getElementById("recovery-code-display") + .classList.remove("hidden"); + document.getElementById("recovery-actions").innerHTML = ""; + document.getElementById("recovery-status-text").textContent = + "Your new recovery code is shown below."; } catch (err) { - showToast('Recovery code generation failed: ' + err.message, 'error'); + showToast("Recovery code generation failed: " + err.message, "error"); console.error(err); } } @@ -1404,45 +1856,45 @@ const Vault = (() => { // ── Delete Account ──────────────────────────────────────────────────────── async function handleDeleteAccount() { - const deleteError = document.getElementById('delete-error'); - deleteError.classList.add('hidden'); - const password = document.getElementById('delete-password').value; + const deleteError = document.getElementById("delete-error"); + deleteError.classList.add("hidden"); + const password = document.getElementById("delete-password").value; if (!password) { - deleteError.textContent = 'Please enter your master password.'; - deleteError.classList.remove('hidden'); + deleteError.textContent = "Please enter your master password."; + deleteError.classList.remove("hidden"); return; } - const btn = document.getElementById('btn-delete-confirm'); + const btn = document.getElementById("btn-delete-confirm"); const originalText = btn.textContent; btn.disabled = true; - btn.textContent = 'Deleting…'; + btn.textContent = "Deleting…"; try { - const profileRes = await apiFetch('/api/auth/me'); + const profileRes = await apiFetch("/api/auth/me"); if (!profileRes) return; const profile = await profileRes.json(); const authHash = await Crypto.deriveAuthHash(password, profile.email); - const res = await apiFetch('/api/auth/account', { - method: 'DELETE', + const res = await apiFetch("/api/auth/account", { + method: "DELETE", body: JSON.stringify({ auth_hash: authHash }), }); if (!res) return; const data = await res.json(); if (!res.ok) { - deleteError.textContent = data.error || 'Deletion failed.'; - deleteError.classList.remove('hidden'); + deleteError.textContent = data.error || "Deletion failed."; + deleteError.classList.remove("hidden"); return; } // Clear all local state and redirect sessionStorage.clear(); localStorage.clear(); - window.location.href = '/login'; + window.location.href = "/login"; } catch (err) { - deleteError.textContent = 'An error occurred: ' + err.message; - deleteError.classList.remove('hidden'); + deleteError.textContent = "An error occurred: " + err.message; + deleteError.classList.remove("hidden"); console.error(err); } finally { btn.disabled = false; @@ -1453,155 +1905,291 @@ const Vault = (() => { // ── Folder CRUD ─────────────────────────────────────────────────────────── function showNewFolderRow() { - document.getElementById('new-folder-row').classList.remove('hidden'); - document.getElementById('new-folder-input').focus(); + document.getElementById("new-folder-row").classList.remove("hidden"); + document.getElementById("new-folder-input").focus(); } function hideNewFolderRow() { - document.getElementById('new-folder-row').classList.add('hidden'); - document.getElementById('new-folder-input').value = ''; + document.getElementById("new-folder-row").classList.add("hidden"); + document.getElementById("new-folder-input").value = ""; } async function handleNewFolder(e) { e.preventDefault(); - const name = document.getElementById('new-folder-input').value.trim(); + const name = document.getElementById("new-folder-input").value.trim(); if (!name) return; try { - const res = await apiFetch('/api/folders', { method: 'POST', body: JSON.stringify({ name }) }); + const res = await apiFetch("/api/folders", { + method: "POST", + body: JSON.stringify({ name }), + }); if (!res) return; hideNewFolderRow(); await loadFolders(); - showToast('Folder created'); + showToast("Folder created"); } catch (err) { - showToast('Could not create folder: ' + err.message, 'error'); + showToast("Could not create folder: " + err.message, "error"); } } async function confirmDeleteFolder(folder) { - if (!confirm(`Delete folder "${folder.name}"?\nItems will be moved to No Folder.`)) return; + if ( + !confirm( + `Delete folder "${folder.name}"?\nItems will be moved to No Folder.`, + ) + ) + return; try { - const res = await apiFetch(`/api/folders/${folder.id}`, { method: 'DELETE' }); + const res = await apiFetch(`/api/folders/${folder.id}`, { + method: "DELETE", + }); if (!res) return; - _items = _items.map(i => i.folder_id === folder.id ? { ...i, folder_id: null } : i); - if (_activeFilter?.type === 'folder' && _activeFilter.value === folder.id) { + _items = _items.map((i) => + i.folder_id === folder.id ? { ...i, folder_id: null } : i, + ); + if ( + _activeFilter?.type === "folder" && + _activeFilter.value === folder.id + ) { _activeFilter = null; - updateVaultTitle('All Items'); + updateVaultTitle("All Items"); } await loadFolders(); applyCurrentFilter(); - showToast('Folder deleted'); + showToast("Folder deleted"); } catch (err) { - showToast('Could not delete folder: ' + err.message, 'error'); + showToast("Could not delete folder: " + err.message, "error"); } } // ── Filtering / Search ──────────────────────────────────────────────────── function applyCurrentFilter() { - if (!_activeFilter) { renderItemList(_items); return; } - if (_activeFilter.type === 'itemType') renderItemList(_items.filter(i => i.item_type === _activeFilter.value)); - else if (_activeFilter.type === 'folder') renderItemList(_items.filter(i => i.folder_id === _activeFilter.value)); + if (!_activeFilter) { + renderItemList(_items); + return; + } + if (_activeFilter.type === "itemType") + renderItemList(_items.filter((i) => i.item_type === _activeFilter.value)); + else if (_activeFilter.type === "folder") + renderItemList(_items.filter((i) => i.folder_id === _activeFilter.value)); } function filterByFolder(folderId, name) { - _activeFilter = { type: 'folder', value: folderId }; - switchView('vault'); - document.querySelectorAll('.sidebar-item').forEach(el => el.classList.remove('active')); - document.querySelector(`[data-folder-id="${folderId}"]`)?.classList.add('active'); + _activeFilter = { type: "folder", value: folderId }; + switchView("vault"); + document + .querySelectorAll(".sidebar-item") + .forEach((el) => el.classList.remove("active")); + document + .querySelector(`[data-folder-id="${folderId}"]`) + ?.classList.add("active"); updateVaultTitle(name); - renderItemList(_items.filter(i => i.folder_id === folderId)); + renderItemList(_items.filter((i) => i.folder_id === folderId)); } function handleSearch(e) { const q = e.target.value.trim().toLowerCase(); - if (!q) { applyCurrentFilter(); return; } - const pool = _activeFilter ? (_activeFilter.type === 'itemType' ? _items.filter(i => i.item_type === _activeFilter.value) : _items.filter(i => i.folder_id === _activeFilter.value)) : _items; - renderItemList(pool.filter(item => - item.name.toLowerCase().includes(q) || - (item.plain?.username || '').toLowerCase().includes(q) || - (item.plain?.url || '').toLowerCase().includes(q) || - (item.plain?.note_body || '').toLowerCase().includes(q) - )); + if (!q) { + applyCurrentFilter(); + return; + } + const pool = _activeFilter + ? _activeFilter.type === "itemType" + ? _items.filter((i) => i.item_type === _activeFilter.value) + : _items.filter((i) => i.folder_id === _activeFilter.value) + : _items; + renderItemList( + pool.filter( + (item) => + item.name.toLowerCase().includes(q) || + (item.plain?.username || "").toLowerCase().includes(q) || + (item.plain?.url || "").toLowerCase().includes(q) || + (item.plain?.note_body || "").toLowerCase().includes(q), + ), + ); } function updateVaultTitle(text) { - const el = document.getElementById('vault-title'); + const el = document.getElementById("vault-title"); if (el) el.textContent = text; } // ── Item Modal ──────────────────────────────────────────────────────────── - const TYPE_LABELS = { password: '🔑 Password', note: '📝 Secure Note', card: '💳 Payment Card', bank: '🏦 Bank Account', address: '🏠 Address', ssn: '🪪 Identity (SSN)' }; + const TYPE_LABELS = { + password: "🔑 Password", + note: "📝 Secure Note", + card: "💳 Payment Card", + bank: "🏦 Bank Account", + address: "🏠 Address", + ssn: "🪪 Identity (SSN)", + }; function switchModalType(type) { - document.querySelectorAll('.type-fields').forEach(el => { - el.classList.toggle('hidden', !el.dataset.forTypes.split(' ').includes(type)); + document.querySelectorAll(".type-fields").forEach((el) => { + el.classList.toggle( + "hidden", + !el.dataset.forTypes.split(" ").includes(type), + ); }); } function openModal(mode, item = null) { - const form = document.getElementById('item-form'); + const form = document.getElementById("item-form"); form.reset(); form.dataset.mode = mode; - form.dataset.itemId = item ? item.id : ''; + form.dataset.itemId = item ? item.id : ""; - const folderSel = document.getElementById('field-folder'); + const folderSel = document.getElementById("field-folder"); folderSel.innerHTML = ''; - _folders.forEach(f => { - const opt = document.createElement('option'); + _folders.forEach((f) => { + const opt = document.createElement("option"); opt.value = f.id; opt.textContent = f.name; folderSel.appendChild(opt); }); - if (mode === 'add') { - document.getElementById('type-selector-group').classList.remove('hidden'); - document.getElementById('modal-title').textContent = 'Add Item'; - switchModalType(document.getElementById('field-type').value || 'password'); + if (mode === "add") { + document.getElementById("type-selector-group").classList.remove("hidden"); + document.getElementById("modal-title").textContent = "Add Item"; + switchModalType( + document.getElementById("field-type").value || "password", + ); } else { - document.getElementById('type-selector-group').classList.add('hidden'); - const t = item.item_type || 'password'; - document.getElementById('modal-title').textContent = `Edit ${TYPE_LABELS[t] || 'Item'}`; + document.getElementById("type-selector-group").classList.add("hidden"); + const t = item.item_type || "password"; + document.getElementById("modal-title").textContent = + `Edit ${TYPE_LABELS[t] || "Item"}`; switchModalType(t); form.dataset.itemType = t; - setVal('field-name', item.name); - setVal('field-folder', item.folder_id || ''); + setVal("field-name", item.name); + setVal("field-folder", item.folder_id || ""); if (item.plain) { const p = item.plain; switch (t) { - case 'password': setVal('field-url', p.url); setVal('field-username', p.username); setVal('field-password', p.password); setVal('field-notes', p.notes); break; - case 'note': setVal('field-note-body', p.note_body); break; - case 'card': setVal('field-cardholder', p.cardholder_name); setVal('field-card-number', p.card_number); setVal('field-expiry-month', p.expiry_month); setVal('field-expiry-year', p.expiry_year); setVal('field-cvv', p.cvv); setVal('field-notes', p.notes); break; - case 'bank': setVal('field-bank-name', p.bank_name); setVal('field-account-type', p.account_type); setVal('field-routing', p.routing_number); setVal('field-account-number', p.account_number); setVal('field-notes', p.notes); break; - case 'address': ['first_name', 'last_name', 'company', 'address_line', 'city', 'state', 'zip', 'country', 'phone', 'email'].forEach(k => setVal('field-' + k.replace(/_/g, '-'), p[k])); setVal('field-notes', p.notes); break; - case 'ssn': setVal('field-ssn-number', p.ssn_number); setVal('field-notes', p.notes); break; + case "password": + setVal("field-url", p.url); + setVal("field-username", p.username); + setVal("field-password", p.password); + setVal("field-totp-uri", p.totp_uri || ""); + setVal("field-notes", p.notes); + break; + case "note": + setVal("field-note-body", p.note_body); + break; + case "card": + setVal("field-cardholder", p.cardholder_name); + setVal("field-card-number", p.card_number); + setVal("field-expiry-month", p.expiry_month); + setVal("field-expiry-year", p.expiry_year); + setVal("field-cvv", p.cvv); + setVal("field-notes", p.notes); + break; + case "bank": + setVal("field-bank-name", p.bank_name); + setVal("field-account-type", p.account_type); + setVal("field-routing", p.routing_number); + setVal("field-account-number", p.account_number); + setVal("field-notes", p.notes); + break; + case "address": + [ + "first_name", + "last_name", + "company", + "address_line", + "city", + "state", + "zip", + "country", + "phone", + "email", + ].forEach((k) => setVal("field-" + k.replace(/_/g, "-"), p[k])); + setVal("field-notes", p.notes); + break; + case "ssn": + setVal("field-ssn-number", p.ssn_number); + setVal("field-notes", p.notes); + break; } } } - document.getElementById('item-modal').classList.add('open'); - document.getElementById('field-name').focus(); - if ((mode === 'add' && (document.getElementById('field-type').value || 'password') === 'password') || - (mode === 'edit' && (item?.item_type || 'password') === 'password')) { + document.getElementById("item-modal").classList.add("open"); + document.getElementById("field-name").focus(); + if ( + (mode === "add" && + (document.getElementById("field-type").value || "password") === + "password") || + (mode === "edit" && (item?.item_type || "password") === "password") + ) { initPasswordFieldEnhancements(); } } - function setVal(id, val) { const el = document.getElementById(id); if (el) el.value = val || ''; } - function getVal(id) { const el = document.getElementById(id); return el ? el.value : ''; } + function setVal(id, val) { + const el = document.getElementById(id); + if (el) el.value = val || ""; + } + function getVal(id) { + const el = document.getElementById(id); + return el ? el.value : ""; + } - function closeModal(id = 'item-modal') { - document.getElementById(id)?.classList.remove('open'); + function closeModal(id = "item-modal") { + document.getElementById(id)?.classList.remove("open"); } function buildPlainData(t) { switch (t) { - case 'password': return { url: getVal('field-url').trim(), username: getVal('field-username').trim(), password: getVal('field-password'), notes: getVal('field-notes').trim() }; - case 'note': return { note_body: getVal('field-note-body') }; - case 'card': return { cardholder_name: getVal('field-cardholder').trim(), card_number: getVal('field-card-number').trim(), expiry_month: getVal('field-expiry-month'), expiry_year: getVal('field-expiry-year').trim(), cvv: getVal('field-cvv').trim(), notes: getVal('field-notes').trim() }; - case 'bank': return { bank_name: getVal('field-bank-name').trim(), account_type: getVal('field-account-type'), routing_number: getVal('field-routing').trim(), account_number: getVal('field-account-number').trim(), notes: getVal('field-notes').trim() }; - case 'address': return { first_name: getVal('field-first-name').trim(), last_name: getVal('field-last-name').trim(), company: getVal('field-company').trim(), address_line: getVal('field-address-line').trim(), city: getVal('field-city').trim(), state: getVal('field-state').trim(), zip: getVal('field-zip').trim(), country: getVal('field-country').trim(), phone: getVal('field-phone').trim(), email: getVal('field-email').trim(), notes: getVal('field-notes').trim() }; - case 'ssn': return { ssn_number: getVal('field-ssn-number'), notes: getVal('field-notes').trim() }; - default: return {}; + case "password": + return { + url: getVal("field-url").trim(), + username: getVal("field-username").trim(), + password: getVal("field-password"), + totp_uri: getVal("field-totp-uri").trim(), + notes: getVal("field-notes").trim(), + }; + case "note": + return { note_body: getVal("field-note-body") }; + case "card": + return { + cardholder_name: getVal("field-cardholder").trim(), + card_number: getVal("field-card-number").trim(), + expiry_month: getVal("field-expiry-month"), + expiry_year: getVal("field-expiry-year").trim(), + cvv: getVal("field-cvv").trim(), + notes: getVal("field-notes").trim(), + }; + case "bank": + return { + bank_name: getVal("field-bank-name").trim(), + account_type: getVal("field-account-type"), + routing_number: getVal("field-routing").trim(), + account_number: getVal("field-account-number").trim(), + notes: getVal("field-notes").trim(), + }; + case "address": + return { + first_name: getVal("field-first-name").trim(), + last_name: getVal("field-last-name").trim(), + company: getVal("field-company").trim(), + address_line: getVal("field-address-line").trim(), + city: getVal("field-city").trim(), + state: getVal("field-state").trim(), + zip: getVal("field-zip").trim(), + country: getVal("field-country").trim(), + phone: getVal("field-phone").trim(), + email: getVal("field-email").trim(), + notes: getVal("field-notes").trim(), + }; + case "ssn": + return { + ssn_number: getVal("field-ssn-number"), + notes: getVal("field-notes").trim(), + }; + default: + return {}; } } @@ -1609,362 +2197,673 @@ const Vault = (() => { e.preventDefault(); try { const vaultKey = VaultSession.getKey(); - if (!vaultKey) { closeModal(); showUnlockOverlay(); return; } + if (!vaultKey) { + closeModal(); + showUnlockOverlay(); + return; + } const form = e.target; const mode = form.dataset.mode; const itemId = form.dataset.itemId; - const name = getVal('field-name').trim(); - if (!name) { showToast('Name is required', 'error'); return; } + const name = getVal("field-name").trim(); + if (!name) { + showToast("Name is required", "error"); + return; + } - const itemType = mode === 'add' ? getVal('field-type') : (form.dataset.itemType || 'password'); - const { enc_data, iv } = await Crypto.encryptItem(vaultKey, buildPlainData(itemType)); - const folderVal = getVal('field-folder'); - const payload = { name, item_type: itemType, folder_id: folderVal ? parseInt(folderVal) : null, enc_data, iv }; + const itemType = + mode === "add" + ? getVal("field-type") + : form.dataset.itemType || "password"; + const { enc_data, iv } = await Crypto.encryptItem( + vaultKey, + buildPlainData(itemType), + ); + const folderVal = getVal("field-folder"); + const payload = { + name, + item_type: itemType, + folder_id: folderVal ? parseInt(folderVal) : null, + enc_data, + iv, + }; - if (mode === 'add') { - const res = await apiFetch('/api/vault', { method: 'POST', body: JSON.stringify(payload) }); + if (mode === "add") { + const res = await apiFetch("/api/vault", { + method: "POST", + body: JSON.stringify(payload), + }); if (!res) return; - showToast('Item added'); + showToast("Item added"); } else { - const res = await apiFetch(`/api/vault/${itemId}`, { method: 'PUT', body: JSON.stringify(payload) }); + const res = await apiFetch(`/api/vault/${itemId}`, { + method: "PUT", + body: JSON.stringify(payload), + }); if (!res) return; - showToast('Item updated'); + showToast("Item updated"); } closeModal(); await loadVault(); } catch (err) { - showToast('Save failed: ' + err.message, 'error'); + showToast("Save failed: " + err.message, "error"); } } async function confirmDeleteItem(item) { if (!confirm(`Delete "${item.name}"? This cannot be undone.`)) return; try { - const res = await apiFetch(`/api/vault/${item.id}`, { method: 'DELETE' }); + const res = await apiFetch(`/api/vault/${item.id}`, { method: "DELETE" }); if (!res) return; - showToast('Item deleted'); + showToast("Item deleted"); await loadVault(); } catch (err) { - showToast('Delete failed: ' + err.message, 'error'); + showToast("Delete failed: " + err.message, "error"); } } // ── Logout ──────────────────────────────────────────────────────────────── async function handleLogout() { - const refreshToken = localStorage.getItem('refresh_token'); - await fetch('/api/auth/logout', { - method: 'POST', - headers: { 'Authorization': `Bearer ${sessionStorage.getItem('access_token') || ''}`, 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken() }, + const refreshToken = localStorage.getItem("refresh_token"); + await fetch("/api/auth/logout", { + method: "POST", + headers: { + Authorization: `Bearer ${sessionStorage.getItem("access_token") || ""}`, + "Content-Type": "application/json", + "X-CSRFToken": csrfToken(), + }, body: JSON.stringify({ refresh_token: refreshToken }), }).catch(() => { }); VaultSession.clear(); SharingSession.clear(); - sessionStorage.removeItem('access_token'); - localStorage.removeItem('refresh_token'); - window.dispatchEvent(new CustomEvent('passkeeper:logout')); - window.location.href = '/login'; + sessionStorage.removeItem("access_token"); + localStorage.removeItem("refresh_token"); + window.dispatchEvent(new CustomEvent("passkeeper:logout")); + window.location.href = "/login"; } // ── Utilities ───────────────────────────────────────────────────────────── - function copyToClipboard(text, msg = 'Copied') { - navigator.clipboard.writeText(text).then(() => showToast(msg)).catch(() => { }); + // ── TOTP (RFC 6238) ── pure Web Crypto, no external library ────────────── + + /** + * Extract the base32 secret from either a plain base32 string or an + * otpauth://totp/... URI (both are common when users scan a QR code). + */ + function extractTotpSecret(uri) { + if (!uri) return null; + uri = uri.trim(); + if (uri.startsWith("otpauth://")) { + try { + const secret = new URL(uri).searchParams.get("secret"); + return secret ? secret.toUpperCase().replace(/\s+/g, "") : null; + } catch (e) { return null; } + } + // Plain base32 secret (spaces and hyphens stripped for convenience). + return uri.toUpperCase().replace(/[\s-]/g, "") || null; } + /** Decode a base32 string to a Uint8Array. */ + function base32ToBytes(b32) { + const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567"; + b32 = b32.replace(/=+$/, ""); + let bits = 0, val = 0; + const out = []; + for (const c of b32) { + const idx = CHARS.indexOf(c); + if (idx === -1) continue; + val = (val << 5) | idx; + bits += 5; + if (bits >= 8) { bits -= 8; out.push((val >> bits) & 0xff); } + } + return new Uint8Array(out); + } + + /** + * Compute the current TOTP code (6 digits, 30-second window). + * Returns a Promise. + */ + async function getTotpCode(secret) { + const keyBytes = base32ToBytes(secret); + if (!keyBytes.length) return null; + + const counter = Math.floor(Date.now() / 1000 / 30); + const msg = new Uint8Array(8); + // Write counter as big-endian 64-bit integer. + let c = counter; + for (let i = 7; i >= 0; i--) { msg[i] = c & 0xff; c = Math.floor(c / 256); } + + const cryptoKey = await crypto.subtle.importKey( + "raw", keyBytes, { name: "HMAC", hash: "SHA-1" }, false, ["sign"] + ); + const sig = new Uint8Array(await crypto.subtle.sign("HMAC", cryptoKey, msg)); + const offset = sig[19] & 0x0f; + const code = ((sig[offset] & 0x7f) << 24 | sig[offset + 1] << 16 | + sig[offset + 2] << 8 | sig[offset + 3]) % 1_000_000; + return String(code).padStart(6, "0"); + } + + /** Seconds remaining in the current 30-second TOTP window. */ + function totpSecondsLeft() { + return 30 - (Math.floor(Date.now() / 1000) % 30); + } + + + navigator.clipboard + .writeText(text) + .then(() => showToast(msg)) + .catch(() => { }); +} + function escHtml(str) { - return String(str).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); + return String(str) + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """); +} + +function itemIcon(type) { + return ( + { + password: "🔑", + note: "📝", + card: "💳", + bank: "🏦", + address: "🏠", + ssn: "🪪", + }[type] || "🔑" + ); +} + +function showToast(message, type = "success") { + const toast = document.getElementById("toast"); + if (!toast) return; + toast.textContent = message; + toast.className = `toast toast-${type} show`; + clearTimeout(toast._timer); + toast._timer = setTimeout(() => toast.classList.remove("show"), 2500); +} + +function showLoadingState(loading) { + document + .getElementById("vault-spinner") + ?.classList.toggle("hidden", !loading); +} + +// ── Unlock overlay ──────────────────────────────────────────────────────── + +function showUnlockOverlay() { + document.getElementById("unlock-overlay").classList.add("open"); + document.getElementById("unlock-password").focus(); +} + +async function handleUnlock(e) { + e.preventDefault(); + const password = document.getElementById("unlock-password").value; + const enc_key_salt = sessionStorage.getItem("enc_key_salt"); + const btn = e.target.querySelector('[type="submit"]'); + const errEl = document.getElementById("unlock-error"); + if (!enc_key_salt) { + redirectToLogin(); + return; } - function itemIcon(type) { - return { password: '🔑', note: '📝', card: '💳', bank: '🏦', address: '🏠', ssn: '🪪' }[type] || '🔑'; + btn.disabled = true; + btn.textContent = "Unlocking…"; + errEl.classList.add("hidden"); + try { + const vaultKey = await Crypto.deriveVaultKey(password, enc_key_salt); + VaultSession.setKey(vaultKey); + document.getElementById("unlock-overlay").classList.remove("open"); + await loadFolders(); + await loadVault(); + } catch { + errEl.classList.remove("hidden"); + } finally { + btn.disabled = false; + btn.textContent = "Unlock"; + document.getElementById("unlock-password").value = ""; } +} - function showToast(message, type = 'success') { - const toast = document.getElementById('toast'); - if (!toast) return; - toast.textContent = message; - toast.className = `toast toast-${type} show`; - clearTimeout(toast._timer); - toast._timer = setTimeout(() => toast.classList.remove('show'), 2500); - } +// ── Tabs ────────────────────────────────────────────────────────────────── - function showLoadingState(loading) { - document.getElementById('vault-spinner')?.classList.toggle('hidden', !loading); - } - - // ── Unlock overlay ──────────────────────────────────────────────────────── - - function showUnlockOverlay() { - document.getElementById('unlock-overlay').classList.add('open'); - document.getElementById('unlock-password').focus(); - } - - async function handleUnlock(e) { - e.preventDefault(); - const password = document.getElementById('unlock-password').value; - const enc_key_salt = sessionStorage.getItem('enc_key_salt'); - const btn = e.target.querySelector('[type="submit"]'); - const errEl = document.getElementById('unlock-error'); - if (!enc_key_salt) { redirectToLogin(); return; } - - btn.disabled = true; btn.textContent = 'Unlocking…'; errEl.classList.add('hidden'); - try { - const vaultKey = await Crypto.deriveVaultKey(password, enc_key_salt); - VaultSession.setKey(vaultKey); - document.getElementById('unlock-overlay').classList.remove('open'); - await loadFolders(); - await loadVault(); - } catch { - errEl.classList.remove('hidden'); - } finally { - btn.disabled = false; btn.textContent = 'Unlock'; - document.getElementById('unlock-password').value = ''; - } - } - - // ── Tabs ────────────────────────────────────────────────────────────────── - - function initTabs(container) { - const tabs = container.querySelectorAll('.tab-btn'); - tabs.forEach(btn => { - btn.addEventListener('click', () => { - tabs.forEach(t => t.classList.remove('active')); - btn.classList.add('active'); - const target = btn.dataset.tab; - container.querySelectorAll('.tab-pane').forEach(pane => { - pane.classList.toggle('hidden', !pane.id.endsWith(target)); - }); +function initTabs(container) { + const tabs = container.querySelectorAll(".tab-btn"); + tabs.forEach((btn) => { + btn.addEventListener("click", () => { + tabs.forEach((t) => t.classList.remove("active")); + btn.classList.add("active"); + const target = btn.dataset.tab; + container.querySelectorAll(".tab-pane").forEach((pane) => { + pane.classList.toggle("hidden", !pane.id.endsWith(target)); }); }); - } + }); +} - // ── Init ────────────────────────────────────────────────────────────────── +// ── Init ────────────────────────────────────────────────────────────────── - async function init() { - if (!sessionStorage.getItem('access_token')) { - // Give the extension bridge up to 800 ms to inject a session before redirecting - await new Promise(resolve => { - const timer = setTimeout(resolve, 800); - window.addEventListener('passkeeper:ext-login', () => { clearTimeout(timer); resolve(); }, { once: true }); - }); +async function init() { + if (!sessionStorage.getItem("access_token")) { + // Give the extension bridge up to 800 ms to inject a session before redirecting + await new Promise((resolve) => { + const timer = setTimeout(resolve, 800); + window.addEventListener( + "passkeeper:ext-login", + () => { + clearTimeout(timer); + resolve(); + }, + { once: true }, + ); + }); - // Still no token — try a silent refresh using the persisted refresh_token - // before giving up and redirecting. This handles hard-refresh / new-tab scenarios. - if (!sessionStorage.getItem('access_token')) { - const refreshed = await tryRefreshToken(); - if (!refreshed) { window.location.href = '/login'; return; } + // Still no token — try a silent refresh using the persisted refresh_token + // before giving up and redirecting. This handles hard-refresh / new-tab scenarios. + if (!sessionStorage.getItem("access_token")) { + const refreshed = await tryRefreshToken(); + if (!refreshed) { + window.location.href = "/login"; + return; } } + } - // Vault - document.getElementById('unlock-form')?.addEventListener('submit', handleUnlock); - document.getElementById('btn-new-folder')?.addEventListener('click', showNewFolderRow); - document.getElementById('btn-cancel-folder')?.addEventListener('click', hideNewFolderRow); - document.getElementById('new-folder-form')?.addEventListener('submit', handleNewFolder); - document.getElementById('search-input')?.addEventListener('input', handleSearch); - document.getElementById('btn-add-item')?.addEventListener('click', () => openModal('add')); - document.getElementById('btn-close-modal')?.addEventListener('click', () => closeModal()); - document.getElementById('btn-cancel-modal')?.addEventListener('click', () => closeModal()); - document.getElementById('item-form')?.addEventListener('submit', handleFormSubmit); - document.getElementById('btn-logout')?.addEventListener('click', handleLogout); + // Vault + document + .getElementById("unlock-form") + ?.addEventListener("submit", handleUnlock); + document + .getElementById("btn-new-folder") + ?.addEventListener("click", showNewFolderRow); + document + .getElementById("btn-cancel-folder") + ?.addEventListener("click", hideNewFolderRow); + document + .getElementById("new-folder-form") + ?.addEventListener("submit", handleNewFolder); + document + .getElementById("search-input") + ?.addEventListener("input", handleSearch); + document + .getElementById("btn-add-item") + ?.addEventListener("click", () => openModal("add")); + document + .getElementById("btn-close-modal") + ?.addEventListener("click", () => closeModal()); + document + .getElementById("btn-cancel-modal") + ?.addEventListener("click", () => closeModal()); + document + .getElementById("item-form") + ?.addEventListener("submit", handleFormSubmit); + document + .getElementById("btn-logout") + ?.addEventListener("click", handleLogout); - document.getElementById('sort-select')?.addEventListener('change', e => { _sortOrder = e.target.value; applyCurrentFilter(); }); - document.getElementById('field-type')?.addEventListener('change', e => { - switchModalType(e.target.value); - if (e.target.value === 'password') initPasswordFieldEnhancements(); + document.getElementById("sort-select")?.addEventListener("change", (e) => { + _sortOrder = e.target.value; + applyCurrentFilter(); + }); + document.getElementById("field-type")?.addEventListener("change", (e) => { + switchModalType(e.target.value); + if (e.target.value === "password") initPasswordFieldEnhancements(); + }); + document + .getElementById("btn-toggle-pass") + ?.addEventListener("click", () => { + const el = document.getElementById("field-password"); + el.type = el.type === "password" ? "text" : "password"; }); - document.getElementById('btn-toggle-pass')?.addEventListener('click', () => { const el = document.getElementById('field-password'); el.type = el.type === 'password' ? 'text' : 'password'; }); - document.getElementById('btn-toggle-ssn')?.addEventListener('click', () => { const el = document.getElementById('field-ssn-number'); el.type = el.type === 'password' ? 'text' : 'password'; }); + document.getElementById("btn-toggle-ssn")?.addEventListener("click", () => { + const el = document.getElementById("field-ssn-number"); + el.type = el.type === "password" ? "text" : "password"; + }); - // Sidebar navigation - document.getElementById('sidebar-all')?.addEventListener('click', () => { - _activeFilter = null; switchView('vault'); - document.querySelectorAll('.sidebar-item').forEach(el => el.classList.remove('active')); - document.getElementById('sidebar-all').classList.add('active'); - updateVaultTitle('All Items'); renderItemList(_items); + // Sidebar navigation + document.getElementById("sidebar-all")?.addEventListener("click", () => { + _activeFilter = null; + switchView("vault"); + document + .querySelectorAll(".sidebar-item") + .forEach((el) => el.classList.remove("active")); + document.getElementById("sidebar-all").classList.add("active"); + updateVaultTitle("All Items"); + renderItemList(_items); + }); + document + .getElementById("sidebar-security") + ?.addEventListener("click", () => switchView("security")); + document + .getElementById("sidebar-sharing") + ?.addEventListener("click", () => switchView("sharing")); + document + .getElementById("sidebar-emergency") + ?.addEventListener("click", () => switchView("emergency")); + document + .getElementById("sidebar-generator") + ?.addEventListener("click", () => openPasswordGeneratorModal()); + + document.querySelectorAll("[data-type-filter]").forEach((el) => { + el.addEventListener("click", () => { + const type = el.dataset.typeFilter; + const labels = { + password: "Passwords", + note: "Secure Notes", + card: "Payment Cards", + bank: "Bank Accounts", + address: "Addresses", + ssn: "Identities", + }; + _activeFilter = { type: "itemType", value: type }; + switchView("vault"); + document + .querySelectorAll(".sidebar-item") + .forEach((s) => s.classList.remove("active")); + el.classList.add("active"); + updateVaultTitle(labels[type] || type); + renderItemList(_items.filter((i) => i.item_type === type)); }); - document.getElementById('sidebar-security')?.addEventListener('click', () => switchView('security')); - document.getElementById('sidebar-sharing')?.addEventListener('click', () => switchView('sharing')); - document.getElementById('sidebar-emergency')?.addEventListener('click', () => switchView('emergency')); - document.getElementById('sidebar-generator')?.addEventListener('click', () => openPasswordGeneratorModal()); + }); - document.querySelectorAll('[data-type-filter]').forEach(el => { - el.addEventListener('click', () => { - const type = el.dataset.typeFilter; - const labels = { password: 'Passwords', note: 'Secure Notes', card: 'Payment Cards', bank: 'Bank Accounts', address: 'Addresses', ssn: 'Identities' }; - _activeFilter = { type: 'itemType', value: type }; - switchView('vault'); - document.querySelectorAll('.sidebar-item').forEach(s => s.classList.remove('active')); - el.classList.add('active'); - updateVaultTitle(labels[type] || type); - renderItemList(_items.filter(i => i.item_type === type)); - }); + document.getElementById("item-modal")?.addEventListener("click", (e) => { + /* backdrop click intentionally disabled — modal closes only via Cancel or Save */ + }); + document.addEventListener("keydown", (e) => { + if (e.key === "Escape") { + closeModal("share-modal"); + closeModal("emergency-modal"); + closeModal("settings-modal"); + closeModal("detail-modal"); + closeModal("gen-modal"); + } + }); + + // Detail modal (shared item view) + const closeDetailModal = () => closeModal("detail-modal"); + document + .getElementById("btn-close-detail-modal") + ?.addEventListener("click", closeDetailModal); + document + .getElementById("btn-detail-done") + ?.addEventListener("click", closeDetailModal); + document.getElementById("detail-modal")?.addEventListener("click", (e) => { + if (e.target.id === "detail-modal") closeDetailModal(); + }); + + document + .getElementById("field-card-number") + ?.addEventListener("input", (e) => { + let v = e.target.value.replace(/\D/g, "").slice(0, 16); + e.target.value = v.replace(/(.{4})/g, "$1 ").trim(); }); - document.getElementById('item-modal')?.addEventListener('click', e => { /* backdrop click intentionally disabled — modal closes only via Cancel or Save */ }); - document.addEventListener('keydown', e => { if (e.key === 'Escape') { closeModal('share-modal'); closeModal('emergency-modal'); closeModal('settings-modal'); closeModal('detail-modal'); closeModal('gen-modal'); } }); - - // Detail modal (shared item view) - const closeDetailModal = () => closeModal('detail-modal'); - document.getElementById('btn-close-detail-modal')?.addEventListener('click', closeDetailModal); - document.getElementById('btn-detail-done')?.addEventListener('click', closeDetailModal); - document.getElementById('detail-modal')?.addEventListener('click', e => { if (e.target.id === 'detail-modal') closeDetailModal(); }); - - document.getElementById('field-card-number')?.addEventListener('input', e => { - let v = e.target.value.replace(/\D/g, '').slice(0, 16); - e.target.value = v.replace(/(.{4})/g, '$1 ').trim(); + // Settings modal + document + .getElementById("btn-settings") + ?.addEventListener("click", openSettingsModal); + document + .getElementById("btn-close-settings") + ?.addEventListener("click", () => closeModal("settings-modal")); + document + .getElementById("settings-modal") + ?.addEventListener("click", (e) => { + if (e.target.id === "settings-modal") closeModal("settings-modal"); }); - - // Settings modal - document.getElementById('btn-settings')?.addEventListener('click', openSettingsModal); - document.getElementById('btn-close-settings')?.addEventListener('click', () => closeModal('settings-modal')); - document.getElementById('settings-modal')?.addEventListener('click', e => { if (e.target.id === 'settings-modal') closeModal('settings-modal'); }); - document.getElementById('btn-mfa-confirm')?.addEventListener('click', handleMfaConfirm); - document.getElementById('btn-mfa-cancel-setup')?.addEventListener('click', () => { document.getElementById('mfa-setup-area').classList.add('hidden'); loadMfaStatus(); }); - document.getElementById('btn-mfa-disable-confirm')?.addEventListener('click', handleMfaDisableConfirm); - document.getElementById('btn-mfa-disable-cancel')?.addEventListener('click', () => { document.getElementById('mfa-disable-area').classList.add('hidden'); loadMfaStatus(); }); - document.getElementById('btn-change-password')?.addEventListener('click', handleChangePassword); - document.getElementById('btn-delete-account')?.addEventListener('click', () => { - document.getElementById('btn-delete-account').classList.add('hidden'); - document.getElementById('delete-confirm-area').classList.remove('hidden'); - document.getElementById('delete-password').focus(); + document + .getElementById("btn-mfa-confirm") + ?.addEventListener("click", handleMfaConfirm); + document + .getElementById("btn-mfa-cancel-setup") + ?.addEventListener("click", () => { + document.getElementById("mfa-setup-area").classList.add("hidden"); + loadMfaStatus(); }); - document.getElementById('btn-delete-cancel')?.addEventListener('click', () => { - document.getElementById('delete-confirm-area').classList.add('hidden'); - document.getElementById('btn-delete-account').classList.remove('hidden'); - document.getElementById('delete-password').value = ''; - document.getElementById('delete-error').classList.add('hidden'); + document + .getElementById("btn-mfa-disable-confirm") + ?.addEventListener("click", handleMfaDisableConfirm); + document + .getElementById("btn-mfa-disable-cancel") + ?.addEventListener("click", () => { + document.getElementById("mfa-disable-area").classList.add("hidden"); + loadMfaStatus(); }); - document.getElementById('btn-delete-confirm')?.addEventListener('click', handleDeleteAccount); - document.getElementById('btn-copy-recovery-code')?.addEventListener('click', () => { - const code = document.getElementById('recovery-code-value').textContent; - navigator.clipboard.writeText(code).then(() => showToast('Recovery code copied')); + document + .getElementById("btn-change-password") + ?.addEventListener("click", handleChangePassword); + document + .getElementById("btn-delete-account") + ?.addEventListener("click", () => { + document.getElementById("btn-delete-account").classList.add("hidden"); + document + .getElementById("delete-confirm-area") + .classList.remove("hidden"); + document.getElementById("delete-password").focus(); }); - document.getElementById('btn-recovery-done')?.addEventListener('click', () => { - document.getElementById('recovery-code-display').classList.add('hidden'); + document + .getElementById("btn-delete-cancel") + ?.addEventListener("click", () => { + document.getElementById("delete-confirm-area").classList.add("hidden"); + document + .getElementById("btn-delete-account") + .classList.remove("hidden"); + document.getElementById("delete-password").value = ""; + document.getElementById("delete-error").classList.add("hidden"); + }); + document + .getElementById("btn-delete-confirm") + ?.addEventListener("click", handleDeleteAccount); + document + .getElementById("btn-copy-recovery-code") + ?.addEventListener("click", () => { + const code = document.getElementById("recovery-code-value").textContent; + navigator.clipboard + .writeText(code) + .then(() => showToast("Recovery code copied")); + }); + document + .getElementById("btn-recovery-done") + ?.addEventListener("click", () => { + document + .getElementById("recovery-code-display") + .classList.add("hidden"); loadRecoveryStatus(); }); - // Share modal - document.getElementById('btn-share-item')?.addEventListener('click', openShareModal); - document.getElementById('btn-close-share-modal')?.addEventListener('click', () => closeModal('share-modal')); - document.getElementById('btn-cancel-share')?.addEventListener('click', () => closeModal('share-modal')); - document.getElementById('share-modal')?.addEventListener('click', e => { if (e.target.id === 'share-modal') closeModal('share-modal'); }); - document.getElementById('share-form')?.addEventListener('submit', handleShareFormSubmit); - document.getElementById('btn-setup-keys-from-sharing')?.addEventListener('click', () => { closeModal('share-modal'); openSettingsModal(); }); - - // Emergency modal - document.getElementById('btn-add-emergency')?.addEventListener('click', () => { - document.getElementById('emergency-error').classList.add('hidden'); - document.getElementById('emergency-modal').classList.add('open'); + // Share modal + document + .getElementById("btn-share-item") + ?.addEventListener("click", openShareModal); + document + .getElementById("btn-close-share-modal") + ?.addEventListener("click", () => closeModal("share-modal")); + document + .getElementById("btn-cancel-share") + ?.addEventListener("click", () => closeModal("share-modal")); + document.getElementById("share-modal")?.addEventListener("click", (e) => { + if (e.target.id === "share-modal") closeModal("share-modal"); + }); + document + .getElementById("share-form") + ?.addEventListener("submit", handleShareFormSubmit); + document + .getElementById("btn-setup-keys-from-sharing") + ?.addEventListener("click", () => { + closeModal("share-modal"); + openSettingsModal(); }); - document.getElementById('btn-close-emergency-modal')?.addEventListener('click', () => closeModal('emergency-modal')); - document.getElementById('btn-cancel-emergency')?.addEventListener('click', () => closeModal('emergency-modal')); - document.getElementById('emergency-modal')?.addEventListener('click', e => { if (e.target.id === 'emergency-modal') closeModal('emergency-modal'); }); - document.getElementById('emergency-form')?.addEventListener('submit', handleEmergencyFormSubmit); - // Tabs - document.querySelectorAll('.panel-tabs').forEach(c => initTabs(c)); + // Emergency modal + document + .getElementById("btn-add-emergency") + ?.addEventListener("click", () => { + document.getElementById("emergency-error").classList.add("hidden"); + document.getElementById("emergency-modal").classList.add("open"); + }); + document + .getElementById("btn-close-emergency-modal") + ?.addEventListener("click", () => closeModal("emergency-modal")); + document + .getElementById("btn-cancel-emergency") + ?.addEventListener("click", () => closeModal("emergency-modal")); + document + .getElementById("emergency-modal") + ?.addEventListener("click", (e) => { + if (e.target.id === "emergency-modal") closeModal("emergency-modal"); + }); + document + .getElementById("emergency-form") + ?.addEventListener("submit", handleEmergencyFormSubmit); - // Sidebar collapse toggle (desktop) and mobile hamburger - const sidebar = document.getElementById('sidebar'); - const toggleBtn = document.getElementById('btn-sidebar-toggle'); - if (sidebar && toggleBtn) { - const STORAGE_KEY = 'sidebar_collapsed'; - if (localStorage.getItem(STORAGE_KEY) === '1') { - sidebar.classList.add('collapsed'); - toggleBtn.setAttribute('aria-label', 'Expand sidebar'); - toggleBtn.setAttribute('title', 'Expand sidebar'); - } - toggleBtn.addEventListener('click', () => { - const isCollapsed = sidebar.classList.toggle('collapsed'); - localStorage.setItem(STORAGE_KEY, isCollapsed ? '1' : '0'); - toggleBtn.setAttribute('aria-label', isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'); - toggleBtn.setAttribute('title', isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'); - }); + // Tabs + document.querySelectorAll(".panel-tabs").forEach((c) => initTabs(c)); + + // Sidebar collapse toggle — desktop only (mobile uses hamburger instead) + const sidebar = document.getElementById("sidebar"); + const toggleBtn = document.getElementById("btn-sidebar-toggle"); + if ( + sidebar && + toggleBtn && + document.body.classList.contains("is-desktop") + ) { + const STORAGE_KEY = "sidebar_collapsed"; + if (localStorage.getItem(STORAGE_KEY) === "1") { + sidebar.classList.add("collapsed"); + toggleBtn.setAttribute("aria-label", "Expand sidebar"); + toggleBtn.setAttribute("title", "Expand sidebar"); } - - // Mobile sidebar: hamburger opens overlay, backdrop/item-click closes it - const backdrop = document.getElementById('sidebar-backdrop'); - const mobileMenuBtn = document.getElementById('btn-mobile-menu'); - - function openMobileSidebar() { - sidebar?.classList.add('mobile-open'); - backdrop?.classList.add('open'); - document.documentElement.style.overflow = 'hidden'; - } - function closeMobileSidebar() { - sidebar?.classList.remove('mobile-open'); - backdrop?.classList.remove('open'); - document.documentElement.style.overflow = ''; - } - - mobileMenuBtn?.addEventListener('click', openMobileSidebar); - backdrop?.addEventListener('click', closeMobileSidebar); - backdrop?.addEventListener('touchstart', closeMobileSidebar, { passive: true }); - - // Close mobile sidebar when a nav item is tapped (mobile only) - const mobileQuery = window.matchMedia('(max-width: 768px)'); - document.querySelectorAll('.sidebar-item').forEach(item => { - item.addEventListener('click', () => { - if (mobileQuery.matches) closeMobileSidebar(); - }); + toggleBtn.addEventListener("click", () => { + const isCollapsed = sidebar.classList.toggle("collapsed"); + localStorage.setItem(STORAGE_KEY, isCollapsed ? "1" : "0"); + toggleBtn.setAttribute( + "aria-label", + isCollapsed ? "Expand sidebar" : "Collapse sidebar", + ); + toggleBtn.setAttribute( + "title", + isCollapsed ? "Expand sidebar" : "Collapse sidebar", + ); }); - - // Escape key closes the sidebar - document.addEventListener('keydown', e => { - if (e.key === 'Escape' && sidebar?.classList.contains('mobile-open')) closeMobileSidebar(); - }); - - // Mobile FAB mirrors the desktop add-item button - document.getElementById('btn-add-item-mobile')?.addEventListener('click', () => { - document.getElementById('btn-add-item')?.click(); - }); - - if (!VaultSession.getKey()) { showUnlockOverlay(); } else { loadVault(); } } - async function handleEmergencyFormSubmit(e) { - e.preventDefault(); - const errEl = document.getElementById('emergency-error'); - errEl.classList.add('hidden'); - const email = document.getElementById('emergency-email').value.trim().toLowerCase(); - const waitDays = document.getElementById('emergency-wait-days').value; - if (!email) { errEl.textContent = 'Email is required.'; errEl.classList.remove('hidden'); return; } - try { - const res = await apiFetch('/api/emergency', { - method: 'POST', - body: JSON.stringify({ grantee_email: email, wait_days: parseInt(waitDays) }), - }); - if (!res) return; - closeModal('emergency-modal'); - showToast('Invitation sent'); - loadEmergencyView(); - } catch (err) { - errEl.textContent = err.message; - errEl.classList.remove('hidden'); - } + // Mobile sidebar: hamburger opens overlay, backdrop/item-click closes it + const backdrop = document.getElementById("sidebar-backdrop"); + const mobileMenuBtn = document.getElementById("btn-mobile-menu"); + + function openMobileSidebar() { + sidebar?.classList.add("mobile-open"); + backdrop?.classList.add("open"); + document.documentElement.style.overflow = "hidden"; + } + function closeMobileSidebar() { + sidebar?.classList.remove("mobile-open"); + backdrop?.classList.remove("open"); + document.documentElement.style.overflow = ""; } - return { init }; -})(); + mobileMenuBtn?.addEventListener("click", openMobileSidebar); + backdrop?.addEventListener("click", closeMobileSidebar); + backdrop?.addEventListener("touchstart", closeMobileSidebar, { + passive: true, + }); + + // Close mobile sidebar when a nav item is tapped (mobile only) + document.querySelectorAll(".sidebar-item").forEach((item) => { + item.addEventListener("click", () => { + if (document.body.classList.contains("is-mobile")) closeMobileSidebar(); + }); + }); + + // Escape key closes the sidebar + document.addEventListener("keydown", (e) => { + if (e.key === "Escape" && sidebar?.classList.contains("mobile-open")) + closeMobileSidebar(); + }); + + // Mobile FAB mirrors the desktop add-item button + document + .getElementById("btn-add-item-mobile") + ?.addEventListener("click", () => { + document.getElementById("btn-add-item")?.click(); + }); + + if (!VaultSession.getKey()) { + showUnlockOverlay(); + } else { + loadVault(); + } +} + +async function handleEmergencyFormSubmit(e) { + e.preventDefault(); + const errEl = document.getElementById("emergency-error"); + errEl.classList.add("hidden"); + const email = document + .getElementById("emergency-email") + .value.trim() + .toLowerCase(); + const waitDays = document.getElementById("emergency-wait-days").value; + if (!email) { + errEl.textContent = "Email is required."; + errEl.classList.remove("hidden"); + return; + } + try { + const res = await apiFetch("/api/emergency", { + method: "POST", + body: JSON.stringify({ + grantee_email: email, + wait_days: parseInt(waitDays), + }), + }); + if (!res) return; + closeModal("emergency-modal"); + showToast("Invitation sent"); + loadEmergencyView(); + } catch (err) { + errEl.textContent = err.message; + errEl.classList.remove("hidden"); + } +} + +return { init }; +}) (); /** - * layout-init.js sets html.is-mobile / html.is-desktop synchronously in . - * Here we only need to handle the case where viewport changes after load - * (orientation change, browser resize, split-screen). + * Mobile/desktop mode detection. + * + * Sets body.is-mobile or body.is-desktop BEFORE first paint so CSS + * scoped to those classes takes effect without any flash or transition. + * Uses matchMedia (same source of truth as CSS media queries) rather + * than window.innerWidth (unreliable on some Android Chrome builds). + * + * MOBILE_BP must match the CSS breakpoint. 768px covers all phones and + * iPad Mini portrait (744px). iPad Air portrait (820px) and larger get + * the desktop sidebar layout. */ -(function watchLayout() { - var mq = window.matchMedia('(max-width: 768px)'); - mq.addEventListener('change', function (e) { - document.documentElement.classList.toggle('is-mobile', e.matches); - document.documentElement.classList.toggle('is-desktop', !e.matches); +(function initLayout() { + const MOBILE_BP = 768; + const mq = window.matchMedia(`(max-width: ${MOBILE_BP}px)`); + + function applyMode(isMobile) { + document.body.classList.toggle("is-mobile", isMobile); + document.body.classList.toggle("is-desktop", !isMobile); + } + + // Set immediately — body class is applied before CSS is rendered + applyMode(mq.matches); + + // Re-apply on orientation change / window resize (e.g. split-screen, rotation) + mq.addEventListener("change", (e) => { + applyMode(e.matches); + // If switching to desktop, ensure mobile sidebar is closed if (!e.matches) { - // Switched to desktop — close mobile sidebar if open - document.getElementById('sidebar')?.classList.remove('mobile-open'); - document.getElementById('sidebar-backdrop')?.classList.remove('open'); - document.documentElement.style.overflow = ''; + document.getElementById("sidebar")?.classList.remove("mobile-open"); + document.getElementById("sidebar-backdrop")?.classList.remove("open"); + document.documentElement.style.overflow = ""; } }); })(); @@ -1978,14 +2877,19 @@ const Vault = (() => { */ (function setViewportHeight() { function update() { - document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`); + document.documentElement.style.setProperty( + "--vh", + `${window.innerHeight * 0.01}px`, + ); } update(); - window.addEventListener('resize', update, { passive: true }); - window.addEventListener('orientationchange', () => setTimeout(update, 100), { passive: true }); + window.addEventListener("resize", update, { passive: true }); + window.addEventListener("orientationchange", () => setTimeout(update, 100), { + passive: true, + }); if (window.ResizeObserver) { new ResizeObserver(update).observe(document.documentElement); } })(); -document.addEventListener('DOMContentLoaded', Vault.init); \ No newline at end of file +document.addEventListener("DOMContentLoaded", Vault.init); \ No newline at end of file diff --git a/app/templates/vault/index.html b/app/templates/vault/index.html index 3cdd539..24496b6 100644 --- a/app/templates/vault/index.html +++ b/app/templates/vault/index.html @@ -7,11 +7,7 @@ ☰ -
    @@ -24,109 +20,56 @@
    🔒 PassKeeper -
    - - @@ -189,12 +114,7 @@
    🔍 - +
    +
    Sign out @@ -339,21 +249,11 @@
    -