kochwas/src/routes/admin/domains/+page.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import type { AllowedDomain } from '$lib/types';

  let domains = $state<AllowedDomain[]>([]);
  let loading = $state(true);
  let newDomain = $state('');
  let newLabel = $state('');
  let adding = $state(false);
  let errored = $state<string | null>(null);

  async function load() {
    const res = await fetch('/api/domains');
    domains = await res.json();
    loading = false;
  }

  async function add() {
    errored = null;
    if (!newDomain.trim()) return;
    adding = true;
    const res = await fetch('/api/domains', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({
        domain: newDomain.trim(),
        display_name: newLabel.trim() || null
      })
    });
    adding = false;
    if (!res.ok) {
      const body = await res.json().catch(() => ({}));
      errored = body.message ?? `HTTP ${res.status}`;
      return;
    }
    newDomain = '';
    newLabel = '';
    await load();
  }

  async function remove(id: number) {
    if (!confirm('Domain entfernen?')) return;
    await fetch(`/api/domains/${id}`, { method: 'DELETE' });
    await load();
  }

  onMount(load);
</script>

<h1>Erlaubte Domains</h1>
<p class="intro">
  Nur Rezepte von diesen Domains können importiert werden. Jeder darf pflegen.
</p>

<form
  class="row"
  onsubmit={(e) => {
    e.preventDefault();
    void add();
  }}
>
  <input type="text" bind:value={newDomain} placeholder="chefkoch.de" required />
  <input type="text" bind:value={newLabel} placeholder="Anzeigename (optional)" />
  <button type="submit" class="btn primary" disabled={adding}>Hinzufügen</button>
</form>

{#if errored}
  <p class="error">{errored}</p>
{/if}

{#if loading}
  <p class="muted">Lädt…</p>
{:else if domains.length === 0}
  <p class="muted">Noch keine Domains. Füge Chefkoch, Emmi kocht einfach o.ä. hinzu.</p>
{:else}
  <ul class="list">
    {#each domains as d (d.id)}
      <li>
        <div>
          <div class="dom">{d.domain}</div>
          {#if d.display_name}<div class="label">{d.display_name}</div>{/if}
        </div>
        <button class="btn danger" onclick={() => remove(d.id)}>Löschen</button>
      </li>
    {/each}
  </ul>
{/if}

<style>
  h1 {
    font-size: 1.3rem;
    margin: 0 0 0.5rem;
  }
  .intro {
    color: #666;
    margin: 0 0 1rem;
    font-size: 0.95rem;
  }
  .row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }
  .row input {
    flex: 1;
    min-width: 140px;
    padding: 0.7rem 0.85rem;
    border: 1px solid #cfd9d1;
    border-radius: 10px;
    min-height: 44px;
    font-size: 1rem;
  }
  .btn {
    padding: 0.7rem 1rem;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid #cfd9d1;
    background: white;
    cursor: pointer;
    font-size: 0.95rem;
  }
  .btn.primary {
    background: #2b6a3d;
    color: white;
    border: 0;
  }
  .btn.primary:disabled {
    opacity: 0.6;
  }
  .btn.danger {
    color: #c53030;
    border-color: #f1b4b4;
  }
  .list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border: 1px solid #e4eae7;
    border-radius: 12px;
    padding: 0.75rem 1rem;
  }
  .dom {
    font-weight: 600;
  }
  .label {
    color: #888;
    font-size: 0.85rem;
  }
  .error {
    color: #c53030;
    margin-bottom: 1rem;
  }
  .muted {
    color: #888;
    text-align: center;
    padding: 2rem 0;
  }
</style>