mirror of
https://github.com/pocket-id/pocket-id.git
synced 2026-10-03 16:29:03 +02:00
51 lines
1.8 KiB
Svelte
51 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
import * as Avatar from '#lib/components/ui/avatar/index.ts';
|
|
import * as DropdownMenu from '#lib/components/ui/dropdown-menu/index.ts';
|
|
import { m } from '#lib/paraglide/messages.js';
|
|
import WebAuthnService from '#lib/services/webauthn-service.ts';
|
|
import unsavedChangesStoreSvelte from '#lib/stores/unsaved-changes-store.svelte.ts';
|
|
import userStore from '#lib/stores/user-store.ts';
|
|
import { cachedProfilePicture } from '#lib/utils/cached-image-util.ts';
|
|
import { LucideLogOut, LucideUser } from '@lucide/svelte';
|
|
|
|
const webauthnService = new WebAuthnService();
|
|
|
|
async function logout() {
|
|
if (!unsavedChangesStoreSvelte.hasChanges) {
|
|
await webauthnService.logout();
|
|
}
|
|
|
|
// Navigate regardless of unsaved changes status
|
|
// If there are unsaved changes, the save changes bar will shake and navigation will be canceled
|
|
goto('/login');
|
|
}
|
|
</script>
|
|
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger aria-label={m.my_account()}
|
|
><Avatar.Root class="size-9">
|
|
<Avatar.Image src={cachedProfilePicture.getUrl($userStore!.id)} />
|
|
</Avatar.Root></DropdownMenu.Trigger
|
|
>
|
|
<DropdownMenu.Content class="min-w-40" align="end">
|
|
<DropdownMenu.Label class="font-normal">
|
|
<div class="flex flex-col space-y-1">
|
|
<p class="text-sm leading-none font-medium">
|
|
{$userStore?.displayName}
|
|
</p>
|
|
<p class="text-muted-foreground text-xs leading-none">{$userStore?.email}</p>
|
|
</div>
|
|
</DropdownMenu.Label>
|
|
<DropdownMenu.Separator />
|
|
<DropdownMenu.Group>
|
|
<DropdownMenu.Item onclick={() => goto('/settings/account')}
|
|
><LucideUser class="mr-2 size-4" /> {m.my_account()}</DropdownMenu.Item
|
|
>
|
|
<DropdownMenu.Item onclick={logout}
|
|
><LucideLogOut class="mr-2 size-4" /> {m.logout()}</DropdownMenu.Item
|
|
>
|
|
</DropdownMenu.Group>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|