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;