tweak grecaptcha

Author: samuelcolvin

index.html

@@ -26,16 +26,21 @@
     </main>
   </body>
   <script>
-    socket('f8d88b6562b3434ba4ef', {
+    var public_key = 'f8d88b6562b3434ba4ef'
+    var api_root = null  // 'http://localhost:8000'
+    socket(public_key, {
       element: '#socket1',
+      api_root: api_root,
     })
-    socket('f8d88b6562b3434ba4ef', {
+    socket(public_key, {
       element: '#socket2',
       mode: 'enquiry',
+      api_root: api_root,
     })
-    socket('f8d88b6562b3434ba4ef', {
+    socket(public_key, {
       element: '#socket3',
       mode: 'enquiry-modal',
+      api_root: api_root,
     })
   </script>
 </html>

src/components/enquiry.vue

@@ -69,12 +69,11 @@ export default {
   }),
   methods: {
     submit: function () {
-      let grecaptcha_response = window.grecaptcha ? window.grecaptcha.getResponse(this.grecaptcha_id) : '-'
-      if (grecaptcha_response === '') {
+      if (window.grecaptcha && !this.$root.enquiry_data.grecaptcha_response) {
         this.grecaptcha_missing = true
         return
       }
-      this.$set(this.$root.enquiry_data, 'grecaptcha_response', grecaptcha_response)
+
       if (this.contractor !== null) {
         this.$set(this.$root.enquiry_data, 'contractor', this.contractor.id)
       }
@@ -83,27 +82,36 @@ export default {
     },
     submission_complete: function () {
       this.submitted = true
-    }
-  },
-  created: function () {
+    },
     /* istanbul ignore next */
-    if (this.$root.grecaptcha_key !== null) {
-      let render_grecaptcha = () => {
+    prepare_grecaptcha: function () {
+      const grecaptcha_callback = (response) => this.$set(this.$root.enquiry_data, 'grecaptcha_response', response)
+
+      if (this.$root.grecaptcha_key === null) {
+        grecaptcha_callback('-')
+        return
+      }
+
+      const render_grecaptcha = () => {
         this.grecaptcha_id = window.grecaptcha.render(this.grecaptcha_container_id, {
-          'sitekey': this.$root.grecaptcha_key,
+          sitekey: this.$root.grecaptcha_key,
+          callback: grecaptcha_callback
         })
       }
       if (window.grecaptcha === undefined) {
         window._grecaptcha_loaded = render_grecaptcha
         add_script('https://www.google.com/recaptcha/api.js?onload=_grecaptcha_loaded&render=explicit')
       } else {
-        setTimeout(render_grecaptcha, 50)
+        render_grecaptcha()
       }
     }
+  },
+  created: function () {
     this.$root.get_enquiry()
     if (this.mode !== 'vanilla') {
       this.$root.ga_event('enquiry-form', 'loaded', this.mode)
     }
+    setTimeout(this.prepare_grecaptcha, 50)
   },
 }
 </script>

src/main.js

@@ -97,18 +97,18 @@ module.exports = function (public_key, config) {
   })
 
   let error = null
-  if (config.mode === undefined) {
+  if (!config.mode) {
     config.mode = 'grid'
   } else if (MODES.indexOf(config.mode) === -1) {
     error = `invalid mode "${config.mode}", options are: ${MODES.join(', ')}`
     config.mode = 'grid'
   }
 
-  if (config.api_root === undefined) {
+  if (!config.api_root) {
     config.api_root = process.env.SOCKET_API_URL
   }
 
-  if (config.url_root === undefined) {
+  if (!config.url_root) {
     config.url_root = 'auto'
   } else if (config.url_root !== 'auto' && config.url_root[0] !== '/') {
     config.url_root = '/'
@@ -119,18 +119,18 @@ module.exports = function (public_key, config) {
     config.url_root = auto_url_root(window.location.pathname)
   }
 
-  if (config.router_mode === undefined) {
+  if (!config.router_mode) {
     config.router_mode = 'hash'
   } else if (ROUTER_MODES.indexOf(config.router_mode) === -1) {
     error = `invalid router mode "${config.router_mode}", options are: ${ROUTER_MODES.join(', ')}`
     config.router_mode = 'hash'
   }
 
-  if (config.console === undefined) {
+  if (!config.console) {
     config.console = console
   }
 
-  if (config.element === undefined) {
+  if (!config.element) {
     config.element = '#socket'
   }
 
@@ -140,7 +140,7 @@ module.exports = function (public_key, config) {
   }
 
   for (let k of Object.keys(STRINGS)) {
-    if (config[k] === undefined) {
+    if (!config[k]) {
       config[k] = STRINGS[k]
     }
   }