Merge branch '29483-no-feedback-when-checking-on-checklist-if-potential-spam-was-detected' into 'master'cherry-pick-d32032de

Resolve "No feedback when checking on checklist if potential spam was detected"

Closes #29483

See merge request gitlab-org/gitlab-ce!15408

(cherry picked from commit d32032de08585476c3b303803a307ff94d910ebd)

efc86c26 Mock spam?
8e9a9030 Merge remote-tracking branch 'origin/master' into…
019db0fd TEMP mock askismet spam check
11e51be6 respond_to json with json version of verify view in recaptcha_check_with_fallback
18955cdc Differentiate between spam related error and other update errors
9dcf093c Start recaptcha modal and render partial instead
64b13133 Append and remove api script when reCAPTCHA is needed
c9a67fab put-over-post the recaptcha form
cb22ae66 remove comments
20517d64 remove comments
e174d02e Review changes
7a7d4a2a Add spec
8f617b45 Added changelog
db3f1a47 Review changes
4d0c78de Add to tasklist
36ea921b Remove duplicate TaskList
6bffe620 Add app_spec for spam
d95350bc Finished specs
cf951cba FOR REVIEWERS
6c50e850 FOR MERGE
25931f73 Allow script src to be mockable
c3463e00 Merge remote-tracking branch 'origin/master' into…
2c170b8d fix eslint
a318c757 Fix redirect
8a02fbd0 BE review changes
dda03f4d Fix spec
910c7205 Fix spec
fafbd7e5 remove duplicate destroy

1 files changed, 85 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/recaptcha_dialog.vue b/app/assets/javascripts/vue_shared/components/recaptcha_dialog.vue
new file mode 100644
index 00000000000..3ec50f14eb4
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/recaptcha_dialog.vue
@@ -0,0 +1,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>