Extract csrf logic in csrf form helper file

Replicate some of the rails ujs login in csrf_form_helper:
- read the csrf meta tags with getCsrfToken() and getCsrfParam()
  - normalizeOptions sets method and credentials
  - adds X-CSRF_Token and X-Requested-With and Accept
- fetchWithCsrf() -> equivelant to rails ajax call
- refreshCSRFTokens() -> updates hidden authenticity token in forms. we hook it with DOMContentLoaded
- a public API Orangelight.CsrfFormHelper and window.CsrfFormHelper similar to rails ajax

related to #5465

Author: christinach

app/assets/javascripts/application.js

@@ -1,8 +1,6 @@
 // This is a manifest file that'll be compiled into application.js, which will include all the files
 // listed below.
 //
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
 //
 // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
 // compiled file.
@@ -19,50 +17,59 @@
 // Required by Blacklight
 //= require blacklight/blacklight
 //= require babel/polyfill
+//= require csrf_form_helper
 
-// Wait for the modal to open
 document.addEventListener('show.blacklight.blacklight-modal', function () {
-  // Attach a vanilla submit handler to modal forms that submits via fetch
-  // and hides the Blacklight modal on a successful response. We mark forms
-  // that we've attached to so we don't double-bind when the modal reopens.
+  console.log('Modal is going to be shown');
   document.querySelectorAll('.modal_form').forEach(function (form) {
-    if (form.dataset.vanillaHandlerAdded) return;
-    form.dataset.vanillaHandlerAdded = 'true';
+    form.addEventListener(
+      'submit',
+      function (e) {
+        e.preventDefault();
 
-    form.addEventListener('submit', function (e) {
-      e.preventDefault();
+        var action = form.getAttribute('action') || window.location.href;
+        var method = (form.getAttribute('method') || 'GET').toUpperCase();
+        var fetchOptions = { method: method };
 
-      var action = form.getAttribute('action') || window.location.href;
-      var method = (form.getAttribute('method') || 'GET').toUpperCase();
-      var fetchOptions = { method: method, credentials: 'same-origin' };
+        var formData = new FormData(form);
+        console.log(
+          `method: ${method}, action: ${action}, formData:, ${formData}`
+        );
+        console.log(formData);
+        if (method !== 'GET') {
+          fetchOptions.body = formData;
+        }
 
-      var formData = new FormData(form);
-
-      if (method === 'GET') {
-        // Append form data to query string for GET
-        var params = new URLSearchParams(formData);
-        action += (action.indexOf('?') === -1 ? '?' : '&') + params.toString();
-      } else {
-        fetchOptions.body = formData;
-      }
-
-      fetch(action, fetchOptions)
-        .then(function (response) {
-          if (response.ok) {
-            Blacklight.Modal.hide();
-          } else {
+        // otherwise we get 422 error due to missing CSRF token
+        Orangelight.CsrfFormHelper.fetch(action, fetchOptions)
+          .then(function (response) {
             return response.text().then(function (body) {
-              console.error(
-                'Modal form submission failed',
-                response.status,
-                body
-              );
+              if (response.ok) {
+                var modalEl =
+                  document.querySelector('.modal') ||
+                  document.querySelector('.blacklight-modal') ||
+                  document.getElementById('blacklight-modal');
+                if (modalEl) {
+                  modalEl.innerHTML = body;
+                } else {
+                  var wrapper = document.createElement('div');
+                  wrapper.innerHTML = body;
+                  document.body.appendChild(wrapper);
+                }
+              } else {
+                console.error(
+                  'Modal form submission failed',
+                  response.status,
+                  body
+                );
+              }
             });
-          }
-        })
-        .catch(function (err) {
-          console.error('Modal form submission error', err);
-        });
-    });
+          })
+          .catch(function (err) {
+            console.error('Modal form submission error', err);
+          });
+      },
+      { once: true }
+    );
   });
 });

app/assets/javascripts/csrf_form_helper.js

@@ -0,0 +1,72 @@
+// CSRF form helper to perform fetch requests with CSRF tokens included
+(function () {
+  var Orangelight = window.Orangelight || (window.Orangelight = {});
+
+  function getCsrfToken() {
+    var meta = document.querySelector('meta[name="csrf-token"]');
+    return meta && meta.getAttribute('content');
+  }
+
+  function getCsrfParam() {
+    var meta = document.querySelector('meta[name="csrf-param"]');
+    return meta && meta.getAttribute('content');
+  }
+
+  function normalizeOptions(url, options) {
+    options = options || {};
+    options.method = (options.method || 'GET').toUpperCase();
+    options.credentials = options.credentials || 'same-origin';
+    options.headers = options.headers || {};
+
+    var token = getCsrfToken();
+    if (token) {
+      options.headers['X-CSRF-Token'] = token;
+    }
+    options.headers['X-Requested-With'] =
+      options.headers['X-Requested-With'] || 'XMLHttpRequest';
+    options.headers['Accept'] =
+      options.headers['Accept'] ||
+      'text/javascript, text/html, application/json, application/xml';
+
+    if (options.method === 'GET' && options.body instanceof FormData) {
+      var params = new URLSearchParams();
+      options.body.forEach(function (value, key) {
+        params.append(key, value);
+      });
+      url += (url.indexOf('?') === -1 ? '?' : '&') + params.toString();
+      delete options.body;
+    }
+
+    return { url: url, options: options };
+  }
+
+  function fetchWithCsrf(url, options) {
+    var normalized = normalizeOptions(url, options);
+    return fetch(normalized.url, normalized.options);
+  }
+
+  Orangelight.CsrfFormHelper = Orangelight.CsrfFormHelper || {};
+  Orangelight.CsrfFormHelper.fetch = fetchWithCsrf;
+
+  // Refresh function similar to rails-ujs to update hidden
+  // authenticity_token inputs in forms after token rotation.
+  function refreshCSRFTokens() {
+    var token = getCsrfToken();
+    var param = getCsrfParam();
+    if (!token || !param) return;
+    // Update any inputs matching the csrf param
+    var selector = 'form input[name="' + param + '"]';
+    document.querySelectorAll(selector).forEach(function (input) {
+      input.value = token;
+    });
+  }
+
+  Orangelight.CsrfFormHelper.refreshCSRFTokens = refreshCSRFTokens;
+
+  // Hook to DOMContentLoaded so server-rendered forms have current token
+  document.addEventListener('DOMContentLoaded', function () {
+    refreshCSRFTokens();
+  });
+
+  window.CsrfFormHelper = window.CsrfFormHelper || Orangelight.CsrfFormHelper;
+})();