Read turnstile token directly from input element

app/routes/report.tsx

@@ -42,7 +42,6 @@ export default function () {
   const [supportsRequestStreams, setSupportsRequestStreams] = useState(false);
   const toast = useToast();
   const [uploading, setUploading] = useState(false);
-  const [turnstileToken, setTurnstileToken] = useState("");
   const fileTypes: { [k: string]: string } = {
     gif: "image/gif",
     heic: "image/heic",
@@ -81,16 +80,12 @@ export default function () {
         }).headers.has("Content-Type");
 
         return duplexAccessed && !hasContentType;
-      })()
+      })(),
     );
   }, []);
 
   const { logged_in, site_key } = useLoaderData<typeof loader>();
 
-  function setToken(token: string) {
-    setTurnstileToken(token);
-  }
-
   async function submit() {
     const usernames = (
       document.getElementById("usernames") as HTMLInputElement
@@ -124,13 +119,23 @@ export default function () {
         title: "Too Many Usernames",
       });
 
-    if (!logged_in && !turnstileToken)
+    let turnstileToken = "";
-      return toast({
+
-        description: "Please complete the captcha and try again",
+    if (!logged_in) {
-        isClosable: true,
+      const tokenElem = document
-        status: "error",
+        .getElementsByName("cf-turnstile-response")
-        title: "Captcha not completed",
+        .item(0) as HTMLInputElement;
-      });
+
+      if (!tokenElem.value)
+        return toast({
+          description: "Please complete the captcha and try again",
+          isClosable: true,
+          status: "error",
+          title: "Captcha not completed",
+        });
+
+      turnstileToken = tokenElem.value;
+    }
 
     const description = (
       document.getElementById("description") as HTMLTextAreaElement
@@ -144,6 +149,7 @@ export default function () {
 
     const submitReq = await fetch("/api/reports/submit", {
       body: JSON.stringify({
+        bypass: false,
         description: description || undefined,
         files: filelist,
         turnstileResponse: logged_in ? undefined : turnstileToken,
@@ -300,11 +306,7 @@ export default function () {
           <Textarea id="description" maxLength={512} />
         </FormControl>
         <br />
-        <div
+        <div className="cf-turnstile" data-sitekey={site_key}></div>
-          className="cf-turnstile"
-          data-callback="setToken"
-          data-sitekey={site_key}
-        ></div>
         <br />
         <Text>
           By submitting this form, you agree to the{" "}