Skip to content

Refactor RecaptchaModal component to allow more than one instance

Summary

The RecaptchaModal sets a global variable for communicating with the reCAPTCHA library. This prevents having more than one instance of that component. For https://gitlab.com/gitlab-org/gitlab-ce/issues/61468 we need a second instance on the issue page.

Improvements

Instead of binding recaptchaDialogCallback to the method of a component, make it emit a custom event and dynamically register handlers to that while processing a request.

Risks

It's possible we break one of the existing uses of that component:

$ grep -r 'this.checkForSpam' {ee/,}app/assets/javascripts
app/assets/javascripts/issue_show/components/app.vue:        .then(data => this.checkForSpam(data))
app/assets/javascripts/issue_show/components/description.vue:        this.checkForSpam(data);

Involved components

  • app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
  • app/assets/javascripts/issue_show/components/