form.js

// Loads config.json and wires up form submission.
//
// Submission modes (resolved in priority order):
//   1. DIRECT — window.GITHUB_TOKEN is set (e.g. via a gitignored config.local.js).
//      Posts directly to the GitHub Issues API from the browser.
//      Acceptable when the token is intentionally scoped to issues:write on one repo
//      and the submission content is non-sensitive. Suitable for GitHub Pages deploys.
//
//   2. SERVER — posts to /submit.  The server holds the token (Netlify function,
//      Cloudflare Pages function, or the k8s Node.js server).  Recommended default.

(async function () {
  // Load app config
  let config = {};
  try {
    const res = await fetch("/config.json");
    config = await res.json();
  } catch {
    console.warn("Could not load config.json — using defaults");
  }

  // Populate page text
  document.getElementById("title").textContent = config.title || "Feedback";
  setHTML("subtitle",      config.subtitle      || "");
  setHTML("intro",         config.intro         || "");
  setHTML("feedback-hint", config.feedback_hint || "");
  setHTML("question-hint", config.question_hint || "");
  if (config.title) document.title = config.title;

  // Wire form
  document.getElementById("feedback-form").addEventListener("submit", async (e) => {
    e.preventDefault();
    const form = e.target;

    // Honeypot check
    if (form.bot_trap && form.bot_trap.value) return;

    const feedback = form.feedback.value.trim();
    const question = form.question.value.trim();
    if (!feedback && !question) {
      showStatus("error", "Please fill in at least one field.");
      return;
    }

    const btn = document.getElementById("submit-btn");
    btn.disabled = true;
    btn.textContent = "Sending…";
    clearStatus();

    const payload = {
      feedback,
      question,
      email: form.email.value.trim(),
      submitted_at: new Date().toISOString(),
    };

    try {
      if (window.GITHUB_TOKEN) {
        await submitDirect(payload, config);
      } else {
        await submitServer(payload);
      }
      showStatus("success", "Thanks — your response was recorded.");
      form.reset();
    } catch (err) {
      showStatus("error", "Something went wrong. Please try again.");
      console.error(err);
    } finally {
      btn.disabled = false;
      btn.textContent = "Send feedback";
    }
  });

  // ── submission paths ────────────────────────────────────────────────────────

  async function submitServer(payload) {
    const res = await fetch("/submit", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
    if (!res.ok) throw new Error(`Server error: ${res.status}`);
  }

  async function submitDirect(payload, config) {
    const repo = window.GITHUB_REPO || config.github_repo;
    if (!repo) throw new Error("GITHUB_REPO not configured");
    const labels = config.labels || ["feedback"];
    const body = formatIssueBody(payload);
    const res = await fetch(`https://api.github.com/repos/${repo}/issues`, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${window.GITHUB_TOKEN}`,
        "Content-Type": "application/json",
        Accept: "application/vnd.github+json",
      },
      body: JSON.stringify({
        title: `Feedback${payload.email ? " from " + payload.email : ""}`,
        body,
        labels,
      }),
    });
    if (!res.ok) {
      const err = await res.json().catch(() => ({}));
      throw new Error(err.message || `GitHub API error: ${res.status}`);
    }
  }

  // ── helpers ─────────────────────────────────────────────────────────────────

  function formatIssueBody(payload) {
    const lines = [];
    if (payload.feedback) lines.push(`## Feedback\n\n${payload.feedback}`);
    if (payload.question)  lines.push(`## Data question\n\n${payload.question}`);
    if (payload.email)     lines.push(`**Contact:** ${payload.email}`);
    lines.push(`**Submitted:** ${payload.submitted_at}`);
    return lines.join("\n\n");
  }

  function setHTML(id, html) {
    const el = document.getElementById(id);
    if (el) el.innerHTML = html;
  }

  function showStatus(type, msg) {
    const el = document.getElementById("status");
    el.className = type;
    el.textContent = msg;
  }

  function clearStatus() {
    const el = document.getElementById("status");
    el.className = "";
    el.textContent = "";
    el.style.display = "none";
  }
})();