Add Web App settings to the API Server panel

Mirror the PocketBase settings card with a superadmin-only Web App section: it edits the Web App base URL (the address /api/status already probed) and the CORS allowed origins, applying both at runtime and persisting them to .env so they survive a restart. The CORS middleware previously built its allow-list once, when Handler() was constructed, so an edited origin list would not have taken effect until a restart — which would have made the new field quietly lie. Move the lookup into a per-request originAllowed helper reading under the existing lock. Verified behaviour is unchanged: an allowed origin still gets the headers plus Vary: Origin, an unknown origin gets none, and preflight still returns 204. PUT rejects an empty origin list rather than silently keeping the old one, since an empty list would lock out every browser client. The authenticated round trip (loading and saving real settings) is not verified here — it needs a superadmin login. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-17 12:09:52 +02:00
parent 21c99ad762
commit 98acd7d121
8 changed files with 309 additions and 42 deletions
@@ -0,0 +1,121 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { request } from "../api";
+
+// Superadmin-only: where the Web App lives (the address /api/status probes) and
+// which browser origins CORS admits. Like the PocketBase card, the change is
+// applied at runtime AND persisted to the server's .env, so it survives a
+// restart. Origins are edited as a comma-separated list.
+const cfg = ref(null);
+const form = ref({ url: "", origins: "" });
+const probe = ref(null);
+const error = ref("");
+const notice = ref("");
+const busy = ref(false);
+
+// The panel sends the origin list as an array; the field edits it as CSV.
+const splitOrigins = (s) => s.split(",").map((o) => o.trim()).filter(Boolean);
+
+function apply(view) {
+  cfg.value = view;
+  form.value = { url: view.url, origins: (view.allowOrigins || []).join(", ") };
+  probe.value = view.probe;
+}
+
+async function load() {
+  try {
+    apply(await request("/api/admin/webapp-config"));
+  } catch (e) {
+    error.value = e.message;
+  }
+}
+onMounted(load);
+
+async function test() {
+  error.value = "";
+  notice.value = "";
+  busy.value = true;
+  try {
+    probe.value = await request("/api/admin/webapp-config/test", {
+      method: "POST",
+      body: { url: form.value.url },
+    });
+    notice.value =
+      probe.value.status === "ok"
+        ? "Web App is reachable."
+        : "Web App did not answer its health check at that address.";
+  } catch (e) {
+    error.value = e.message;
+  } finally {
+    busy.value = false;
+  }
+}
+
+async function save() {
+  error.value = "";
+  notice.value = "";
+  busy.value = true;
+  try {
+    const out = await request("/api/admin/webapp-config", {
+      method: "PUT",
+      body: { url: form.value.url, allowOrigins: splitOrigins(form.value.origins) },
+    });
+    apply(out.config);
+    notice.value = out.warning || "Saved. New origins apply to the next request.";
+  } catch (e) {
+    error.value = e.message;
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="dh-card overflow-hidden">
+    <div class="flex items-center justify-between border-b border-subtle px-5 py-4">
+      <div>
+        <div class="text-base font-bold tracking-[-0.02em] text-strong">Web App</div>
+        <p class="mt-0.5 text-xs text-muted">Address probed by the status check, and who may call this API from a browser</p>
+      </div>
+      <span
+        v-if="probe"
+        class="dh-pill"
+        :class="probe.status === 'ok' ? 'bg-success-soft text-success' : 'bg-danger-soft text-danger'"
+      >
+        <span class="h-1.5 w-1.5 rounded-full bg-current"></span>
+        {{ probe.status === "ok" ? "reachable" : "unreachable" }}
+      </span>
+    </div>
+
+    <div class="flex flex-col gap-4 px-5 py-4">
+      <div>
+        <label class="dh-label" for="web-url">Base URL</label>
+        <input id="web-url" v-model="form.url" class="dh-input" placeholder="http://localhost:5173" />
+      </div>
+
+      <div>
+        <label class="dh-label" for="web-origins">Allowed origins</label>
+        <input
+          id="web-origins"
+          v-model="form.origins"
+          class="dh-input"
+          placeholder="http://localhost:5173, https://app.example.com"
+        />
+        <p class="mt-1 text-xs text-muted">
+          Comma separated, or <span class="data">*</span> for any. Native mobile apps are not subject to CORS.
+        </p>
+      </div>
+
+      <p v-if="probe?.error" class="data text-xs text-muted">{{ probe.error }}</p>
+      <p v-if="notice" class="rounded-control bg-info-soft px-3 py-2 text-xs text-info">{{ notice }}</p>
+      <p v-if="error" class="rounded-control bg-danger-soft px-3 py-2 text-xs text-danger">{{ error }}</p>
+
+      <div class="flex items-center gap-2">
+        <button class="dh-btn" :disabled="busy" @click="save">Save &amp; apply</button>
+        <button class="dh-btn-ghost" :disabled="busy" @click="test">Test connection</button>
+        <span class="flex-1"></span>
+        <span class="eyebrow">persisted to .env</span>
+      </div>
+    </div>
+  </div>
+</template>