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/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>