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

frontend/src/lib/components/form/checkbox-with-label.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Checkbox } from './ui/checkbox';
-	import { Label } from './ui/label';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import { Label } from '$lib/components/ui/label';
 
 	let {
 		id,
@@ -31,7 +31,7 @@
 			{label}
 		</Label>
 		{#if description}
-			<p class="text-[0.8rem] text-muted-foreground">
+			<p class="text-muted-foreground text-[0.8rem]">
 				{description}
 			</p>
 		{/if}

frontend/src/lib/components/form/custom-claims-input.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import FormInput from '$lib/components/form-input.svelte';
+	import FormInput from '$lib/components/form/form-input.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
 	import CustomClaimService from '$lib/services/custom-claim-service';

frontend/src/lib/components/form/file-input.svelte

@@ -2,7 +2,7 @@
 	import { cn } from '$lib/utils/style';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type { VariantProps } from 'tailwind-variants';
-	import type { buttonVariants } from './ui/button';
+	import type { buttonVariants } from '$lib/components/ui/button';
 
 	let {
 		id,

frontend/src/lib/components/form/form-input.svelte

@@ -3,7 +3,7 @@
 	import type { FormInput } from '$lib/utils/form-util';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { Input, type FormInputEvent } from './ui/input';
+	import { Input, type FormInputEvent } from '$lib/components/ui/input';
 
 	let {
 		input = $bindable(),

frontend/src/lib/components/form/profile-picture-settings.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import FileInput from '$lib/components/form/file-input.svelte';
+	import * as Avatar from '$lib/components/ui/avatar';
+	import { LucideLoader, LucideUpload } from 'lucide-svelte';
+
+	let {
+		userId,
+		isLdapUser = false,
+		callback
+	}: {
+		userId: string;
+		isLdapUser?: boolean;
+		callback: (image: File) => Promise<void>;
+	} = $props();
+
+	let isLoading = $state(false);
+
+	let imageDataURL = $state(`/api/users/${userId}/profile-picture.png`);
+
+	async function onImageChange(e: Event) {
+		const file = (e.target as HTMLInputElement).files?.[0] || null;
+		if (!file) return;
+
+		isLoading = true;
+
+		const reader = new FileReader();
+		reader.onload = (event) => {
+			imageDataURL = event.target?.result as string;
+		};
+		reader.readAsDataURL(file);
+
+		await callback(file).catch(() => {
+			imageDataURL = `/api/users/${userId}/profile-picture.png`;
+		});
+		isLoading = false;
+	}
+</script>
+
+<div class="flex gap-5">
+	<div class="flex w-full flex-col justify-between gap-5 sm:flex-row">
+		<div>
+			<h3 class="text-xl font-semibold">Profile Picture</h3>
+			{#if isLdapUser}
+				<p class="text-muted-foreground mt-1 text-sm">
+					The profile picture is managed by the LDAP server and cannot be changed here.
+				</p>
+			{:else}
+				<p class="text-muted-foreground mt-1 text-sm">
+					Click on the profile picture to upload a custom one from your files.
+				</p>
+				<p class="text-muted-foreground mt-1 text-sm">The image should be in PNG or JPEG format.</p>
+			{/if}
+		</div>
+		{#if isLdapUser}
+			<Avatar.Root class="h-24 w-24">
+				<Avatar.Image class="object-cover" src={imageDataURL} />
+			</Avatar.Root>
+		{:else}
+			<FileInput
+				id="profile-picture-input"
+				variant="secondary"
+				accept="image/png, image/jpeg"
+				onchange={onImageChange}
+			>
+				<div class="group relative h-28 w-28 rounded-full">
+					<Avatar.Root class="h-full w-full transition-opacity duration-200">
+						<Avatar.Image
+							class="object-cover group-hover:opacity-10 {isLoading ? 'opacity-10' : ''}"
+							src={imageDataURL}
+						/>
+					</Avatar.Root>
+					<div class="absolute inset-0 flex items-center justify-center">
+						{#if isLoading}
+							<LucideLoader class="h-5 w-5 animate-spin" />
+						{:else}
+							<LucideUpload class="h-5 w-5 opacity-0 transition-opacity group-hover:opacity-100" />
+						{/if}
+					</div>
+				</div>
+			</FileInput>
+		{/if}
+	</div>
+</div>

frontend/src/lib/components/header/header-avatar.svelte

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

frontend/src/lib/components/header/header.svelte

@@ -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'}">

frontend/src/lib/components/ui/avatar/avatar.svelte

@@ -11,7 +11,7 @@
 
 <AvatarPrimitive.Root
 	{delayMs}
-	class={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+	class={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border', className)}
 	{...$$restProps}
 >
 	<slot />