made the secret key file upload somewhat functional

src/lib/components/ui/input/index.ts

@@ -1,7 +1,9 @@
 import Root from "./input.svelte";
+import File from "./input-file.svelte";
 
 export {
 	Root,
+    File,
 	//
 	Root as Input,
 };

src/lib/components/ui/input/input-file.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		class: className,
+        /**
+         * Ignored.
+        */
+        type = "file",
+
+		// Events
+		onblur,
+		onchange,
+		onclick,
+		onfocus,
+		onkeydown,
+		onkeyup,
+		onmouseover,
+		onmouseenter,
+		onmouseleave,
+		onmousemove,
+		onpaste,
+		oninput,
+		onwheel,
+
+		...rest
+	}: HTMLInputAttributes = $props();
+</script>
+
+<!-- 
+
+    @component
+
+    This bloody thing only exists because `$bindable` causes svelte to reset 
+    the value to it's current value on every state change which triggers a 
+    DOMException.
+
+    Damn you Rich Harris.
+
+-->
+
+<input
+	class={cn(
+		"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className,
+	)}
+    type="file"
+
+    ondragenter={(ev) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+    }}
+
+    ondragexit={(ev) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+    }}
+
+	{onblur}
+	{onchange}
+	{onclick}
+	{onfocus}
+	{onkeydown}
+	{onkeyup}
+	{onmouseover}
+	{onmouseenter}
+	{onmouseleave}
+	{onmousemove}
+	{onpaste}
+	{oninput}
+	{onwheel}
+	{...rest}
+/>

src/routes/(auth)/auth/login/+page.svelte

@@ -3,13 +3,24 @@
 
 	import { Button } from "@/ui/button";
 	import { Label } from "@/ui/label";
-	import { Input } from "@/ui/input";
+	import { Input, File } from "@/ui/input";
 	import * as Card from "@/ui/card";
 
 	import { PAGE_TRANSITION_TIME } from "$lib";
 
 	import { fade } from "svelte/transition";
 
+    let username = $state("");
+    let password = $state("");
+    let secret_key_filelist: FileList | undefined = $state(undefined);
+
+    $effect(() => {
+        if (secret_key_filelist && secret_key_filelist.item(0)) {
+            const blob_url = URL.createObjectURL(secret_key_filelist.item(0)!);
+            fetch(blob_url).then(res => res.json()).then(console.log);
+        }
+    });
+
 	const onsubmit = (ev: SubmitEvent) => {
 		ev.preventDefault();
 	};
@@ -29,20 +40,34 @@
 					<div class="grid w-full items-center gap-4">
 						<div class="flex flex-col space-y-1.5">
 							<Label for="username">Username</Label>
-							<Input id="username" type="text" />
+							<Input id="username" type="text" bind:value={username} />
 						</div>
 
 						<div class="flex flex-col space-y-1.5">
 							<Label for="password">Password</Label>
-							<Input id="password" type="password" />
-						</div>
+							<Input id="password" type="password" bind:value={password} />
+						</div>  
 
 						<div class="flex flex-col space-y-1.5">
 							<Label for="secret-key">Secret Key</Label>
-							<Input
+							<File
 								id="secret-key"
 								class="cursor-pointer"
-								type="file"
+                                accept="application/json"
+
+                                onchange={(ev) => {
+                                    if (!(ev.target instanceof HTMLInputElement)) return;
+                                    if (ev.target.files) secret_key_filelist = ev.target.files;
+                                }}
+
+                                ondrop={(ev) => {
+                                    // handle drag and drop.
+                                    ev.stopPropagation();
+                                    ev.preventDefault();
+
+                                    const dt = ev.dataTransfer;
+                                    if (dt && dt.files) secret_key_filelist = dt.files;
+                                }}
 							/>
 						</div>