feat: add popup protected api dev test

src/popup/index.ts

@@ -0,0 +1,155 @@
+import {
+  renderDevPanel,
+  renderLoggedIn,
+  renderLoggedOut,
+  setProtectedApiResult
+} from "./view";
+import { readAuthConfig, type AuthConfig } from "../shared/auth-config";
+import {
+  isAuthResponseMessage,
+  type AuthResponseMessage
+} from "../shared/auth-messages";
+import { createProtectedApiClient } from "../shared/protected-api-client";
+
+interface BootPopupOptions {
+  config?: Partial<AuthConfig>;
+  document?: Document;
+  fetchProtectedApi?: () => Promise<unknown>;
+  sendMessage?: (message: unknown) => Promise<unknown>;
+}
+
+export async function bootPopup(options: BootPopupOptions = {}): Promise<void> {
+  const currentDocument = options.document ?? document;
+  const popupConfig = readAuthConfig(options.config);
+  const root = currentDocument.querySelector("#app");
+  const HTMLElementCtor = currentDocument.defaultView?.HTMLElement;
+
+  if (!root || (HTMLElementCtor && !(root instanceof HTMLElementCtor))) {
+    throw new Error("popup root #app is required");
+  }
+
+  const sendMessage =
+    options.sendMessage ??
+    ((message: unknown) =>
+      Promise.resolve(
+        (
+          globalThis as typeof globalThis & {
+            chrome?: {
+              runtime?: {
+                sendMessage?: (payload: unknown) => Promise<unknown>;
+              };
+            };
+          }
+        ).chrome?.runtime?.sendMessage?.(message)
+      ));
+  const fetchProtectedApi =
+    options.fetchProtectedApi ??
+    createProtectedApiClient({
+      baseUrl: "http://127.0.0.1:4319",
+      sendMessage
+    }).loadProtectedMockData;
+
+  await renderCurrentAuthState(root, popupConfig, sendMessage, fetchProtectedApi);
+}
+
+async function renderCurrentAuthState(
+  root: HTMLElement,
+  popupConfig: AuthConfig,
+  sendMessage: (message: unknown) => Promise<unknown>,
+  fetchProtectedApi: () => Promise<unknown>
+): Promise<void> {
+  const response = await sendMessage({ type: "auth:get-state" });
+  if (!isAuthResponseMessage(response) || !response.ok || response.type !== "auth:state") {
+    renderLoggedOut(root, "认证状态读取失败");
+    return;
+  }
+
+  if (!response.value.isAuthenticated) {
+    renderLoggedOut(root, response.value.lastError);
+    root
+      .querySelector('[data-popup-sign-in="button"]')
+      ?.addEventListener("click", () => {
+        void runAuthAction(root, popupConfig, sendMessage, {
+          actionMessage: { type: "auth:sign-in" },
+          fetchProtectedApi
+        });
+      });
+    return;
+  }
+
+  renderLoggedIn(root, response.value);
+  root
+    .querySelector('[data-popup-sign-out="button"]')
+    ?.addEventListener("click", () => {
+        void runAuthAction(root, popupConfig, sendMessage, {
+          actionMessage: { type: "auth:sign-out" },
+          fetchProtectedApi
+        });
+    });
+  if (popupConfig.enableDevAuthPanel) {
+    renderDevPanel(root, response.value);
+    root
+      .querySelector('[data-popup-test-protected-api="button"]')
+      ?.addEventListener("click", () => {
+        void runProtectedApiProbe(root, fetchProtectedApi);
+      });
+  }
+}
+
+async function runAuthAction(
+  root: HTMLElement,
+  popupConfig: AuthConfig,
+  sendMessage: (message: unknown) => Promise<unknown>,
+  options: {
+    actionMessage: { type: "auth:sign-in" } | { type: "auth:sign-out" };
+    fetchProtectedApi: () => Promise<unknown>;
+  }
+): Promise<void> {
+  const response = await sendMessage(options.actionMessage);
+
+  if (isActionError(response)) {
+    renderLoggedOut(root, response.error);
+    root
+      .querySelector('[data-popup-sign-in="button"]')
+      ?.addEventListener("click", () => {
+        void runAuthAction(root, popupConfig, sendMessage, options);
+      });
+    return;
+  }
+
+  await renderCurrentAuthState(
+    root,
+    popupConfig,
+    sendMessage,
+    options.fetchProtectedApi
+  );
+}
+
+function isActionError(response: unknown): response is Extract<AuthResponseMessage, { ok: false }> {
+  return (
+    isAuthResponseMessage(response) &&
+    !response.ok &&
+    response.type === "auth:error"
+  );
+}
+
+async function runProtectedApiProbe(
+  root: HTMLElement,
+  fetchProtectedApi: () => Promise<unknown>
+): Promise<void> {
+  setProtectedApiResult(root, "请求中...");
+
+  try {
+    const result = await fetchProtectedApi();
+    setProtectedApiResult(root, JSON.stringify(result, null, 2));
+  } catch (error) {
+    setProtectedApiResult(
+      root,
+      error instanceof Error ? error.message : String(error)
+    );
+  }
+}
+
+if (typeof document !== "undefined") {
+  void bootPopup();
+}

src/popup/view.ts

@@ -0,0 +1,60 @@
+import type { AuthStateValue } from "../shared/auth-messages";
+
+export function renderLoggedOut(root: HTMLElement, error?: string | null): void {
+  root.innerHTML = `
+    <section data-popup-state="logged-out">
+      <h1>Star Chart Search Enhancer</h1>
+      <p>登录后才能使用星图增强功能</p>
+      ${error ? `<p data-popup-error="true">${error}</p>` : ""}
+      <button type="button" data-popup-sign-in="button">登录 Logto</button>
+    </section>
+  `;
+}
+
+export function renderLoggedIn(
+  root: HTMLElement,
+  authState: AuthStateValue
+): void {
+  const userInfo = authState.userInfo;
+
+  root.innerHTML = `
+    <section data-popup-state="logged-in">
+      <h1>Star Chart Search Enhancer</h1>
+      <p>已登录</p>
+      <p>${userInfo?.name ?? userInfo?.username ?? "未知用户"}</p>
+      <p>${userInfo?.email ?? ""}</p>
+      <button type="button" data-popup-sign-out="button">退出登录</button>
+    </section>
+  `;
+}
+
+export function renderDevPanel(
+  root: HTMLElement,
+  authState: AuthStateValue
+): void {
+  const panel = root.ownerDocument.createElement("section");
+  panel.dataset.popupDevPanel = "root";
+  panel.innerHTML = `
+    <h2>dev auth panel</h2>
+    <p>resource: ${authState.resource ?? ""}</p>
+    <p>scopes: ${(authState.scopes ?? []).join(", ")}</p>
+    <p>token: ${authState.tokenAvailable ? "available" : "missing"}</p>
+    <p>expires: ${authState.accessTokenExpiresAt ?? "unknown"}</p>
+    <p>error: ${authState.lastError ?? ""}</p>
+    <button type="button" data-popup-test-protected-api="button">测试受保护接口</button>
+    <pre data-popup-protected-api-result="output"></pre>
+  `;
+  root.appendChild(panel);
+}
+
+export function setProtectedApiResult(root: HTMLElement, value: string): void {
+  const output = root.querySelector(
+    '[data-popup-protected-api-result="output"]'
+  );
+
+  if (!output) {
+    return;
+  }
+
+  output.textContent = value;
+}