Add demo page

The demo page shows a form and an embedded google sheet side by side.
The form needs be be configured with a DEMO_FORM_ID environment variable.

app/javascript/demo.js

@@ -0,0 +1,9 @@
+document.addEventListener('DOMContentLoaded', function() {
+  var demoForm = document.getElementById('demo-form');
+  demoForm.addEventListener('tinyforms:submitted', function() {
+    var demoFields = document.getElementById('demo-fields');
+    var demoSucess = document.getElementById('demo-success');
+    demoFields.style.display = 'none';
+    demoSucess.style.display = 'block';
+  });
+});

app/javascript/packs/application.js

@@ -9,6 +9,8 @@ require("@rails/activestorage").start()
 require("channels")
 
 require('burger_menu');
+require('tinyforms');
+require('demo');
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)

app/javascript/tinyforms.js

@@ -0,0 +1,51 @@
+window.tinyforms = {
+  init: function() {
+    var forms = document.querySelectorAll('form[data-tinyforms]');
+    forms.forEach(function(form) {
+      form.addEventListener('submit', tinyforms.onSubmit);
+    });
+  },
+
+  submitForm: function(form) {
+    return new Promise(function(resolve, reject) {
+      var action = form.getAttribute('action');
+      var formData = new FormData(form);
+
+      var xhr = new XMLHttpRequest();
+      xhr.open('POST', action, true);
+      xhr.setRequestHeader("Accept", "application/json");
+      xhr.onload = function () {
+        var response;
+        try {
+          response = JSON.parse(xhr.responseText);
+        } catch (e) {
+          response = xhr.responseText;
+        }
+        if (xhr.status >= 200 && xhr.status < 300) {
+          resolve(response);
+        } else {
+          reject(response);
+        }
+      };
+      xhr.onerror = function() {
+        reject(xhr.responseText)
+      };
+      xhr.send(formData);
+    });
+  },
+
+  onSubmit: function(e) {
+    e.preventDefault();
+    return tinyforms.submitForm(this)
+      .then((response) => {
+        this.dispatchEvent(new CustomEvent('tinyforms:submitted', {detail: { response: response }}));
+      })
+      .catch((response) => {
+        this.dispatchEvent(new CustomEvent('tinyforms:error', {detail: { response: response }}));
+      });
+  }
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+  tinyforms.init();
+});