feat: implement OAuth Client ID Metadata Document (#1525) (#1526)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

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

@@ -9,6 +9,7 @@
 	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { LucideInfo } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
+	import AppConfigDynamicClientsForm from './forms/app-config-dynamic-clients-form.svelte';
 	import AppConfigEmailForm from './forms/app-config-email-form.svelte';
 	import AppConfigGeneralForm from './forms/app-config-general-form.svelte';
 	import AppConfigLdapForm from './forms/app-config-ldap-form.svelte';
@@ -110,6 +111,9 @@
 			<Tabs.Trigger value="ldap">
 				{m.ldap()}
 			</Tabs.Trigger>
+			<Tabs.Trigger value="oidc">
+				{m.oidc()}
+			</Tabs.Trigger>
 			<Tabs.Trigger value="images">
 				{m.images()}
 			</Tabs.Trigger>
@@ -165,6 +169,18 @@
 		</Card.Root>
 	</Tabs.Content>
 
+	<Tabs.Content value="oidc" id="application-configuration-oidc">
+		<Card.Root>
+			<Card.Header>
+				<Card.Title>{m.client_id_metadata_documents()}</Card.Title>
+				<Card.Description>{m.client_id_metadata_documents_description()}</Card.Description>
+			</Card.Header>
+			<Card.Content>
+				<AppConfigDynamicClientsForm {appConfig} callback={updateAppConfig} />
+			</Card.Content>
+		</Card.Root>
+	</Tabs.Content>
+
 	<Tabs.Content value="images" id="application-configuration-images">
 		<Card.Root>
 			<Card.Header>

frontend/src/routes/settings/admin/application-configuration/forms/app-config-dynamic-clients-form.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import FormInput from '$lib/components/form/form-input.svelte';
+	import UrlListInput from '$lib/components/form/url-list-input.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { m } from '$lib/paraglide/messages';
+	import appConfigStore from '$lib/stores/application-configuration-store';
+	import type { AllAppConfig } from '$lib/types/application-configuration.type';
+	import { preventDefault } from '$lib/utils/event-util';
+	import { toast } from 'svelte-sonner';
+
+	let {
+		appConfig,
+		callback
+	}: {
+		appConfig: AllAppConfig;
+		callback: (updatedConfig: Partial<AllAppConfig>) => Promise<void>;
+	} = $props();
+
+	let cimdUrlAllowlist: string[] = $derived(appConfig.cimdUrlAllowlist || []);
+	let isLoading = $state(false);
+
+	async function onSubmit() {
+		isLoading = true;
+
+		const update: Partial<AllAppConfig> = {
+			cimdUrlAllowlist: cimdUrlAllowlist.filter((u) => u.trim() !== '')
+		};
+
+		await callback(update).finally(() => (isLoading = false));
+		toast.success(m.application_configuration_updated_successfully());
+	}
+</script>
+
+<form onsubmit={preventDefault(onSubmit)}>
+	<fieldset class="flex flex-col gap-5" disabled={$appConfigStore.uiConfigDisabled}>
+		<FormInput label={m.cimd_url_allowlist()} description={m.cimd_url_allowlist_description()}>
+			<UrlListInput bind:urls={cimdUrlAllowlist} testIdPrefix="cimd-url-allowlist" />
+		</FormInput>
+
+		<div class="flex justify-end pt-2">
+			<Button {isLoading} type="submit">{m.save()}</Button>
+		</div>
+	</fieldset>
+</form>