create-feedbax 0.2.0 → 0.2.2

package/template/src/participation-runtime.ts

@@ -0,0 +1,255 @@
+import {
+  createEmailSender,
+  createParticipationModule,
+  type VerifiedParticipant,
+} from "@feedbax/feedback";
+import { env } from "cloudflare:workers";
+import feedbax from "./feedbax";
+import {
+  configuredImages,
+  createConfiguredContentFeedbackModule,
+  getConnectedStore,
+} from "./feedback-runtime";
+import {
+  readSessionToken,
+  sameOrigin,
+  sessionHash,
+} from "./connected-identity";
+
+type ParticipationModule = ReturnType<typeof createParticipationModule>;
+const paths = new Set([
+  "follow",
+  "notifications",
+  "preferences",
+  "unsubscribe",
+]);
+export function createParticipationRequestHandler(options: {
+  siteUrl: string;
+  enabled: boolean;
+  getParticipant(request: Request): Promise<VerifiedParticipant | undefined>;
+  getModule(participant?: VerifiedParticipant): ParticipationModule;
+  rateLimit(request: Request): Promise<boolean>;
+}) {
+  return async (request: Request): Promise<Response | undefined> => {
+    const url = new URL(request.url);
+    const route = url.pathname.replace("/internal/connected/", "");
+    if (!url.pathname.startsWith("/internal/connected/") || !paths.has(route))
+      return;
+    const json = (body: unknown, status = 200) =>
+      Response.json(body, { status, headers: { "Cache-Control": "no-store" } });
+    if (!options.enabled) return json({ error: "Not found." }, 404);
+    if (!["GET", "POST"].includes(request.method))
+      return json({ error: "Method not allowed." }, 405);
+    if (
+      route !== "unsubscribe" &&
+      request.method !== "GET" &&
+      !sameOrigin(request, options.siteUrl)
+    )
+      return json({ error: "Request origin is invalid." }, 403);
+    try {
+      if (route === "unsubscribe") {
+        const token = url.searchParams.get("token") ?? "";
+        if (!/^[a-f0-9]{32}\.[A-Za-z0-9_-]{43}$/.test(token))
+          return json({ error: "Invalid unsubscribe link." }, 400);
+        if (request.method === "GET")
+          return new Response(null, {
+            status: 303,
+            headers: {
+              Location: `/email-preferences?token=${encodeURIComponent(token)}`,
+              "Cache-Control": "no-store",
+              "Referrer-Policy": "no-referrer",
+            },
+          });
+        if (!(await options.rateLimit(request)))
+          return json({ error: "Try again shortly." }, 429);
+        await options.getModule().unsubscribe(token);
+        return new Response(
+          "Email notifications are turned off. You can turn them on again in Feedbax.",
+          {
+            headers: {
+              "Content-Type": "text/plain; charset=utf-8",
+              "Cache-Control": "no-store",
+            },
+          },
+        );
+      }
+      const participant = await options.getParticipant(request);
+      if (!participant)
+        return json(
+          {
+            error: "Sign in through the product to continue.",
+            code: "sign_in_required",
+          },
+          401,
+        );
+      const module = options.getModule(participant);
+      if (request.method === "GET") {
+        if (route === "follow")
+          return json(
+            await module.followState(url.searchParams.get("slug") ?? ""),
+          );
+        if (route === "notifications")
+          return json(
+            await module.inbox(url.searchParams.get("cursor") ?? undefined),
+          );
+        if (route === "preferences") return json(await module.preferences());
+      }
+      if (!(await options.rateLimit(request)))
+        return json({ error: "Too many changes. Try again shortly." }, 429);
+      if (Number(request.headers.get("Content-Length")) > 4096)
+        return json({ error: "Request is too large." }, 413);
+      const reader = request.body?.getReader();
+      const chunks: Uint8Array[] = [];
+      let length = 0;
+      if (reader)
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          length += value.byteLength;
+          if (length > 4096) {
+            await reader.cancel();
+            return json({ error: "Request is too large." }, 413);
+          }
+          chunks.push(value);
+        }
+      const bytes = new Uint8Array(length);
+      let offset = 0;
+      for (const chunk of chunks) {
+        bytes.set(chunk, offset);
+        offset += chunk.byteLength;
+      }
+      const text = new TextDecoder().decode(bytes);
+      if (text.length > 4096)
+        return json({ error: "Request is too large." }, 413);
+      let body: Record<string, unknown>;
+      try {
+        body = JSON.parse(text);
+      } catch {
+        return json({ error: "Invalid request." }, 400);
+      }
+      if (!body || typeof body !== "object" || Array.isArray(body))
+        return json({ error: "Invalid request." }, 400);
+      if (
+        route === "follow" &&
+        typeof body.slug === "string" &&
+        body.slug.length <= 512 &&
+        typeof body.following === "boolean"
+      )
+        return json(await module.follow(body.slug, body.following));
+      if (
+        route === "notifications" &&
+        (body.id === undefined ||
+          (typeof body.id === "string" && /^[a-f0-9]{32}$/.test(body.id)))
+      ) {
+        await module.markRead(body.id as string | undefined);
+        return json({ updated: true });
+      }
+      if (route === "preferences" && typeof body.emailEnabled === "boolean") {
+        await module.setEmailPreference(body.emailEnabled);
+        return json(await module.preferences());
+      }
+      return json({ error: "Invalid request." }, 400);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "";
+      const known = [
+        "Post is unavailable.",
+        "Invalid notification cursor.",
+        "Invalid unsubscribe link.",
+        "Email notifications require a verified application email and a configured sender.",
+      ];
+      return json(
+        {
+          error: known.includes(message)
+            ? message
+            : "Updates are temporarily unavailable. Try again.",
+        },
+        message === "Post is unavailable."
+          ? 404
+          : known.includes(message)
+            ? 400
+            : 503,
+      );
+    }
+  };
+}
+
+export function configuredParticipation(participant?: VerifiedParticipant) {
+  return createConfiguredParticipation(
+    createConfiguredContentFeedbackModule(),
+    participant,
+  );
+}
+
+function createConfiguredParticipation(
+  feedback: import("@feedbax/feedback").FeedbackModule,
+  participant?: VerifiedParticipant,
+) {
+  if (!feedbax.connected || !env.FEEDBAX_DB)
+    throw new Error("Connected database is missing.");
+  const config = feedbax.connected.email;
+  let email: Parameters<typeof createParticipationModule>[0]["email"];
+  if (config) {
+    const sender =
+      config.provider === "cloudflare"
+        ? createEmailSender({
+            provider: "cloudflare",
+            binding: requireBinding(env.FEEDBAX_EMAIL),
+          })
+        : config.provider === "resend"
+          ? createEmailSender({
+              provider: "resend",
+              token: env.EMAIL_PROVIDER_SECRET ?? "",
+            })
+          : createEmailSender({
+              provider: "custom",
+              url: config.endpoint!,
+              token: env.EMAIL_PROVIDER_SECRET ?? "",
+            });
+    email = {
+      sender,
+      from: config.from,
+      siteUrl: feedbax.product.siteUrl!,
+      unsubscribeSecret: env.PARTICIPATION_SIGNING_SECRET ?? "",
+    };
+  }
+  return createParticipationModule({
+    database: env.FEEDBAX_DB,
+    feedback,
+    participant,
+    processing: feedbax.connected.processing ?? "small",
+    email,
+  });
+}
+const requireBinding = <T>(value: T | undefined): T => {
+  if (!value) throw new Error("Email binding is missing.");
+  return value;
+};
+export const handleParticipationRequest = createParticipationRequestHandler({
+  enabled: Boolean(feedbax.connected),
+  siteUrl: feedbax.product.siteUrl ?? "https://not-configured.invalid",
+  getParticipant: async (request) => {
+    const token = readSessionToken(request);
+    return token ? getConnectedStore().session(sessionHash(token)) : undefined;
+  },
+  getModule: configuredParticipation,
+  rateLimit: async (request) =>
+    (
+      await env.PORTAL_SUBMISSIONS_RATE_LIMITER.limit({
+        key: `updates:${request.headers.get("CF-Connecting-IP") ?? "unknown"}`,
+      })
+    ).success,
+});
+export async function synchronizeConnectedUpdates() {
+  if (!feedbax.connected) return;
+  const content = createConfiguredContentFeedbackModule();
+  const module = createConfiguredParticipation(content);
+  const observation = await module.synchronize();
+  const email = await module.deliverEmails();
+  if (feedbax.connected.images) await configuredImages(content).cleanup();
+  // Counts only: never log identities, addresses, provider responses, or message bodies.
+  if (observation.failed || email.failed)
+    console.warn("Connected update processing will retry", {
+      observations: observation.failed,
+      deliveries: email.failed,
+    });
+}

package/template/src/portal-comments.ts

@@ -26,6 +26,8 @@ export interface PortalCommentResult {
 const commentCapabilityLifetime = 15 * 60 * 1_000;
 
 export interface PortalCommentRequest {
+  submissionKey?: string;
+  imageIds?: string[];
   slug: string;
   body: string;
   displayName: string;
@@ -36,6 +38,7 @@ export interface PortalCommentRequest {
 }
 
 export function createPortalCommentHandler(options: {
+  verifiedParticipant?: { displayName: string };
   feedback: Pick<FeedbackModule, "createComment" | "replyToCommentThread">;
   commentsEnabled: boolean;
   rateLimiter: PortalSubmissionRateLimiter;
@@ -50,7 +53,7 @@ export function createPortalCommentHandler(options: {
         "Comments are disabled for this Installation.",
         "comments_disabled",
       );
-    const value = validateCommentInput(input);
+    const value = validateCommentInput(input, options.verifiedParticipant);
     const { success } = await options.rateLimiter.limit({
       key: `comment:${options.rateLimitKey}`,
     });
@@ -89,6 +92,8 @@ export function createPortalCommentHandler(options: {
     }
 
     const command = {
+      ...(value.imageIds ? { imageIds: value.imageIds } : {}),
+      ...(value.submissionKey ? { submissionKey: value.submissionKey } : {}),
       slug: value.slug,
       body: value.body,
       displayName: value.displayName,
@@ -338,10 +343,16 @@ export function createPortalCommentMutationRequestHandler(
   };
 }
 
-function validateCommentInput(input: unknown): PortalCommentRequest {
+function validateCommentInput(
+  input: unknown,
+  participant?: { displayName: string },
+): PortalCommentRequest {
   if (!input || typeof input !== "object" || Array.isArray(input))
     throw invalidCommentRequest();
-  const value = input as Record<string, unknown>;
+  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())
@@ -354,16 +365,35 @@ function validateCommentInput(input: unknown): PortalCommentRequest {
       "Device Profile display name is required before commenting.",
       "profile_required",
     );
-  if (!isValidCommentEmail(value.email))
+  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();
+  if (
+    value.submissionKey !== undefined &&
+    (typeof value.submissionKey !== "string" ||
+      !/^[A-Za-z0-9_-]{43}$/.test(value.submissionKey))
+  )
+    throw invalidCommentRequest();
   return {
+    ...(typeof value.submissionKey === "string"
+      ? { submissionKey: value.submissionKey }
+      : {}),
+    ...(value.imageIds ? { imageIds: value.imageIds as string[] } : {}),
     slug: value.slug.trim(),
     body: value.body.trim(),
     displayName: value.displayName.trim(),
-    email: value.email.trim(),
+    email: typeof value.email === "string" ? value.email.trim() : "",
     ...(typeof value.discussionId === "string" && value.discussionId
       ? { discussionId: value.discussionId }
       : {}),

package/template/src/portal-feedback-form.tsx

@@ -1,3 +1,5 @@
+import { submissionIntent } from "./submission-intent";
+import { ImageAttachments } from "./components/image-attachments";
 import { configuredTurnstileSiteKey } from "./turnstile-configuration";
 import type { Post, PostType, SubmittedPost } from "@feedbax/feedback";
 import { useForm } from "@tanstack/react-form";
@@ -120,6 +122,10 @@ export function PortalFeedbackForm({
 }) {
   const [draft, setDraft] = useState<StoredDraft | undefined>(initialDraft);
   const [pending, setPending] = useState(false);
+  const [images, setImages] = useState<
+    import("@feedbax/feedback").ImageAttachment[]
+  >([]);
+  const [uploading, setUploading] = useState(false);
   const [message, setMessage] = useState<string>();
   const [confirmingWithdrawal, setConfirmingWithdrawal] = useState(false);
   const turnstileToken = useRef<string | undefined>(undefined);
@@ -158,9 +164,18 @@ export function PortalFeedbackForm({
     setPending(true);
     setMessage(undefined);
     try {
+      const intent = await submissionIntent(window.sessionStorage, {
+        ...values,
+        imageIds: images.map((image) => image.id),
+        submitter: readDeviceProfile(window.localStorage),
+      });
       const result = await mutations.submitPost({
         data: {
           ...values,
+          submissionKey: intent.key,
+          ...(images.length
+            ? { imageIds: images.map((image) => image.id) }
+            : {}),
           ...(turnstileToken.current
             ? { turnstileToken: turnstileToken.current }
             : {}),
@@ -170,9 +185,9 @@ export function PortalFeedbackForm({
       const storedDraft: StoredDraft = {
         id: result.id,
         browserCapability: result.browserCapability,
-        title: values.title,
-        description: values.description,
-        type: values.type,
+        title: result.title,
+        description: result.description,
+        type: result.type,
       };
       setDraft(storedDraft);
       try {
@@ -185,6 +200,7 @@ export function PortalFeedbackForm({
           draftStorageKey,
           JSON.stringify(storedDraft),
         );
+        intent.complete();
       } catch {
         setMessage(
           "Draft submitted, but this browser could not save access. Keep this page open to manage it.",
@@ -408,9 +424,16 @@ export function PortalFeedbackForm({
               );
             }}
           />
+          {!draft ? (
+            <ImageAttachments
+              value={images}
+              onChange={setImages}
+              onUploadingChange={setUploading}
+            />
+          ) : null}
         </FieldGroup>
         <div className="feedback-submit-actions">
-          <Button type="submit" disabled={pending}>
+          <Button type="submit" disabled={pending || uploading}>
             {pending ? "Working…" : draft ? "Save changes" : "Create Post"}
           </Button>
           {display === "overlay" ? (
@@ -419,7 +442,7 @@ export function PortalFeedbackForm({
               variant="ghost"
               className="feedback-cancel"
               onClick={onCancel}
-              disabled={pending}
+              disabled={pending || uploading}
             >
               Cancel
             </Button>
@@ -430,7 +453,7 @@ export function PortalFeedbackForm({
               variant="destructive"
               className="feedback-withdraw"
               onClick={() => setConfirmingWithdrawal(true)}
-              disabled={pending}
+              disabled={pending || uploading}
             >
               Withdraw draft
             </Button>

package/template/src/portal-feedback-runtime.ts

@@ -10,6 +10,7 @@ interface PortalSubmissionEnvironment {
 }
 
 interface PortalSubmissionSecurityOptions {
+  turnstile?: FeedbaxConfig["turnstile"];
   environment: PortalSubmissionEnvironment;
   rateLimitKey: string;
 }
@@ -22,11 +23,13 @@ interface TurnstileWarningOptions {
 }
 
 export function createPortalSubmissionSecurity({
+  turnstile = feedbax.turnstile,
   environment,
   rateLimitKey,
 }: PortalSubmissionSecurityOptions) {
   const turnstileSecretKey = configuredTurnstileSecret(
     environment.TURNSTILE_SECRET_KEY,
+    turnstile,
   );
 
   return {

package/template/src/portal-feedback-server-function.ts

@@ -1,7 +1,8 @@
 import { createServerFn } from "@tanstack/react-start";
-import { getRequestIP } from "@tanstack/react-start/server";
+import { getRequest, getRequestIP } from "@tanstack/react-start/server";
 
 import {
+  requestParticipant,
   createConfiguredFeedbackModule,
   feedbackSubmissionLimits,
 } from "./feedback-runtime";
@@ -24,9 +25,10 @@ export const submitPortalFeedback = createServerFn({ method: "POST" })
       environment: env,
       nodeEnv: import.meta.env.PROD ? "production" : "development",
     });
+    const participant = await requestParticipant(getRequest());
     return runSafePortalMutation(() =>
       createPortalFeedbackSubmission({
-        feedback: createConfiguredFeedbackModule(),
+        feedback: createConfiguredFeedbackModule(participant),
         limits: feedbackSubmissionLimits,
         ...createPortalSubmissionSecurity({
           environment: env,
@@ -40,9 +42,10 @@ export const submitPortalPost = createServerFn({ method: "POST" })
   .validator((input: unknown) => input)
   .handler(async ({ data }) => {
     const { env } = await import("cloudflare:workers");
+    const participant = await requestParticipant(getRequest());
     return runSafePortalMutation(() =>
       createPortalPostSubmission({
-        feedback: createConfiguredFeedbackModule(),
+        feedback: createConfiguredFeedbackModule(participant),
         limits: feedbackSubmissionLimits,
         ...createPortalSubmissionSecurity({
           environment: env,

package/template/src/portal-feedback-submission.ts

@@ -147,8 +147,27 @@ function validateInput(
     throw invalidSubmission();
   }
   if (!isValidSubmitter(value.submitter)) throw invalidSubmission();
+  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 invalidSubmission();
 
+  if (
+    value.submissionKey !== undefined &&
+    (typeof value.submissionKey !== "string" ||
+      !/^[A-Za-z0-9_-]{43}$/.test(value.submissionKey))
+  )
+    throw invalidSubmission();
   return {
+    ...(value.submissionKey
+      ? { submissionKey: value.submissionKey as string }
+      : {}),
+    ...(value.imageIds ? { imageIds: value.imageIds as string[] } : {}),
     title: value.title,
     description: value.description,
     type: value.type,

package/template/src/portal-server-entry.ts

@@ -8,21 +8,27 @@ import {
 } from "./public-cache-policy";
 
 export function createPortalServerEntry({
+  connectedHandler,
   trustedFeedbackHandler,
   voteHandler,
   commentHandler,
   commentMutationHandler,
   applicationHandler = startHandler.fetch,
+  cachePublicReads = true,
 }: {
+  connectedHandler?: (request: Request) => Promise<Response | undefined>;
   trustedFeedbackHandler: (request: Request) => Promise<Response>;
   voteHandler?: (request: Request) => Promise<Response>;
   commentHandler?: (request: Request) => Promise<Response>;
   commentMutationHandler?: (request: Request) => Promise<Response>;
   applicationHandler?: typeof startHandler.fetch;
+  cachePublicReads?: boolean;
 }) {
   return createServerEntry({
     async fetch(request, options) {
       const url = new URL(request.url);
+      const connectedResponse = await connectedHandler?.(request);
+      if (connectedResponse) return connectedResponse;
       if (request.method === "GET" && url.pathname === "/health") {
         return Response.json(
           { status: "ok" },
@@ -58,6 +64,13 @@ export function createPortalServerEntry({
         return Response.redirect(canonicalRequest.url, 308);
       }
       const response = await applicationHandler(request, options);
+      if (!cachePublicReads) {
+        const privateResponse = new Response(response.body, response);
+        privateResponse.headers.set("Cache-Control", "no-store");
+        privateResponse.headers.delete("Cloudflare-CDN-Cache-Control");
+        privateResponse.headers.delete("Cache-Tag");
+        return privateResponse;
+      }
       return applyPublicCachePolicy(request, response);
     },
   });

package/template/src/post-creation-flow.tsx

@@ -65,11 +65,11 @@ export function PostCreationFlow({
 export function PostCreationSkeleton() {
   return (
     <main
-      className="feedback-index submission-page"
+      className="feedback-index"
       aria-label="Loading Post creation"
       aria-busy="true"
     >
-      <section className="feedback-submit creation-skeleton" aria-hidden="true">
+      <section className="feedback-submit" aria-hidden="true">
         <div className="feedback-submit-copy">
           <Skeleton className="creation-skeleton-eyebrow" />
           <Skeleton className="creation-skeleton-heading" />