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

frontend/src/routes/settings/account/+page.svelte

@@ -13,6 +13,7 @@
 	import { toast } from 'svelte-sonner';
 	import AccountForm from './account-form.svelte';
 	import PasskeyList from './passkey-list.svelte';
+	import ProfilePictureSettings from '../../../lib/components/form/profile-picture-settings.svelte';
 	import RenamePasskeyModal from './rename-passkey-modal.svelte';
 
 	let { data } = $props();
@@ -36,6 +37,13 @@
 		return success;
 	}
 
+	async function updateProfilePicture(image: File) {
+		await userService
+			.updateCurrentUsersProfilePicture(image)
+			.then(() => toast.success('Profile picture updated successfully'))
+			.catch(axiosErrorToast);
+	}
+
 	async function createPasskey() {
 		try {
 			const opts = await webauthnService.getRegistrationOptions();
@@ -86,6 +94,12 @@
 	</Card.Root>
 </fieldset>
 
+<Card.Root>
+	<Card.Content class="pt-6">
+		<ProfilePictureSettings userId="me" isLdapUser={!!account.ldapId} callback={updateProfilePicture} />
+	</Card.Content>
+</Card.Root>
+
 <Card.Root>
 	<Card.Header>
 		<div class="flex items-center justify-between">

frontend/src/routes/settings/account/account-form.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 type { UserCreate } from '$lib/types/user.type';
 	import { createForm } from '$lib/utils/form-util';