feat: api key authentication (#291)

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

frontend/src/lib/components/form/form-input.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+	import DatePicker from '$lib/components/form/date-picker.svelte';
+	import { Input, type FormInputEvent } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
 	import type { FormInput } from '$lib/utils/form-util';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { Input, type FormInputEvent } from '$lib/components/ui/input';
 
 	let {
 		input = $bindable(),
@@ -16,12 +17,12 @@
 		onInput,
 		...restProps
 	}: HTMLAttributes<HTMLDivElement> & {
-		input?: FormInput<string | boolean | number>;
+		input?: FormInput<string | boolean | number | Date>;
 		label?: string;
 		description?: string;
 		placeholder?: string;
 		disabled?: boolean;
-		type?: 'text' | 'password' | 'email' | 'number' | 'checkbox';
+		type?: 'text' | 'password' | 'email' | 'number' | 'checkbox' | 'date';
 		onInput?: (e: FormInputEvent) => void;
 		children?: Snippet;
 	} = $props();
@@ -34,20 +35,24 @@
 		<Label class="mb-0" for={id}>{label}</Label>
 	{/if}
 	{#if description}
-		<p class="mt-1 text-xs text-muted-foreground">{description}</p>
+		<p class="text-muted-foreground mt-1 text-xs">{description}</p>
 	{/if}
 	<div class={label || description ? 'mt-2' : ''}>
 		{#if children}
 			{@render children()}
 		{:else if input}
-			<Input
-				{id}
-				{placeholder}
-				{type}
-				bind:value={input.value}
-				{disabled}
-				on:input={(e) => onInput?.(e)}
-			/>
+			{#if type === 'date'}
+				<DatePicker {id} bind:value={input.value as Date} />
+			{:else}
+				<Input
+					{id}
+					{placeholder}
+					{type}
+					bind:value={input.value}
+					{disabled}
+					on:input={(e) => onInput?.(e)}
+				/>
+			{/if}
 		{/if}
 		{#if input?.error}
 			<p class="mt-1 text-sm text-red-500">{input.error}</p>