145 lines
6.2 KiB
HTML
145 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>PassKeeper</title>
|
|
<link rel="stylesheet" href="popup.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
|
|
<!-- ── Login view ──────────────────────────────────────────────────── -->
|
|
<div id="view-login" class="view hidden">
|
|
<div class="login-header">
|
|
<span class="login-logo">🔒</span>
|
|
<h1>PassKeeper</h1>
|
|
</div>
|
|
<div class="login-body">
|
|
<p id="login-error" class="pk-error hidden"></p>
|
|
<div class="form-group">
|
|
<label for="login-email">Email</label>
|
|
<input type="email" id="login-email" placeholder="you@example.com" autocomplete="email">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="login-password">Master Password</label>
|
|
<input type="password" id="login-password" placeholder="Master password" autocomplete="current-password">
|
|
</div>
|
|
<button id="btn-login" class="btn-primary">Unlock Vault</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── MFA view ────────────────────────────────────────────────────── -->
|
|
<div id="view-mfa" class="view hidden">
|
|
<div class="login-header">
|
|
<span class="login-logo">🔐</span>
|
|
<h1>Two-Factor Auth</h1>
|
|
</div>
|
|
<div class="login-body">
|
|
<p class="pk-hint">Enter your 6-digit authenticator code.</p>
|
|
<p id="mfa-error" class="pk-error hidden"></p>
|
|
<div class="form-group">
|
|
<label for="mfa-code">Verification Code</label>
|
|
<input type="text" id="mfa-code" inputmode="numeric" maxlength="6" placeholder="000000" autocomplete="one-time-code">
|
|
</div>
|
|
<button id="btn-mfa-verify" class="btn-primary">Verify</button>
|
|
<button id="btn-mfa-back" class="btn-ghost">← Back</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Unlock-only view (tokens from web app, need vault key) ─────── -->
|
|
<div id="view-unlock" class="view hidden">
|
|
<div class="login-header">
|
|
<span class="login-logo">🔓</span>
|
|
<h1>PassKeeper</h1>
|
|
<p style="font-size:12px;opacity:0.85;margin-top:4px;">Signed in via web app</p>
|
|
</div>
|
|
<div class="login-body">
|
|
<p class="pk-hint">Enter your master password to unlock the vault.</p>
|
|
<p id="unlock-error" class="pk-error hidden"></p>
|
|
<div class="form-group">
|
|
<label for="unlock-password">Master Password</label>
|
|
<input type="password" id="unlock-password" placeholder="Master password" autocomplete="current-password">
|
|
</div>
|
|
<button id="btn-unlock" class="btn-primary">Unlock</button>
|
|
<button id="btn-unlock-signout" class="btn-ghost">Sign out</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Vault view ──────────────────────────────────────────────────── -->
|
|
<div id="view-vault" class="view hidden">
|
|
|
|
<!-- Top bar -->
|
|
<div class="vault-topbar">
|
|
<div class="search-wrap">
|
|
<svg class="search-icon" viewBox="0 0 20 20" fill="none" width="15" height="15">
|
|
<circle cx="8.5" cy="8.5" r="5.5" stroke="#999" stroke-width="1.6"/>
|
|
<path d="M13 13l3.5 3.5" stroke="#999" stroke-width="1.6" stroke-linecap="round"/>
|
|
</svg>
|
|
<input type="text" id="vault-search" placeholder="Search your vault" autocomplete="off">
|
|
</div>
|
|
<a id="btn-open-vault" class="btn-vault-link" title="Open vault" target="_blank">
|
|
Vault
|
|
<svg viewBox="0 0 16 16" fill="none" width="12" height="12">
|
|
<path d="M6 3H3a1 1 0 00-1 1v9a1 1 0 001 1h9a1 1 0 001-1v-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
<path d="M9 2h5v5M14 2L8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</a>
|
|
<button id="btn-add-item" class="btn-add" title="Add item">+</button>
|
|
</div>
|
|
|
|
<!-- Save prompt -->
|
|
<div id="save-prompt" class="save-prompt hidden">
|
|
<div class="save-prompt-title">
|
|
<span>💾</span> Save new password?
|
|
<button id="btn-save-no" class="save-dismiss">✕</button>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="save-name">Site name</label>
|
|
<input type="text" id="save-name" placeholder="e.g. GitHub">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="save-username">Username</label>
|
|
<input type="text" id="save-username" placeholder="username or email">
|
|
</div>
|
|
<button id="btn-save-yes" class="btn-primary btn-sm">Save</button>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="vault-tabs" id="vault-tabs">
|
|
<button class="tab-btn active" data-tab="relevant">All relevant</button>
|
|
<button class="tab-btn" data-tab="all">All items</button>
|
|
<button class="tab-btn" data-tab="recents">Recents</button>
|
|
</div>
|
|
|
|
<!-- List -->
|
|
<div id="vault-spinner" class="pk-loading hidden">Loading vault…</div>
|
|
<div id="vault-list" class="vault-list"></div>
|
|
<div id="vault-empty" class="pk-empty hidden">No items found.</div>
|
|
|
|
<!-- Bottom nav -->
|
|
<nav class="bottom-nav">
|
|
<button class="nav-btn active" id="nav-vault">
|
|
<svg viewBox="0 0 24 24" fill="none" width="20" height="20">
|
|
<rect x="3" y="6" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.7"/>
|
|
<circle cx="12" cy="13" r="2.5" stroke="currentColor" stroke-width="1.7"/>
|
|
<path d="M8 6V5a4 4 0 018 0v1" stroke="currentColor" stroke-width="1.7"/>
|
|
</svg>
|
|
<span>Vault</span>
|
|
</button>
|
|
<button class="nav-btn" id="nav-account" title="Sign out">
|
|
<svg viewBox="0 0 24 24" fill="none" width="20" height="20">
|
|
<circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="1.7"/>
|
|
<path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
|
|
</svg>
|
|
<span>Sign out</span>
|
|
</button>
|
|
</nav>
|
|
|
|
</div><!-- /view-vault -->
|
|
|
|
</div><!-- /app -->
|
|
<script src="../shared/crypto.js"></script>
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|