From 9872608d61a486f7b775f314d9392e0620bcd891 Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Thu, 3 Jul 2025 10:57:56 +0200
Subject: [PATCH] fix: allow profile picture update even if "allow own account
 edit" enabled

---
 .../form/profile-picture-settings.svelte      | 24 ++++++++---
 .../src/routes/settings/account/+page.svelte  | 42 +++++++++----------
 .../settings/account/account-form.svelte      | 42 ++++++++++---------
 3 files changed, 63 insertions(+), 45 deletions(-)

diff --git a/frontend/src/lib/components/form/profile-picture-settings.svelte b/frontend/src/lib/components/form/profile-picture-settings.svelte
index 5160582d..a2ab355c 100644
--- a/frontend/src/lib/components/form/profile-picture-settings.svelte
+++ b/frontend/src/lib/components/form/profile-picture-settings.svelte
@@ -3,6 +3,7 @@
 	import * as Avatar from '$lib/components/ui/avatar';
 	import Button from '$lib/components/ui/button/button.svelte';
 	import { m } from '$lib/paraglide/messages';
+	import appConfigStore from '$lib/stores/application-configuration-store';
 	import { cachedProfilePicture } from '$lib/utils/cached-image-util';
 	import { LucideLoader, LucideRefreshCw, LucideUpload } from '@lucide/svelte';
 	import { onMount } from 'svelte';
@@ -54,8 +55,16 @@
 				label: m.reset(),
 				action: async () => {
 					isLoading = true;
-					await resetCallback().catch();
-					isLoading = false;
+					try {
+						await resetCallback();
+						await fetch(cachedProfilePicture.getUrl(userId, { skipCache: true }))
+							.then((response) => response.blob())
+							.then((blob) => {
+								imageDataURL = URL.createObjectURL(blob);
+							});
+					} finally {
+						isLoading = false;
+					}
 				}
 			}
 		});
@@ -64,7 +73,7 @@
 
 <div class="flex flex-col items-center gap-6 sm:flex-row">
 	<div class="shrink-0">
-		{#if isLdapUser}
+		{#if isLdapUser && $appConfigStore.ldapEnabled}
 			<Avatar.Root class="size-24">
 				<Avatar.Image class="object-cover" src={imageDataURL} />
 			</Avatar.Root>
@@ -96,7 +105,7 @@
 
 	<div class="grow">
 		<h3 class="font-medium">{m.profile_picture()}</h3>
-		{#if isLdapUser}
+		{#if isLdapUser && $appConfigStore.ldapEnabled}
 			<p class="text-muted-foreground text-sm">
 				{m.profile_picture_is_managed_by_ldap_server()}
 			</p>
@@ -105,7 +114,12 @@
 				{m.click_profile_picture_to_upload_custom()}
 			</p>
 			<p class="text-muted-foreground mb-2 text-sm">{m.image_should_be_in_format()}</p>
-			<Button variant="outline" size="sm" onclick={onReset} disabled={isLoading || isLdapUser}>
+			<Button
+				variant="outline"
+				size="sm"
+				onclick={onReset}
+				disabled={isLoading || (isLdapUser && $appConfigStore.ldapEnabled)}
+			>
 				<LucideRefreshCw class="mr-2 size-4" />
 				{m.reset_to_default()}
 			</Button>
diff --git a/frontend/src/routes/settings/account/+page.svelte b/frontend/src/routes/settings/account/+page.svelte
index 9aa544dc..7db9749d 100644
--- a/frontend/src/routes/settings/account/+page.svelte
+++ b/frontend/src/routes/settings/account/+page.svelte
@@ -34,6 +34,10 @@
 	const userService = new UserService();
 	const webauthnService = new WebAuthnService();
 
+	const userInfoInputDisabled = $derived(
+		!$appConfigStore.allowOwnAccountEdit || (!!account.ldapId && $appConfigStore.ldapEnabled)
+	);
+
 	async function updateAccount(user: UserCreate) {
 		let success = true;
 		await userService
@@ -118,27 +122,23 @@
 </div>
 
 <!-- Account details card -->
-<fieldset
-	disabled={!$appConfigStore.allowOwnAccountEdit ||
-		(!!account.ldapId && $appConfigStore.ldapEnabled)}
->
-	<Card.Root>
-		<Card.Header>
-			<Card.Title>
-				<UserCog class="text-primary/80 size-5" />
-				{m.account_details()}
-			</Card.Title>
-		</Card.Header>
-		<Card.Content>
-			<AccountForm
-				{account}
-				userId={account.id}
-				callback={updateAccount}
-				isLdapUser={!!account.ldapId}
-			/>
-		</Card.Content>
-	</Card.Root>
-</fieldset>
+<Card.Root>
+	<Card.Header>
+		<Card.Title>
+			<UserCog class="text-primary/80 size-5" />
+			{m.account_details()}
+		</Card.Title>
+	</Card.Header>
+	<Card.Content>
+		<AccountForm
+			{account}
+			userId={account.id}
+			callback={updateAccount}
+			isLdapUser={!!account.ldapId}
+			{userInfoInputDisabled}
+		/>
+	</Card.Content>
+</Card.Root>
 
 <!-- Passkey management card -->
 <div>
diff --git a/frontend/src/routes/settings/account/account-form.svelte b/frontend/src/routes/settings/account/account-form.svelte
index 13441b2b..f89bdde7 100644
--- a/frontend/src/routes/settings/account/account-form.svelte
+++ b/frontend/src/routes/settings/account/account-form.svelte
@@ -15,12 +15,14 @@
 		callback,
 		account,
 		userId,
-		isLdapUser = false
+		isLdapUser = false,
+		userInfoInputDisabled = false
 	}: {
 		account: UserCreate;
 		userId: string;
 		callback: (user: UserCreate) => Promise<boolean>;
 		isLdapUser?: boolean;
+		userInfoInputDisabled?: boolean;
 	} = $props();
 
 	let isLoading = $state(false);
@@ -78,26 +80,28 @@
 	<hr class="border-border" />
 
 	<!-- User Information -->
-	<div>
-		<div class="flex flex-col gap-3 sm:flex-row">
-			<div class="w-full">
-				<FormInput label={m.first_name()} bind:input={$inputs.firstName} />
+	<fieldset disabled={userInfoInputDisabled}>
+		<div>
+			<div class="flex flex-col gap-3 sm:flex-row">
+				<div class="w-full">
+					<FormInput label={m.first_name()} bind:input={$inputs.firstName} />
+				</div>
+				<div class="w-full">
+					<FormInput label={m.last_name()} bind:input={$inputs.lastName} />
+				</div>
 			</div>
-			<div class="w-full">
-				<FormInput label={m.last_name()} bind:input={$inputs.lastName} />
+			<div class="mt-3 flex flex-col gap-3 sm:flex-row">
+				<div class="w-full">
+					<FormInput label={m.email()} bind:input={$inputs.email} />
+				</div>
+				<div class="w-full">
+					<FormInput label={m.username()} bind:input={$inputs.username} />
+				</div>
 			</div>
 		</div>
-		<div class="mt-3 flex flex-col gap-3 sm:flex-row">
-			<div class="w-full">
-				<FormInput label={m.email()} bind:input={$inputs.email} />
-			</div>
-			<div class="w-full">
-				<FormInput label={m.username()} bind:input={$inputs.username} />
-			</div>
-		</div>
-	</div>
 
-	<div class="flex justify-end pt-2">
-		<Button {isLoading} type="submit">{m.save()}</Button>
-	</div>
+		<div class="flex justify-end pt-2">
+			<Button {isLoading} type="submit">{m.save()}</Button>
+		</div>
+	</fieldset>
 </form>