blob: a72626f02f45c2903422ad8e9050ffcb9043ec41 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
import { type FormEvent, useState } from "react";
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 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");
}
};
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;
|
