allowing multiple recaptchas

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tutorcruncher-socket",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "TutorCruncher socket",
   "author": "Samuel Colvin <samuel@tutorcruncher.com>",
   "private": false,

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

@@ -67,6 +67,7 @@ const ConfiguredVueRouter = config => {
       }
     )
   }
+  console.debug('setting routes:', routes)
   return new VueRouter({
     mode: config.router_mode,
     routes: routes
@@ -101,6 +102,18 @@ module.exports = function (public_key, config) {
     config: config,
   })
 
+  if (!config.console) {
+    config.console = console
+    if (!window.localStorage.tcs_enable_debug) {
+      if (!window.tcs_debug_log) {
+        window.tcs_debug_log = []
+      }
+      console.debug = function () {
+        window.tcs_debug_log.push(Array.from(arguments).join())
+      }
+    }
+  }
+
   let error = null
   if (!config.mode) {
     config.mode = 'grid'
@@ -132,10 +145,6 @@ module.exports = function (public_key, config) {
     config.router_mode = 'hash'
   }
 
-  if (!config.console) {
-    config.console = console
-  }
-
   if (!config.element) {
     config.element = '#socket'
   }
@@ -163,7 +172,9 @@ module.exports = function (public_key, config) {
 
   const ga_prefixes = init_ga(router, config)
 
-  return new Vue({
+  console.debug('using config:', config)
+
+  const v = new Vue({
     el: config.element,
     router: router,
     render: h => h(app),
@@ -178,6 +189,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
@@ -190,7 +202,8 @@ module.exports = function (public_key, config) {
       }
     },
     watch: {
-      '$route' (to) {
+      '$route' (to, from) {
+        console.debug(`route change ${from.path} to ${to.path}`, from, to)
         if (this.config.mode === 'grid' && to.name === 'index') {
           this.get_contractor_list()
         }
@@ -208,9 +221,11 @@ module.exports = function (public_key, config) {
       },
       request (url, callback, expected_status, method, data) {
         const xhr = new window.XMLHttpRequest()
-        xhr.open(method || 'GET', url)
+        method = method || 'GET'
+        xhr.open(method, url)
         xhr.setRequestHeader('Accept', 'application/json')
         xhr.onload = () => {
+          console.debug(`request ${method} ${url} > ${xhr.status}`, data, xhr)
           try {
             if (xhr.status !== (expected_status || 200)) {
               throw Error(`bad response status ${xhr.status} not 200`)
@@ -325,12 +340,41 @@ ${xhr.responseText}`)
       ga_event (category, action, label) {
         /* istanbul ignore next */
         for (let prefix of ga_prefixes) {
+          console.debug('ga sending event', prefix, category, action, label)
           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 = () => {
+    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