aboutsummaryrefslogtreecommitdiff
path: root/jb-ui/src/pages/LinkAmtAccount.tsx
diff options
context:
space:
mode:
authorMax Nanis2026-09-10 17:46:41 -0700
committerMax Nanis2026-09-10 17:46:41 -0700
commited201936813d9a720b51e6cb40a05267b94e7314 (patch)
treef675f6a0d91ed1d17f654e40936e8c1ca9ccf141 /jb-ui/src/pages/LinkAmtAccount.tsx
parent0ac38066402762dc5fa24f2ffa2170681a6eddb1 (diff)
downloadamt-jb-ed201936813d9a720b51e6cb40a05267b94e7314.tar.gz
amt-jb-ed201936813d9a720b51e6cb40a05267b94e7314.zip
Typescript prettier
Committing seperate so it's easier to see actual changes.
Diffstat (limited to 'jb-ui/src/pages/LinkAmtAccount.tsx')
-rw-r--r--jb-ui/src/pages/LinkAmtAccount.tsx131
1 files changed, 71 insertions, 60 deletions
diff --git a/jb-ui/src/pages/LinkAmtAccount.tsx b/jb-ui/src/pages/LinkAmtAccount.tsx
index 0c9dab3..a72626f 100644
--- a/jb-ui/src/pages/LinkAmtAccount.tsx
+++ b/jb-ui/src/pages/LinkAmtAccount.tsx
@@ -5,69 +5,80 @@ import { Button } from "@/components/ui/button";
type RequestState = "idle" | "working" | "sent" | "failed" | "missing-worker";
const LinkAmtAccount = function () {
- const [email, setEmail] = useState("");
- const [state, setState] = useState<RequestState>("idle");
- const [mockLink, setMockLink] = useState<string | null>(null);
- const amtWorkerId = new URLSearchParams(window.location.search).get("workerId");
+ const [email, setEmail] = useState("");
+ const [state, setState] = useState<RequestState>("idle");
+ const [mockLink, setMockLink] = useState<string | null>(null);
+ const amtWorkerId = new URLSearchParams(window.location.search).get(
+ "workerId",
+ );
- const submit = async (event: FormEvent<HTMLFormElement>) => {
- event.preventDefault();
- if (!amtWorkerId) {
- setState("missing-worker");
- return;
- }
+ const submit = async (event: FormEvent<HTMLFormElement>) => {
+ event.preventDefault();
+ if (!amtWorkerId) {
+ setState("missing-worker");
+ return;
+ }
- setState("working");
- setMockLink(null);
- try {
- const response = await fetch("/auth/link-amt/request", {
- method: "POST",
- credentials: "include",
- headers: {"Content-Type": "application/json"},
- body: JSON.stringify({
- "email": email,
- "amt_worker_id": amtWorkerId,
- }),
- });
- if (!response.ok) throw new Error("Account-link request failed");
- const body = await response.json() as {magic_link?: string};
- setMockLink(body.magic_link ?? null);
- setState("sent");
- } catch {
- setState("failed");
- }
- };
+ setState("working");
+ setMockLink(null);
+ try {
+ const response = await fetch("/auth/link-amt/request", {
+ method: "POST",
+ credentials: "include",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ email: email,
+ amt_worker_id: amtWorkerId,
+ }),
+ });
+ if (!response.ok) throw new Error("Account-link request failed");
+ const body = (await response.json()) as { magic_link?: string };
+ setMockLink(body.magic_link ?? null);
+ setState("sent");
+ } catch {
+ setState("failed");
+ }
+ };
- return (
- <main className="flex min-h-screen items-center justify-center bg-zinc-200 p-4">
- <section className="w-full max-w-md space-y-4 rounded-lg bg-white p-6 shadow-lg">
- <h1 className="text-xl font-semibold">Link your MTurk account</h1>
- <p>Enter the email address you want to use for James Billings.</p>
- <form className="space-y-4" onSubmit={submit}>
- <input
- className="w-full rounded-md border px-3 py-2"
- type="email"
- autoComplete="email"
- required
- value={email}
- onChange={(event) => setEmail(event.target.value)}
- placeholder="you@example.com"
- />
- <Button type="submit" disabled={state === "working"}>
- {state === "working" ? "Sending…" : "Send link"}
- </Button>
- </form>
- {state === "sent" && <p>Check your email to finish linking your account.</p>}
- {state === "failed" && <p>Unable to send the link. Please try again.</p>}
- {state === "missing-worker" && <p>This page is missing your MTurk worker ID.</p>}
- {mockLink && (
- <p>
- Development link: <a className="underline" href={mockLink}>continue</a>
- </p>
- )}
- </section>
- </main>
- );
+ return (
+ <main className="flex min-h-screen items-center justify-center bg-zinc-200 p-4">
+ <section className="w-full max-w-md space-y-4 rounded-lg bg-white p-6 shadow-lg">
+ <h1 className="text-xl font-semibold">Link your MTurk account</h1>
+ <p>Enter the email address you want to use for James Billings.</p>
+ <form className="space-y-4" onSubmit={submit}>
+ <input
+ className="w-full rounded-md border px-3 py-2"
+ type="email"
+ autoComplete="email"
+ required
+ value={email}
+ onChange={(event) => setEmail(event.target.value)}
+ placeholder="you@example.com"
+ />
+ <Button type="submit" disabled={state === "working"}>
+ {state === "working" ? "Sending…" : "Send link"}
+ </Button>
+ </form>
+ {state === "sent" && (
+ <p>Check your email to finish linking your account.</p>
+ )}
+ {state === "failed" && (
+ <p>Unable to send the link. Please try again.</p>
+ )}
+ {state === "missing-worker" && (
+ <p>This page is missing your MTurk worker ID.</p>
+ )}
+ {mockLink && (
+ <p>
+ Development link:{" "}
+ <a className="underline" href={mockLink}>
+ continue
+ </a>
+ </p>
+ )}
+ </section>
+ </main>
+ );
};
export default LinkAmtAccount;