debian-mirror-gitlab/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue

88 lines
1.7 KiB
Vue
Raw Normal View History

2018-03-17 18:26:18 +05:30
<script>
2018-12-13 13:39:08 +05:30
import DeprecatedModal from './deprecated_modal.vue';
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
export default {
name: 'RecaptchaModal',
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
components: {
DeprecatedModal,
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
props: {
html: {
type: String,
required: false,
default: '',
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
data() {
return {
script: {},
2019-03-02 22:35:43 +05:30
scriptSrc: 'https://www.recaptcha.net/recaptcha/api.js',
2018-12-13 13:39:08 +05:30
};
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
watch: {
html() {
this.appendRecaptchaScript();
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
mounted() {
2019-12-04 20:38:33 +05:30
if (window.recaptchaDialogCallback) {
throw new Error('recaptchaDialogCallback is already defined!');
}
2018-12-13 13:39:08 +05:30
window.recaptchaDialogCallback = this.submit.bind(this);
},
2018-03-17 18:26:18 +05:30
2019-12-04 20:38:33 +05:30
beforeDestroy() {
window.recaptchaDialogCallback = null;
},
2018-12-13 13:39:08 +05:30
methods: {
appendRecaptchaScript() {
this.removeRecaptchaScript();
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
const script = document.createElement('script');
script.src = this.scriptSrc;
script.classList.add('js-recaptcha-script');
script.async = true;
script.defer = true;
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
this.script = script;
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
document.body.appendChild(script);
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
removeRecaptchaScript() {
if (this.script instanceof Element) this.script.remove();
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
close() {
this.removeRecaptchaScript();
this.$emit('close');
},
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
submit() {
this.$el.querySelector('form').submit();
2018-03-17 18:26:18 +05:30
},
2018-12-13 13:39:08 +05:30
},
};
2018-03-17 18:26:18 +05:30
</script>
<template>
2018-05-09 12:01:36 +05:30
<deprecated-modal
2018-03-17 18:26:18 +05:30
:hide-footer="true"
:title="__('Please solve the reCAPTCHA')"
2018-11-08 19:23:39 +05:30
kind="warning"
class="recaptcha-modal js-recaptcha-modal"
2018-03-17 18:26:18 +05:30
@cancel="close"
>
<div slot="body">
2019-02-15 15:39:39 +05:30
<p>{{ __('We want to be sure it is you, please confirm you are not a robot.') }}</p>
<div ref="recaptcha" v-html="html"></div>
2018-03-17 18:26:18 +05:30
</div>
2018-05-09 12:01:36 +05:30
</deprecated-modal>
2018-03-17 18:26:18 +05:30
</template>