@mug-lab/cookie-auth-proxy 0.1.0

package/src/admin/events.js

@@ -0,0 +1,325 @@
+document.querySelectorAll(".tab").forEach((button) => {
+  button.addEventListener("click", () => {
+    document
+      .querySelectorAll(".tab")
+      .forEach((entry) => entry.classList.remove("active"));
+    document
+      .querySelectorAll(".panel")
+      .forEach((entry) => entry.classList.remove("active"));
+    document
+      .querySelectorAll(`.tab[data-tab="${button.dataset.tab}"]`)
+      .forEach((entry) => entry.classList.add("active"));
+    $(button.dataset.tab).classList.add("active");
+    syncRightPaneHeader();
+  });
+});
+
+const rightPaneObserver = new ResizeObserver(syncRightPaneHeader);
+rightPaneObserver.observe($("mainPanel"));
+document
+  .querySelectorAll(".panel-sticky")
+  .forEach((entry) => rightPaneObserver.observe(entry));
+window.addEventListener("resize", syncRightPaneHeader);
+syncStickyMetrics();
+
+/**
+ * 右ペインの付箋ヘッダを現在のペイン位置/幅に合わせる。
+ */
+function syncRightPaneHeader() {
+  const pane = $("mainPanel");
+  const sticky = document.querySelector(".panel.active .panel-sticky");
+  if (!pane || !sticky) return;
+
+  syncStickyMetrics();
+  const rect = pane.getBoundingClientRect();
+  document.documentElement.style.setProperty(
+    "--right-pane-left",
+    `${rect.left}px`,
+  );
+  document.documentElement.style.setProperty(
+    "--right-pane-width",
+    `${rect.width}px`,
+  );
+  document.documentElement.style.setProperty(
+    "--right-sticky-height",
+    `${Math.max(0, sticky.offsetHeight - 28)}px`,
+  );
+}
+
+/**
+ * 実際のヘッダ/通知欄の高さをCSS変数へ反映する。
+ * 固定値との差によるsticky要素の微妙な上下補正を防ぐ。
+ */
+function syncStickyMetrics() {
+  const header = document.querySelector("header");
+  const notice = $("adminNotice");
+  const noticeHeight = notice && !notice.classList.contains("hidden")
+    ? notice.offsetHeight
+    : 0;
+
+  if (header) {
+    document.documentElement.style.setProperty(
+      "--app-header-height",
+      `${header.offsetHeight}px`,
+    );
+  }
+  document.documentElement.style.setProperty(
+    "--admin-notice-height",
+    `${noticeHeight}px`,
+  );
+}
+
+document.querySelectorAll("[data-status-filter]").forEach((button) => {
+  button.addEventListener("click", () => {
+    historyFilter = button.dataset.statusFilter;
+    document
+      .querySelectorAll("[data-status-filter]")
+      .forEach((entry) => entry.classList.remove("active"));
+    button.classList.add("active");
+    renderHistory(lastHistory);
+    flash(button);
+  });
+});
+
+$("pathFilter").addEventListener("input", () => {
+  pathFilter = $("pathFilter").value;
+  renderHistory(lastHistory);
+});
+$("stubFilter").addEventListener("input", () => {
+  stubFilter = $("stubFilter").value;
+  renderStubs(lastStubs);
+});
+$("overrideFilter").addEventListener("input", () => {
+  overrideFilter = $("overrideFilter").value;
+  renderOverrides(lastOverrides);
+});
+
+$("clientOrigin").addEventListener("input", updateApplyState);
+$("apiOrigin").addEventListener("input", updateApplyState);
+$("cookieRows").addEventListener("input", updateApplyState);
+$("addCookie").onclick = () => {
+  addCookieRow();
+  flash($("addCookie"));
+};
+$("toggleCookieValues").onclick = () => {
+  toggleCookieValuesVisible();
+  flash($("toggleCookieValues"));
+};
+$("openApp").onclick = () => {
+  window.open(new URL("/dashboard", proxyOrigin).href, "_blank", "noopener");
+  flash($("openApp"));
+};
+$("openServerApp").onclick = () => {
+  const url = buildServerAppUrl();
+  if (!url) {
+    $("apiOriginError").textContent = "Set API origin before opening server app.";
+    return;
+  }
+
+  window.open(url, "_blank", "noopener");
+  flash($("openServerApp"));
+};
+
+/**
+ * 現在のAPI Originと設定パスからサーバアプリを開くURLを作る。
+ */
+function buildServerAppUrl() {
+  const base = $("apiOrigin").value || runtimeSnapshot.apiOrigin;
+  if (!base) return "";
+  try {
+    return new URL(serverAppPath || "/", base).href;
+  } catch {
+    return base;
+  }
+}
+$("stubs").addEventListener("input", (event) => {
+  const root = event.target.closest("details");
+  if (root) updateStubApplyState(root);
+});
+$("stubs").addEventListener("change", (event) => {
+  const root = event.target.closest("details");
+  if (root && event.target.matches('[data-field="method"]'))
+    toggleRequestBodyCriteria(root);
+  if (root) updateStubApplyState(root);
+});
+$("overrides").addEventListener("input", (event) => {
+  const root = event.target.closest("details");
+  if (root) updateOverrideApplyState(root);
+});
+$("overrides").addEventListener("change", (event) => {
+  const root = event.target.closest("details");
+  if (root && event.target.matches('[data-field="method"]'))
+    toggleRequestBodyCriteria(root);
+  if (root) updateOverrideApplyState(root);
+});
+$("stubsEnabled").addEventListener("change", async () => {
+  await api("/admin/state", {
+    method: "POST",
+    body: JSON.stringify({ stubsEnabled: $("stubsEnabled").checked }),
+  });
+  flash($("stubsEnabled").closest(".switch"));
+  await load();
+});
+$("jsonOverridesEnabled").addEventListener("change", async () => {
+  await api("/admin/state", {
+    method: "POST",
+    body: JSON.stringify({
+      jsonOverridesEnabled: $("jsonOverridesEnabled").checked,
+    }),
+  });
+  flash($("jsonOverridesEnabled").closest(".switch"));
+  await load();
+});
+
+$("saveState").onclick = async () => {
+  try {
+    const cookieHeader = currentCookieHeader();
+    const state = await api("/admin/state", {
+      method: "POST",
+      body: JSON.stringify({
+        clientOrigin: $("clientOrigin").value,
+        apiOrigin: $("apiOrigin").value,
+        apiCookie: cookieHeader,
+      }),
+    });
+    runtimeSnapshot = {
+      clientOrigin: state.clientOrigin,
+      apiOrigin: state.apiOrigin,
+      apiCookie: cookieHeader,
+    };
+    $("clientOrigin").value = state.clientOrigin;
+    $("apiOrigin").value = state.apiOrigin;
+    updateApplyState();
+    flash($("saveState"));
+    await load();
+  } catch (error) {
+    if (String(error.message).includes("clientOrigin")) {
+      $("clientOriginError").textContent = error.message;
+    } else {
+      $("apiOriginError").textContent = error.message;
+    }
+    $("saveState").disabled = true;
+  }
+};
+
+$("refresh").onclick = async () => {
+  flash($("refresh"));
+  await load();
+};
+$("clearHistory").onclick = async () => {
+  flash($("clearHistory"));
+  await api("/admin/history", { method: "DELETE" });
+  lastHistory = [];
+  historyDetails.clear();
+  historyRenderSignature = "";
+  renderHistory(lastHistory);
+};
+$("exportStubs").onclick = async () => {
+  const value = await api("/admin/stubs/export");
+  downloadJson("cookie-auth-proxy-stubs.json", value);
+  flash($("exportStubs"));
+};
+$("cleanImportStubs").onclick = () => {
+  pendingImportMode = "replace";
+  $("importFile").click();
+};
+$("addImportStubs").onclick = () => {
+  pendingImportMode = "append";
+  $("importFile").click();
+};
+$("importFile").onchange = async () => {
+  const file = $("importFile").files[0];
+  if (!file) return;
+  try {
+    const parsed = JSON.parse(await readFileAsText(file));
+    const payload = Array.isArray(parsed)
+      ? { mode: pendingImportMode, stubs: parsed }
+      : { ...parsed, mode: pendingImportMode };
+    await api("/admin/stubs/import", {
+      method: "POST",
+      body: JSON.stringify(payload),
+    });
+    flash(
+      pendingImportMode === "replace"
+        ? $("cleanImportStubs")
+        : $("addImportStubs"),
+    );
+    await load();
+  } catch (error) {
+    alert("Stub import failed:\n" + error.message);
+  } finally {
+    $("importFile").value = "";
+  }
+};
+$("exportOverrides").onclick = async () => {
+  const value = await api("/admin/json-overrides/export");
+  downloadJson("cookie-auth-proxy-overrides.json", value);
+  flash($("exportOverrides"));
+};
+$("cleanImportOverrides").onclick = () => {
+  pendingOverrideImportMode = "replace";
+  $("overrideImportFile").click();
+};
+$("addImportOverrides").onclick = () => {
+  pendingOverrideImportMode = "append";
+  $("overrideImportFile").click();
+};
+$("overrideImportFile").onchange = async () => {
+  const file = $("overrideImportFile").files[0];
+  if (!file) return;
+  try {
+    const parsed = JSON.parse(await readFileAsText(file));
+    const payload = Array.isArray(parsed)
+      ? { mode: pendingOverrideImportMode, jsonOverrides: parsed }
+      : { ...parsed, mode: pendingOverrideImportMode };
+    await api("/admin/json-overrides/import", {
+      method: "POST",
+      body: JSON.stringify(payload),
+    });
+    flash(
+      pendingOverrideImportMode === "replace"
+        ? $("cleanImportOverrides")
+        : $("addImportOverrides"),
+    );
+    await load();
+  } catch (error) {
+    alert("Override import failed:\n" + error.message);
+  } finally {
+    $("overrideImportFile").value = "";
+  }
+};
+$("addStub").onclick = async () => {
+  const stub = await api("/admin/stubs", {
+    method: "POST",
+    body: JSON.stringify({}),
+  });
+  dirtyNewStubIds.add(String(stub.id));
+  await load();
+  const detail = document.querySelector(`#stubs details[data-id="${stub.id}"]`);
+  if (detail) {
+    detail.open = true;
+  }
+  flash($("addStub"));
+};
+$("addOverride").onclick = async () => {
+  const override = await api("/admin/json-overrides", {
+    method: "POST",
+    body: JSON.stringify({}),
+  });
+  dirtyNewOverrideIds.add(String(override.id));
+  await load();
+  const detail = document.querySelector(
+    `#overrides details[data-id="${override.id}"]`,
+  );
+  if (detail) {
+    detail.open = true;
+  }
+  flash($("addOverride"));
+};
+
+load().finally(() => requestAnimationFrame(syncRightPaneHeader));
+setInterval(async () => {
+  lastHistory = await api("/admin/history?summary=1");
+  renderHistory(lastHistory);
+  syncRightPaneHeader();
+}, 2500);

package/src/admin/files.js

@@ -0,0 +1,113 @@
+/**
+ * バイト列をブラウザのダウンロードとして保存する。
+ */
+function downloadBytes(filename, bytes, contentType) {
+  const blob = new Blob([bytes], {
+    type: contentType || "application/octet-stream",
+  });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * オブジェクトを整形済みJSONファイルとしてダウンロードする。
+ */
+function downloadJson(filename, value) {
+  const blob = new Blob([JSON.stringify(value, null, 2)], {
+    type: "application/json",
+  });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * FileオブジェクトをUTF-8テキストとして読み込む。
+ */
+function readFileAsText(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = () => reject(reader.error);
+    reader.readAsText(file);
+  });
+}
+
+/**
+ * ヘッダーオブジェクトからcontent-typeを大文字小文字を無視して取得する。
+ */
+function contentTypeOf(headers) {
+  const found = Object.entries(headers || {}).find(
+    ([key]) => key.toLowerCase() === "content-type",
+  );
+  return found ? String(found[1]).split(";")[0] : "application/octet-stream";
+}
+
+/**
+ * 履歴レスポンス本文を保存するファイル名を作る。
+ */
+function historyBodyFilename(item) {
+  const pathPart =
+    String(item.path || "response")
+      .replace(/[?#].*$/, "")
+      .replace(/[^a-z0-9._-]+/gi, "_")
+      .replace(/^_+|_+$/g, "") || "response";
+  return (
+    pathPart + extensionFromContentType(contentTypeOf(item.responseHeaders))
+  );
+}
+
+/**
+ * クエリ文字列を除いたパス部分を取り出す。
+ */
+function pathnameOf(path) {
+  try {
+    return new URL(String(path || "/"), "http://local.proxy").pathname;
+  } catch {
+    return String(path || "/").replace(/[?#].*$/, "");
+  }
+}
+
+/**
+ * 履歴の値を完全一致用の正規表現文字列オブジェクトへ変換する。
+ */
+function regexObjectFromValues(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return {};
+  return Object.fromEntries(
+    Object.entries(value).map(([key, entry]) => [
+      key,
+      Array.isArray(entry)
+        ? entry.map((item) => "^" + escapeRegExp(String(item)) + "$")
+        : "^" + escapeRegExp(String(entry)) + "$",
+    ]),
+  );
+}
+
+/**
+ * content-typeからダウンロードファイルの拡張子を推定する。
+ */
+function extensionFromContentType(contentType) {
+  const map = {
+    "application/pdf": ".pdf",
+    "application/zip": ".zip",
+    "image/png": ".png",
+    "image/jpeg": ".jpg",
+    "image/gif": ".gif",
+    "application/octet-stream": ".bin",
+  };
+  return map[contentType] || ".bin";
+}
+
+/**
+ * 文字列を正規表現リテラル相当として扱えるようエスケープする。
+ */
+function escapeRegExp(value) {
+  return String(value).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}