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,117 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { ActionForm, SubmitButton } from "@/components/forms";
+import { PageHeader, Tag } from "@/components/status";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { api, getMe, isModerator, unwrap } from "@/lib/api";
+import { linkAccount, signOutComputers } from "./actions";
+import { ChallengeCard } from "./challenge-card";
+import { LinkCard } from "./link-card";
+
+export const metadata: Metadata = { title: "Account" };
+
+export default async function Account({ searchParams }: { searchParams: Promise<{ welcome?: string }> }) {
+  const me = await getMe();
+  if (!me) redirect("/signin?next=/account");
+  const account = unwrap(await api.account.get());
+  const { person, links, challenges, computers } = account;
+  const welcome = (await searchParams).welcome !== undefined;
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title="Your account">
+        <span className="flex flex-wrap items-center gap-2">
+          Signed in as {person.username}
+          {isModerator(person) && <Tag tone="strong">{person.role}</Tag>}
+        </span>
+      </PageHeader>
+
+      {welcome && (
+        <Alert>
+          <AlertTitle>Welcome to T5DE, {person.username}.</AlertTitle>
+          <AlertDescription>Link an IMVU account below to get started.</AlertDescription>
+        </Alert>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>IMVU accounts</CardTitle>
+          <CardDescription>
+            {links.length} of {person.linkCap}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {links.length > 0 ? (
+            <ul className="divide-y">
+              {links.map((link) => (
+                <LinkCard key={link.imvuId} link={link} />
+              ))}
+            </ul>
+          ) : (
+            <p className="text-sm text-muted-foreground">No IMVU accounts linked yet.</p>
+          )}
+        </CardContent>
+      </Card>
+
+      {challenges.map((c) => (
+        <ChallengeCard key={c.imvuId} challenge={c} />
+      ))}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Link an IMVU account</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {account.canLink ? (
+            <ActionForm action={linkAccount}>
+              <div className="flex max-w-md gap-2">
+                <Input name="username" placeholder="IMVU username" required maxLength={64} aria-label="IMVU username" />
+                <SubmitButton pendingLabel="Looking…">Next</SubmitButton>
+              </div>
+            </ActionForm>
+          ) : (
+            <p className="text-sm">
+              You&apos;ve linked as many IMVU accounts as you can ({person.linkCap}). Ask a moderator if you need more.
+            </p>
+          )}
+          <p className="text-sm text-muted-foreground">
+            Other people can&apos;t see which IMVU accounts are yours. Age-verified IMVU accounts (or with Access Pass)
+            can see adult community products; each account is checked on its own.
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>T5DE on your computers</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-sm text-muted-foreground">
+            {computers > 0
+              ? `Signed in on ${computers} computer${computers === 1 ? "" : "s"}.`
+              : "Not signed in on any computer yet."}{" "}
+            To sign T5DE in, it shows a code to enter at{" "}
+            <Link href="/device" className="text-foreground underline underline-offset-4">
+              /device
+            </Link>
+            .
+          </p>
+          {computers > 0 && (
+            <ActionForm action={signOutComputers}>
+              <SubmitButton
+                variant="outline"
+                pendingLabel="Signing out…"
+                confirm="Sign T5DE out on all your computers?"
+              >
+                Sign out everywhere
+              </SubmitButton>
+            </ActionForm>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}