feat: masked passwords UI with vault-gated reveal

Passwords imported from password managers are now:
- Displayed as dots (••••••••) by default in both options and popup
- Separated into their own "Passwords" section in options page
- Only revealable by entering the vault encryption password
- Always masked in the popup mappings list (no reveal there)

Options page:
- New Passwords section with locked/unlocked states
- Reveal button validates against vault encryption password
- Hide button re-masks all password values
- Password mappings excluded from the general Mappings table
- Delete and enable/disable controls work while masked

Popup:
- Password-category mappings show dots for real value
- Password category added to mapping add form dropdown

Storage:
- Added 'password' to default categories list

https://claude.ai/code/session_01SWSwDfMVij53bCTNSCLMwn
This commit is contained in:
Claude
2026-03-26 20:11:05 +00:00
parent 7c968e1461
commit e4b44a73ea
5 changed files with 144 additions and 4 deletions
+42
View File
@@ -463,6 +463,7 @@
<option value="ssn">SSN</option>
<option value="dob">DOB</option>
<option value="domain">Domain</option>
<option value="password">Password</option>
<option value="general">General</option>
</select>
<label class="checkbox-label">
@@ -473,6 +474,47 @@
</div>
</section>
<section class="section">
<h2>Passwords</h2>
<p class="section-desc">
Imported passwords are automatically redacted when sent to AI services.
Password values are hidden by default — enter your vault password to reveal them.
</p>
<div id="passwordsLocked" style="margin-bottom:12px">
<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
<span style="font-size:12px;color:#6b7280">&#128274; Password values are hidden</span>
<input type="password" id="passwordRevealKey" placeholder="Vault password to reveal" autocomplete="current-password"
style="font-size:12px;padding:5px 8px;border:1px solid #d1d5db;border-radius:6px;width:180px">
<button class="btn btn-sm" id="btnRevealPasswords">Reveal</button>
</div>
<div id="passwordRevealStatus" style="font-size:11px;margin-top:4px;min-height:14px"></div>
</div>
<div id="passwordsUnlocked" style="display:none;margin-bottom:12px">
<div style="display:flex;gap:8px;align-items:center">
<span style="font-size:12px;color:#b45309">&#128275; Passwords visible</span>
<button class="btn btn-sm" id="btnHidePasswords">Hide</button>
</div>
</div>
<table class="mapping-table">
<thead>
<tr>
<th>Password</th>
<th>Redacted As</th>
<th>Enabled</th>
<th></th>
</tr>
</thead>
<tbody id="passwordTableBody">
</tbody>
</table>
<div id="noPasswordsMsg" style="text-align:center;color:#9ca3af;padding:16px;font-size:13px;display:none">
No passwords imported. Use Transfer Data → Import to add passwords from your password manager.
</div>
</section>
<section class="section">
<h2>Custom Domains</h2>
<p class="section-desc">Add domains for self-hosted AI services (like OpenWebUI). The extension will activate on these domains in addition to the built-in ones.</p>