Turnstile

src/component/auth/Login2.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
 import { useDispatch, useSelector } from 'react-redux'
+import { Turnstile } from '@marsidev/react-turnstile'
 
 // import LoginImg from '../../assets/bg/login.svg'
 
@@ -26,6 +27,8 @@ export default function Login() {
     remember: false
   })
 
+  const [turnstileToken, setTurnstileToken] = useState(null)
+
   const handleChange = ({target:{name, value}}) => {
     if(name == 'remember'){
         return setFields(prev => ({...prev, remember:!prev.remember}))
@@ -34,13 +37,13 @@ export default function Login() {
   }
 
   const login = useMutation({
-    mutationFn: (fields) => {
+    mutationFn: ({ turnstileToken, ...fields }) => {
         if(!fields.username || !fields.password){
             throw new Error('Please provide all fields marked *')
         }
-        rememberMe(fields.remember) // FUNCTION TO SAVE USERNAME OF THE USER TO LOCAL STORAGE
-        delete fields.remember // REMOVING REMEMBER FROM THE PAYLOAD
-        return loginUser(fields)
+        rememberMe(fields.remember)
+        delete fields.remember
+        return loginUser({ ...fields, turnstileToken })
     },
     onError: (error) => {
         console.log(error)
@@ -101,6 +104,14 @@ export default function Login() {
                                                         <input maxLength={25} name='password' value={fields.password} onChange={handleChange} type="password" className="form-control" placeholder="Password" />
                                                     </div>
                                                 </div>
+                                                <div className="col-12 mt-3">
+                                                    <Turnstile
+                                                        siteKey={process.env.REACT_APP_TURNSTILE_SITE_KEY}
+                                                        onSuccess={setTurnstileToken}
+                                                        onExpire={() => setTurnstileToken(null)}
+                                                        onError={() => setTurnstileToken(null)}
+                                                    />
+                                                </div>
                                                 <div className="col-12">
                                                     <div className="d-block d-sm-flex  align-items-center">
                                                         <div className="form-check">
@@ -120,7 +131,7 @@ export default function Login() {
                                                 </>
                                                 }
                                                 <div className="col-12 mt-3 text-end">
-                                                    <button type='button' onClick={()=>{login.mutate(fields)}} className="btn btn-primary text-uppercase">{login.isPending ? 'loading...' : 'Sign In'}</button>
+                                                    <button type='button' onClick={()=>{login.mutate({...fields, turnstileToken})}} disabled={!turnstileToken || login.isPending} className="btn btn-primary text-uppercase">{login.isPending ? 'loading...' : 'Sign In'}</button>
                                                 </div>
                                                 <div className="col-12  mt-3">
                                                     <p> <Link to={siteLinks.signup}>