Execute reCAPTCHA on form submit

Otherwise we run the risk of a reCAPTCHA timeout (2 minutes)
sul-dlss · Jun 17, 2024 · f821c83 · f821c83
1 parent 5b7eece
commit f821c83
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/app/components/blacklight/top_navbar_component.html.erb b/app/components/blacklight/top_navbar_component.html.erb
@@ -14,7 +14,7 @@
 <div id="feedback" class="collapse">
   <div class="container pt-3">
     <div class="row justify-content-center">
-      <%= form_with url: feedback_path, method: :post, class: 'col-md-8' do |f| %>
+      <%= form_with url: feedback_path, method: :post, class: 'col-md-8', html: { name: 'feedback_form' } do |f| %>
         <%= f.hidden_field :reporting_from, value: request.original_url %>
         <div class="alert alert-info" role="alert">
           <%= t('feedbacks.reporting_from', url: request.original_url) %>
@@ -40,7 +40,17 @@
         </div>
         <div class="mb-3 row">
           <div class="col-md-9 offset-md-3">
-            <%= recaptcha_v3(action: 'feedback', turbolinks: true) %>
+            <%= recaptcha_v3(action: 'feedback') %>
+            <script type="text/javascript">
+              document.forms.feedback_form.addEventListener('submit', async function(e) {
+                e.preventDefault();
+                const response = await window.executeRecaptchaForFeedbackAsync();
+                if (response) {
+                  setInputWithRecaptchaResponseTokenForFeedback('g-recaptcha-response-data-feedback', response);
+                }
+                this.submit();
+              });
+            </script>
           </div>
         </div>
         <div class="mb-3 row">

diff --git a/spec/features/feedback_form_spec.rb b/spec/features/feedback_form_spec.rb
@@ -10,7 +10,7 @@
 
     click_on 'Feedback'
     within '#feedback' do
-      expect(page).to have_css('form')
+      expect(page).to have_css('form[name="feedback_form"]')
     end
   end
 end