dhkatzandClaude Opus 5.5
64c552330b
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]>
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
"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>
|
|
);
|
|
}
|