restore turnstile on sign up page

Author: GracefulLemming

website/src/pages/auth/signup.page.tsx

@@ -16,8 +16,8 @@ import { centeredForm } from "./user-auth.css"
 
 const SignupPage = () => {
   const { createUser } = useUser().operations
-  // const [, validateTurnstileToken] = Dailp.useValidateTurnstileTokenMutation()
-  // const [turnstileToken, setTurnstileToken] = useState("")
+  const [, validateTurnstileToken] = Dailp.useValidateTurnstileTokenMutation()
+  const [turnstileToken, setTurnstileToken] = useState("")
 
   const signupForm = useFormState({
     values: { email: "", password: "" },
@@ -31,34 +31,34 @@ const SignupPage = () => {
     onSubmit: (values) => {
       console.log(`Submitted! email is ${values.email}`)
 
-      // if (!turnstileToken) {
-      //   throw { turnstileToken: "A turnstile token is required" }
-      // }
+      if (!turnstileToken) {
+        throw { turnstileToken: "A turnstile token is required" }
+      }
 
-      // validateTurnstileToken({
-      //   token: turnstileToken,
-      // }).then((result) => {
-      //   if (result.data?.validateTurnstileToken) {
-      createUser(values.email, values.password)
-      //   } else {
-      //     throw { turnstileToken: "Invalid turnstile token" }
-      //   }
-      // })
+      validateTurnstileToken({
+        token: turnstileToken,
+      }).then((result) => {
+        if (result.data?.validateTurnstileToken) {
+          createUser(values.email, values.password)
+        } else {
+          throw { turnstileToken: "Invalid turnstile token" }
+        }
+      })
     },
   })
 
-  // const [TurnstileClient, setTurnstileClient] =
-  //   useState<ForwardRefExoticComponent<
-  //     TurnstileProps & React.RefAttributes<TurnstileInstance | undefined>
-  //   > | null>(null)
-  // const [siteKey, setSiteKey] = useState<string | null>(null)
+  const [TurnstileClient, setTurnstileClient] =
+    useState<ForwardRefExoticComponent<
+      TurnstileProps & React.RefAttributes<TurnstileInstance | undefined>
+    > | null>(null)
+  const [siteKey, setSiteKey] = useState<string | null>(null)
 
-  // useEffect(() => {
-  //   import("@marsidev/react-turnstile").then((m) => {
-  //     setTurnstileClient(m.Turnstile)
-  //     setSiteKey(process.env["TURNSTILE_SITE_KEY"] ?? null)
-  //   })
-  // }, [])
+  useEffect(() => {
+    import("@marsidev/react-turnstile").then((m) => {
+      setTurnstileClient(m.Turnstile)
+      setSiteKey(process.env["TURNSTILE_SITE_KEY"] ?? null)
+    })
+  }, [])
 
   return (
     <UserAuthPageTemplate
@@ -88,14 +88,14 @@ const SignupPage = () => {
         <LoginLink />
 
         <FormSubmitButton form={signupForm} label="Sign Up" />
-        {/* {TurnstileClient && siteKey && (
+        {TurnstileClient && siteKey && (
           <div style={{ display: "flex", justifyContent: "center" }}>
             <TurnstileClient
               siteKey={siteKey}
               onSuccess={(token) => setTurnstileToken(token)}
             />
           </div>
-        )} */}
+        )}
       </Form>
     </UserAuthPageTemplate>
   )