create-feedbax 0.1.0 → 0.2.1

package/template/src/portal-comments.ts

@@ -0,0 +1,403 @@
+import {
+  CommentEligibilityError,
+  CommentValidationError,
+  type CreatedComment,
+  type FeedbackModule,
+} from "@feedbax/feedback";
+import { createHmac, timingSafeEqual } from "node:crypto";
+
+import type { TurnstileVerifier } from "./cloudflare-turnstile";
+import type { PortalSubmissionRateLimiter } from "./portal-feedback-submission";
+import {
+  issueParticipationPass,
+  requiredParticipationSigningSecret,
+  verifyParticipationPass,
+} from "./portal-voting";
+import { ActionablePortalFailure } from "./safe-public-failure";
+import { isValidCommentEmail } from "./comment-profile";
+
+export interface PortalCommentResult {
+  comment: CreatedComment;
+  commentCapability: string;
+  commentCapabilityExpiresAt: number;
+  participationPass?: string;
+}
+
+const commentCapabilityLifetime = 15 * 60 * 1_000;
+
+export interface PortalCommentRequest {
+  imageIds?: string[];
+  slug: string;
+  body: string;
+  displayName: string;
+  email: string;
+  discussionId?: string;
+  turnstileToken?: string;
+  participationPass?: string;
+}
+
+export function createPortalCommentHandler(options: {
+  verifiedParticipant?: { displayName: string };
+  feedback: Pick<FeedbackModule, "createComment" | "replyToCommentThread">;
+  commentsEnabled: boolean;
+  rateLimiter: PortalSubmissionRateLimiter;
+  rateLimitKey: string;
+  turnstileVerifier?: TurnstileVerifier;
+  participationSigningSecret?: string;
+  now?: () => number;
+}) {
+  return async (input: unknown): Promise<PortalCommentResult> => {
+    if (!options.commentsEnabled)
+      throw new ActionablePortalFailure(
+        "Comments are disabled for this Installation.",
+        "comments_disabled",
+      );
+    const value = validateCommentInput(input, options.verifiedParticipant);
+    const { success } = await options.rateLimiter.limit({
+      key: `comment:${options.rateLimitKey}`,
+    });
+    if (!success)
+      throw new ActionablePortalFailure(
+        "Comment rate limit exceeded. Try again shortly.",
+        "rate_limited",
+      );
+
+    let participationPass: string | undefined;
+    if (options.turnstileVerifier) {
+      const secret = requiredParticipationSigningSecret(
+        options.participationSigningSecret,
+      );
+      const now = options.now?.() ?? Date.now();
+      if (
+        !value.participationPass ||
+        !verifyParticipationPass(value.participationPass, secret, now)
+      ) {
+        if (!value.turnstileToken)
+          throw new ActionablePortalFailure(
+            "Comment verification is required.",
+            "verification_required",
+          );
+        const verified = await options.turnstileVerifier.verify({
+          token: value.turnstileToken,
+          remoteIp: options.rateLimitKey,
+        });
+        if (!verified)
+          throw new ActionablePortalFailure(
+            "Comment verification failed.",
+            "verification_failed",
+          );
+        participationPass = issueParticipationPass(secret, now);
+      }
+    }
+
+    const command = {
+      ...(value.imageIds ? { imageIds: value.imageIds } : {}),
+      slug: value.slug,
+      body: value.body,
+      displayName: value.displayName,
+    };
+    const comment = value.discussionId
+      ? await options.feedback.replyToCommentThread({
+          ...command,
+          discussionId: value.discussionId,
+        })
+      : await options.feedback.createComment(command);
+    const capabilitySecret = requiredParticipationSigningSecret(
+      options.participationSigningSecret,
+    );
+    const capabilityExpiresAt =
+      comment.createdAt.getTime() + commentCapabilityLifetime;
+    return {
+      comment,
+      commentCapability: issueCommentCapability(
+        comment.id,
+        capabilitySecret,
+        capabilityExpiresAt,
+      ),
+      commentCapabilityExpiresAt: capabilityExpiresAt,
+      ...(participationPass ? { participationPass } : {}),
+    };
+  };
+}
+
+export function createPortalCommentMutationHandler(options: {
+  feedback: Pick<FeedbackModule, "editComment" | "deleteComment">;
+  commentsEnabled: boolean;
+  rateLimiter: PortalSubmissionRateLimiter;
+  rateLimitKey: string;
+  turnstileVerifier?: TurnstileVerifier;
+  participationSigningSecret?: string;
+  now?: () => number;
+}) {
+  return async (input: unknown) => {
+    if (!options.commentsEnabled) throw invalidCommentCapability();
+    const value = validateCommentMutationInput(input);
+    const secret = requiredParticipationSigningSecret(
+      options.participationSigningSecret,
+    );
+    const { success } = await options.rateLimiter.limit({
+      key: `comment:${options.rateLimitKey}`,
+    });
+    if (!success)
+      throw new ActionablePortalFailure(
+        "Comment rate limit exceeded. Try again shortly.",
+        "rate_limited",
+      );
+    if (
+      options.turnstileVerifier &&
+      (!value.participationPass ||
+        !verifyParticipationPass(
+          value.participationPass,
+          secret,
+          options.now?.() ?? Date.now(),
+        ))
+    )
+      throw new ActionablePortalFailure(
+        "Comment verification is required.",
+        "verification_required",
+      );
+    if (
+      !verifyCommentCapability(
+        value.commentCapability,
+        value.commentId,
+        value.action,
+        secret,
+        options.now?.() ?? Date.now(),
+      )
+    )
+      throw invalidCommentCapability();
+    try {
+      if (value.action === "delete") {
+        await options.feedback.deleteComment({ commentId: value.commentId });
+        return { deleted: true as const };
+      }
+      return {
+        comment: await options.feedback.editComment({
+          commentId: value.commentId,
+          body: value.body,
+        }),
+      };
+    } catch {
+      throw new ActionablePortalFailure(
+        "Comment is no longer available to change. Refresh the discussion and try again.",
+        "comment_unavailable",
+      );
+    }
+  };
+}
+
+function issueCommentCapability(
+  commentId: string,
+  secret: string,
+  expiresAt: number,
+) {
+  const payload = Buffer.from(
+    JSON.stringify({
+      commentId,
+      actions: ["edit", "delete"],
+      expiresAt,
+    }),
+  ).toString("base64url");
+  return `${payload}.${signCommentCapability(payload, secret)}`;
+}
+
+function verifyCommentCapability(
+  capability: string,
+  commentId: string,
+  action: "edit" | "delete",
+  secret: string,
+  now: number,
+) {
+  const [payload, signature, extra] = capability.split(".");
+  if (!payload || !signature || extra) return false;
+  const expected = Buffer.from(signCommentCapability(payload, secret));
+  const received = Buffer.from(signature);
+  if (
+    expected.length !== received.length ||
+    !timingSafeEqual(expected, received)
+  )
+    return false;
+  try {
+    const value: unknown = JSON.parse(
+      Buffer.from(payload, "base64url").toString("utf8"),
+    );
+    return Boolean(
+      value &&
+      typeof value === "object" &&
+      Reflect.get(value, "commentId") === commentId &&
+      Array.isArray(Reflect.get(value, "actions")) &&
+      (Reflect.get(value, "actions") as unknown[]).includes(action) &&
+      typeof Reflect.get(value, "expiresAt") === "number" &&
+      (Reflect.get(value, "expiresAt") as number) > now,
+    );
+  } catch {
+    return false;
+  }
+}
+
+function signCommentCapability(payload: string, secret: string) {
+  return createHmac("sha256", secret).update(payload).digest("base64url");
+}
+
+function validateCommentMutationInput(input: unknown): {
+  action: "edit" | "delete";
+  commentId: string;
+  commentCapability: string;
+  body: string;
+  participationPass?: string;
+} {
+  if (!input || typeof input !== "object" || Array.isArray(input))
+    throw invalidCommentCapability();
+  const value = input as Record<string, unknown>;
+  if (
+    (value.action !== "edit" && value.action !== "delete") ||
+    typeof value.commentId !== "string" ||
+    !value.commentId ||
+    typeof value.commentCapability !== "string" ||
+    !value.commentCapability ||
+    (value.action === "edit" &&
+      (typeof value.body !== "string" || !value.body.trim()))
+  )
+    throw invalidCommentCapability();
+  return {
+    action: value.action as "edit" | "delete",
+    commentId: value.commentId,
+    commentCapability: value.commentCapability,
+    body: typeof value.body === "string" ? value.body.trim() : "",
+    ...(typeof value.participationPass === "string"
+      ? { participationPass: value.participationPass }
+      : {}),
+  };
+}
+
+function invalidCommentCapability() {
+  return new ActionablePortalFailure(
+    "Comment could not be changed with this capability.",
+    "invalid_comment_capability",
+  );
+}
+
+export function createPortalCommentRequestHandler(
+  options: Parameters<typeof createPortalCommentHandler>[0],
+) {
+  const comment = createPortalCommentHandler(options);
+  return async (request: Request): Promise<Response> => {
+    try {
+      return Response.json(await comment(await request.json()));
+    } catch (error) {
+      const actionable =
+        error instanceof ActionablePortalFailure ||
+        error instanceof CommentEligibilityError ||
+        error instanceof CommentValidationError;
+      return Response.json(
+        {
+          error: actionable
+            ? error.message
+            : "Comment could not be saved. Try again.",
+          code:
+            error instanceof ActionablePortalFailure
+              ? (error.code ?? "action_failed")
+              : error instanceof CommentEligibilityError
+                ? "ineligible_post"
+                : error instanceof CommentValidationError
+                  ? "invalid_request"
+                  : "temporarily_unavailable",
+        },
+        {
+          status:
+            error instanceof ActionablePortalFailure &&
+            error.code === "rate_limited"
+              ? 429
+              : actionable
+                ? 400
+                : 503,
+        },
+      );
+    }
+  };
+}
+
+export function createPortalCommentMutationRequestHandler(
+  options: Parameters<typeof createPortalCommentMutationHandler>[0],
+) {
+  const mutate = createPortalCommentMutationHandler(options);
+  return async (request: Request): Promise<Response> => {
+    try {
+      return Response.json(await mutate(await request.json()));
+    } catch (error) {
+      const actionable = error instanceof ActionablePortalFailure;
+      return Response.json(
+        {
+          error: actionable
+            ? error.message
+            : "Comment could not be changed. Try again.",
+          code: actionable
+            ? (error.code ?? "action_failed")
+            : "temporarily_unavailable",
+        },
+        { status: actionable ? 400 : 503 },
+      );
+    }
+  };
+}
+
+function validateCommentInput(
+  input: unknown,
+  participant?: { displayName: string },
+): PortalCommentRequest {
+  if (!input || typeof input !== "object" || Array.isArray(input))
+    throw invalidCommentRequest();
+  const value: Record<string, unknown> = {
+    ...(input as Record<string, unknown>),
+    ...(participant ? { displayName: participant.displayName } : {}),
+  };
+  if (typeof value.slug !== "string" || !value.slug.trim())
+    throw invalidCommentRequest();
+  if (typeof value.body !== "string" || !value.body.trim())
+    throw new ActionablePortalFailure(
+      "Comment text is required.",
+      "invalid_request",
+    );
+  if (typeof value.displayName !== "string" || !value.displayName.trim())
+    throw new ActionablePortalFailure(
+      "Device Profile display name is required before commenting.",
+      "profile_required",
+    );
+  if (!participant && !isValidCommentEmail(value.email))
+    throw new ActionablePortalFailure(
+      "A Device Profile with a valid email is required before commenting.",
+      "profile_required",
+    );
+  if (
+    value.imageIds !== undefined &&
+    (!Array.isArray(value.imageIds) ||
+      value.imageIds.length > 4 ||
+      value.imageIds.some(
+        (id) => typeof id !== "string" || !/^[-a-f0-9]{36}$/.test(id),
+      ))
+  )
+    throw invalidCommentRequest();
+  return {
+    ...(value.imageIds ? { imageIds: value.imageIds as string[] } : {}),
+    slug: value.slug.trim(),
+    body: value.body.trim(),
+    displayName: value.displayName.trim(),
+    email: typeof value.email === "string" ? value.email.trim() : "",
+    ...(typeof value.discussionId === "string" && value.discussionId
+      ? { discussionId: value.discussionId }
+      : {}),
+    ...(typeof value.turnstileToken === "string"
+      ? { turnstileToken: value.turnstileToken }
+      : {}),
+    ...(typeof value.participationPass === "string"
+      ? { participationPass: value.participationPass }
+      : {}),
+  };
+}
+
+function invalidCommentRequest() {
+  return new ActionablePortalFailure(
+    "Comment request is invalid.",
+    "invalid_request",
+  );
+}

package/template/src/portal-features.test.tsx

@@ -0,0 +1,150 @@
+// @vitest-environment jsdom
+
+import { cleanup, render, screen, within } from "@testing-library/react";
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRouter,
+  RouterProvider,
+} from "@tanstack/react-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, describe, expect, it } from "vitest";
+
+import {
+  CommandPalette,
+  CommandPaletteProvider,
+  CommandPaletteTrigger,
+} from "./components/command-palette";
+import Header from "./components/header";
+import { PostFeedControls } from "./post-feed-controls";
+import { PublicPostDetail } from "./public-post-detail";
+import { publicPostSearch } from "./public-feedback-page";
+import { ensureChangelogEnabled } from "./routes/changelog";
+
+const votingDisabled = {
+  voting: false,
+  comments: true,
+  changelog: true,
+} as const;
+const commentsDisabled = {
+  voting: true,
+  comments: false,
+  changelog: true,
+} as const;
+const changelogDisabled = {
+  voting: true,
+  comments: true,
+  changelog: false,
+} as const;
+const allDisabled = {
+  voting: false,
+  comments: false,
+  changelog: false,
+} as const;
+
+afterEach(cleanup);
+
+describe("disabled portal capabilities", () => {
+  it("makes New the only accepted and visible feed ordering without voting", () => {
+    expect(publicPostSearch({ sort: "top" }, votingDisabled).sort).toBe("new");
+    render(
+      <PostFeedControls features={votingDisabled} search={{ sort: "new" }} />,
+    );
+    expect(
+      within(screen.getByRole("group", { name: "Sort Posts" }))
+        .getAllByRole("button")
+        .map((button) => button.textContent),
+    ).toEqual(["New"]);
+  });
+
+  it("removes the complete Comment treatment independently", () => {
+    render(
+      <PublicPostDetail
+        features={commentsDisabled}
+        post={{
+          slug: "plain-post",
+          title: "Plain Post",
+          description: "No unavailable capabilities are advertised.",
+          type: "General Feedback",
+          status: "New",
+          voteCount: 0,
+          createdAt: new Date("2026-08-25T00:00:00Z"),
+          updatedAt: new Date("2026-08-25T00:00:00Z"),
+        }}
+      />,
+    );
+    expect(screen.queryByText(/comment/i)).toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Add Vote, 0 Votes" }),
+    ).toBeTruthy();
+  });
+
+  it("removes score treatment independently", () => {
+    render(
+      <PublicPostDetail
+        features={votingDisabled}
+        post={{
+          slug: "plain-post",
+          title: "Plain Post",
+          description: "Voting is not advertised.",
+          type: "General Feedback",
+          status: "New",
+          createdAt: new Date("2026-08-25T00:00:00Z"),
+          updatedAt: new Date("2026-08-25T00:00:00Z"),
+        }}
+      />,
+    );
+    expect(screen.queryByLabelText(/score/i)).toBeNull();
+    expect(screen.getByRole("region", { name: "Comments" })).toBeTruthy();
+  });
+
+  it("removes Changelog from header and command navigation", async () => {
+    const rootRoute = createRootRoute({
+      component: () => (
+        <QueryClientProvider client={new QueryClient()}>
+          <CommandPaletteProvider>
+            <Header features={changelogDisabled} />
+            <CommandPaletteTrigger />
+            <CommandPalette
+              features={changelogDisabled}
+              searchPosts={async () => ({ items: [] })}
+            />
+          </CommandPaletteProvider>
+        </QueryClientProvider>
+      ),
+    });
+    const router = createRouter({
+      routeTree: rootRoute,
+      history: createMemoryHistory({ initialEntries: ["/"] }),
+    });
+    await router.load();
+    render(<RouterProvider router={router} />);
+    expect(screen.queryByRole("link", { name: "Changelog" })).toBeNull();
+    screen.getByRole("button", { name: "Search" }).click();
+    expect(screen.queryByText("Changelog")).toBeNull();
+  });
+
+  it("rejects the Changelog route when Changelog is disabled", () => {
+    expect(() => ensureChangelogEnabled(changelogDisabled)).toThrow();
+  });
+
+  it("removes every unavailable promise in combination", () => {
+    render(
+      <PublicPostDetail
+        features={allDisabled}
+        post={{
+          slug: "minimal-post",
+          title: "Minimal Post",
+          description: "Only feedback details remain.",
+          type: "General Feedback",
+          status: "New",
+          createdAt: new Date("2026-08-25T00:00:00Z"),
+          updatedAt: new Date("2026-08-25T00:00:00Z"),
+        }}
+      />,
+    );
+    expect(screen.queryByLabelText(/score|comment/i)).toBeNull();
+    expect(screen.queryByText(/comment/i)).toBeNull();
+  });
+});
+// @vitest-environment jsdom