feat: add ability to set default profile picture (#1061)

Co-authored-by: Alessandro (Ale) Segala <43508+ItalyPaleAle@users.noreply.github.com>

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

@@ -55,9 +55,13 @@
 		disabled,
 		isLoading = false,
 		autofocus = false,
+		onclick,
+		usePromiseLoading = false,
 		children,
 		...restProps
-	}: ButtonProps = $props();
+	}: ButtonProps & {
+		usePromiseLoading?: boolean;
+	} = $props();
 
 	onMount(async () => {
 		// Using autofocus can be bad for a11y, but in the case of Pocket ID is only used responsibly in places where there are not many choices, and on buttons only where there's descriptive text
@@ -66,6 +70,19 @@
 			setTimeout(() => ref?.focus(), 100);
 		}
 	});
+
+	async function handleOnClick(event: any) {
+		if (usePromiseLoading && onclick) {
+			isLoading = true;
+			try {
+				await onclick(event);
+			} finally {
+				isLoading = false;
+			}
+		} else {
+			onclick?.(event);
+		}
+	}
 </script>
 
 {#if href}
@@ -91,6 +108,7 @@
 		class={cn(buttonVariants({ variant, size }), className)}
 		{type}
 		disabled={disabled || isLoading}
+		onclick={handleOnClick}
 		{...restProps}
 	>
 		{#if isLoading}

frontend/src/lib/services/app-config-service.ts

@@ -1,5 +1,12 @@
+import userStore from '$lib/stores/user-store';
 import type { AllAppConfig, AppConfigRawResponse } from '$lib/types/application-configuration';
-import { cachedApplicationLogo, cachedBackgroundImage } from '$lib/utils/cached-image-util';
+import {
+	cachedApplicationLogo,
+	cachedBackgroundImage,
+	cachedDefaultProfilePicture,
+	cachedProfilePicture
+} from '$lib/utils/cached-image-util';
+import { get } from 'svelte/store';
 import APIService from './api-service';
 
 export default class AppConfigService extends APIService {
@@ -24,14 +31,14 @@ export default class AppConfigService extends APIService {
 
 	updateFavicon = async (favicon: File) => {
 		const formData = new FormData();
-		formData.append('file', favicon!);
+		formData.append('file', favicon);
 
 		await this.api.put(`/application-images/favicon`, formData);
-	}
+	};
 
 	updateLogo = async (logo: File, light = true) => {
 		const formData = new FormData();
-		formData.append('file', logo!);
+		formData.append('file', logo);
 
 		await this.api.put(`/application-images/logo`, formData, {
 			params: { light }
@@ -39,6 +46,14 @@ export default class AppConfigService extends APIService {
 		cachedApplicationLogo.bustCache(light);
 	};
 
+	updateDefaultProfilePicture = async (defaultProfilePicture: File) => {
+		const formData = new FormData();
+		formData.append('file', defaultProfilePicture);
+
+		await this.api.put(`/application-images/default-profile-picture`, formData);
+		cachedDefaultProfilePicture.bustCache();
+	};
+
 	updateBackgroundImage = async (backgroundImage: File) => {
 		const formData = new FormData();
 		formData.append('file', backgroundImage!);
@@ -47,6 +62,12 @@ export default class AppConfigService extends APIService {
 		cachedBackgroundImage.bustCache();
 	};
 
+	deleteDefaultProfilePicture = async () => {
+		await this.api.delete('/application-images/default-profile-picture');
+		cachedDefaultProfilePicture.bustCache();
+		cachedProfilePicture.bustCache(get(userStore)!.id);
+	};
+
 	sendTestEmail = async () => {
 		await this.api.post('/application-configuration/test-email');
 	};

frontend/src/lib/utils/cached-image-util.ts

@@ -20,6 +20,13 @@ export const cachedApplicationLogo: CachableImage = {
 	}
 };
 
+export const cachedDefaultProfilePicture: CachableImage = {
+	getUrl: () =>
+		getCachedImageUrl(new URL('/api/application-images/default-profile-picture', window.location.origin)),
+	bustCache: () =>
+		bustImageCache(new URL('/api/application-images/default-profile-picture', window.location.origin))
+};
+
 export const cachedBackgroundImage: CachableImage = {
 	getUrl: () =>
 		getCachedImageUrl(new URL('/api/application-images/background', window.location.origin)),