feat: add email logo customization (#1150)

frontend/messages/en.json

@@ -311,6 +311,7 @@
 	"favicon": "Favicon",
 	"light_mode_logo": "Light Mode Logo",
 	"dark_mode_logo": "Dark Mode Logo",
+	"email_logo": "Email Logo",
 	"background_image": "Background Image",
 	"language": "Language",
 	"reset_profile_picture_question": "Reset profile picture?",

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

@@ -4,6 +4,7 @@ import {
 	cachedApplicationLogo,
 	cachedBackgroundImage,
 	cachedDefaultProfilePicture,
+	cachedEmailLogo,
 	cachedProfilePicture
 } from '$lib/utils/cached-image-util';
 import { get } from 'svelte/store';
@@ -46,6 +47,14 @@ export default class AppConfigService extends APIService {
 		cachedApplicationLogo.bustCache(light);
 	};
 
+	updateEmailLogo = async (emailLogo: File) => {
+		const formData = new FormData();
+		formData.append('file', emailLogo);
+
+		await this.api.put(`/application-images/email`, formData);
+		cachedEmailLogo.bustCache();
+	};
+
 	updateDefaultProfilePicture = async (defaultProfilePicture: File) => {
 		const formData = new FormData();
 		formData.append('file', defaultProfilePicture);

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

@@ -20,6 +20,11 @@ export const cachedApplicationLogo: CachableImage = {
 	}
 };
 
+export const cachedEmailLogo: CachableImage = {
+	getUrl: () => getCachedImageUrl(new URL('/api/application-images/email', window.location.origin)),
+	bustCache: () => bustImageCache(new URL('/api/application-images/email', window.location.origin))
+};
+
 export const cachedDefaultProfilePicture: CachableImage = {
 	getUrl: () =>
 		getCachedImageUrl(

frontend/src/routes/settings/admin/application-configuration/+page.svelte

@@ -42,6 +42,7 @@
 	async function updateImages(
 		logoLight: File | undefined,
 		logoDark: File | undefined,
+		logoEmail: File | undefined,
 		defaultProfilePicture: File | null | undefined,
 		backgroundImage: File | undefined,
 		favicon: File | undefined
@@ -56,6 +57,10 @@
 			? appConfigService.updateLogo(logoDark, false)
 			: Promise.resolve();
 
+		const emailLogoPromise = logoEmail
+			? appConfigService.updateEmailLogo(logoEmail)
+			: Promise.resolve();
+
 		const defaultProfilePicturePromise =
 			defaultProfilePicture === null
 				? appConfigService.deleteDefaultProfilePicture()
@@ -70,6 +75,7 @@
 		await Promise.all([
 			lightLogoPromise,
 			darkLogoPromise,
+			emailLogoPromise,
 			defaultProfilePicturePromise,
 			backgroundImagePromise,
 			faviconPromise

frontend/src/routes/settings/admin/application-configuration/update-application-images.svelte

@@ -4,7 +4,8 @@
 	import {
 		cachedApplicationLogo,
 		cachedBackgroundImage,
-		cachedDefaultProfilePicture
+		cachedDefaultProfilePicture,
+		cachedEmailLogo
 	} from '$lib/utils/cached-image-util';
 	import ApplicationImage from './application-image.svelte';
 
@@ -14,6 +15,7 @@
 		callback: (
 			logoLight: File | undefined,
 			logoDark: File | undefined,
+			logoEmail: File | undefined,
 			defaultProfilePicture: File | null | undefined,
 			backgroundImage: File | undefined,
 			favicon: File | undefined
@@ -22,6 +24,7 @@
 
 	let logoLight = $state<File | undefined>();
 	let logoDark = $state<File | undefined>();
+	let logoEmail = $state<File | undefined>();
 	let defaultProfilePicture = $state<File | null | undefined>();
 	let backgroundImage = $state<File | undefined>();
 	let favicon = $state<File | undefined>();
@@ -54,6 +57,15 @@
 		imageURL={cachedApplicationLogo.getUrl(false)}
 		forceColorScheme="dark"
 	/>
+	<ApplicationImage
+		id="logo-email"
+		imageClass="size-24"
+		label={m.email_logo()}
+		bind:image={logoEmail}
+		imageURL={cachedEmailLogo.getUrl()}
+		accept="image/png, image/jpeg"
+		forceColorScheme="light"
+	/>
 	<ApplicationImage
 		id="default-profile-picture"
 		imageClass="size-24"
@@ -75,7 +87,8 @@
 	<Button
 		class="mt-5"
 		usePromiseLoading
-		onclick={() => callback(logoLight, logoDark, defaultProfilePicture, backgroundImage, favicon)}
+		onclick={() =>
+			callback(logoLight, logoDark, logoEmail, defaultProfilePicture, backgroundImage, favicon)}
 		>{m.save()}</Button
 	>
 </div>