diff options
author | Winnie Hellmann <winnie@gitlab.com> | 2017-12-11 20:06:07 +0100 |
---|---|---|
committer | Winnie Hellmann <winnie@gitlab.com> | 2017-12-12 13:07:03 +0100 |
commit | d5d2d7b2e007e7d1c8675e07cb198bec9b31b962 (patch) | |
tree | ed5c5ed65f747d2401782fd4d5bb83ade8c911e9 /app/assets/javascripts/vue_shared/components/recaptcha_modal.vue | |
parent | bf22eb6123cb85e70a1b4aaf86cb2d325dc74f2f (diff) | |
download | gitlab-ce-d5d2d7b2e007e7d1c8675e07cb198bec9b31b962.tar.gz |
Rename recaptcha-dialog to recaptcha-modal
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/recaptcha_modal.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/recaptcha_modal.vue | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue new file mode 100644 index 00000000000..8053c65d498 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue @@ -0,0 +1,85 @@ +<script> +import modal from './modal.vue'; + +export default { + name: 'recaptcha-modal', + + props: { + html: { + type: String, + required: false, + default: '', + }, + }, + + data() { + return { + script: {}, + scriptSrc: 'https://www.google.com/recaptcha/api.js', + }; + }, + + components: { + modal, + }, + + 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> +<modal + kind="warning" + class="recaptcha-modal js-recaptcha-modal" + :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> +</modal> +</template> |