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,42 @@
+"use client";
+import { useActionState } from "react";
+import { FormMessage, SubmitButton } from "@/components/forms";
+import { NarrowCard } from "@/components/narrow-card";
+import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { approveDevice } from "./actions";
+
+export function DeviceForm({ code, username }: { code: string; username: string }) {
+  const [state, action] = useActionState(approveDevice, null);
+
+  if (state && !state.error)
+    return <NarrowCard title="T5DE is signed in" description="You can close this page and go back to T5DE." />;
+
+  return (
+    <NarrowCard title="Sign T5DE in" description={`Enter the code T5DE shows, to sign it in as ${username}.`}>
+      <form action={action}>
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="code">Code</FieldLabel>
+            <Input
+              id="code"
+              name="code"
+              defaultValue={code}
+              placeholder="XXXX-XXXX"
+              required
+              autoFocus
+              autoComplete="off"
+              spellCheck={false}
+              className="h-11 text-center font-mono text-lg tracking-widest uppercase"
+            />
+          </Field>
+          <FormMessage state={state} />
+          <Field>
+            <SubmitButton pendingLabel="Signing in…">Sign in</SubmitButton>
+            <FieldDescription>Only enter a code you got from T5DE yourself.</FieldDescription>
+          </Field>
+        </FieldGroup>
+      </form>
+    </NarrowCard>
+  );
+}