turnstile

src/component/auth/Signup2.jsx

@@ -1,5 +1,6 @@
 import React, {useState} from 'react'
 import {Form, Formik} from "formik";
+import { Turnstile } from '@marsidev/react-turnstile'
 import * as Yup from "yup";
 
 // import LoginImg from '../../assets/bg/login.svg'
@@ -33,6 +34,7 @@ const initialValues = {
     firstname: '',
     lastname: '',
     isChecked: false,
+    turnstileToken: '',
     // username: '',
     // password: ''
 };
@@ -157,9 +159,17 @@ export default function Signup2() {
                                                                                 </div>
                                                                             </>
                                                                         }
-
+                                                                        <div className="col-12 mt-3">
+                                                                            <Turnstile
+                                                                                siteKey={process.env.REACT_APP_TURNSTILE_SITE_KEY}      
+                                                                                onSuccess={(token) => props.setFieldValue('turnstileToken', token)}
+                                                                                onExpire={() => props.setFieldValue('turnstileToken', null)}
+                                                                                onError={() => props.setFieldValue('turnstileToken', null)}
+                                                                            />  
+                                                                        </div>
                                                                         <div className="col-12 mt-3 text-end">
                                                                             <button type='submit'
+                                                                                    disabled={!props.values.turnstileToken || mutation.isPending}
                                                                                     className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
                                                                         </div>
                                                                     </>