Turnstile

src/components/auth/LoginCom.jsx

@@ -4,6 +4,7 @@ import {useNavigate} from 'react-router-dom'
 import {useMutation} from '@tanstack/react-query'
 import {Formik, Form} from 'formik'
 import * as Yup from "yup";
+import {Turnstile} from '@marsidev/react-turnstile'
 
 import InputText from '../InputText'
 import {updateUserDetails} from "../../store/UserDetails";
@@ -30,6 +31,7 @@ export default function LoginCom() {
     const navigate = useNavigate()
 
     const [loading, setLoading] = useState(false)
+    const [turnstileToken, setTurnstileToken] = useState(null)
 
     const login = useMutation({
         mutationFn: (fields) => {
@@ -53,9 +55,9 @@ export default function LoginCom() {
     })
 
     //FUNCTION TO HANDLE LOGIN
-    const handleSubmit = (values, helper) => {
-        login.mutate(values)
-        // handleLogin()
+    const handleSubmit = (values) => {
+        if (!turnstileToken) return
+        login.mutate({...values, cf_turnstile_response: turnstileToken})
     };
 
     return (
@@ -107,9 +109,17 @@ export default function LoginCom() {
                                                 />
                                                 {/* <p className='text-sm text-end font-medium text-primary'>Forget password ?</p> */}
                                             </div>
+                                            <div className="text-center col-12 mt-3">
+                                                    <Turnstile
+                                                        siteKey={process.env.REACT_APP_TURNSTILE_SITE_KEY}
+                                                        onSuccess={setTurnstileToken}
+                                                        onExpire={() => setTurnstileToken(null)}
+                                                        onError={() => setTurnstileToken(null)}
+                                                    />
+                                                </div>
                                             <div className='h-10 mb-10'>
-                                                <button type='submit' disabled={login.isPending}
-                                                        className='w-full h-full bg-primary text-white font-bold rounded-md'>{login.isPending || loading ? 'loading...' : 'Login'}</button>
+                                                <button type='submit' disabled={login.isPending || !turnstileToken}
+                                                        className='w-full h-full bg-primary text-white font-bold rounded-md disabled:opacity-50 disabled:cursor-not-allowed'>{login.isPending || loading ? 'loading...' : 'Login'}</button>
                                             </div>
 
                                             {login.error &&