feat(vault): add password exposure check and related UI enhancements

webapp/src/components/VaultPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import ConfirmDialog from '@/components/ConfirmDialog';
 import { calcTotpNow } from '@/lib/crypto';
+import { checkCipherPasswordsExposed } from '@/lib/password-breach';
 import { computeSshFingerprint, generateDefaultSshKeyMaterial } from '@/lib/ssh';
 import {
   ArrowUpDown,
@@ -25,6 +26,7 @@ import {
   Pencil,
   Plus,
   RefreshCw,
+  ShieldAlert,
   ShieldUser,
   Star,
   StarOff,
@@ -48,7 +50,7 @@ interface VaultPageProps {
   onBulkDelete: (ids: string[]) => Promise<void>;
   onBulkMove: (ids: string[], folderId: string | null) => Promise<void>;
   onVerifyMasterPassword: (email: string, password: string) => Promise<void>;
-  onNotify: (type: 'success' | 'error', text: string) => void;
+  onNotify: (type: 'success' | 'error' | 'warning', text: string) => void;
   onCreateFolder: (name: string) => Promise<void>;
   onDeleteFolder: (folderId: string) => Promise<void>;
   onDownloadAttachment: (cipher: Cipher, attachmentId: string) => Promise<void>;
@@ -59,6 +61,7 @@ type VaultSortMode = 'edited' | 'created' | 'name';
 type SidebarFilter =
   | { kind: 'all' }
   | { kind: 'favorite' }
+  | { kind: 'exposed' }
   | { kind: 'trash' }
   | { kind: 'type'; value: TypeFilter }
   | { kind: 'folder'; folderId: string | null };
@@ -77,6 +80,8 @@ const CREATE_TYPE_OPTIONS: TypeOption[] = [
 ];
 
 const VAULT_SORT_STORAGE_KEY = 'nodewarden.vault.sort.v1';
+const VAULT_EXPOSED_IGNORED_STORAGE_KEY = 'nodewarden.vault.exposed-ignored.v1';
+const VAULT_EXPOSED_SIGNATURE_STORAGE_KEY = 'nodewarden.vault.exposed-signature.v1';
 const MOBILE_LAYOUT_QUERY = '(max-width: 900px)';
 const VAULT_SORT_OPTIONS: Array<{ value: VaultSortMode; label: string }> = [
   { value: 'edited', label: t('txt_sort_last_edited') },
@@ -366,12 +371,43 @@ function openUri(raw: string): void {
   window.open(url, '_blank', 'noopener');
 }
 
+async function computePasswordSignature(ciphers: Cipher[]): Promise<string> {
+  const parts = ciphers
+    .filter((cipher) => Number(cipher.type || 1) === 1)
+    .map((cipher) => `${String(cipher.id || '').trim()}\u0000${String(cipher.login?.decPassword || '')}`)
+    .sort();
+  const bytes = new TextEncoder().encode(parts.join('\u0001'));
+  const digest = await crypto.subtle.digest('SHA-256', bytes);
+  return Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, '0')).join('');
+}
+
+function countVisibleExposed(results: Record<string, boolean>, ignoredMap: Record<string, boolean>): number {
+  let count = 0;
+  for (const [cipherId, exposed] of Object.entries(results)) {
+    if (exposed && !ignoredMap[cipherId]) count++;
+  }
+  return count;
+}
+
+function readIgnoredExposedMap(): Record<string, boolean> {
+  try {
+    const raw = localStorage.getItem(VAULT_EXPOSED_IGNORED_STORAGE_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw) as Record<string, boolean>;
+    return parsed && typeof parsed === 'object' ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
 export default function VaultPage(props: VaultPageProps) {
   const [searchInput, setSearchInput] = useState('');
   const [searchQuery, setSearchQuery] = useState('');
   const [searchComposing, setSearchComposing] = useState(false);
   const [sortMode, setSortMode] = useState<VaultSortMode>('edited');
   const [sortMenuOpen, setSortMenuOpen] = useState(false);
+  const [exposedStatusMap, setExposedStatusMap] = useState<Record<string, boolean>>({});
+  const [ignoredExposedMap, setIgnoredExposedMap] = useState<Record<string, boolean>>(() => readIgnoredExposedMap());
   const [sidebarFilter, setSidebarFilter] = useState<SidebarFilter>({ kind: 'all' });
   const [selectedCipherId, setSelectedCipherId] = useState('');
   const [selectedMap, setSelectedMap] = useState<Record<string, boolean>>({});
@@ -408,6 +444,11 @@ export default function VaultPage(props: VaultPageProps) {
   const attachmentInputRef = useRef<HTMLInputElement | null>(null);
   const sshSeedTicketRef = useRef(0);
   const sshFingerprintTicketRef = useRef(0);
+  const hasCompletedAutoExposureCheckRef = useRef(false);
+
+  function isVisibleExposed(cipherId: string): boolean {
+    return !!exposedStatusMap[cipherId] && !ignoredExposedMap[cipherId];
+  }
 
   useEffect(() => {
     if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
@@ -457,6 +498,59 @@ export default function VaultPage(props: VaultPageProps) {
     }
   }, [sortMode]);
 
+  useEffect(() => {
+    try {
+      localStorage.setItem(VAULT_EXPOSED_IGNORED_STORAGE_KEY, JSON.stringify(ignoredExposedMap));
+    } catch {
+      // ignore storage write failures
+    }
+  }, [ignoredExposedMap]);
+
+  useEffect(() => {
+    if (props.loading) return;
+
+    const loginCiphers = props.ciphers.filter(
+      (cipher) => Number(cipher.type || 1) === 1 && !!String(cipher.login?.decPassword || '').trim()
+    );
+
+    let cancelled = false;
+
+    void (async () => {
+      try {
+        const [signature, results] = await Promise.all([
+          computePasswordSignature(loginCiphers),
+          checkCipherPasswordsExposed(loginCiphers),
+        ]);
+        if (cancelled) return;
+
+        setExposedStatusMap(results);
+
+        const previousSignature =
+          typeof localStorage !== 'undefined'
+            ? String(localStorage.getItem(VAULT_EXPOSED_SIGNATURE_STORAGE_KEY) || '').trim()
+            : '';
+
+        if (typeof localStorage !== 'undefined') {
+          localStorage.setItem(VAULT_EXPOSED_SIGNATURE_STORAGE_KEY, signature);
+        }
+
+        if (hasCompletedAutoExposureCheckRef.current && previousSignature && previousSignature !== signature) {
+          const count = countVisibleExposed(results, ignoredExposedMap);
+          if (count > 0) {
+            props.onNotify('warning', t('txt_exposed_password_check_complete_count', { count }));
+          }
+        }
+        hasCompletedAutoExposureCheckRef.current = true;
+      } catch {
+        // Keep exposed-password checks silent in the background.
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [props.ciphers, props.loading]);
+
   useEffect(() => {
     const onPointerDown = (event: Event) => {
       if (!createMenuOpen) return;
@@ -533,6 +627,7 @@ export default function VaultPage(props: VaultPageProps) {
       } else {
         if (isDeleted) return false;
         if (sidebarFilter.kind === 'favorite' && !cipher.favorite) return false;
+        if (sidebarFilter.kind === 'exposed' && !isVisibleExposed(cipher.id)) return false;
         if (sidebarFilter.kind === 'type' && cipherTypeKey(Number(cipher.type || 1)) !== sidebarFilter.value) return false;
         if (sidebarFilter.kind === 'folder') {
           if (sidebarFilter.folderId === null) {
@@ -568,7 +663,7 @@ export default function VaultPage(props: VaultPageProps) {
     });
 
     return next;
-  }, [props.ciphers, sidebarFilter, searchQuery, sortMode]);
+  }, [props.ciphers, sidebarFilter, searchQuery, sortMode, exposedStatusMap, ignoredExposedMap]);
 
   useEffect(() => {
     if (isCreating) return;
@@ -585,6 +680,8 @@ export default function VaultPage(props: VaultPageProps) {
     () => props.ciphers.find((x) => x.id === selectedCipherId) || null,
     [props.ciphers, selectedCipherId]
   );
+  const selectedCipherExposed = !!(selectedCipher && exposedStatusMap[selectedCipher.id]);
+  const selectedCipherIgnored = !!(selectedCipher && ignoredExposedMap[selectedCipher.id]);
   const passkeyCreatedAt = firstPasskeyCreationTime(selectedCipher);
   const selectedAttachments = useMemo(
     () => (Array.isArray(selectedCipher?.attachments) ? selectedCipher.attachments : []),
@@ -788,11 +885,26 @@ function folderName(id: string | null | undefined): string {
       if (isCreating) {
         await props.onCreate(nextDraft, attachmentQueue);
       } else if (selectedCipher) {
+        const passwordChanged =
+          nextDraft.type === 1 &&
+          String(nextDraft.loginPassword || '') !== String(selectedCipher.login?.decPassword || '');
         const removeAttachmentIds = Object.keys(removedAttachmentIds).filter((id) => !!removedAttachmentIds[id]);
         await props.onUpdate(selectedCipher, nextDraft, {
           addFiles: attachmentQueue,
           removeAttachmentIds,
         });
+        if (passwordChanged) {
+          setExposedStatusMap((prev) => {
+            const next = { ...prev };
+            delete next[selectedCipher.id];
+            return next;
+          });
+          setIgnoredExposedMap((prev) => {
+            const next = { ...prev };
+            delete next[selectedCipher.id];
+            return next;
+          });
+        }
       }
       setIsCreating(false);
       setIsEditing(false);
@@ -859,6 +971,15 @@ function folderName(id: string | null | undefined): string {
     }
   }
 
+  function toggleIgnoreExposed(cipherId: string): void {
+    setIgnoredExposedMap((prev) => {
+      const next = { ...prev };
+      if (next[cipherId]) delete next[cipherId];
+      else next[cipherId] = true;
+      return next;
+    });
+  }
+
   async function verifyReprompt(): Promise<void> {
     if (!selectedCipher) return;
     if (!repromptPassword) {
@@ -927,6 +1048,9 @@ function folderName(id: string | null | undefined): string {
             <button type="button" className={`tree-btn ${sidebarFilter.kind === 'favorite' ? 'active' : ''}`} onClick={() => setSidebarFilter({ kind: 'favorite' })}>
               <Star size={14} className="tree-icon" /> <span className="tree-label">{t('txt_favorites')}</span>
             </button>
+            <button type="button" className={`tree-btn ${sidebarFilter.kind === 'exposed' ? 'active' : ''}`} onClick={() => setSidebarFilter({ kind: 'exposed' })}>
+              <ShieldAlert size={14} className="tree-icon" /> <span className="tree-label">{t('txt_exposed_passwords')}</span>
+            </button>
             <button type="button" className={`tree-btn ${sidebarFilter.kind === 'trash' ? 'active' : ''}`} onClick={() => setSidebarFilter({ kind: 'trash' })}>
               <Trash2 size={14} className="tree-icon" /> <span className="tree-label">{t('txt_trash')}</span>
             </button>
@@ -1126,7 +1250,10 @@ function folderName(id: string | null | undefined): string {
                     <VaultListIcon cipher={cipher} />
                   </div>
                   <div className="list-text">
-                    <span className="list-title" title={cipher.decName || t('txt_no_name')}>{cipher.decName || t('txt_no_name')}</span>
+                    <span className="list-title" title={cipher.decName || t('txt_no_name')}>
+                      <span className="list-title-text">{cipher.decName || t('txt_no_name')}</span>
+                      {isVisibleExposed(cipher.id) ? <span className="list-badge danger">{t('txt_exposed_short')}</span> : null}
+                    </span>
                     <span className="list-sub" title={listSubtitle(cipher)}>{listSubtitle(cipher)}</span>
                   </div>
                 </button>
@@ -1551,6 +1678,25 @@ function folderName(id: string | null | undefined): string {
                       </button>
                     </div>
                   </div>
+                  {selectedCipherExposed && (
+                    <div className="kv-row">
+                      <span className="kv-label">{t('txt_exposed_passwords')}</span>
+                      <div className="kv-main">
+                        <strong className="exposed-status danger">
+                          {selectedCipherIgnored ? t('txt_exposed_ignored') : t('txt_exposed')}
+                        </strong>
+                      </div>
+                      <div className="kv-actions">
+                        <button
+                          type="button"
+                          className="btn btn-secondary small"
+                          onClick={() => toggleIgnoreExposed(selectedCipher.id)}
+                        >
+                          <X size={14} className="btn-icon" /> {selectedCipherIgnored ? t('txt_unignore') : t('txt_ignore')}
+                        </button>
+                      </div>
+                    </div>
+                  )}
                   {!!selectedCipher.login.decTotp && (
                     <div className="kv-row">
                       <span className="kv-label">{t('txt_totp')}</span>

webapp/src/lib/i18n.ts

@@ -140,6 +140,11 @@ const messages: Record<Locale, Record<string, string>> = {
     txt_enter_master_password_to_view_this_item: "Enter master password to view this item.",
     txt_expiration_date: "Expiration Date",
     txt_expiration_days_0_never: "Expiration Days (0 = never)",
+    txt_exposed: "Exposed",
+    txt_exposed_password_check_complete_count: "{count} exposed password(s) found",
+    txt_exposed_ignored: "Exposed (Ignored)",
+    txt_exposed_passwords: "Exposed Passwords",
+    txt_exposed_short: "Exposed",
     txt_expires_at: "Expires At",
     txt_expires_at_value: "Expires at: {value}",
     txt_expiry: "Expiry",
@@ -249,6 +254,7 @@ const messages: Record<Locale, Record<string, string>> = {
     txt_no: "No",
     txt_no_devices_found: "No devices found.",
     txt_no_folder: "No Folder",
+    txt_no_exposed_passwords_found: "No exposed passwords found",
     txt_no_items: "No items",
     txt_no_username: "(No username)",
     txt_no_verification_codes: "No verification codes",
@@ -292,6 +298,7 @@ const messages: Record<Locale, Record<string, string>> = {
     txt_regenerate: "Regenerate",
     txt_registration_succeeded_please_sign_in: "Registration succeeded. Please sign in.",
     txt_remove: "Remove",
+    txt_ignore: "Ignore",
     txt_remove_device: "Remove device",
     txt_remove_device_2: "Remove Device",
     txt_remove_device_name_and_clear_its_2fa_trust: "Remove device \"{name}\" and clear its 2FA trust?",
@@ -375,6 +382,7 @@ const messages: Record<Locale, Record<string, string>> = {
     txt_unlock_item: "Unlock Item",
     txt_unlock_send: "Unlock Send",
     txt_unlock_vault: "Unlock Vault",
+    txt_unignore: "Unignore",
     txt_unlocked: "Unlocked",
     txt_update_item_failed: "Update item failed",
     txt_update_send_failed: "Update send failed",
@@ -433,6 +441,7 @@ const zhCNOverrides: Record<string, string> = {
   txt_back_to_login: '返回登录',
   txt_unlock: '解锁',
   txt_unlock_vault: '解锁密码库',
+  txt_unignore: '取消忽略',
   txt_master_password: '主密码',
   txt_email: '邮箱',
   txt_name: '名称',
@@ -459,6 +468,7 @@ const zhCNOverrides: Record<string, string> = {
   txt_copy: '复制',
   txt_code_copied: '验证码已复制',
   txt_copy_link: '复制链接',
+  txt_ignore: '忽略',
   txt_select_all: '全选',
   txt_delete_selected: '删除所选',
   txt_all_items: '所有项目',
@@ -467,6 +477,7 @@ const zhCNOverrides: Record<string, string> = {
   txt_folder: '文件夹',
   txt_folders: '文件夹',
   txt_no_folder: '无文件夹',
+  txt_no_exposed_passwords_found: '未发现已泄露密码',
   txt_no_items: '没有项目',
   txt_no_username: '无用户名',
   txt_no_verification_codes: '没有验证码',
@@ -474,6 +485,11 @@ const zhCNOverrides: Record<string, string> = {
   txt_select_an_item: '请选择一个项目',
   txt_login: '登录',
   txt_card: '银行卡',
+  txt_exposed: '已泄露',
+  txt_exposed_password_check_complete_count: '发现 {count} 个已泄露密码',
+  txt_exposed_ignored: '已泄露（已忽略）',
+  txt_exposed_passwords: '是否泄露',
+  txt_exposed_short: '泄露',
   txt_identity: '身份',
   txt_note: '笔记',
   txt_secure_note: '安全笔记',

webapp/src/lib/password-breach.ts

@@ -0,0 +1,127 @@
+import type { Cipher } from './types';
+
+const HIBP_RANGE_ENDPOINT = 'https://api.pwnedpasswords.com/range/';
+const RANGE_CACHE_PREFIX = 'nodewarden.password-breach.range.v1.';
+const RANGE_CACHE_TTL_MS = 7 * 24 * 60 * 60 * 1000;
+
+const inMemoryRangeCache = new Map<string, { expiresAt: number; suffixes: Set<string> }>();
+const inflightRangeRequests = new Map<string, Promise<Set<string>>>();
+
+function normalizeHashHex(value: string): string {
+  return String(value || '').trim().toUpperCase();
+}
+
+async function sha1Hex(input: string): Promise<string> {
+  const bytes = new TextEncoder().encode(input);
+  const digest = await crypto.subtle.digest('SHA-1', bytes);
+  return Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, '0')).join('').toUpperCase();
+}
+
+function readCachedSuffixes(prefix: string): Set<string> | null {
+  const now = Date.now();
+  const memory = inMemoryRangeCache.get(prefix);
+  if (memory && memory.expiresAt > now) return new Set(memory.suffixes);
+  if (memory) inMemoryRangeCache.delete(prefix);
+
+  if (typeof sessionStorage === 'undefined') return null;
+  const raw = sessionStorage.getItem(`${RANGE_CACHE_PREFIX}${prefix}`);
+  if (!raw) return null;
+
+  try {
+    const parsed = JSON.parse(raw) as { expiresAt?: number; suffixes?: string[] };
+    if (!parsed.expiresAt || parsed.expiresAt <= now || !Array.isArray(parsed.suffixes)) {
+      sessionStorage.removeItem(`${RANGE_CACHE_PREFIX}${prefix}`);
+      return null;
+    }
+    const suffixes = new Set(parsed.suffixes.map(normalizeHashHex));
+    inMemoryRangeCache.set(prefix, { expiresAt: parsed.expiresAt, suffixes });
+    return new Set(suffixes);
+  } catch {
+    sessionStorage.removeItem(`${RANGE_CACHE_PREFIX}${prefix}`);
+    return null;
+  }
+}
+
+function writeCachedSuffixes(prefix: string, suffixes: Set<string>): void {
+  const expiresAt = Date.now() + RANGE_CACHE_TTL_MS;
+  inMemoryRangeCache.set(prefix, { expiresAt, suffixes: new Set(suffixes) });
+  if (typeof sessionStorage === 'undefined') return;
+  sessionStorage.setItem(
+    `${RANGE_CACHE_PREFIX}${prefix}`,
+    JSON.stringify({ expiresAt, suffixes: Array.from(suffixes) })
+  );
+}
+
+async function getRangeSuffixes(prefix: string): Promise<Set<string>> {
+  const normalizedPrefix = normalizeHashHex(prefix).slice(0, 5);
+  if (!/^[A-F0-9]{5}$/.test(normalizedPrefix)) throw new Error('Invalid password hash prefix');
+
+  const cached = readCachedSuffixes(normalizedPrefix);
+  if (cached) return cached;
+
+  const inflight = inflightRangeRequests.get(normalizedPrefix);
+  if (inflight) return inflight;
+
+  const request = (async () => {
+    const response = await fetch(`${HIBP_RANGE_ENDPOINT}${normalizedPrefix}`, {
+      method: 'GET',
+      headers: {
+        Accept: 'text/plain',
+        'Add-Padding': 'true',
+      },
+      cache: 'no-store',
+    });
+    if (!response.ok) throw new Error('Failed to check exposed passwords');
+
+    const body = await response.text();
+    const suffixes = new Set<string>();
+    for (const line of body.split(/\r?\n/)) {
+      const [suffix] = line.split(':', 1);
+      const normalizedSuffix = normalizeHashHex(suffix || '');
+      if (/^[A-F0-9]{35}$/.test(normalizedSuffix)) suffixes.add(normalizedSuffix);
+    }
+    writeCachedSuffixes(normalizedPrefix, suffixes);
+    return suffixes;
+  })();
+
+  inflightRangeRequests.set(normalizedPrefix, request);
+  try {
+    return await request;
+  } finally {
+    inflightRangeRequests.delete(normalizedPrefix);
+  }
+}
+
+export async function checkCipherPasswordsExposed(ciphers: Cipher[]): Promise<Record<string, boolean>> {
+  const loginCiphers = ciphers.filter((cipher) => {
+    const password = String(cipher.login?.decPassword || '').trim();
+    return cipher.type === 1 && !!cipher.id && !!password;
+  });
+
+  const uniquePasswords = new Map<string, string>();
+  for (const cipher of loginCiphers) {
+    const password = String(cipher.login?.decPassword || '');
+    if (!uniquePasswords.has(password)) {
+      uniquePasswords.set(password, await sha1Hex(password));
+    }
+  }
+
+  const prefixes = Array.from(new Set(Array.from(uniquePasswords.values(), (hash) => hash.slice(0, 5))));
+  const rangeMap = new Map<string, Set<string>>();
+  await Promise.all(
+    prefixes.map(async (prefix) => {
+      rangeMap.set(prefix, await getRangeSuffixes(prefix));
+    })
+  );
+
+  const results: Record<string, boolean> = {};
+  for (const cipher of loginCiphers) {
+    const password = String(cipher.login?.decPassword || '');
+    const hash = uniquePasswords.get(password);
+    if (!hash) continue;
+    const prefix = hash.slice(0, 5);
+    const suffix = hash.slice(5);
+    results[cipher.id] = !!rangeMap.get(prefix)?.has(suffix);
+  }
+  return results;
+}

webapp/src/lib/types.ts

@@ -278,7 +278,7 @@ export interface TokenError {
 
 export interface ToastMessage {
   id: string;
-  type: 'success' | 'error';
+  type: 'success' | 'error' | 'warning';
   text: string;
 }
 

webapp/src/styles.css

@@ -875,15 +875,41 @@ input[type='file'].input::file-selector-button:hover {
 }
 
 .list-title {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 6px;
   color: #175ddc;
   font-size: 15px;
   font-weight: 700;
+  min-width: 0;
+}
+
+.list-title-text {
+  min-width: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.list-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  color: #475569;
+  background: #e2e8f0;
+  flex-shrink: 0;
+}
+
+.list-badge.danger {
+  color: #fff;
+  background: var(--danger);
+}
+
 .list-sub {
   display: block;
   color: #5f6f85;
@@ -1123,6 +1149,14 @@ input[type='file'].input::file-selector-button:hover {
   flex-shrink: 0;
 }
 
+.exposed-status {
+  color: #475569;
+}
+
+.exposed-status.danger {
+  color: var(--danger);
+}
+
 .attachment-list {
   display: grid;
   gap: 0;
@@ -1755,6 +1789,12 @@ input[type='file'].input::file-selector-button:hover {
   color: #9f1239;
 }
 
+.toast-item.warning {
+  border-color: #f2b8c1;
+  background: #fde7eb;
+  color: #9f1239;
+}
+
 .toast-text {
   font-weight: 700;
   padding-right: 10px;