mirror of
https://github.com/shuaiplus/nodewarden.git
synced 2026-06-20 13:00:39 +00:00
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.
This commit is contained in:
shuaiplus
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user