allowing multiple recaptchas

Author: samuelcolvin

src/components/enquiry.vue

@@ -14,7 +14,7 @@
           <tcs-input :field="field"></tcs-input>
         </div>
 
-        <div :id="grecaptcha_container_id" class="grecaptcha"></div>
+        <div :id="$root.grecaptcha_container_id" class="grecaptcha"></div>
         <div v-if="grecaptcha_missing" class="error-msg">
           {{ $root.get_text('grecaptcha_missing') }}
         </div>
@@ -61,8 +61,6 @@ export default {
   data: () => ({
     submitted: false,
     grecaptcha_missing: false,
-    grecaptcha_container_id: 'grecaptcha_' + Math.random().toString(36).substring(2, 10),
-    grecaptcha_id: null,
   }),
   methods: {
     submit () {
@@ -83,24 +81,15 @@ export default {
     },
     /* istanbul ignore next */
     prepare_grecaptcha () {
-      const grecaptcha_callback = response => this.$set(this.$root.enquiry_data, 'grecaptcha_response', response)
-
       if (this.$root.grecaptcha_key === null) {
-        grecaptcha_callback('-')
+        this.$root.grecaptcha_callback('-')
         return
       }
 
-      const render_grecaptcha = () => {
-        this.grecaptcha_id = window.grecaptcha.render(this.grecaptcha_container_id, {
-          sitekey: this.$root.grecaptcha_key,
-          callback: grecaptcha_callback
-        })
-      }
       if (window.grecaptcha === undefined) {
-        window._tcs_grecaptcha_loaded = render_grecaptcha
         add_script('https://www.google.com/recaptcha/api.js?onload=_tcs_grecaptcha_loaded&render=explicit')
       } else {
-        render_grecaptcha()
+        this.$root.render_grecaptcha()
       }
     }
   },

src/main.js

@@ -163,7 +163,7 @@ module.exports = function (public_key, config) {
 
   const ga_prefixes = init_ga(router, config)
 
-  return new Vue({
+  const v = new Vue({
     el: config.element,
     router: router,
     render: h => h(app),
@@ -178,6 +178,7 @@ module.exports = function (public_key, config) {
       enquiry_form_info: {},
       enquiry_data: {},
       selected_subject_id: null,
+      grecaptcha_container_id: 'grecaptcha_' + Math.random().toString(36).substring(2, 10),
     },
     components: {
       app
@@ -328,9 +329,38 @@ ${xhr.responseText}`)
           window.ga(prefix + 'send', 'event', category, action, label)
         }
       },
+      grecaptcha_callback (response) {
+        Vue.set(this.enquiry_data, 'grecaptcha_response', response)
+      },
+      render_grecaptcha () {
+        const el = document.getElementById(this.grecaptcha_container_id)
+        if (el && el.childElementCount === 0) {
+          console.debug('rendering grecaptcha')
+          window.grecaptcha.render(this.grecaptcha_container_id, {
+            sitekey: this.grecaptcha_key,
+            callback: this.grecaptcha_callback
+          })
+        } else {
+          console.debug('not rendering grecaptcha', el)
+        }
+      },
+
       goto (name, params) {
         this.$router.push({'name': name, params: params})
       }
     }
   })
+  if (window.socket_view === undefined) {
+    window.socket_view = [v]
+  } else {
+    window.socket_view.push(v)
+  }
+
+  window._tcs_grecaptcha_loaded = () => {
+    console.log('_tcs_grecaptcha_loaded', window.socket_view)
+    for (let v of window.socket_view) {
+      v.render_grecaptcha()
+    }
+  }
+  return v
 }

test/unit/specs/_shared.js

@@ -100,6 +100,7 @@ function generate_vm (router, vm_data_) {
         callback()
       },
       ga_event () { this.__record_call('ga_event') },
+      grecaptcha_callback (r) { this.__record_call('grecaptcha_callback', r) },
       get_selected_subject () {
         this.__record_call('get_selected_subject')
         return null