rendering same recaptcha for v2 and v3

ava-labs · Jun 21, 2022 · 5fa5f68 · 5fa5f68
1 parent e491c3f
commit 5fa5f68
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 36 deletions.
diff --git a/client/src/components/FaucetForm.tsx b/client/src/components/FaucetForm.tsx
@@ -301,7 +301,7 @@ const FaucetForm = (props: any) => {
         if(typeof data?.message == "string") {
             if(data.message.includes("Captcha verification failed")) {
                 setIsV2(true)
-                !isV2 && recaptcha?.loadV2Captcha();
+                !isV2 && recaptcha?.loadV2Captcha(props.config.V2_SITE_KEY);
             }
         } 
 
@@ -414,9 +414,13 @@ const FaucetForm = (props: any) => {
         </div>
     )
 
-    const back = (): void => {
+    const resetRecaptcha = (): void => {
         setIsV2(false)
-        recaptcha.loadReCaptcha(props.config.SITE_KEY, props.config.V2_SITE_KEY)
+        recaptcha.loadReCaptcha(props.config.SITE_KEY)
+    }
+
+    const back = (): void => {
+        resetRecaptcha()
         setSendTokenResponse({
             txHash: null,
             message: null

diff --git a/client/src/components/ReCaptcha.ts b/client/src/components/ReCaptcha.ts
@@ -10,7 +10,7 @@ export default class ReCaptcha {
     action: string
 
     constructor(SITE_KEY: string, ACTION: string, V2_SITE_KEY: string) {
-        this.loadReCaptcha(SITE_KEY, V2_SITE_KEY)
+        this.loadReCaptcha(SITE_KEY)
 
         this.siteKey = SITE_KEY
         this.v2siteKey = V2_SITE_KEY
@@ -32,52 +32,33 @@ export default class ReCaptcha {
         return { token, v2Token }
     }
 
-    loadV2Captcha = () => {
-        window.grecaptcha = null
-    
-        const script = document.createElement('script')
-        script.src = `https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit`
-        script.setAttribute('async', '')
-        script.setAttribute('defer', '')
+    loadV2Captcha = (v2siteKey: string) => {
+        const v2CaptchaContainer = document.getElementsByClassName('v2-recaptcha')[0]
+
+        const widgetID = window.grecaptcha.render(v2CaptchaContainer, {
+            'sitekey' : v2siteKey,
+            'theme': 'dark'
+        })
 
-        const elem = document.createElement('div')
-        elem.id = "v2CaptchaContainer"
+        const widgetContainer = document.createElement('div')
+        const widgetElem = `<input style='display:none' id='widgetID' value="${widgetID}"/>`
+        widgetContainer.innerHTML = widgetElem
 
-        document.body.appendChild(elem)
-        document.body.appendChild(script)
+        document.body.appendChild(widgetContainer)
 
         return true
     }
 
-    loadReCaptcha = (siteKey: string, v2SiteKey: string): boolean => {
-        window.grecaptcha = null
-
+    loadReCaptcha = (siteKey: string): boolean => {
         const script = document.createElement('script')
         script.src = `https://www.recaptcha.net/recaptcha/api.js?render=${siteKey}`
 
-        // script for loading v2 captcha when required
-        const oncallbackscript = document.createElement('script')
-
-        oncallbackscript.innerHTML = `var onloadCallback = function() {
-            console.log("loading ${v2SiteKey}")
-            const elem = document.getElementsByClassName('v2-recaptcha')[0];
-            elem.innerHTML = ""
-            const v2CaptchaContainer = document.getElementById('v2CaptchaContainer');
-            const widgetID = window.grecaptcha.render(elem, {
-                'sitekey' : "${v2SiteKey}",
-                'theme': 'dark'
-            })
-            const widgetElem = \`<input style='display:none' id='widgetID' value="\${widgetID}"/>\`
-            v2CaptchaContainer.innerHTML = widgetElem
-        };`
-
-        document.body.appendChild(oncallbackscript)
         document.body.appendChild(script)
         return true
     }
 }
 
 const getWidgetID = () => {
     const elem = <HTMLInputElement>document.getElementById('widgetID');
-    return elem!.value
+    return elem!?.value
 }