feat: add end session endpoint (#232)

frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { beforeNavigate } from '$app/navigation';
 	import { page } from '$app/stores';
-	import CollapsibleCard from '$lib/components/collapsible-card.svelte';
 	import { openConfirmDialog } from '$lib/components/confirm-dialog';
 	import CopyToClipboard from '$lib/components/copy-to-clipboard.svelte';
 	import { Button } from '$lib/components/ui/button';
@@ -17,6 +16,7 @@
 	import { slide } from 'svelte/transition';
 	import OidcForm from '../oidc-client-form.svelte';
 	import UserGroupSelection from '../user-group-selection.svelte';
+	import CollapsibleCard from '$lib/components/collapsible-card.svelte';
 
 	let { data } = $props();
 	let client = $state({
@@ -33,6 +33,7 @@
 		'OIDC Discovery URL': `https://${$page.url.hostname}/.well-known/openid-configuration`,
 		'Token URL': `https://${$page.url.hostname}/api/oidc/token`,
 		'Userinfo URL': `https://${$page.url.hostname}/api/oidc/userinfo`,
+		'Logout URL': `https://${$page.url.hostname}/api/oidc/end-session`,
 		'Certificate URL': `https://${$page.url.hostname}/.well-known/jwks.json`,
 		PKCE: client.pkceEnabled ? 'Enabled' : 'Disabled'
 	});

frontend/src/routes/settings/admin/oidc-clients/oidc-callback-url-input.svelte

@@ -7,12 +7,16 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
+		label,
 		callbackURLs = $bindable(),
 		error = $bindable(null),
+		allowEmpty = false,
 		...restProps
 	}: HTMLAttributes<HTMLDivElement> & {
+		label: string;
 		callbackURLs: string[];
 		error?: string | null;
+		allowEmpty?: boolean;
 		children?: Snippet;
 	} = $props();
 
@@ -20,12 +24,12 @@
 </script>
 
 <div {...restProps}>
-	<FormInput label="Callback URLs">
+	<FormInput {label}>
 		<div class="flex flex-col gap-y-2">
 			{#each callbackURLs as _, i}
 				<div class="flex gap-x-2">
 					<Input data-testid={`callback-url-${i + 1}`} bind:value={callbackURLs[i]} />
-					{#if callbackURLs.length > 1}
+					{#if callbackURLs.length > 1 || allowEmpty}
 						<Button
 							variant="outline"
 							size="sm"
@@ -49,7 +53,7 @@
 			on:click={() => (callbackURLs = [...callbackURLs, ''])}
 		>
 			<LucidePlus class="mr-1 h-4 w-4" />
-			Add another
+			{callbackURLs.length === 0 ? 'Add' : 'Add another'}
 		</Button>
 	{/if}
 </div>

frontend/src/routes/settings/admin/oidc-clients/oidc-client-form.svelte

@@ -10,7 +10,7 @@
 		OidcClientCreateWithLogo
 	} from '$lib/types/oidc.type';
 	import { createForm } from '$lib/utils/form-util';
-	import { set, z } from 'zod';
+	import { z } from 'zod';
 	import OidcCallbackUrlInput from './oidc-callback-url-input.svelte';
 
 	let {
@@ -30,6 +30,7 @@
 	const client: OidcClientCreate = {
 		name: existingClient?.name || '',
 		callbackURLs: existingClient?.callbackURLs || [''],
+		logoutCallbackURLs: existingClient?.logoutCallbackURLs || [],
 		isPublic: existingClient?.isPublic || false,
 		pkceEnabled: existingClient?.isPublic == true || existingClient?.pkceEnabled || false
 	};
@@ -37,6 +38,7 @@
 	const formSchema = z.object({
 		name: z.string().min(2).max(50),
 		callbackURLs: z.array(z.string()).nonempty(),
+		logoutCallbackURLs: z.array(z.string()),
 		isPublic: z.boolean(),
 		pkceEnabled: z.boolean()
 	});
@@ -78,11 +80,20 @@
 <form onsubmit={onSubmit}>
 	<div class="grid grid-cols-2 gap-x-3 gap-y-7 sm:flex-row">
 		<FormInput label="Name" class="w-full" bind:input={$inputs.name} />
+		<div></div>
 		<OidcCallbackUrlInput
+			label="Callback URLs"
 			class="w-full"
 			bind:callbackURLs={$inputs.callbackURLs.value}
 			bind:error={$inputs.callbackURLs.error}
 		/>
+		<OidcCallbackUrlInput
+			label="Logout Callback URLs"
+			class="w-full"
+			allowEmpty
+			bind:callbackURLs={$inputs.logoutCallbackURLs.value}
+			bind:error={$inputs.logoutCallbackURLs.error}
+		/>
 		<CheckboxWithLabel
 			id="public-client"
 			label="Public Client"
@@ -104,7 +115,7 @@
 		<Label for="logo">Logo</Label>
 		<div class="mt-2 flex items-end gap-3">
 			{#if logoDataURL}
-				<div class="h-32 w-32 rounded-2xl bg-muted p-3">
+				<div class="bg-muted h-32 w-32 rounded-2xl p-3">
 					<img
 						class="m-auto max-h-full max-w-full object-contain"
 						src={logoDataURL}