| 1 | import { CircleCheck, CircleX, KeyRound } from "lucide-react"; |
| 2 | import { Form } from "react-router"; |
| 3 | |
| 4 | import type { Route } from "./+types/device"; |
| 5 | import { page } from "../lib/meta"; |
| 6 | import { ErrorText, Field, Input, SubmitButton, usePending } from "../components/ui"; |
| 7 | import { Button } from "../components/ui/button"; |
| 8 | import { Card } from "../components/ui/card"; |
| 9 | import { identity } from "../lib/services.server"; |
| 10 | import { assertSameOrigin, requireUser } from "../lib/session.server"; |
| 11 | |
| 12 | export 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. */ |
| 17 | export 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 | |
| 27 | export 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(String(form.get("code") ?? ""), user, approve); |
| 33 | return result.ok ? { done: approve ? ("approved" as const) : ("denied" as const) } : { error: result.error.message }; |
| 34 | } |
| 35 | |
| 36 | export default function Device({ loaderData, actionData }: Route.ComponentProps) { |
| 37 | const { user, code, pending } = loaderData; |
| 38 | // Either answer turns both buttons off until it is in. |
| 39 | const deciding = usePending(); |
| 40 | |
| 41 | if (actionData && "done" in actionData) { |
| 42 | const approved = actionData.done === "approved"; |
| 43 | const Icon = approved ? CircleCheck : CircleX; |
| 44 | return ( |
| 45 | <main className="mx-auto max-w-md pt-10 text-center"> |
| 46 | <Icon size={40} className={`mx-auto ${approved ? "text-success" : "text-muted"}`} /> |
| 47 | <h1 className="mt-6 text-2xl font-semibold tracking-tight">{approved ? "Connected" : "Request denied"}</h1> |
| 48 | <p className="mt-2 text-muted"> |
| 49 | {approved ? "Go back to the application. It will finish signing in on its own." : "Nothing was given access to your account."} |
| 50 | </p> |
| 51 | </main> |
| 52 | ); |
| 53 | } |
| 54 | |
| 55 | return ( |
| 56 | <main className="mx-auto max-w-md pt-8"> |
| 57 | <KeyRound size={36} className="text-accent" /> |
| 58 | <h1 className="mt-6 text-2xl font-semibold tracking-tight">Connect an application</h1> |
| 59 | |
| 60 | {pending ? ( |
| 61 | <> |
| 62 | <p className="mt-2 text-muted"> |
| 63 | <span className="font-medium text-fg">{pending.clientName}</span> wants to act as{" "} |
| 64 | <span className="font-mono font-medium text-fg">{user.username}</span> on g1t. |
| 65 | </p> |
| 66 | <p className="mt-6 text-sm text-muted">Check that this code matches the one it is showing you:</p> |
| 67 | <Card asChild className="mt-2 py-5 text-center font-mono text-3xl font-semibold tracking-[0.2em]"> |
| 68 | <p>{pending.userCode}</p> |
| 69 | </Card> |
| 70 | <p className="mt-4 text-sm text-muted"> |
| 71 | Approving creates an access token with the full rights of your account. You can delete it in settings at any time. |
| 72 | </p> |
| 73 | <Form method="post" className="mt-6 flex gap-3"> |
| 74 | <input type="hidden" name="code" value={pending.userCode} /> |
| 75 | <div className="grow *:w-full"> |
| 76 | <SubmitButton variant="accent" name="decision" value="approve" pending="Approving…" disabled={deciding}> |
| 77 | Approve |
| 78 | </SubmitButton> |
| 79 | </div> |
| 80 | <SubmitButton variant="outline" name="decision" value="deny" pending="Denying…" disabled={deciding}> |
| 81 | Deny |
| 82 | </SubmitButton> |
| 83 | </Form> |
| 84 | </> |
| 85 | ) : ( |
| 86 | <> |
| 87 | <p className="mt-2 text-muted"> |
| 88 | {code |
| 89 | ? "That code is not valid or has expired. Start again from the application, or enter the code it shows." |
| 90 | : "Enter the code the application is showing you."} |
| 91 | </p> |
| 92 | <Form method="get" className="mt-6 space-y-4"> |
| 93 | <Field label="Code"> |
| 94 | <Input name="code" placeholder="XXXX-XXXX" autoComplete="off" autoCapitalize="characters" required autoFocus /> |
| 95 | </Field> |
| 96 | <div className="*:w-full"> |
| 97 | <Button type="submit">Continue</Button> |
| 98 | </div> |
| 99 | </Form> |
| 100 | </> |
| 101 | )} |
| 102 | <ErrorText>{actionData && "error" in actionData ? actionData.error : null}</ErrorText> |
| 103 | </main> |
| 104 | ); |
| 105 | } |