Merge pull request #76 from ava-labs/v2-recaptcha-widget-fix

Fixed widget render for v2 captcha
ava-labs · Nov 21, 2022 · 4757ea7 · 4757ea7
2 parents 8b8c14c + 20d14a3
commit 4757ea7
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 27 deletions.
diff --git a/client/src/components/FaucetForm.tsx b/client/src/components/FaucetForm.tsx
@@ -14,7 +14,7 @@ import { AxiosResponse } from 'axios'
 const FaucetForm = (props: any) => {
     const [chain, setChain] = useState<number | null>(null)
     const [token, setToken] = useState<number | null>(null)
-    const [widgetID, setwidgetID] = useState<string | undefined>(undefined)
+    const [widgetID, setwidgetID] = useState(new Map())
     const [recaptcha, setRecaptcha] = useState<ReCaptcha | undefined>(undefined)
     const [isV2, setIsV2] = useState<boolean>(false)
     const [chainConfigs, setChainConfigs] = useState<any>([])
@@ -38,8 +38,7 @@ const FaucetForm = (props: any) => {
             props.config.SITE_KEY,
             props.config.ACTION,
             props.config.V2_SITE_KEY,
-            setwidgetID,
-            widgetID
+            setwidgetID
         ))
         updateChainConfigs()
         connectAccount(updateAddress, false)
@@ -276,8 +275,8 @@ const FaucetForm = (props: any) => {
         }
     }
 
-    async function getCaptchaToken(): Promise<{token?:string, v2Token?: string}> {
-        const { token, v2Token } = await recaptcha!.getToken(isV2)
+    async function getCaptchaToken(index: number = 0): Promise<{token?:string, v2Token?: string}> {
+        const { token, v2Token } = await recaptcha!.getToken(isV2, widgetID, index)
         return { token, v2Token }
     }
 
@@ -299,6 +298,15 @@ const FaucetForm = (props: any) => {
         }
     }
 
+    const ifCaptchaFailed = (data: any, index: number = 0, reload: boolean = false) => {
+        if(typeof data?.message == "string") {
+            if(data.message.includes("Captcha verification failed")) {
+                setIsV2(true)
+                recaptcha?.loadV2Captcha(props.config.V2_SITE_KEY, widgetID, index, reload);
+            }
+        }
+    }
+
     async function sendToken(): Promise<void> {
         if(!shouldAllowSend) {
             return
@@ -323,12 +331,7 @@ const FaucetForm = (props: any) => {
             data = err?.response?.data || err
         }
 
-        if(typeof data?.message == "string") {
-            if(data.message.includes("Captcha verification failed")) {
-                setIsV2(true)
-                !isV2 && recaptcha?.loadV2Captcha(props.config.V2_SITE_KEY);
-            }
-        } 
+        ifCaptchaFailed(data)
 
         setSendTokenResponse({
             txHash: data?.txHash,
@@ -441,7 +444,7 @@ const FaucetForm = (props: any) => {
 
     const resetRecaptcha = (): void => {
         setIsV2(false)
-        recaptcha!.resetV2Captcha()
+        recaptcha!.resetV2Captcha(widgetID)
     }
 
     const back = (): void => {

diff --git a/client/src/components/ReCaptcha.ts b/client/src/components/ReCaptcha.ts
@@ -8,56 +8,56 @@ export default class ReCaptcha {
     siteKey: string
     v2siteKey?: string
     action: string
-    widgetID: string | undefined
     setWidgetID: any
 
-    constructor(SITE_KEY: string, ACTION: string, V2_SITE_KEY: string, setWidgetID: any, widgetID: string | undefined) {
+    constructor(SITE_KEY: string, ACTION: string, V2_SITE_KEY: string, setWidgetID: any) {
         this.loadReCaptcha(SITE_KEY)
 
         this.siteKey = SITE_KEY
         this.v2siteKey = V2_SITE_KEY
         this.action = ACTION
-        this.widgetID = widgetID
         this.setWidgetID = setWidgetID
     }
 
-    async getToken(isV2 = false): Promise<{token?: string, v2Token?: string}> {
+    async getToken(isV2 = false, widgetID: any, index: number = 0): Promise<{token?: string, v2Token?: string}> {
         let token = "", v2Token = ""
         !isV2 && await window.grecaptcha.execute(this.siteKey, {action: this.action})
             .then((res: string) => {
                 token = res
             })
 
         if(isV2){
-            v2Token = await window.grecaptcha.getResponse(this.widgetID)
+            v2Token = await window.grecaptcha.getResponse(widgetID.get(index))
         }
 
         return { token, v2Token }
     }
 
-    resetV2Captcha = () => {
-        const v2CaptchaContainer = <HTMLElement>document.getElementsByClassName('v2-recaptcha')[0]
+    resetV2Captcha = (widgetID: any, index: number = 0) => {
+        const v2CaptchaContainer = document.getElementsByClassName('v2-recaptcha')[index] as HTMLElement
         if(v2CaptchaContainer) {
-            if(this.widgetID) {
-                window.grecaptcha.reset(this.widgetID)
+            if(widgetID.get(index) || widgetID.get(index) == 0) {
+                window.grecaptcha.reset(widgetID.get(index))
             }
             v2CaptchaContainer.style.display = "none"
         }
     }
 
-    loadV2Captcha = (v2siteKey: string) => {
-        const v2CaptchaContainer = document.getElementsByClassName('v2-recaptcha')[0]
-
-        if(this.widgetID || this.widgetID == "0") {
-            const v2CaptchaContainer = <HTMLElement>document.getElementsByClassName('v2-recaptcha')[0]
+    loadV2Captcha = (v2siteKey: string, widgetID: any, index: number = 0, reload: boolean = false) => {
+        this.resetV2Captcha(widgetID, index)
+        const v2CaptchaContainer = document.getElementsByClassName('v2-recaptcha')[index] as HTMLElement
+        if((widgetID.get(index) || widgetID.get(index) == "0") && !reload) {
+            const v2CaptchaContainer = document.getElementsByClassName('v2-recaptcha')[index] as HTMLElement
             if(v2CaptchaContainer) {
                 v2CaptchaContainer.style.display = "block"
             }
         } else {
-            const widgetID = window.grecaptcha.render(v2CaptchaContainer, {
+            v2CaptchaContainer.style.display = "block"
+            const newWidgetID = window.grecaptcha.render(v2CaptchaContainer, {
                 'sitekey' : v2siteKey,
                 'theme': 'dark'
             })
+            widgetID.set(index, newWidgetID)
             this.setWidgetID(widgetID)
         }