mirrors/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-02-10 01:29:17 +00:00
Code Activity

feat: add ability to upload a profile picture (#244)

Browse Source
This commit is contained in:
Elias Schneider
2025-02-19 14:28:45 +01:00
committed by GitHub
parent dca9e7a11a
commit 652ee6ad5d
38 changed files with 500 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/lib/components/header/header-avatar.svelte
View File

@@ -3,22 +3,10 @@
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
import WebAuthnService from '$lib/services/webauthn-service';
import userStore from '$lib/stores/user-store';
import { createSHA256hash } from '$lib/utils/crypto-util';
import { LucideLogOut, LucideUser } from 'lucide-svelte';
const webauthnService = new WebAuthnService();
let initials = $derived(
($userStore!.firstName.charAt(0) + $userStore!.lastName?.charAt(0)).toUpperCase()
);
let gravatarURL: string | undefined = $state();
if ($userStore) {
createSHA256hash($userStore.email).then((email) => {
gravatarURL = `https://www.gravatar.com/avatar/${email}?d=404`;
});
}
async function logout() {
await webauthnService.logout();
window.location.reload();
@@ -28,8 +16,7 @@
<DropdownMenu.Root>
<DropdownMenu.Trigger
><Avatar.Root class="h-9 w-9">
<Avatar.Image src={gravatarURL} />
<Avatar.Fallback>{initials}</Avatar.Fallback>
<Avatar.Image src="/api/users/me/profile-picture.png" />
</Avatar.Root></DropdownMenu.Trigger
>
<DropdownMenu.Content class="min-w-40" align="start">
@@ -39,7 +26,7 @@
{$userStore?.firstName}
{$userStore?.lastName}
</p>
<p class="text-xs leading-none text-muted-foreground">{$userStore?.email}</p>
<p class="text-muted-foreground text-xs leading-none">{$userStore?.email}</p>
</div>
</DropdownMenu.Label>
<DropdownMenu.Separator />

8
frontend/src/lib/components/header/header.svelte
View File

@@ -5,9 +5,11 @@
import Logo from '../logo.svelte';
import HeaderAvatar from './header-avatar.svelte';
const authUrls = ['/authorize', '/login', '/logout'];
let isAuthPage = $derived(!$page.error && authUrls.includes($page.url.pathname));
const authUrls = [/^\/authorize$/, /^\/login(?:\/.*)?$/, /^\/logout$/];
let isAuthPage = $derived(
!$page.error && authUrls.some((pattern) => pattern.test($page.url.pathname))
);
</script>
<div class=" w-full {isAuthPage ? 'absolute top-0 z-10 mt-4' : 'border-b'}">