feat: implement account passkey functionality

- Added functions for managing account passkeys including creation, listing, updating, and deletion.
- Introduced login methods using account passkeys with options for direct unlock and login-only modes.
- Enhanced error handling and response parsing for passkey-related API calls.
- Updated UI styles for account passkey management components.
- Added new translations for account passkey features in multiple languages.
- Modified network status handling to improve service reachability checks.

webapp/src/components/AppMainRoutes.tsx

@@ -8,7 +8,7 @@ import type { AdminBackupImportResponse, AdminBackupRunResponse, AdminBackupSett
 import type { AuditLogFilters } from '@/lib/api/admin';
 import type { CiphersImportPayload } from '@/lib/api/vault';
 import { t } from '@/lib/i18n';
-import type { AdminInvite, AdminUser, AuditLogListResult, AuditLogSettings, AuthorizedDevice, Cipher, CustomEquivalentDomain, DomainRules, Folder as VaultFolder, Profile, Send, SendDraft, SessionState, VaultDraft } from '@/lib/types';
+import type { AccountPasskeyCredential, AdminInvite, AdminUser, AuditLogListResult, AuditLogSettings, AuthorizedDevice, Cipher, CustomEquivalentDomain, DomainRules, Folder as VaultFolder, Profile, Send, SendDraft, SessionState, VaultDraft } from '@/lib/types';
 import type { ExportRequest } from '@/lib/export-formats';
 
 const VaultPage = lazy(() => import('@/components/VaultPage'));
@@ -112,6 +112,10 @@ export interface AppMainRoutesProps {
   onGetRecoveryCode: (masterPassword: string) => Promise<string>;
   onGetApiKey: (masterPassword: string) => Promise<string>;
   onRotateApiKey: (masterPassword: string) => Promise<string>;
+  onListAccountPasskeys: () => Promise<AccountPasskeyCredential[]>;
+  onCreateAccountPasskey: (name: string, masterPassword: string, directUnlock: boolean) => Promise<AccountPasskeyCredential>;
+  onEnableAccountPasskeyDirectUnlock: (id: string, masterPassword: string) => Promise<void>;
+  onDeleteAccountPasskey: (id: string, masterPassword: string) => Promise<void>;
   onLockTimeoutChange: (minutes: 0 | 1 | 5 | 15 | 30) => void;
   onSessionTimeoutActionChange: (action: 'lock' | 'logout') => void;
   onRefreshAuthorizedDevices: () => Promise<void>;
@@ -261,6 +265,10 @@ export default function AppMainRoutes(props: AppMainRoutesProps) {
                 onGetRecoveryCode={props.onGetRecoveryCode}
                 onGetApiKey={props.onGetApiKey}
                 onRotateApiKey={props.onRotateApiKey}
+                onListAccountPasskeys={props.onListAccountPasskeys}
+                onCreateAccountPasskey={props.onCreateAccountPasskey}
+                onEnableAccountPasskeyDirectUnlock={props.onEnableAccountPasskeyDirectUnlock}
+                onDeleteAccountPasskey={props.onDeleteAccountPasskey}
                 onLockTimeoutChange={props.onLockTimeoutChange}
                 onSessionTimeoutActionChange={props.onSessionTimeoutActionChange}
                 onNotify={props.onNotify}

webapp/src/components/AuthViews.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'preact/hooks';
-import { ArrowLeft, Eye, EyeOff, LogIn, LogOut, Unlock, UserPlus } from 'lucide-preact';
+import { ArrowLeft, Eye, EyeOff, KeyRound, LogIn, LogOut, Unlock, UserPlus } from 'lucide-preact';
 import NetworkStatusBadge from '@/components/NetworkStatusBadge';
 import StandalonePageFrame from '@/components/StandalonePageFrame';
 import { t } from '@/lib/i18n';
@@ -23,19 +23,24 @@ interface AuthViewsProps {
   relaxedLoginInput?: boolean;
   authPlaceholder?: string;
   unlockPlaceholder?: string;
-  pendingAction: 'login' | 'register' | 'unlock' | null;
+  pendingAction: 'login' | 'passkey' | 'register' | 'unlock' | null;
   unlockReady: boolean;
   unlockPreparing: boolean;
   loginValues: LoginValues;
+  pendingPasskeyPasswordEmail?: string | null;
+  passkeyPassword: string;
   registerValues: RegisterValues;
   registrationInviteRequired?: boolean;
   unlockPassword: string;
   emailForLock: string;
   loginHintLoading: boolean;
   onChangeLogin: (next: LoginValues) => void;
+  onChangePasskeyPassword: (password: string) => void;
   onChangeRegister: (next: RegisterValues) => void;
   onChangeUnlock: (password: string) => void;
   onSubmitLogin: () => void;
+  onSubmitPasskey: () => void;
+  onSubmitPasskeyPassword: () => void;
   onSubmitRegister: () => void;
   onSubmitUnlock: () => void;
   onGotoLogin: () => void;
@@ -77,8 +82,10 @@ function PasswordField(props: {
 
 export default function AuthViews(props: AuthViewsProps) {
   const loginBusy = props.pendingAction === 'login';
+  const passkeyBusy = props.pendingAction === 'passkey';
   const registerBusy = props.pendingAction === 'register';
   const unlockBusy = props.pendingAction === 'unlock';
+  const passkeyPasswordPending = !!props.pendingPasskeyPasswordEmail;
   const showInviteCodeField = props.registrationInviteRequired !== false || !!props.registerValues.inviteCode.trim();
 
   if (props.mode === 'locked') {
@@ -221,9 +228,37 @@ export default function AuthViews(props: AuthViewsProps) {
         <form
           onSubmit={(e) => {
             e.preventDefault();
+            if (passkeyPasswordPending) {
+              props.onSubmitPasskeyPassword();
+              return;
+            }
             props.onSubmitLogin();
           }}
         >
+          {passkeyPasswordPending ? (
+            <>
+              <p className="muted standalone-muted">{props.pendingPasskeyPasswordEmail}</p>
+              <input type="text" value={props.pendingPasskeyPasswordEmail || ''} autoComplete="username" readOnly hidden tabIndex={-1} aria-hidden="true" />
+              <PasswordField
+                label={t('txt_master_password')}
+                value={props.passkeyPassword}
+                autoFocus
+                autoComplete="current-password"
+                placeholder={props.authPlaceholder}
+                onInput={props.onChangePasskeyPassword}
+              />
+              <button type="submit" className="btn btn-primary full" disabled={loginBusy}>
+                <Unlock size={16} className="btn-icon" />
+                {loginBusy ? t('txt_unlocking') : t('txt_unlock')}
+              </button>
+              <div className="or">{t('txt_or')}</div>
+              <button type="button" className="btn btn-secondary full" onClick={props.onGotoLogin} disabled={loginBusy}>
+                <ArrowLeft size={16} className="btn-icon" />
+                {t('txt_back_to_login')}
+              </button>
+            </>
+          ) : (
+            <>
           <label className="field">
             <span>{t('txt_email')}</span>
             <input
@@ -261,10 +296,17 @@ export default function AuthViews(props: AuthViewsProps) {
             {loginBusy ? t('txt_logging_in') : t('txt_log_in')}
           </button>
           <div className="or">{t('txt_or')}</div>
+          <button type="button" className="btn btn-secondary full" onClick={props.onSubmitPasskey} disabled={loginBusy || passkeyBusy}>
+            <KeyRound size={16} className="btn-icon" />
+            {passkeyBusy ? t('txt_logging_in') : t('txt_login_with_passkey')}
+          </button>
+          <div className="or">{t('txt_or')}</div>
           <button type="button" className="btn btn-secondary full" onClick={props.onGotoRegister} disabled={loginBusy}>
             <UserPlus size={16} className="btn-icon" />
             {t('txt_create_account')}
           </button>
+            </>
+          )}
         </form>
       </StandalonePageFrame>
     </div>

webapp/src/components/SettingsPage.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useState } from 'preact/hooks';
-import { Clipboard, KeyRound, RefreshCw, ShieldCheck, ShieldOff } from 'lucide-preact';
+import { Clipboard, KeyRound, RefreshCw, ShieldCheck, ShieldOff, Trash2 } from 'lucide-preact';
 import { copyTextToClipboard } from '@/lib/clipboard';
 import qrcode from 'qrcode-generator';
-import type { Profile } from '@/lib/types';
+import type { AccountPasskeyCredential, Profile } from '@/lib/types';
 import { AVAILABLE_LOCALES, getLocale, setLocale, t, type Locale } from '@/lib/i18n';
 import ConfirmDialog from '@/components/ConfirmDialog';
 
@@ -18,11 +18,23 @@ interface SettingsPageProps {
   onGetRecoveryCode: (masterPassword: string) => Promise<string>;
   onGetApiKey: (masterPassword: string) => Promise<string>;
   onRotateApiKey: (masterPassword: string) => Promise<string>;
+  onListAccountPasskeys: () => Promise<AccountPasskeyCredential[]>;
+  onCreateAccountPasskey: (name: string, masterPassword: string, directUnlock: boolean) => Promise<AccountPasskeyCredential>;
+  onEnableAccountPasskeyDirectUnlock: (id: string, masterPassword: string) => Promise<void>;
+  onDeleteAccountPasskey: (id: string, masterPassword: string) => Promise<void>;
   onLockTimeoutChange: (minutes: 0 | 1 | 5 | 15 | 30) => void;
   onSessionTimeoutActionChange: (action: 'lock' | 'logout') => void;
-  onNotify?: (type: 'success' | 'error', text: string) => void;
+  onNotify?: (type: 'success' | 'error' | 'warning', text: string) => void;
 }
 
+type MasterPasswordPromptAction =
+  | 'recovery'
+  | 'apiKey'
+  | 'rotateApiKey'
+  | 'createPasskey'
+  | 'enablePasskeyDirectUnlock'
+  | 'deletePasskey';
+
 const LOCK_TIMEOUT_OPTIONS = [
   { value: 1, labelKey: 'txt_timeout_1_minute' },
   { value: 5, labelKey: 'txt_timeout_5_minutes' },
@@ -74,9 +86,14 @@ export default function SettingsPage(props: SettingsPageProps) {
   const [totpLocked, setTotpLocked] = useState(props.totpEnabled);
   const [recoveryCode, setRecoveryCode] = useState('');
   const [apiKey, setApiKey] = useState('');
+  const [accountPasskeys, setAccountPasskeys] = useState<AccountPasskeyCredential[]>([]);
+  const [accountPasskeysLoading, setAccountPasskeysLoading] = useState(false);
+  const [accountPasskeyName, setAccountPasskeyName] = useState(t('txt_account_passkey'));
+  const [accountPasskeyDirectUnlock, setAccountPasskeyDirectUnlock] = useState(false);
+  const [accountPasskeyPromptId, setAccountPasskeyPromptId] = useState<string | null>(null);
   const [rotateApiKeyConfirmOpen, setRotateApiKeyConfirmOpen] = useState(false);
   const [apiKeyDialogOpen, setApiKeyDialogOpen] = useState(false);
-  const [masterPasswordPrompt, setMasterPasswordPrompt] = useState<null | 'recovery' | 'apiKey' | 'rotateApiKey'>(null);
+  const [masterPasswordPrompt, setMasterPasswordPrompt] = useState<MasterPasswordPromptAction | null>(null);
   const [masterPasswordPromptValue, setMasterPasswordPromptValue] = useState('');
   const [masterPasswordPromptSubmitting, setMasterPasswordPromptSubmitting] = useState(false);
   const [selectedLocale, setSelectedLocale] = useState<Locale>(() => getLocale());
@@ -97,6 +114,10 @@ export default function SettingsPage(props: SettingsPageProps) {
     setPasswordHint(props.profile.masterPasswordHint || '');
   }, [props.profile.masterPasswordHint]);
 
+  useEffect(() => {
+    void refreshAccountPasskeys();
+  }, [props.profile.id]);
+
   const qrDataUrl = useMemo(() => {
     const qr = qrcode(0, 'M');
     qr.addData(buildOtpUri(props.profile.email, secret));
@@ -115,14 +136,27 @@ export default function SettingsPage(props: SettingsPageProps) {
     }
   }
 
-  function openMasterPasswordPrompt(action: 'recovery' | 'apiKey' | 'rotateApiKey'): void {
+  async function refreshAccountPasskeys(): Promise<void> {
+    setAccountPasskeysLoading(true);
+    try {
+      setAccountPasskeys(await props.onListAccountPasskeys());
+    } catch (error) {
+      props.onNotify?.('error', error instanceof Error ? error.message : t('txt_account_passkeys_load_failed'));
+    } finally {
+      setAccountPasskeysLoading(false);
+    }
+  }
+
+  function openMasterPasswordPrompt(action: MasterPasswordPromptAction, credentialId?: string): void {
     setMasterPasswordPrompt(action);
+    setAccountPasskeyPromptId(credentialId || null);
     setMasterPasswordPromptValue('');
   }
 
   function closeMasterPasswordPrompt(): void {
     if (masterPasswordPromptSubmitting) return;
     setMasterPasswordPrompt(null);
+    setAccountPasskeyPromptId(null);
     setMasterPasswordPromptValue('');
   }
 
@@ -139,13 +173,25 @@ export default function SettingsPage(props: SettingsPageProps) {
         const key = await props.onGetApiKey(masterPassword);
         setApiKey(key);
         setApiKeyDialogOpen(true);
-      } else {
+      } else if (masterPasswordPrompt === 'rotateApiKey') {
         const key = await props.onRotateApiKey(masterPassword);
         setApiKey(key);
         setApiKeyDialogOpen(true);
         props.onNotify?.('success', t('txt_api_key_rotated'));
+      } else if (masterPasswordPrompt === 'createPasskey') {
+        await props.onCreateAccountPasskey(accountPasskeyName, masterPassword, accountPasskeyDirectUnlock);
+        await refreshAccountPasskeys();
+      } else if (masterPasswordPrompt === 'enablePasskeyDirectUnlock') {
+        if (!accountPasskeyPromptId) throw new Error(t('txt_account_passkey_not_found'));
+        await props.onEnableAccountPasskeyDirectUnlock(accountPasskeyPromptId, masterPassword);
+        await refreshAccountPasskeys();
+      } else if (masterPasswordPrompt === 'deletePasskey') {
+        if (!accountPasskeyPromptId) throw new Error(t('txt_account_passkey_not_found'));
+        await props.onDeleteAccountPasskey(accountPasskeyPromptId, masterPassword);
+        await refreshAccountPasskeys();
       }
       setMasterPasswordPrompt(null);
+      setAccountPasskeyPromptId(null);
       setMasterPasswordPromptValue('');
     } catch (error) {
       props.onNotify?.('error', error instanceof Error ? error.message : t('txt_master_password_is_required_2'));
@@ -159,7 +205,19 @@ export default function SettingsPage(props: SettingsPageProps) {
       ? t('txt_view_recovery_code')
       : masterPasswordPrompt === 'rotateApiKey'
         ? t('txt_rotate_api_key')
-        : t('txt_view_api_key');
+        : masterPasswordPrompt === 'createPasskey'
+          ? t('txt_add_account_passkey')
+          : masterPasswordPrompt === 'enablePasskeyDirectUnlock'
+            ? t('txt_enable_passkey_direct_unlock')
+            : masterPasswordPrompt === 'deletePasskey'
+              ? t('txt_delete_account_passkey')
+              : t('txt_view_api_key');
+
+  function accountPasskeyStatusText(credential: AccountPasskeyCredential): string {
+    if (credential.prfStatus === 0) return t('txt_direct_unlock');
+    if (credential.prfStatus === 1) return t('txt_login_only');
+    return t('txt_prf_not_supported');
+  }
 
   function formatDateTime(value: string | null | undefined): string {
     if (!value) return t('txt_dash');
@@ -345,6 +403,107 @@ export default function SettingsPage(props: SettingsPageProps) {
         </div>
       </section>
 
+      <section className="card settings-module account-passkeys-module">
+        <div className="settings-module-head">
+          <h3>{t('txt_account_passkeys')}</h3>
+          <button
+            type="button"
+            className="btn btn-secondary small"
+            disabled={accountPasskeysLoading}
+            title={t('txt_refresh')}
+            aria-label={t('txt_refresh')}
+            onClick={() => void refreshAccountPasskeys()}
+          >
+            <RefreshCw size={14} className="btn-icon" />
+            {t('txt_refresh')}
+          </button>
+        </div>
+        <div className="field-grid">
+          <label className="field">
+            <span>{t('txt_passkey_name')}</span>
+            <input
+              className="input"
+              maxLength={128}
+              value={accountPasskeyName}
+              placeholder={t('txt_account_passkey_name_placeholder')}
+              onInput={(e) => setAccountPasskeyName((e.currentTarget as HTMLInputElement).value)}
+            />
+          </label>
+          <div className="field account-passkey-mode-field">
+            <span>{t('txt_account_passkey_mode')}</span>
+            <label className="account-passkey-toggle">
+              <input
+                type="checkbox"
+                checked={accountPasskeyDirectUnlock}
+                onInput={(e) => setAccountPasskeyDirectUnlock((e.currentTarget as HTMLInputElement).checked)}
+              />
+              <span>{t('txt_account_passkey_direct_unlock_mode')}</span>
+            </label>
+            <div className="field-help">
+              {accountPasskeyDirectUnlock ? t('txt_account_passkey_direct_unlock_help') : t('txt_account_passkey_login_only_help')}
+            </div>
+          </div>
+        </div>
+        <div className="actions">
+          <button
+            type="button"
+            className="btn btn-primary"
+            disabled={masterPasswordPromptSubmitting}
+            onClick={() => openMasterPasswordPrompt('createPasskey')}
+          >
+            <KeyRound size={14} className="btn-icon" />
+            {t('txt_add_account_passkey')}
+          </button>
+        </div>
+        <div className="account-passkeys-list">
+          {accountPasskeysLoading ? (
+            <div className="settings-module-placeholder">
+              <RefreshCw size={20} />
+              <span>{t('txt_loading')}</span>
+            </div>
+          ) : accountPasskeys.length === 0 ? (
+            <div className="settings-module-placeholder">
+              <KeyRound size={20} />
+              <span>{t('txt_no_account_passkeys')}</span>
+            </div>
+          ) : (
+            accountPasskeys.map((credential) => (
+              <div key={credential.id} className="account-passkey-row">
+                <div className="account-passkey-main">
+                  <strong>{credential.name || t('txt_account_passkey')}</strong>
+                  <small>{t('txt_created_value', { value: formatDateTime(credential.creationDate) })}</small>
+                </div>
+                <span className={`account-passkey-status account-passkey-status-${credential.prfStatus}`}>
+                  {accountPasskeyStatusText(credential)}
+                </span>
+                <div className="actions account-passkey-actions">
+                  {credential.prfStatus === 1 && (
+                    <button
+                      type="button"
+                      className="btn btn-secondary small"
+                      disabled={masterPasswordPromptSubmitting}
+                      onClick={() => openMasterPasswordPrompt('enablePasskeyDirectUnlock', credential.id)}
+                    >
+                      <ShieldCheck size={14} className="btn-icon" />
+                      {t('txt_enable_passkey_direct_unlock')}
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    className="btn btn-danger small"
+                    disabled={masterPasswordPromptSubmitting}
+                    onClick={() => openMasterPasswordPrompt('deletePasskey', credential.id)}
+                  >
+                    <Trash2 size={14} className="btn-icon" />
+                    {t('txt_delete')}
+                  </button>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </section>
+
       <section className="settings-module sensitive-actions-module">
         <div className="sensitive-actions-grid">
           <div className="sensitive-action">