feat: add API keys management page
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sanju Sivalingam
27
web/src/lib/api/api-keys.remote.ts
Normal file
27
web/src/lib/api/api-keys.remote.ts
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import { form, getRequestEvent, query } from '$app/server';
|
||||||
|
import { auth } from '$lib/server/auth';
|
||||||
|
import { createKeySchema } from '$lib/schema/api-keys';
|
||||||
|
|
||||||
|
export const listKeys = query(async () => {
|
||||||
|
const { request } = getRequestEvent();
|
||||||
|
return await auth.api.listApiKeys({ headers: request.headers });
|
||||||
|
});
|
||||||
|
|
||||||
|
export const createKey = form(createKeySchema, async ({ name }) => {
|
||||||
|
const { request } = getRequestEvent();
|
||||||
|
const result = await auth.api.createApiKey({
|
||||||
|
body: { name, prefix: 'dc' },
|
||||||
|
headers: request.headers
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
});
|
||||||
|
|
||||||
|
export const deleteKey = form(async () => {
|
||||||
|
const { request } = getRequestEvent();
|
||||||
|
const formData = await request.clone().formData();
|
||||||
|
const keyId = formData.get('keyId') as string;
|
||||||
|
await auth.api.deleteApiKey({
|
||||||
|
body: { keyId },
|
||||||
|
headers: request.headers
|
||||||
|
});
|
||||||
|
});
|
||||||
5
web/src/lib/schema/api-keys.ts
Normal file
5
web/src/lib/schema/api-keys.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { object, string, pipe, minLength } from 'valibot';
|
||||||
|
|
||||||
|
export const createKeySchema = object({
|
||||||
|
name: pipe(string(), minLength(1))
|
||||||
|
});
|
||||||
114
web/src/routes/dashboard/api-keys/+page.svelte
Normal file
114
web/src/routes/dashboard/api-keys/+page.svelte
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { listKeys, createKey, deleteKey } from '$lib/api/api-keys.remote';
|
||||||
|
|
||||||
|
let newKeyValue = $state<string | null>(null);
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
if (createKey.result?.key) {
|
||||||
|
newKeyValue = createKey.result.key;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h2 class="mb-6 text-2xl font-bold">API Keys</h2>
|
||||||
|
|
||||||
|
<!-- Create new key -->
|
||||||
|
<div class="mb-8 rounded-lg border border-neutral-200 p-6">
|
||||||
|
<h3 class="mb-4 font-semibold">Create New Key</h3>
|
||||||
|
<form {...createKey} class="flex items-end gap-4">
|
||||||
|
<label class="flex flex-1 flex-col gap-1">
|
||||||
|
<span class="text-sm text-neutral-600">Key Name</span>
|
||||||
|
<input
|
||||||
|
{...createKey.fields.name.as('text')}
|
||||||
|
placeholder="e.g. Production, Development"
|
||||||
|
class="rounded border border-neutral-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
{#each createKey.fields.name.issues() ?? [] as issue (issue.message)}
|
||||||
|
<p class="text-sm text-red-600">{issue.message}</p>
|
||||||
|
{/each}
|
||||||
|
</label>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="rounded bg-neutral-800 px-4 py-2 text-sm text-white hover:bg-neutral-700"
|
||||||
|
>
|
||||||
|
Create
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Newly created key warning -->
|
||||||
|
{#if newKeyValue}
|
||||||
|
<div class="mb-8 rounded-lg border border-yellow-300 bg-yellow-50 p-6">
|
||||||
|
<h3 class="mb-2 font-semibold text-yellow-800">Save Your API Key</h3>
|
||||||
|
<p class="mb-3 text-sm text-yellow-700">
|
||||||
|
Copy this key now. It will not be shown again.
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<code class="flex-1 rounded bg-yellow-100 px-3 py-2 text-sm font-mono break-all">
|
||||||
|
{newKeyValue}
|
||||||
|
</code>
|
||||||
|
<button
|
||||||
|
onclick={() => {
|
||||||
|
navigator.clipboard.writeText(newKeyValue!);
|
||||||
|
}}
|
||||||
|
class="rounded border border-yellow-400 px-3 py-2 text-sm text-yellow-800 hover:bg-yellow-100"
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onclick={() => (newKeyValue = null)}
|
||||||
|
class="mt-3 text-sm text-yellow-600 hover:text-yellow-800"
|
||||||
|
>
|
||||||
|
Dismiss
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Existing keys list -->
|
||||||
|
<div class="rounded-lg border border-neutral-200">
|
||||||
|
<div class="border-b border-neutral-200 px-6 py-4">
|
||||||
|
<h3 class="font-semibold">Your Keys</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#await listKeys()}
|
||||||
|
<div class="px-6 py-8 text-center text-sm text-neutral-500">Loading keys...</div>
|
||||||
|
{:then keys}
|
||||||
|
{#if keys && keys.length > 0}
|
||||||
|
<ul class="divide-y divide-neutral-100">
|
||||||
|
{#each keys as key (key.id)}
|
||||||
|
<li class="flex items-center justify-between px-6 py-4">
|
||||||
|
<div>
|
||||||
|
<p class="font-medium">{key.name ?? 'Unnamed Key'}</p>
|
||||||
|
<div class="mt-1 flex items-center gap-3 text-sm text-neutral-500">
|
||||||
|
{#if key.start}
|
||||||
|
<span class="font-mono">{key.start}...</span>
|
||||||
|
{/if}
|
||||||
|
<span>
|
||||||
|
Created {new Date(key.createdAt).toLocaleDateString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form {...deleteKey}>
|
||||||
|
<input type="hidden" name="keyId" value={key.id} />
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="rounded border border-red-200 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
{:else}
|
||||||
|
<div class="px-6 py-8 text-center text-sm text-neutral-500">
|
||||||
|
No API keys yet. Create one above.
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{:catch}
|
||||||
|
<div class="px-6 py-8 text-center text-sm text-red-600">
|
||||||
|
Failed to load keys. Please try again.
|
||||||
|
</div>
|
||||||
|
{/await}
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user