From 4cf7cde017a734e7bdb359ee340cabde02252b95 Mon Sep 17 00:00:00 2001 From: can kurttekin Date: Tue, 12 Nov 2024 04:51:10 +0300 Subject: [PATCH] add turnstile global script --- frontend/public/index.html | 1 + frontend/src/components/Register.js | 2 +- frontend/src/components/Turnstile.js | 52 ++++++++++++++++------------ 3 files changed, 31 insertions(+), 24 deletions(-) diff --git a/frontend/public/index.html b/frontend/public/index.html index 171b8ba83..19d58d49c 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -9,6 +9,7 @@ ATSFS +
diff --git a/frontend/src/components/Register.js b/frontend/src/components/Register.js index 7c41d67fd..d785339cf 100644 --- a/frontend/src/components/Register.js +++ b/frontend/src/components/Register.js @@ -77,7 +77,7 @@ const Register = () => { specialChar: false, }); const [isPasswordFocused, setIsPasswordFocused] = useState(false); // Track if the password field is focused - const [turnstileToken, setTurnstileToken] = useState(null); + const [turnstileToken, setTurnstileToken] = useState(''); const navigate = useNavigate(); // Password validation function diff --git a/frontend/src/components/Turnstile.js b/frontend/src/components/Turnstile.js index 0cf955e1a..c28c94cd7 100644 --- a/frontend/src/components/Turnstile.js +++ b/frontend/src/components/Turnstile.js @@ -1,39 +1,45 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; const Turnstile = ({ siteKey, onVerify }) => { + const [captchaLoaded, setCaptchaLoaded] = useState(false); + const captchaRef = useRef(null); + useEffect(() => { - // Check if Turnstile script is already loaded - if (!document.querySelector("script[src='https://challenges.cloudflare.com/turnstile/v0/api.js']")) { - const script = document.createElement("script"); - script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js"; + // Ensure the script is loaded and Turnstile is initialized + const handleLoad = () => { + setCaptchaLoaded(true); + }; + + if (window.turnstile && window.turnstile.render) { + handleLoad(); + } else { + // Check if the script is loaded + const script = document.createElement('script'); + script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js'; script.async = true; script.defer = true; + script.onload = handleLoad; document.body.appendChild(script); } - // Initialize Turnstile widget after script loads - const onLoad = () => { - if (window.turnstile) { - window.turnstile.render('#turnstile-widget', { + return () => { + // Cleanup: we don't need to handle removal of the script as it's loaded only once globally + }; + }, []); + + useEffect(() => { + if (captchaLoaded && siteKey) { + // Render the Turnstile widget after the script has loaded + if (captchaRef.current) { + window.turnstile.render(captchaRef.current, { sitekey: siteKey, - callback: onVerify, + callback: onVerify, // callback when captcha is successfully verified }); } - }; - - // Check if script has already loaded - if (window.turnstile) { - onLoad(); - } else { - window.addEventListener("load", onLoad); } + }, [captchaLoaded, siteKey, onVerify]); - return () => { - window.removeEventListener("load", onLoad); - }; - }, [siteKey, onVerify]); - - return
; + return
; }; export default Turnstile;