feat: custom claims (#53)

frontend/src/lib/components/custom-claims-input.svelte

@@ -0,0 +1,75 @@
+<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 CustomClaimService from '$lib/services/custom-claim-service';
+	import type { CustomClaim } from '$lib/types/custom-claim.type';
+	import { LucideMinus, LucidePlus } from 'lucide-svelte';
+	import { onMount, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import AutoCompleteInput from './auto-complete-input.svelte';
+
+	let {
+		customClaims = $bindable(),
+		error = $bindable(null),
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		customClaims: CustomClaim[];
+		error?: string | null;
+		children?: Snippet;
+	} = $props();
+
+	const limit = 20;
+
+	const customClaimService = new CustomClaimService();
+
+	let suggestions: string[] = $state([]);
+	let filteredSuggestions: string[] = $derived(
+		suggestions.filter(
+			(suggestion) => !customClaims.some((customClaim) => customClaim.key === suggestion)
+		)
+	);
+
+	onMount(() => {
+		customClaimService.getSuggestions().then((data) => (suggestions = data));
+	});
+</script>
+
+<div {...restProps}>
+	<FormInput>
+		<div class="flex flex-col gap-y-2">
+			{#each customClaims as _, i}
+				<div class="flex gap-x-2">
+					<AutoCompleteInput
+						placeholder="Key"
+						suggestions={filteredSuggestions}
+						bind:value={customClaims[i].key}
+					/>
+					<Input placeholder="Value" bind:value={customClaims[i].value} />
+					<Button
+						variant="outline"
+						size="sm"
+						aria-label="Remove custom claim"
+						on:click={() => (customClaims = customClaims.filter((_, index) => index !== i))}
+					>
+						<LucideMinus class="h-4 w-4" />
+					</Button>
+				</div>
+			{/each}
+		</div>
+	</FormInput>
+	{#if error}
+		<p class="mt-1 text-sm text-red-500">{error}</p>
+	{/if}
+	{#if customClaims.length < limit}
+		<Button
+			class="mt-2"
+			variant="secondary"
+			size="sm"
+			on:click={() => (customClaims = [...customClaims, { key: '', value: '' }])}
+		>
+			<LucidePlus class="mr-1 h-4 w-4" />
+			{customClaims.length === 0 ? 'Add custom claim' : 'Add another'}
+		</Button>
+	{/if}
+</div>