From 14cf23c337affa186ddc4b83b3054054df133e9b Mon Sep 17 00:00:00 2001
From: Yuri <yuri@media-flux.com>
Date: Mon, 21 Jan 2019 15:52:13 +0100
Subject: [PATCH 1/2] - Refactored the Vue component to load a lot faster (not
 using intervals anymore) - Made it possible to bind the response token to a
 model, the Vue way.     <google-recaptcha-v3
 v-model="yourDataAttribute"></google-recaptcha-v3> - Made all props optional
 with default values that can be configured on the component

---
 vuejs/GoogleReCaptchaV3.vue | 98 ++++++++++++++++---------------------
 1 file changed, 42 insertions(+), 56 deletions(-)

diff --git a/vuejs/GoogleReCaptchaV3.vue b/vuejs/GoogleReCaptchaV3.vue
index fa3742f..deff0a7 100644
--- a/vuejs/GoogleReCaptchaV3.vue
+++ b/vuejs/GoogleReCaptchaV3.vue
@@ -1,88 +1,74 @@
 <template>
-    <div :id="elementId"
-    ></div>
+    <div :id="id"></div>
 </template>
 
 <script>
     export default {
         name: 'google-recaptcha-v3',
         props: {
-            siteKey: {
+            action: {
                 type: String,
-                required: true
+                required: false,
+                default: 'validate_grecaptcha'
             },
-            elementId: {
+            id: {
                 type: String,
-                required: true
+                required: false,
+                default: 'grecaptcha_container'
+            },
+            siteKey: {
+                type: String,
+                required: false, // set to true if you don't want to store the siteKey in this component
+                default: '' // set siteKey here if you want to store it in this component
             },
             inline: {
                 type: Boolean,
-                default: false
+                required: false,
+                default: false,
             },
-            action: {
-                type: String,
-                required: true
-            }
         },
         data() {
             return {
-                gAssignedId: null,
-                captchaReady: false,
-                renderedReady: false,
-                checkInterval: null,
-                checkIntervalRunCount: 0
+                captchaId: null,
             }
         },
-        created() {
-        },
-        computed: {},
         mounted() {
             this.init();
         },
-        watch: {
-            captchaReady: function (data) {
-                if (data) {
-                    clearInterval(this.checkInterval)
-                    this.render()
-                }
-            },
-            renderedReady: function (data) {
-                if (data) {
-                    clearInterval(this.checkInterval)
-                    this.execute()
-                }
-            },
-        },
         methods: {
-            execute() {
-                let action = this.action;
-                window.grecaptcha.ready(function () {
-                    grecaptcha.execute(this.gAssignedId, {
-                        action: action
-                    });
-                });
+            init() {
+                if (!('grecaptcha' in window)) {
+
+                    window.gRecaptchaOnLoad = this.render;
+
+                    let recaptchaScript = document.createElement('script');
+                    recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js?render=explicit&onload=gRecaptchaOnLoad');
+                    recaptchaScript.async = true;
+                    recaptchaScript.defer = true;
+                    document.head.appendChild(recaptchaScript);
+
+                } else {
+                    this.render();
+                }
             },
+
             render() {
-                this.gAssignedId = window.grecaptcha.render(this.elementId, {
+                this.captchaId = window.grecaptcha.render(this.id, {
                     sitekey: this.siteKey,
                     badge: this.inline === true ? 'inline' : '',
-                    size: 'invisible'
+                    size: 'invisible',
+                    'expired-callback': this.execute
                 });
-                this.renderedReady = true;
+
+                this.execute();
             },
-            init() {
-                this.checkInterval = setInterval(() => {
-                    this.checkIntervalRunCount++;
-                    if (window.grecaptcha && window.grecaptcha.hasOwnProperty('render')) {
-                        this.captchaReady = true
-                    } else {
-                        let recaptchaScript = document.createElement('script');
-                        recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js?render=explicit');
-                        document.head.appendChild(recaptchaScript);
-                        recaptchaScript.async = true;
-                        recaptchaScript.defer = true;
-                    }
-                }, 1000)
+
+            execute() {
+                window.grecaptcha.execute(this.captchaId, {
+                    action: this.action,
+                }).then((token) => {
+                    this.$emit('input', token);
+                });
             }
         }
     }

From f97251dae19af616b710552ad608fbe9149ed0d5 Mon Sep 17 00:00:00 2001
From: Yuri <yuri@media-flux.com>
Date: Tue, 22 Jan 2019 12:48:42 +0100
Subject: [PATCH 2/2] Fixed bug where multiple recaptcha were unable to render

---
 vuejs/GoogleReCaptchaV3.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/vuejs/GoogleReCaptchaV3.vue b/vuejs/GoogleReCaptchaV3.vue
index deff0a7..c330133 100644
--- a/vuejs/GoogleReCaptchaV3.vue
+++ b/vuejs/GoogleReCaptchaV3.vue
@@ -37,16 +37,26 @@
         },
         methods: {
             init() {
-                if (!('grecaptcha' in window)) {
+                if (!document.getElementById('gRecaptchaScript')) {
 
-                    window.gRecaptchaOnLoad = this.render;
+                    window.gRecaptchaOnLoadCallbacks = [this.render];
+                    window.gRecaptchaOnLoad = function () {
+                        for (let i = 0; i < window.gRecaptchaOnLoadCallbacks.length; i++) {
+                            window.gRecaptchaOnLoadCallbacks[i]();
+                        }
+                        delete window.gRecaptchaOnLoadCallbacks;
+                        delete window.gRecaptchaOnLoad;
+                    };
 
                     let recaptchaScript = document.createElement('script');
                     recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js?render=explicit&onload=gRecaptchaOnLoad');
+                    recaptchaScript.setAttribute('id', 'gRecaptchaScript');
                     recaptchaScript.async = true;
                     recaptchaScript.defer = true;
                     document.head.appendChild(recaptchaScript);
 
+                } else if (!window.grecaptcha || !window.grecaptcha.render) {
+                    window.gRecaptchaOnLoadCallbacks.push(this.render);
                 } else {
                     this.render();
                 }