Skip to content
Sign up

flagon-io/g1t

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