centralized captcha section

.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
+REACT_APP_TURNSTILE_SITE_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
+REACT_APP_TURNSTILE_SITE_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
+REACT_APP_TURNSTILE_SITE_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
+REACT_APP_TURNSTILE_SITE_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/Forgetpwd2.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, 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'
 
@@ -17,13 +18,14 @@ const validationSchema = Yup.object().shape({
     //     /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
     //     "Invalid email format"
     //   )
-      .min(3, "Minimum 3 characters")
-      .max(25, "Maximum 25 characters")
-      .required("Email is required"),
+      .min(3, "Username must be at least 3 characters")
+      .max(25, "Entered Username is too long")
+      .required("Enter a valid username to continue"),
   })
 
   const initialValues = {
-    username: ''
+    username: '',
+    turnstileToken: ''
   };
 
 export default function Forgetpwd2() {
@@ -77,8 +79,18 @@ export default function Forgetpwd2() {
                                                             </div>
                                                             </>
                                                             }
+
+                                                            <div className="text-center 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' className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Send'}</button>
+                                                                <button type='submit' disabled={!props.values.turnstileToken || mutation.isPending} className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Send'}</button>
                                                             </div>
                                                         </>
                                                     :

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)
@@ -69,7 +72,7 @@ export default function Login() {
     }
   }
 
-  useEffect(()=>{ // NAVIGATES USER TO HOME PAGE IF USER IS ACTIVE
+  useEffect(()=>{ // NAVIGATES USER TO HOME PAGE IF USER IS CURRENTLY ACTIVE
     if(loggedIn){
         navigate(siteLinks.dash)
     }
@@ -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="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="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}>

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="text-center 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>
                                                                     </>

src/component/layout/layoutcom/UserFooter.jsx

@@ -11,7 +11,7 @@ export default function UserFooter(){
                     <p>&copy; Copyright {year}. All rights reserved.</p>
                 </div>
                 <div className="col  col-sm-6 ml-sm-auto text-center text-sm-right">
-                    <p>A division of autoMedSys A.I.</p>
+                    <p>A division of MERMS(AI)</p>
                 </div>
             </div>
         </footer>