feat: add support for multiple callback urls

frontend/src/routes/authorize/+page.server.ts

@@ -11,6 +11,7 @@ export const load: PageServerLoad = async ({ url, cookies }) => {
 		scope: url.searchParams.get('scope')!,
 		nonce: url.searchParams.get('nonce') || undefined,
 		state: url.searchParams.get('state')!,
+		callbackURL: url.searchParams.get('redirect_uri')!,
 		client
 	};
 };

frontend/src/routes/authorize/+page.svelte

@@ -24,7 +24,7 @@
 	let authorizationRequired = false;
 
 	export let data: PageData;
-	let { scope, nonce, client, state } = data;
+	let { scope, nonce, client, state, callbackURL } = data;
 
 	async function authorize() {
 		isLoading = true;
@@ -36,9 +36,11 @@
 				await webauthnService.finishLogin(authResponse);
 			}
 
-			await oidService.authorize(client!.id, scope, nonce).then(async (code) => {
-				onSuccess(code);
-			});
+			await oidService
+				.authorize(client!.id, scope, callbackURL, nonce)
+				.then(async ({ code, callbackURL }) => {
+					onSuccess(code, callbackURL);
+				});
 		} catch (e) {
 			if (e instanceof AxiosError && e.response?.status === 403) {
 				authorizationRequired = true;
@@ -52,19 +54,21 @@
 	async function authorizeNewClient() {
 		isLoading = true;
 		try {
-			await oidService.authorizeNewClient(client!.id, scope, nonce).then(async (code) => {
-				onSuccess(code);
-			});
+			await oidService
+				.authorizeNewClient(client!.id, scope, callbackURL, nonce)
+				.then(async ({ code, callbackURL }) => {
+					onSuccess(code, callbackURL);
+				});
 		} catch (e) {
 			errorMessage = getWebauthnErrorMessage(e);
 			isLoading = false;
 		}
 	}
 
-	function onSuccess(code: string) {
+	function onSuccess(code: string, callbackURL: string) {
 		success = true;
 		setTimeout(() => {
-			window.location.href = `${client!.callbackURL}?code=${code}&state=${state}`;
+			window.location.href = `${callbackURL}?code=${code}&state=${state}`;
 		}, 1000);
 	}
 </script>

frontend/src/routes/settings/admin/application-configuration/application-configuration-form.svelte

@@ -47,7 +47,6 @@
 <form onsubmit={onSubmit}>
 	<div class="flex flex-col gap-5">
 		<FormInput label="Application Name" bind:input={$inputs.appName} />
-
 		<FormInput
 			label="Session Duration"
 			description="The duration of a session in minutes before the user has to sign in again."

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

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import FormInput from '$lib/components/form-input.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { LucideMinus, LucidePlus } from 'lucide-svelte';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		callbackURLs = $bindable(),
+		error = $bindable(null),
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		callbackURLs: string[];
+		error?: string | null;
+		children?: Snippet;
+	} = $props();
+
+	const limit = 5;
+</script>
+
+<div {...restProps}>
+	<FormInput label="Callback URLs">
+		<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}
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            on:click={() => callbackURLs = callbackURLs.filter((_, index) => index !== i)}
+                        >
+                            <LucideMinus class="h-4 w-4" />
+                        </Button>
+                    {/if}
+				</div>
+			{/each}
+		</div>
+	</FormInput>
+	{#if error}
+		<p class="mt-1 text-sm text-red-500">{error}</p>
+	{/if}
+	{#if callbackURLs.length < limit}
+		<Button
+			class="mt-2"
+			variant="secondary"
+			size="sm"
+			on:click={() => callbackURLs = [...callbackURLs, '']}
+		>
+			<LucidePlus class="mr-1 h-4 w-4" />
+			Add another
+		</Button>
+	{/if}
+</div>

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

@@ -10,6 +10,7 @@
 	} from '$lib/types/oidc.type';
 	import { createForm } from '$lib/utils/form-util';
 	import { z } from 'zod';
+	import OidcCallbackUrlInput from './oidc-callback-url-input.svelte';
 
 	let {
 		callback,
@@ -27,12 +28,12 @@
 
 	const client: OidcClientCreate = {
 		name: existingClient?.name || '',
-		callbackURL: existingClient?.callbackURL || ''
+		callbackURLs: existingClient?.callbackURLs || [""]
 	};
 
 	const formSchema = z.object({
 		name: z.string().min(2).max(50),
-		callbackURL: z.string().url()
+		callbackURLs: z.array(z.string().url()).nonempty()
 	});
 
 	type FormSchema = typeof formSchema;
@@ -70,32 +71,40 @@
 </script>
 
 <form onsubmit={onSubmit}>
-	<div class="mt-3 grid grid-cols-2 gap-3">
-		<FormInput label="Name" bind:input={$inputs.name} />
-		<FormInput label="Callback URL" bind:input={$inputs.callbackURL} />
-		<div class="mt-3">
-			<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">
-						<img class="m-auto max-h-full max-w-full object-contain" src={logoDataURL} alt={`${$inputs.name.value} logo`} />
-					</div>
-				{/if}
-				<div class="flex flex-col gap-2">
-					<FileInput
-						id="logo"
-						variant="secondary"
-						accept="image/png, image/jpeg, image/svg+xml"
-						onchange={onLogoChange}
-					>
-						<Button variant="secondary">
-							{existingClient?.hasLogo ? 'Change Logo' : 'Upload Logo'}
-						</Button>
-					</FileInput>
-					{#if logoDataURL}
-						<Button variant="outline" on:click={resetLogo}>Remove Logo</Button>
-					{/if}
+	<div class="flex flex-col gap-3 sm:flex-row">
+		<FormInput label="Name" class="w-full" bind:input={$inputs.name} />
+		<OidcCallbackUrlInput
+			class="w-full"
+			bind:callbackURLs={$inputs.callbackURLs.value}
+			bind:error={$inputs.callbackURLs.error}
+		/>
+	</div>
+	<div class="mt-3">
+		<Label for="logo">Logo</Label>
+		<div class="mt-2 flex items-end gap-3">
+			{#if logoDataURL}
+				<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}
+						alt={`${$inputs.name.value} logo`}
+					/>
 				</div>
+			{/if}
+			<div class="flex flex-col gap-2">
+				<FileInput
+					id="logo"
+					variant="secondary"
+					accept="image/png, image/jpeg, image/svg+xml"
+					onchange={onLogoChange}
+				>
+					<Button variant="secondary">
+						{existingClient?.hasLogo ? 'Change Logo' : 'Upload Logo'}
+					</Button>
+				</FileInput>
+				{#if logoDataURL}
+					<Button variant="outline" on:click={resetLogo}>Remove Logo</Button>
+				{/if}
 			</div>
 		</div>
 	</div>

frontend/src/routes/settings/admin/users/user-form.svelte

@@ -26,9 +26,13 @@
 	};
 
 	const formSchema = z.object({
-		firstName: z.string().min(2).max(50),
-		lastName: z.string().min(2).max(50),
-		username: z.string().min(2).max(50),
+		firstName: z.string().min(2).max(30),
+		lastName: z.string().min(2).max(30),
+		username: z
+			.string()
+			.min(2)
+			.max(30)
+			.regex(/^[a-z0-9_]+$/, 'Only lowercase letters, numbers, and underscores are allowed'),
 		email: z.string().email(),
 		isAdmin: z.boolean()
 	});
@@ -66,10 +70,10 @@
 	<div class="items-top mt-5 flex space-x-2">
 		<Checkbox id="admin-privileges" bind:checked={$inputs.isAdmin.value} />
 		<div class="grid gap-1.5 leading-none">
-			<Label for="admin-privileges" class="text-sm font-medium leading-none mb-0">
+			<Label for="admin-privileges" class="mb-0 text-sm font-medium leading-none">
 				Admin Privileges
 			</Label>
-			<p class="text-[0.8rem] text-muted-foreground">Admins have full access to the admin panel.</p>
+			<p class="text-muted-foreground text-[0.8rem]">Admins have full access to the admin panel.</p>
 		</div>
 	</div>
 	<div class="mt-5 flex justify-end">