nopaque/app/static/js/nopaque/main.js

/*
 * The nopaque object is used as a namespace for nopaque specific functions and
 * variables.
 */
var nopaque = {};

nopaque.Forms = {};
nopaque.Forms.init = function() {
  var abortRequestElement, parentElement, progressElement, progressModal,
      progressModalElement, request, submitElement;

  for (let form of document.querySelectorAll(".nopaque-submit-form")) {
    submitElement = form.querySelector('button[type="submit"]');
    submitElement.addEventListener("click", function() {
      for (let selectElement of form.querySelectorAll('select')) {
        if (selectElement.value === "") {
          parentElement = selectElement.closest(".input-field");
          parentElement.querySelector(".select-dropdown").classList.add("invalid");
          for (let helperTextElement of parentElement.querySelectorAll(".helper-text")) {
            helperTextElement.remove();
          }
          parentElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">Please select an option.</span>`);
        }
      }
    });

    request = new XMLHttpRequest();
    if (form.dataset.hasOwnProperty("progressModal")) {
      progressModalElement = document.getElementById(form.dataset.progressModal);
      progressModal = M.Modal.getInstance(progressModalElement);
      progressModal.options.dismissible = false;
      abortRequestElement = progressModalElement.querySelector(".abort-request");
      abortRequestElement.addEventListener("click", function() {request.abort();});
      progressElement = progressModalElement.querySelector(".determinate");
    }
    form.addEventListener("submit", function(event) {
      event.preventDefault();
      var formData;

      formData = new FormData(form);
      // Initialize progress modal
      if (progressModalElement) {
        progressElement.style.width = "0%";
        progressModal.open();
      }
      request.open("POST", window.location.href);
      request.send(formData);
    });
    request.addEventListener("load", function(event) {
      var fieldElement;

      if (request.status === 201) {
        window.location.href = JSON.parse(this.responseText).redirect_url;
      }
      if (request.status === 400) {
        for (let [field, errors] of Object.entries(JSON.parse(this.responseText))) {
          fieldElement = form.querySelector(`input[name$="${field}"]`).closest(".input-field");
          for (let error of errors) {
            fieldElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">${error}</span>`);
          }
        }
        if (progressModalElement) {
          progressModal.close();
        }
      }
      if (request.status === 500) {
        location.reload();
      }
    });
    if (progressModalElement) {
      request.upload.addEventListener("progress", function(event) {
        progressElement.style.width = Math.floor(100 * event.loaded / event.total).toString() + "%";
      });
    }
  }
}