recaptcha_dialog.vue 1.5 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
<script>
import PopupDialog from './popup_dialog.vue';

export default {
  name: 'recaptcha-dialog',

  props: {
    html: {
      type: String,
      required: false,
      default: '',
    },
  },

  data() {
    return {
      script: {},
      scriptSrc: 'https://www.google.com/recaptcha/api.js',
    };
  },

  components: {
    PopupDialog,
  },

  methods: {
    appendRecaptchaScript() {
      this.removeRecaptchaScript();

      const script = document.createElement('script');
      script.src = this.scriptSrc;
      script.classList.add('js-recaptcha-script');
      script.async = true;
      script.defer = true;

      this.script = script;

      document.body.appendChild(script);
    },

    removeRecaptchaScript() {
      if (this.script instanceof Element) this.script.remove();
    },

    close() {
      this.removeRecaptchaScript();
      this.$emit('close');
    },

    submit() {
      this.$el.querySelector('form').submit();
    },
  },

  watch: {
    html() {
      this.appendRecaptchaScript();
    },
  },

  mounted() {
    window.recaptchaDialogCallback = this.submit.bind(this);
  },
};
</script>

<template>
<popup-dialog
  kind="warning"
  class="recaptcha-dialog js-recaptcha-dialog"
  :hide-footer="true"
  :title="__('Please solve the reCAPTCHA')"
  @toggle="close"
>
  <div slot="body">
    <p>
      {{__('We want to be sure it is you, please confirm you are not a robot.')}}
    </p>
    <div
      ref="recaptcha"
      v-html="html"
    ></div>
  </div>
</popup-dialog>
</template>