130 lines
6.7 KiB
Svelte
130 lines
6.7 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { confirmAction } from '$ui/confirm.js';
|
|
import { serverTitle } from '$ui/server-labels.js';
|
|
import ServerIdentity from '$ui/components/ServerIdentity.svelte';
|
|
import Dialog from '$ui/components/primitives/Dialog.svelte';
|
|
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
|
import ListFooter from '$ui/components/primitives/ListFooter.svelte';
|
|
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
|
import Button from '$lib/ui/components/primitives/Button.svelte';
|
|
import Field from '$lib/ui/components/primitives/Field.svelte';
|
|
import Input from '$lib/ui/components/primitives/Input.svelte';
|
|
|
|
interface SavedKey { server_id: string; deployed: number; updated_at: string }
|
|
let open = $state(false);
|
|
let search = $state('');
|
|
let limit = $state(25);
|
|
$effect(() => { search; limit = 25; });
|
|
let keys = $state<SavedKey[]>([]);
|
|
let serverId = $state('');
|
|
let plutoKey = $state('');
|
|
let editing = $state(false);
|
|
let busy = $state(false);
|
|
let loading = $state(true);
|
|
let error = $state('');
|
|
let notice = $state('');
|
|
const filtered = $derived(keys.filter(key => (key.server_id + ' ' + serverTitle(key.server_id)).toLowerCase().includes(search.toLowerCase())));
|
|
|
|
async function load() {
|
|
const res = await fetch('/api/server-keys');
|
|
if (!res.ok) throw new Error('Could not load server keys');
|
|
keys = (await res.json()).keys;
|
|
}
|
|
async function reload() { try { await load(); error = ''; } catch (e) { error = (e as Error).message; } finally { loading = false; } }
|
|
onMount(() => { void reload(); });
|
|
function reset() { serverId = ''; plutoKey = ''; editing = false; }
|
|
async function save(e: SubmitEvent) {
|
|
e.preventDefault();
|
|
busy = true; error = ''; notice = '';
|
|
try {
|
|
const res = await fetch('/api/server-keys', {
|
|
method: 'PUT', headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ serverId: serverId.trim(), plutoKey })
|
|
});
|
|
const body = await res.json();
|
|
if (!res.ok) throw new Error(body.error ?? 'Could not save key');
|
|
reset(); open = false; notice = 'Server key saved.'; await load();
|
|
} catch (e) { error = (e as Error).message; }
|
|
finally { busy = false; }
|
|
}
|
|
async function remove(id: string) {
|
|
if (!await confirmAction({title:'Remove saved key?',message:`Remove the key for ${serverTitle(id)} (${id})? Running servers are unaffected.`,confirmLabel:'Remove key',danger:true})) return;
|
|
busy = true; error = ''; notice = '';
|
|
try {
|
|
const res = await fetch('/api/server-keys', {
|
|
method: 'DELETE', headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ serverId: id })
|
|
});
|
|
if (!res.ok) throw new Error('Could not remove key');
|
|
if (serverId === id) reset();
|
|
notice = 'Saved key removed.'; await load();
|
|
} catch (e) { error = (e as Error).message; }
|
|
finally { busy = false; }
|
|
}
|
|
</script>
|
|
|
|
<svelte:head><title>Keys · Electric Cherry</title></svelte:head>
|
|
<div class="page">
|
|
<SectionHeader title="Server keys" subtitle="Save a Plutonium key for each server ID. Keys are kept when a server is destroyed.">
|
|
{#snippet actions()}<Button variant="primary" onclick={() => { reset(); error = ''; open = true; }}>Add key</Button>{/snippet}
|
|
</SectionHeader>
|
|
<div class="ui-toolbar"><input type="search" aria-label="Search server keys" bind:value={search} placeholder="Search servers…" /></div>
|
|
|
|
{#if error && !open}<div role="alert" class="ui-error">{error}<Button size="sm" onclick={reload}>Retry</Button></div>{/if}
|
|
{#if notice}<p role="status">{notice}</p>{/if}
|
|
<h2>Saved keys</h2>
|
|
{#if loading}<p>Loading keys…</p>
|
|
{:else if !filtered.length}<EmptyState title={keys.length ? "No matching keys" : "No saved keys"} description="Add a key here or save one when creating a server." />
|
|
{:else}
|
|
<div class="table-wrap"><table>
|
|
<thead><tr><th>Server ID</th><th>Status</th><th>Key</th><th>Actions</th></tr></thead>
|
|
<tbody>{#each filtered.slice(0,limit) as key (key.server_id)}
|
|
<tr>
|
|
<td><ServerIdentity name={key.server_id} /><code>{key.server_id}</code></td>
|
|
<td>{key.deployed ? 'Deployed' : 'Not deployed'}</td>
|
|
<td aria-label="Key saved">••••••••</td>
|
|
<td><div class="actions">
|
|
<Button disabled={busy} onclick={() => { serverId = key.server_id; plutoKey = ''; editing = true; error = ''; notice = ''; open = true; }}>Update</Button>
|
|
<Button disabled={busy} onclick={() => remove(key.server_id)}>Remove</Button>
|
|
</div></td>
|
|
</tr>
|
|
{/each}</tbody>
|
|
</table></div>
|
|
{/if}
|
|
|
|
<ListFooter total={filtered.length} bind:limit label="keys" />
|
|
</div>
|
|
<Dialog bind:open title={editing ? 'Update key' : 'Add key'} busy={busy}>
|
|
{#if error}<p role="alert" class="error">{error}</p>{/if}
|
|
<form onsubmit={save}>
|
|
<Field label="Server ID" hint="Use a T5 or T6 map slug and lobby number from 1 to 20, e.g. t5_zombie_theater_2 or t6_zombie_tomb_1.">
|
|
<Input bind:value={serverId} placeholder="t5_zombie_theater_2" required readonly={editing} disabled={busy} mono />
|
|
</Field>
|
|
<Field label="Plutonium server key" hint="Changes apply the next time this server ID is deployed.">
|
|
<Input type="password" bind:value={plutoKey} placeholder="Paste key" autocomplete="off" required disabled={busy} />
|
|
</Field>
|
|
<div class="actions">
|
|
<Button type="submit" variant="primary" disabled={busy || loading} loading={busy}>{editing ? 'Update key' : 'Save key'}</Button>
|
|
<Button onclick={() => open = false} disabled={busy}>Cancel</Button>
|
|
</div>
|
|
</form>
|
|
</Dialog>
|
|
<style>
|
|
|
|
h2 { font-size: var(--text-md); }
|
|
p { color: var(--text-secondary); }
|
|
form { display: grid; gap: var(--space-4); max-width: 620px; padding: var(--space-6); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); margin: var(--space-6) 0; }
|
|
|
|
.actions { display: flex; gap: var(--space-2); }
|
|
.table-wrap { overflow-x: auto; }
|
|
table { width: 100%; border-collapse: collapse; text-align: left; }
|
|
th, td { padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
|
|
th { color: var(--text-tertiary); font-size: var(--text-sm); }
|
|
code { font-family: var(--font-mono); }
|
|
.error { color: var(--state-danger); }
|
|
.page { display:grid; gap:24px; }
|
|
form { margin:0; padding:0; border:0; }
|
|
code { display:block; font-size:12px; color:var(--text-secondary); margin-top:6px; }
|
|
</style>
|