Website: Next.js app for accounts, linking, who's online, device sign-in and the console

apps/web: Next.js 16 (App Router), Tailwind 4 and shadcn/ui, light and dark from the system. Pages render on the server and call the API with Eden Treaty (typed by @t5de/api), forwarding the visitor's cookie; forms use server actions; sign-up, sign-in and sign-out use Better Auth's React client. /api is rewritten to the API so its cookies are first-party. Who's online follows the API's event stream (Next's gzip is off: it held the stream back). Standalone output with a Dockerfile; deploys to Vercel as is. Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-29 05:02:00 -07:00
1 parent 7afada1c63
commit 64c552330b
@@ -0,0 +1,58 @@
+import { CopyButton } from "@/components/copy-button";
+import { ActionForm, SubmitButton } from "@/components/forms";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import type { Challenge } from "@/lib/api";
+import { challengeAction } from "./actions";
+
+/** A link in progress: the code to put in the tagline, then Check. */
+export function ChallengeCard({ challenge: c }: { challenge: Challenge }) {
+  return (
+    <Card id={`link-${c.imvuId}`}>
+      <CardHeader>
+        <CardTitle>Link {c.username}</CardTitle>
+        <CardDescription>To prove {c.username} is yours:</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ActionForm action={challengeAction} fields={{ imvu: c.imvuId }} className="space-y-6">
+          <ol className="space-y-5 text-sm">
+            <Step n={1}>
+              <p>
+                Put this code anywhere in {c.username}&apos;s IMVU tagline (on your avatar card in the client, or your
+                profile):
+              </p>
+              <div className="mt-3 flex flex-wrap items-center gap-3">
+                <code className="rounded-lg border bg-muted/50 px-4 py-2.5 font-mono text-xl font-semibold tracking-wider select-all sm:text-2xl">
+                  {c.code}
+                </code>
+                <CopyButton text={c.code} />
+              </div>
+            </Step>
+            <Step n={2}>
+              <p>Press Check. You can take the code out again once it&apos;s linked.</p>
+            </Step>
+          </ol>
+          <div className="flex flex-wrap items-center gap-3">
+            <SubmitButton name="intent" value="check" pendingLabel="Checking…">
+              Check
+            </SubmitButton>
+            <SubmitButton variant="outline" name="intent" value="cancel" pendingLabel="Cancelling…">
+              Cancel
+            </SubmitButton>
+            <span className="text-sm text-muted-foreground">The code works for a day.</span>
+          </div>
+        </ActionForm>
+      </CardContent>
+    </Card>
+  );
+}
+
+function Step({ n, children }: { n: number; children: React.ReactNode }) {
+  return (
+    <li className="flex gap-3">
+      <span className="grid size-6 shrink-0 place-items-center rounded-full border text-xs font-medium text-muted-foreground">
+        {n}
+      </span>
+      <div className="min-w-0 flex-1 pt-0.5">{children}</div>
+    </li>
+  );
+}