katalyst-google-apis 1.0.3 → 1.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0eb512d72774ba49f273ba054b61696b23336dbc764a6dae5d3c3b5de233b703
-  data.tar.gz: 6728db2369e837dbac22b07cf7c96ffe3acdea71ac3751279663affd52d3f201
+  metadata.gz: a82e7a488e59d05637fc0db55a0050f6e7f6227e097133ea736103ba57b3e277
+  data.tar.gz: 518ec79c1b5a9a627e4dec75bd4e0c8e0bf681c1dec52d3a0fcb717476fc5d0d
 SHA512:
-  metadata.gz: ad86fb05d296e9c5630ac0314aa2bec980a255880664d828d35bead1587e29580876abd67c7b04991fb3612172028e1cd393cd322b3ac633983ae2516eb84a72
-  data.tar.gz: 855fd145e885dd1749a9decdf6e2ed2ba7c2bca1196dcf1fc87fbc8c7fc38b8d8139e6a2995760d1d671c516a52a40adeb7dcf9e4138f2e3c223ea3889f0572f
+  metadata.gz: 235d78f336ef65fa265d94c2f163298df57d40508c8ae22ae91c55ccaae1f220bbeadaa1d849cf4cbff644a7734359ddee8f6458e89e04ac67ff05d69d16e769
+  data.tar.gz: 590c079916e8b3b790c37341ceb092bbce01df57b438221cf78a9666f35b1bd28420aadc120ad4d4bfa7342c536760569273cce1d2a1a0a73565b48f8ba2ddf8

data/app/assets/javascripts/controllers/recaptcha_controller.js

@@ -10,9 +10,13 @@ enterprise.ready = (f) => {
   (config["fns"] ||= []).push(f);
 };
 
-function init() {
-  if (document.head.querySelector("script[src*='recaptcha/enterprise']"))
+/**
+ * Inject recaptcha enterprise script into the head, unless it is already there.
+ */
+function injectRecaptchaScripts() {
+  if (document.head.querySelector("script[src*='recaptcha/enterprise']")) {
     return;
+  }
 
   const script = document.createElement("script");
   script.setAttribute(
@@ -26,20 +30,94 @@ function init() {
 }
 
 export default class RecaptchaController extends Controller {
+  static values = {
+    siteKey: String,
+    action: String,
+    response: String,
+    widgetId: String,
+  };
+
   connect() {
-    init();
+    injectRecaptchaScripts();
+
+    enterprise.ready(this.attachRecaptcha);
+  }
+
+  disconnect() {
+    enterprise.ready(this.detachRecaptcha);
+  }
+
+  /**
+   * Prevent turbo morph events from updating the dom inside this element.
+   * Instead, remove the temporary container and re-initialize recaptcha.
+   *
+   * Recaptcha does not allow the same response to be validated twice so we
+   * always need to ask the user to re-complete the recaptcha.
+   *
+   * @param e {Event}
+   */
+  morph(e) {
+    e.preventDefault();
 
     enterprise.ready(() => {
-      enterprise.render(this.element, {
-        sitekey: this.element.dataset.sitekey,
-        action: this.element.dataset.action,
-        callback: (response) => {
-          this.responseTarget.value = response;
-        },
-      });
+      this.detachRecaptcha();
+      this.responseValue = "";
+      this.attachRecaptcha();
+    });
+  }
+
+  /**
+   * Respond to an update to the recaptcha challenge.
+   *
+   * @param response {String}
+   */
+  responseValueChanged(response) {
+    this.responseTarget.value = response;
+  }
+
+  /**
+   * Renders the recaptcha widget inside the temporary container.
+   */
+  attachRecaptcha = () => {
+    this.widgetIdValue = enterprise.render(this.containerTarget, {
+      sitekey: this.siteKeyValue,
+      action: this.actionValue,
+      callback: this.recaptchaResponse,
     });
+  };
+
+  /**
+   * Detach the input from recaptcha.js and remove the temporary container.
+   */
+  detachRecaptcha = () => {
+    enterprise.reset(this.widgetIdValue);
+    this.widgetIdValue = "";
+    this.containerTarget.remove();
+  };
+
+  /**
+   * Handles callbacks from recaptcha when the user has completed the challenge.
+   */
+  recaptchaResponse = (response) => {
+    this.responseValue = response;
+  };
+
+  /**
+   * @returns {HTMLDivElement} creates or returns a temporary div for holding the recaptcha inputs
+   */
+  get containerTarget() {
+    let container = this.element.firstElementChild;
+    if (container) return container;
+
+    container = document.createElement("div");
+    container.dataset.turboTemporary = "";
+    this.element.appendChild(container);
+    return container;
   }
 
+  /**
+   * @returns {HTMLInputElement} the hidden input that will submit the recaptcha response
+   */
   get responseTarget() {
     return this.element.nextElementSibling;
   }

data/app/helpers/katalyst/google_apis/form_builder.rb

@@ -4,12 +4,39 @@ module Katalyst
   module GoogleApis
     module FormBuilder
       def recaptcha_field(attribute = :recaptcha_token, action: object_name,
-sitekey: GoogleApis.config.recaptcha.site_key)
+                          site_key: GoogleApis.config.recaptcha.site_key)
         safe_join([
-                    content_tag(:div, "", data: { action:, controller: "recaptcha", sitekey: }),
+                    RecaptchaField.new(action:, attribute:, site_key:).render(self),
                     hidden_field(attribute),
                   ])
       end
+
+      class RecaptchaField
+        attr_reader :action, :attribute, :site_key
+
+        def initialize(action:, attribute:, site_key:)
+          # rubocop:disable Rails/HelperInstanceVariable
+          @action    = action
+          @attribute = attribute
+          @site_key  = site_key
+          # rubocop:enable Rails/HelperInstanceVariable
+        end
+
+        def render(template)
+          template.tag.div(data:)
+        end
+
+        private
+
+        def data
+          {
+            controller:               "recaptcha",
+            action:                   "turbo:before-morph-element->recaptcha#morph",
+            recaptcha_action_value:   action,
+            recaptcha_site_key_value: site_key,
+          }
+        end
+      end
     end
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-google-apis
 version: !ruby/object:Gem::Version
-  version: 1.0.3
+  version: 1.0.4
 platform: ruby
 authors:
 - Katalyst Interactive
@@ -24,7 +24,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: curb
+  name: aws-sdk-core
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -38,7 +38,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: aws-sdk-core
+  name: curb
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="