adding recaptcha

Author: samuelcolvin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tutorcruncher-socket",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "TutorCruncher socket",
   "author": "Samuel Colvin <[email protected]>",
   "private": false,

src/components/con-modal.vue

@@ -31,7 +31,7 @@
 
           <div class="tcs-scroll">
             <transition name="tcs-squeeze" mode="out-in">
-              <enquiry v-if="show_enquiry" :contractor="contractor"></enquiry>
+              <enquiry v-if="show_enquiry" :contractor="contractor" :ismodal="true"></enquiry>
               <con-details v-else :contractor="contractor"></con-details>
             </transition>
           </div>

src/components/enquiry-modal.vue

@@ -1,6 +1,6 @@
 <template>
   <modal title="Enquiry">
-    <enquiry></enquiry>
+    <enquiry :ismodal="true"></enquiry>
   </modal>
 </template>
 

src/components/enquiry.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="tcs-enquiry">
-    <div class="tcs-submitted" v-if="submitted" v-html="$root.get_text('enquiry_submitted_thanks', {}, true)"></div>
+    <div class="tcs-submitted" v-if="submitted">
+      <div v-if="ismodal" v-html="$root.get_text('enquiry_modal_submitted_thanks', {}, true)"></div>
+      <div v-else v-html="$root.get_text('enquiry_submitted_thanks', {}, true)"></div>
+    </div>
     <div v-else>
       <div v-if="contractor" class="tcs-centre" v-html="$root.get_text('contractor_enquiry_message', {contractor_name: contractor.name}, true)">
       </div>
@@ -13,6 +16,12 @@
         <div v-for="field in attribute_fields">
           <tcs-input :field="field" prefix="attributes"></tcs-input>
         </div>
+
+        <div :id="grecaptcha_container_id" class="grecaptcha"></div>
+        <div v-if="grecaptcha_missing" class="error-msg">
+          {{ $root.get_text('grecaptcha_missing') }}
+        </div>
+
         <div class="tcs-field tcs-submit">
           <button type="submit">
             {{ $root.config.submit_enquiry }}
@@ -25,13 +34,18 @@
 
 <script>
 import input from './input.vue'
+import {add_script} from '../utils'
 
 export default {
   props: {
     contractor: {
       type: Object,
       default: null,
     },
+    ismodal: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: {
     'tcs-input': input
@@ -45,10 +59,19 @@ export default {
     }
   },
   data: () => ({
-    submitted: false
+    submitted: false,
+    grecaptcha_missing: false,
+    grecaptcha_container_id: 'grecaptcha_' + Math.random().toString(36).substring(2, 10),
+    grecaptcha_id: null,
   }),
   methods: {
     submit: function () {
+      let grecaptcha_response = window.grecaptcha ? window.grecaptcha.getResponse(this.grecaptcha_id) : '-'
+      if (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)
       }
@@ -59,6 +82,20 @@ export default {
     }
   },
   created: function () {
+    /* istanbul ignore next */
+    if (this.$root.grecaptcha_key !== null) {
+      let render_grecaptcha = () => {
+        this.grecaptcha_id = window.grecaptcha.render(this.grecaptcha_container_id, {
+          'sitekey': this.$root.grecaptcha_key,
+        })
+      }
+      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)
+      }
+    }
     this.$root.get_enquiry()
   },
 }
@@ -84,11 +121,19 @@ form.tcs {
 }
 
 .tcs-submit {
-  text-align: right;
+  text-align: center;
   button {
     @extend .tcs-button;
     font-size: 17px;
     padding: 10px 12px;
   }
 }
+
+.grecaptcha > div {
+  margin: 0 auto;
+}
+.error-msg {
+  color: darkred;
+  text-align: center;
+}
 </style>

src/main.js

@@ -68,15 +68,18 @@ const ConfiguredVueRouter = config => {
   })
 }
 
+// TODO these need a consist prefix
 const STRINGS = {
   skills_label: 'Skills',
   contractor_enquiry_message: 'Please enter your details below to enquire about tutoring with {contractor_name}.',
   enquiry_message: 'Please enter your details below and we will get in touch with you shortly.',
   contractor_enquiry_button: 'Contact {contractor_name}',
   contractor_details_button: 'Show Profile',
   submit_enquiry: 'Submit Enquiry',
-  enquiry_submitted_thanks: 'Enquiry submitted, thank you.\n\nYou can now close this window.',
+  enquiry_submitted_thanks: 'Enquiry submitted, thank you.',
+  enquiry_modal_submitted_thanks: 'Enquiry submitted, thank you.\n\nYou can now close this window.',
   enquiry_button: 'Get in touch',
+  grecaptcha_missing: 'This captcha is required',
 }
 
 const MODES = ['grid', 'enquiry', 'enquiry-modal']
@@ -139,6 +142,7 @@ module.exports = function (public_key, config) {
     router: ConfiguredVueRouter(config),
     render: h => h(app),
     data: {
+      grecaptcha_key: process.env.NODE_ENV === 'testing' ? null : '6LdyXRgUAAAAADUNhMVKJDXiRr6DUN8TGOgllqbt',
       contractors: [],
       contractors_extra: {},
       config: config,

src/utils.js

@@ -34,4 +34,10 @@ const auto_url_root = (path) => {
   return path
 }
 
-export {to_markdown, clean, auto_url_root}
+const add_script = (url) => {
+  let s = document.createElement('script')
+  s.src = url
+  document.body.appendChild(s)
+}
+
+export {to_markdown, clean, auto_url_root, add_script}

test/unit/specs/_shared.js

@@ -36,6 +36,7 @@ const enquiry_options = {
 const vm_data = () => ({
   contractors: [{name: 'Fred Bloggs', link: '123-fred-bloggs', tag_line: 'hello'}],
   config: {},
+  grecaptcha_key: null,
   contractors_extra: {'123-fred-bloggs': {'extra_attributes': [{'name': 'Bio', 'value': 'I am great'}]}},
   enquiry_form_info: enquiry_options,
   enquiry_data: {},