explicitly render turnstile

Author: ryanwoldatwork

app/views/admin/submissions/show.html.erb

@@ -184,6 +184,14 @@
               <%= h(@submission.referer) %>
             </td>
           </tr>
+          <tr>
+            <td>
+              Spam prevention mechanism
+            </td>
+            <td>
+              <%= h(@submission.spam_prevention_mechanism) %>
+            </td>
+          </tr>
           <tr>
             <td>
               Language

app/views/components/forms/_custom.html.erb

@@ -107,13 +107,13 @@
             <% end %>
           </div>
         <% end %>
-        <% if form.enable_turnstile? %>
-        <div class="margin-top-2">
-          <div class="cf-turnstile" data-sitekey="<%= ENV.fetch("TURNSTILE_SITE_KEY", nil) %>"></div>
-          <%= hidden_field_tag "cf-turnstile-response", nil %>
-        </div>
-        <% end %>
         <%- if section == form.form_sections.last && !form.suppress_submit_button %>
+          <%- if form.enable_turnstile? %>
+          <div class="margin-top-2">
+            <div id="turnstile-container"></div>
+            <%= hidden_field_tag "cf-turnstile-response", nil %>
+          </div>
+          <% end %>
           <button type="submit" class="usa-button submit_form_button"><%= t 'form.submit' %></button>
         <% end %>
       </div>

app/views/components/widget/_fba.js.erb

@@ -656,7 +656,19 @@ function FBAform(d, N) {
 			script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
 			script.async = true;
 			script.defer = true;
-			document.head.appendChild(script);
+			script.onload = this.initTurnstile
+			if (!window.turnstile) {
+				document.head.appendChild(script);
+			}
+		},
+		initTurnstile: function() {
+			turnstile.remove("#turnstile-container");
+			turnstile.render("#turnstile-container", {
+				sitekey: "<%= ENV['TURNSTILE_SITE_KEY'] %>",
+				callback: function (token) {
+					document.querySelector("input[name='cf-turnstile-response']").value = token;
+				}
+			});
 		},
 		<% end %>
 		enableLocalStorage: function() {