Turnstile

.env

@@ -23,3 +23,7 @@ REACT_APP_DNS1='dns1.mermsemr.net'
 REACT_APP_DNS2='dns1.mermsemr.net'
 REACT_APP_DNS_LINK='https://qa-www.mermsemr.com/info/dns'
 
+
+#CLOUDFLARE
+NEXT_SITE_SECURITY_KEY=0x4AAAAAADQV82wuocFR-u5O
+

.env.development

@@ -24,3 +24,6 @@ REACT_APP_DNS1='dns1.mermsemr.net'
 REACT_APP_DNS2='dns1.mermsemr.net'
 REACT_APP_DNS_LINK='https://qa-www.mermsemr.com/info/dns'
 
+#CLOUDFLARE
+NEXT_SITE_SECURITY_KEY=0x4AAAAAADQV82wuocFR-u5O
+

.env.production

@@ -21,4 +21,8 @@ REACT_APP_SHOW_DOWNLOAD=0
 
 REACT_APP_DNS1='dns1.mermsemr.net'
 REACT_APP_DNS2='dns1.mermsemr.net'
-REACT_APP_DNS_LINK='https://www.mermsemr.com/info/dns'
+REACT_APP_DNS_LINK='https://www.mermsemr.com/info/dns'
+
+#CLOUDFLARE
+NEXT_SITE_SECURITY_KEY=0x4AAAAAADQV82wuocFR-u5O
+

.env.qa

@@ -18,4 +18,8 @@ REACT_APP_TIMEOUT=600000
 
 REACT_APP_DNS1='dns1.mermsemr.net'
 REACT_APP_DNS2='dns1.mermsemr.net'
-REACT_APP_DNS_LINK='https://qa-www.mermsemr.com/info/dns'
+REACT_APP_DNS_LINK='https://qa-www.mermsemr.com/info/dns'
+
+#CLOUDFLARE
+NEXT_SITE_SECURITY_KEY=0x4AAAAAADQV82wuocFR-u5O
+

package.json

@@ -8,6 +8,7 @@
     "@fullcalendar/interaction": "^6.1.15",
     "@fullcalendar/react": "^6.1.15",
     "@fullcalendar/timegrid": "^6.1.15",
+    "@marsidev/react-turnstile": "^1.5.2",
     "@popperjs/core": "^2.11.8",
     "@reduxjs/toolkit": "^2.4.0",
     "@stripe/react-stripe-js": "^3.9.1",

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
+        rememberMe(fields.remember)
-        delete fields.remember // REMOVING REMEMBER FROM THE PAYLOAD
+        delete fields.remember
-        return loginUser(fields)
+        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}>