canon/web/static/js/admin-settings.js

// Settings: profile, appearance, integrations, account.
import { h, icon, api, toast, busy } from "./common.js";

const root = document.getElementById("settings");
let settings;

const field = (label, input, hint) => h("label", { class: "field" },
  h("span", { class: "field-label" }, label), input, hint && h("span", { class: "field-hint" }, hint));

function section(id, title, desc, ...body) {
  return h("section", { class: "settings-section", id },
    h("h2", {}, title),
    desc && h("p", { class: "section-desc" }, desc),
    h("div", { class: "panel" }, ...body));
}

async function saveSettings(patch, button, message = "Saved") {
  if (button) busy(button, true);
  try {
    settings = await api("PUT", "/api/settings", patch);
    toast(message);
    return true;
  } catch (err) {
    toast(err.message, { error: true });
    return false;
  } finally {
    if (button) busy(button, false);
  }
}

// ---------- profile ----------

function profileSection() {
  const avatarBox = h("div", { class: "avatar" });
  const renderAvatar = () => {
    avatarBox.replaceChildren(settings.avatar
      ? h("img", { src: settings.avatar, alt: "" })
      : h("span", {}, (settings.ownerName || settings.siteTitle || "T").trim().charAt(0).toUpperCase()));
    removeBtn.hidden = !settings.avatar;
  };
  const file = h("input", { type: "file", accept: "image/jpeg,image/png,image/webp,image/gif,image/avif", hidden: true });
  const uploadBtn = h("button", { type: "button", class: "btn btn--sm", onclick: () => file.click() }, icon("upload"), "Upload picture");
  const removeBtn = h("button", {
    type: "button", class: "btn btn--sm btn--ghost",
    onclick: async () => {
      try {
        await api("DELETE", "/api/settings/avatar");
        settings.avatar = "";
        renderAvatar();
        toast("Picture removed");
      } catch (err) { toast(err.message, { error: true }); }
    },
  }, "Remove");
  file.addEventListener("change", async () => {
    if (!file.files[0]) return;
    const fd = new FormData();
    fd.append("file", file.files[0]);
    busy(uploadBtn, true);
    try {
      const res = await api("POST", "/api/settings/avatar", fd);
      settings.avatar = res.avatar;
      renderAvatar();
      toast("Picture updated");
    } catch (err) {
      toast(err.message, { error: true });
    } finally {
      busy(uploadBtn, false);
      file.value = "";
    }
  });

  const ownerName = h("input", { maxlength: 100, value: settings.ownerName, placeholder: "Your name" });
  const siteTitle = h("input", { maxlength: 100, value: settings.siteTitle, placeholder: "TopDeck" });
  const tagline = h("input", { maxlength: 300, value: settings.tagline, placeholder: "A line about you or your taste" });
  const preview = h("input", { type: "number", min: 0, max: 50, value: settings.previewCount, style: { maxWidth: "120px" } });
  const notes = h("input", { type: "checkbox", checked: settings.showNotes });
  const save = h("button", { type: "submit", class: "btn btn--primary" }, "Save profile");

  const form = h("form", { class: "stack" },
    h("div", { class: "avatar-edit" }, avatarBox, h("div", { class: "row-btns", style: { display: "flex", gap: "6px", flexWrap: "wrap" } }, uploadBtn, removeBtn, file)),
    h("div", { class: "row" }, field("Your name", ownerName, "Shown as the page heading."), field("Site title", siteTitle, "Shown in the header and browser tab.")),
    field("Tagline", tagline),
    field("Entries per list on the home page", preview, "Visitors see the full list on each list's page. 0 shows only the heading."),
    h("label", { class: "check" }, notes, "Show my notes to visitors"),
    h("div", { class: "settings-actions" }, save),
  );
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const ok = await saveSettings({
      ownerName: ownerName.value, siteTitle: siteTitle.value, tagline: tagline.value,
      previewCount: Number(preview.value), showNotes: notes.checked,
    }, save, "Profile saved");
    if (ok) {
      renderAvatar();
      const brand = document.querySelector(".brand-name");
      if (brand) brand.textContent = settings.siteTitle || "TopDeck";
    }
  });
  renderAvatar();
  return section("profile", "Profile", "Who's behind the lists.", form);
}

// ---------- appearance ----------

const CSS_EXAMPLE = `/* Override any theme variable. */
:root, [data-theme] {
  --accent: #ff5a7a;
  --radius-art: 14px;
}

/* Or restyle anything, e.g. bigger posters: */
.items--grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
`;

function appearanceSection() {
  const html = document.documentElement;
  const cards = h("div", { class: "themes", role: "radiogroup", "aria-label": "Theme" },
    settings.themes.map((t) => h("label", { class: "theme-card" },
      h("input", {
        type: "radio", name: "theme", value: t.key, checked: t.key === settings.theme,
        onchange: async () => {
          html.dataset.theme = t.key;
          await saveSettings({ theme: t.key }, null, `Theme set to ${t.label}`);
        },
      }),
      h("span", { class: "theme-swatch", "data-theme": t.key },
        h("span", { class: "theme-preview" }, h("i"), h("i"), h("i"), h("i")),
        h("span", { class: "theme-name" }, t.label, h("small", { class: "theme-kind" }, t.dark ? "Dark" : "Light")),
      ),
    )),
  );

  const css = h("textarea", { class: "code", spellcheck: false, value: settings.customCss, placeholder: CSS_EXAMPLE, "aria-label": "Custom CSS" });
  css.addEventListener("keydown", (e) => {
    if (e.key === "Tab" && !e.shiftKey) {
      e.preventDefault();
      css.setRangeText("  ", css.selectionStart, css.selectionEnd, "end");
    }
  });
  let live = document.querySelector("link[href^='/custom.css']");
  const previewStyle = h("style");
  const previewBtn = h("button", {
    type: "button", class: "btn",
    onclick: () => {
      live?.remove();
      live = null;
      previewStyle.textContent = css.value;
      document.head.append(previewStyle);
      toast("Previewing on this page. Save to publish.");
    },
  }, icon("eye"), "Preview");
  const exampleBtn = h("button", { type: "button", class: "btn btn--ghost", onclick: () => { css.value = CSS_EXAMPLE; css.focus(); } }, "Insert example");
  const save = h("button", { type: "button", class: "btn btn--primary" }, "Save CSS");
  save.addEventListener("click", async () => {
    if (await saveSettings({ customCss: css.value }, save, "Custom CSS saved")) {
      live?.remove();
      live = null;
      previewStyle.textContent = css.value;
      document.head.append(previewStyle);
    }
  });

  return section("appearance", "Appearance", "Pick a preset, then fine-tune it with your own CSS if you like.",
    h("div", { class: "field" }, h("span", { class: "field-label" }, "Theme"), cards),
    h("div", { class: "field" },
      h("span", { class: "field-label" }, "Custom CSS"),
      css,
      h("span", { class: "field-hint" }, "Loaded after the theme on every page. Every color is a CSS variable (see themes.css), so a few lines can make a whole new theme."),
    ),
    h("div", { class: "settings-actions" }, exampleBtn, previewBtn, save),
  );
}

// ---------- integrations ----------

function secretInput(key, label, hintHTML) {
  const st = settings.secrets[key];
  const input = h("input", {
    type: "password", autocomplete: "off", spellcheck: false,
    placeholder: st.set ? `Saved (${st.hint}). Type to replace.` : "Not set",
    disabled: st.locked,
  });
  const hint = h("span", { class: "field-hint" });
  if (st.locked) hint.textContent = `Set by the ${"TOPDECK_" + key.toUpperCase()} environment variable.`;
  else if (hintHTML) hint.append(...hintHTML);
  const wrap = field(label, input);
  wrap.append(hint);
  return { key, input, wrap, st };
}

function testButton(category, out) {
  const btn = h("button", { type: "button", class: "btn btn--sm" }, icon("refresh"), "Test");
  btn.addEventListener("click", async () => {
    busy(btn, true);
    out.textContent = "Testing…";
    out.className = "test-result";
    try {
      const res = await api("POST", "/api/integrations/test", { category });
      out.textContent = res.message;
      out.className = "test-result " + (res.ok ? "is-ok" : "is-error");
    } catch (err) {
      out.textContent = err.message;
      out.className = "test-result is-error";
    } finally {
      busy(btn, false);
    }
  });
  return btn;
}

const extLink = (href, text) => h("a", { href, target: "_blank", rel: "noopener noreferrer" }, text);

function integration({ title, iconName, desc, category, secrets = [], extra = [], ready }) {
  const out = h("span", { class: "test-result", "aria-live": "polite" });
  const status = h("span", { class: "status" });
  const setStatus = () => {
    const ok = ready();
    status.textContent = ok ? "Ready" : "Needs a key";
    status.className = "status " + (ok ? "is-ok" : "is-off");
  };
  const editable = secrets.filter((s) => !s.st.locked);
  const save = editable.length > 0 && h("button", { type: "button", class: "btn btn--sm btn--primary" }, "Save");
  const clear = editable.some((s) => s.st.set) && h("button", { type: "button", class: "btn btn--sm btn--ghost" }, "Clear");
  const collect = (clearAll) => {
    const patch = {};
    for (const s of editable) {
      if (clearAll) patch[s.key] = "";
      else if (s.input.value.trim()) patch[s.key] = s.input.value.trim();
    }
    return patch;
  };
  const refresh = () => {
    for (const s of secrets) {
      s.st = settings.secrets[s.key];
      s.input.value = "";
      s.input.placeholder = s.st.set ? `Saved (${s.st.hint}). Type to replace.` : "Not set";
    }
    setStatus();
  };
  save && save.addEventListener("click", async () => {
    const patch = collect(false);
    if (!Object.keys(patch).length) { toast("Type a key first", { error: true }); return; }
    if (await saveSettings(patch, save, `${title} saved`)) refresh();
  });
  clear && clear.addEventListener("click", async () => {
    if (await saveSettings(collect(true), clear, `${title} keys cleared`)) refresh();
  });
  setStatus();
  return h("div", { class: "integration" },
    h("div", { class: "integration-head" },
      h("div", {}, h("h3", {}, icon(iconName), title), h("p", {}, desc)),
      status,
    ),
    ...extra,
    ...secrets.map((s) => s.wrap),
    h("div", { style: { display: "flex", gap: "8px", alignItems: "center", flexWrap: "wrap" } },
      testButton(category, out), save, clear, out),
  );
}

function providerChoice(settingKey, options) {
  const name = "choice-" + settingKey;
  return h("div", { class: "radio-cards", role: "radiogroup" },
    options.map(([value, label]) => h("label", {},
      h("input", {
        type: "radio", name, value, checked: settings[settingKey] === value,
        onchange: () => saveSettings({ [settingKey]: value }, null, `Now using ${label.split(" (")[0]}`),
      }),
      label)));
}

function integrationsSection() {
  const tmdb = secretInput("tmdb_api_key", "API key or Read Access Token", [
    "Free with a TMDB account: ", extLink("https://www.themoviedb.org/settings/api", "themoviedb.org/settings/api"), ". Either the v3 key or the v4 token works."]);
  const tvdb = secretInput("tvdb_api_key", "API key", [
    "Get one at ", extLink("https://thetvdb.com/api-information", "thetvdb.com/api-information"), "."]);
  const tvdbPin = secretInput("tvdb_pin", "Subscriber PIN (optional)", ["Only needed for user-supported keys."]);
  const igdbId = secretInput("igdb_client_id", "Twitch Client ID", [
    "IGDB uses Twitch logins. Register an app at ", extLink("https://dev.twitch.tv/console/apps", "dev.twitch.tv/console"), " (see ",
    extLink("https://api-docs.igdb.com/#account-creation", "IGDB's guide"), ")."]);
  const igdbSecret = secretInput("igdb_client_secret", "Twitch Client Secret");

  const has = (k) => settings.secrets[k].set;
  return section("integrations", "Integrations", "Where search results and artwork come from. Keys are stored on your server and never shown on your public page.",
    integration({
      title: "Movies · TMDB", iconName: "film", category: "movie",
      desc: "The Movie Database: posters, directors, genres.",
      secrets: [tmdb], ready: () => has("tmdb_api_key"),
    }),
    integration({
      title: "TV Shows", iconName: "tv", category: "tv",
      desc: "TheTVDB by default. TMDB also works if you'd rather use one key for both.",
      extra: [providerChoice("tvProvider", [["tvdb", "TheTVDB"], ["tmdb", "TMDB (uses the key above)"]])],
      secrets: [tvdb, tvdbPin],
      ready: () => settings.tvProvider === "tmdb" ? has("tmdb_api_key") : has("tvdb_api_key"),
    }),
    integration({
      title: "Video Games · IGDB", iconName: "gamepad", category: "game",
      desc: "The Internet Game Database: covers, developers, platforms.",
      secrets: [igdbId, igdbSecret], ready: () => has("igdb_client_id") && has("igdb_client_secret"),
    }),
    integration({
      title: "Music · Songs & Albums", iconName: "disc", category: "album",
      desc: "No key needed. Deezer has the best cover art and fast search; MusicBrainz is fully open data but slower (1 request/second).",
      extra: [providerChoice("musicProvider", [["deezer", "Deezer (recommended)"], ["musicbrainz", "MusicBrainz + Cover Art Archive"]])],
      ready: () => true,
    }),
    integration({
      title: "Theater · Wikipedia", iconName: "masks", category: "theater",
      desc: "No key needed. Finds musicals, plays and operas on Wikipedia. You choose the production (Broadway, a tour…) and can swap in its own poster.",
      ready: () => true,
    }),
  );
}

// ---------- account ----------

function accountSection() {
  const username = h("input", { autocomplete: "username", maxlength: 64, value: settings.username, required: true });
  const current = h("input", { type: "password", autocomplete: "current-password", required: true });
  const next = h("input", { type: "password", autocomplete: "new-password", minlength: 8, placeholder: "Leave blank to keep" });
  const confirm = h("input", { type: "password", autocomplete: "new-password" });
  const save = h("button", { type: "submit", class: "btn btn--primary" }, "Update account");
  const form = h("form", { class: "stack" },
    field("Username", username),
    h("div", { class: "row" }, field("New password", next), field("Confirm new password", confirm)),
    field("Current password", current, "Required to make changes. Changing your password signs out other browsers."),
    h("div", { class: "settings-actions" }, save),
  );
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    if (next.value && next.value !== confirm.value) { toast("The new passwords don't match", { error: true }); return; }
    if (next.value && next.value.length < 8) { toast("Use at least 8 characters", { error: true }); return; }
    busy(save, true);
    try {
      const res = await api("PUT", "/api/account", { username: username.value, currentPassword: current.value, newPassword: next.value });
      settings.username = res.username;
      current.value = next.value = confirm.value = "";
      toast("Account updated");
    } catch (err) {
      toast(err.message, { error: true });
    } finally {
      busy(save, false);
    }
  });
  return section("account", "Account", "", form);
}

async function init() {
  try {
    settings = await api("GET", "/api/settings");
  } catch (err) {
    root.replaceChildren(h("p", { class: "alert alert--error" }, icon("alert"), err.message));
    return;
  }
  root.replaceChildren(profileSection(), appearanceSection(), integrationsSection(), accountSection());
  root.removeAttribute("aria-busy");
  if (location.hash) document.querySelector(location.hash)?.scrollIntoView();
}
init();