feat(manacore): integrate PasskeyManager in settings page

- Add passkey management methods to manacore authStore (register, list,
  delete, rename)
- PasskeyManager component in settings between Account and My Data
- Passkeys loaded on mount alongside credits

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-03-26 11:00:59 +01:00
parent c4d55209a4
commit ac4bacada2
2 changed files with 44 additions and 0 deletions

View file

@ -138,6 +138,30 @@ export const authStore = {
}
},
async registerPasskey(friendlyName?: string) {
const authService = getAuthService();
if (!authService) return { success: false, error: 'Auth not available' };
return authService.registerPasskey(friendlyName);
},
async listPasskeys() {
const authService = getAuthService();
if (!authService) return [];
return authService.listPasskeys();
},
async deletePasskey(passkeyId: string) {
const authService = getAuthService();
if (!authService) return { success: false, error: 'Auth not available' };
return authService.deletePasskey(passkeyId);
},
async renamePasskey(passkeyId: string, friendlyName: string) {
const authService = getAuthService();
if (!authService) return { success: false, error: 'Auth not available' };
return authService.renamePasskey(passkeyId, friendlyName);
},
/**
* Sign in with email and password
*/

View file

@ -1,6 +1,7 @@
<script lang="ts">
import { onMount } from 'svelte';
import { Button, Input, Card, PageHeader, GlobalSettingsSection } from '@manacore/shared-ui';
import { PasskeyManager } from '@manacore/shared-auth-ui';
import { authStore } from '$lib/stores/auth.svelte';
import { creditsService } from '$lib/api/credits';
import type { CreditBalance } from '$lib/api/credits';
@ -10,6 +11,7 @@
import { ManaCoreEvents } from '@manacore/shared-utils/analytics';
let loading = $state(true);
let passkeys = $state<any[]>([]);
let savingProfile = $state(false);
let profileSuccess = $state(false);
let profileError = $state<string | null>(null);
@ -25,6 +27,7 @@
if (authStore.isAuthenticated) {
try {
creditBalance = await creditsService.getBalance();
passkeys = await authStore.listPasskeys();
// Load user settings from server
await userSettings.load();
} catch (e) {
@ -274,6 +277,23 @@
</div>
</Card>
<!-- Passkeys Section -->
<Card>
<div class="p-6">
<PasskeyManager
{passkeys}
passkeyAvailable={authStore.isPasskeyAvailable()}
onRegister={(name) => authStore.registerPasskey(name)}
onDelete={(id) => authStore.deletePasskey(id)}
onRename={(id, name) => authStore.renamePasskey(id, name)}
onRefresh={async () => {
passkeys = await authStore.listPasskeys();
}}
primaryColor="#6366f1"
/>
</div>
</Card>
<!-- My Data & Danger Zone -->
<Card>
<div class="p-6">