Sign in

flagon-io/g1t

public

g1t/apps/web/app/routes/device.tsx

127 lines4,767 bytesCodeBlame

Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.

Device sign-in replaces registering and minting tokens over the API1import { CircleCheck, CircleX, KeyRound } from "lucide-react";
2import { Form } from "react-router";
3
4import type { Route } from "./+types/device";
Social cards for every page: og.g1t.sh5import { page } from "../lib/meta";
Merge branch 'worktree-agent-a985c01f43538af01'6import { Button, ErrorText, Field, Input, SubmitButton, usePending } from "../components/ui";
Device sign-in replaces registering and minting tokens over the API7import { identity } from "../lib/services.server";
8import { assertSameOrigin, requireUser } from "../lib/session.server";
9
Social cards for every page: og.g1t.sh10export function meta(args: Route.MetaArgs) {
11 return page(args, { title: "Connect an application · g1t" });
Device sign-in replaces registering and minting tokens over the API12}
13
14/** Where a tool sends a person to approve its sign-in. */
15export async function loader({ request, context }: Route.LoaderArgs) {
16 const user = requireUser(context, request);
17 const code = new URL(request.url).searchParams.get("code") ?? "";
18 return {
19 user,
20 code,
21 pending: code ? await identity.deviceLookup(code) : null,
22 };
23}
24
25export async function action({ request, context }: Route.ActionArgs) {
26 assertSameOrigin(request);
27 const user = requireUser(context, request);
28 const form = await request.formData();
29 const approve = form.get("decision") === "approve";
30 const result = await identity.deviceResolve(
31 String(form.get("code") ?? ""),
32 user,
33 approve,
34 );
35 return result.ok
36 ? { done: approve ? ("approved" as const) : ("denied" as const) }
37 : { error: result.error.message };
38}
39
40export default function Device({ loaderData, actionData }: Route.ComponentProps) {
41 const { user, code, pending } = loaderData;
Merge branch 'worktree-agent-a985c01f43538af01'42 // Either answer turns both buttons off until it is in.
43 const deciding = usePending();
Device sign-in replaces registering and minting tokens over the API44
45 if (actionData && "done" in actionData) {
46 const approved = actionData.done === "approved";
47 const Icon = approved ? CircleCheck : CircleX;
48 return (
49 <main className="mx-auto max-w-md px-4 py-32 text-center">
50 <Icon size={40} className={`mx-auto ${approved ? "text-accent" : "text-muted"}`} />
51 <h1 className="mt-6 text-2xl font-semibold tracking-tight">
52 {approved ? "Connected" : "Request denied"}
53 </h1>
54 <p className="mt-2 text-muted">
55 {approved
56 ? "Go back to the application. It will finish signing in on its own."
57 : "Nothing was given access to your account."}
58 </p>
59 </main>
60 );
61 }
62
63 return (
64 <main className="mx-auto max-w-md px-4 py-24">
65 <KeyRound size={36} className="text-accent" />
66 <h1 className="mt-6 text-2xl font-semibold tracking-tight">
67 Connect an application
68 </h1>
69
70 {pending ? (
71 <>
72 <p className="mt-2 text-muted">
73 <span className="font-medium text-fg">{pending.clientName}</span>{" "}
74 wants to act as{" "}
75 <span className="font-mono font-medium text-fg">{user.username}</span>{" "}
76 on g1t.
77 </p>
78 <p className="mt-6 text-sm text-muted">
79 Check that this code matches the one it is showing you:
80 </p>
81 <p className="mt-2 rounded-xl border border-line bg-surface py-5 text-center font-mono text-3xl font-semibold tracking-[0.2em]">
82 {pending.userCode}
83 </p>
84 <p className="mt-4 text-sm text-muted">
85 Approving creates an access token with the full rights of your
86 account. You can delete it in settings at any time.
87 </p>
88 <Form method="post" className="mt-6 flex gap-3">
89 <input type="hidden" name="code" value={pending.userCode} />
90 <div className="grow *:w-full">
Merge branch 'worktree-agent-a985c01f43538af01'91 <SubmitButton variant="accent" name="decision" value="approve" pending="Approving…" disabled={deciding}>
Device sign-in replaces registering and minting tokens over the API92 Approve
Merge branch 'worktree-agent-a985c01f43538af01'93 </SubmitButton>
Device sign-in replaces registering and minting tokens over the API94 </div>
Merge branch 'worktree-agent-a985c01f43538af01'95 <SubmitButton variant="quiet" name="decision" value="deny" pending="Denying…" disabled={deciding}>
Device sign-in replaces registering and minting tokens over the API96 Deny
Merge branch 'worktree-agent-a985c01f43538af01'97 </SubmitButton>
Device sign-in replaces registering and minting tokens over the API98 </Form>
99 </>
100 ) : (
101 <>
102 <p className="mt-2 text-muted">
103 {code
104 ? "That code is not valid or has expired. Start again from the application, or enter the code it shows."
105 : "Enter the code the application is showing you."}
106 </p>
107 <Form method="get" className="mt-6 space-y-4">
108 <Field label="Code">
109 <Input
110 name="code"
111 placeholder="XXXX-XXXX"
112 autoComplete="off"
113 autoCapitalize="characters"
114 required
115 autoFocus
116 />
117 </Field>
118 <div className="*:w-full">
119 <Button type="submit">Continue</Button>
120 </div>
121 </Form>
122 </>
123 )}
124 <ErrorText>{actionData && "error" in actionData ? actionData.error : null}</ErrorText>
125 </main>
126 );
127}

This file's history is long; its oldest lines are credited to the oldest commit read.