using RTK with session login. start of magic token request

1 files changed, 94 insertions, 9 deletions

diff --git a/jb-ui/src/pages/Work.tsx b/jb-ui/src/pages/Work.tsx
index 32dcc96..e33328e 100644
--- a/jb-ui/src/pages/Work.tsx
+++ b/jb-ui/src/pages/Work.tsx
@@ -1,3 +1,4 @@
+import { useGetMeQuery } from "@/models/authAPI";
 import {
   BucketTask,
   OfferwallApi,
@@ -828,17 +829,101 @@ const SurveyEnter = () => {
   );
 };
 
+type RequestState = "idle" | "working" | "sent" | "failed";
+
+const Login = () => {
+  const [email, setEmail] = useState("");
+  const [state, setState] = useState<RequestState>("idle");
+  const bpuid = useAppSelector((state) => state.app.bpuid);
+
+  // const dispatch = useAppDispatch();
+  const submit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setState("working");
+
+    try {
+      const response = await fetch("/auth/magic-link/request", {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email: email,
+        }),
+      });
+
+      if (!response.ok) throw new Error("Account-link request failed");
+
+      const body = (await response.json()) as { magic_link?: string };
+      console.log(body.magic_link ?? null);
+    } catch {
+      setState("failed");
+    }
+  };
+
+  return (
+    <div className="px-6 my-6">
+      <h2
+        className="
+                    bg-blue-700 rounded py-2
+                    text-white text-2xl font-semibold text-center"
+      >
+        Please Login
+      </h2>
+
+      <form onSubmit={submit}>
+        <input
+          className="w-full rounded-md border-3 border-slate-700  px-3 py-2 font-semibold my-5"
+          type="email"
+          autoComplete="email"
+          required
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+          placeholder="hello@jamesbillings67.com"
+        />
+        <Button
+          className="w-1/2 font-semibold bg-slate-600 cursor-pointer hover:bg-blue-950"
+          type="submit"
+          disabled={state === "working"}
+        >
+          {state === "working" ? "Sending…" : "Login"}
+        </Button>
+      </form>
+
+      {state === "sent" && (
+        <h4
+          className="
+                    mt-2
+                    bg-slate-500 rounded py-2
+                    text-white text-l font-semibold text-center"
+        >
+          Check your email to login.
+        </h4>
+      )}
+
+      {state === "failed" && <p>Unable to send the link. Please try again.</p>}
+    </div>
+  );
+};
+
 const Work = () => {
   const entered = useAppSelector((state) => state.app.currentBucketEntered);
-  const assignment_id = useAppSelector((state) => state.app.assignment_id);
-
-  if (!assignment_id) {
-    return (
-      <p className="text-center text-2xl py-3 text-red-800 font-semibold">
-        No Assignment ID found. Please access this page through the Amazon
-        Mechanical Turk platform.
-      </p>
-    );
+  // const assignment_id = useAppSelector((state) => state.app.assignment_id);
+  // if (!assignment_id) {
+  //   return (
+  //     <p className="text-center text-2xl py-3 text-red-800 font-semibold">
+  //       No Assignment ID found. Please access this page through the Amazon
+  //       Mechanical Turk platform.
+  //     </p>
+  //   );
+  // }
+
+  const { data: user, isLoading, isError } = useGetMeQuery();
+  // const location = useLocation();
+
+  if (isLoading) return <div>Loading...</div>;
+
+  if (isError || !user) {
+    return <Login />;
   }
 
   return <>{entered ? <SurveyMonitor /> : <SurveyEnter />}</>;