From b7af8249d7cf66dc89fe1540861f5421502404ec Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 25 May 2019 18:45:58 +0200
Subject: [PATCH] move js utils to static/es and fix linting warnings

---
 static/es/utils/alerts.js     | 212 ++++++++++++
 static/es/utils/asidenav.js   | 109 ++++++
 static/es/utils/asyncForm.js  | 126 +++++++
 static/es/utils/asyncTable.js | 422 +++++++++++++++++++++++
 static/es/utils/checkAll.js   | 150 +++++++++
 static/es/utils/form.js       | 611 ++++++++++++++++++++++++++++++++++
 static/es/utils/inputs.js     | 200 +++++++++++
 static/es/utils/massInput.js  | 232 +++++++++++++
 static/es/utils/modal.js      | 212 ++++++++++++
 static/es/utils/showHide.js   | 114 +++++++
 static/es/utils/tabber.js     |  90 +++++
 11 files changed, 2478 insertions(+)
 create mode 100644 static/es/utils/alerts.js
 create mode 100644 static/es/utils/asidenav.js
 create mode 100644 static/es/utils/asyncForm.js
 create mode 100644 static/es/utils/asyncTable.js
 create mode 100644 static/es/utils/checkAll.js
 create mode 100644 static/es/utils/form.js
 create mode 100644 static/es/utils/inputs.js
 create mode 100644 static/es/utils/massInput.js
 create mode 100644 static/es/utils/modal.js
 create mode 100644 static/es/utils/showHide.js
 create mode 100644 static/es/utils/tabber.js

diff --git a/static/es/utils/alerts.js b/static/es/utils/alerts.js
new file mode 100644
index 000000000..427e38373
--- /dev/null
+++ b/static/es/utils/alerts.js
@@ -0,0 +1,212 @@
+(function() {
+  'use strict';
+
+  /**
+   *
+   * Alerts Utility
+   *  makes alerts interactive
+   *
+   * Attribute: uw-alerts
+   *
+   * Types of alerts:
+   *   [default]
+   *     Regular Info Alert
+   *     Disappears automatically after 30 seconds
+   *     Disappears after x seconds if explicitly specified via data-decay='x'
+   *     Can be told not to disappear with data-decay='0'
+   *
+   *   [success]
+   *     Currently no special visual appearance
+   *     Disappears automatically after 30 seconds
+   *
+   *   [warning]
+   *     Will be coloured warning-orange regardless of user's selected theme
+   *     Does not disappear
+   *
+   *   [error]
+   *     Will be coloured error-red regardless of user's selected theme
+   *     Does not disappear
+   *
+   * Example usage:
+   *  <div .alerts uw-alerts>
+   *    <div .alerts__toggler>
+   *    <div .alert.alert-info>
+   *      <div .alert__closer>
+   *      <div .alert__icon>
+   *      <div .alert__content>
+   *        This is some information
+   *
+   */
+
+  var ALERTS_UTIL_NAME = 'alerts';
+  var ALERTS_UTIL_SELECTOR = '[uw-alerts]';
+
+  var ALERTS_INITIALIZED_CLASS = 'alerts--initialized';
+  var ALERTS_ELEVATED_CLASS = 'alerts--elevated';
+  var ALERTS_TOGGLER_CLASS = 'alerts__toggler';
+  var ALERTS_TOGGLER_VISIBLE_CLASS = 'alerts__toggler--visible';
+  var ALERTS_TOGGLER_APPEAR_DELAY = 120;
+
+  var ALERT_CLASS = 'alert';
+  var ALERT_INITIALIZED_CLASS = 'alert--initialized';
+  var ALERT_CLOSER_CLASS = 'alert__closer';
+  var ALERT_ICON_CLASS = 'alert__icon';
+  var ALERT_CONTENT_CLASS = 'alert__content';
+  var ALERT_INVISIBLE_CLASS = 'alert--invisible';
+  var ALERT_AUTO_HIDE_DELAY = 10;
+  var ALERT_AUTOCLOSING_MATCHER = '.alert-info, .alert-success';
+
+  var alertsUtil = function(element) {
+    var togglerCheckRequested = false;
+    var togglerElement;
+    var alertElements;
+
+    function init() {
+      if (!element) {
+        throw new Error('Alerts util has to be called with an element!');
+      }
+
+      if (element.classList.contains(ALERTS_INITIALIZED_CLASS)) {
+        return false;
+      }
+
+      togglerElement = element.querySelector('.' + ALERTS_TOGGLER_CLASS);
+      alertElements = gatherAlertElements();
+
+      initToggler();
+      initAlerts();
+
+      // register http client interceptor to filter out Alerts Header
+      setupHttpInterceptor();
+
+      // mark initialized
+      element.classList.add(ALERTS_INITIALIZED_CLASS);
+
+      return {
+        name: ALERTS_UTIL_NAME,
+        element: element,
+        destroy: function() {},
+      };
+    }
+
+    function gatherAlertElements() {
+      return Array.from(element.querySelectorAll('.' + ALERT_CLASS)).filter(function(alert) {
+        return !alert.classList.contains(ALERT_INITIALIZED_CLASS);
+      });
+    }
+
+    function initToggler() {
+      togglerElement.addEventListener('click', function() {
+        alertElements.forEach(function(alertEl) {
+          toggleAlert(alertEl, true);
+        });
+        togglerElement.classList.remove(ALERTS_TOGGLER_VISIBLE_CLASS);
+      });
+    }
+
+    function initAlerts() {
+      alertElements.forEach(initAlert);
+    }
+
+    function initAlert(alertElement) {
+      var autoHideDelay = ALERT_AUTO_HIDE_DELAY;
+      if (alertElement.dataset.decay) {
+        autoHideDelay = parseInt(alertElement.dataset.decay, 10);
+      }
+
+      var closeEl = alertElement.querySelector('.' + ALERT_CLOSER_CLASS);
+      closeEl.addEventListener('click', function() {
+        toggleAlert(alertElement);
+      });
+
+      if (autoHideDelay > 0 && alertElement.matches(ALERT_AUTOCLOSING_MATCHER)) {
+        window.setTimeout(function() {
+          toggleAlert(alertElement);
+        }, autoHideDelay * 1000);
+      }
+    }
+
+    function toggleAlert(alertEl, visible) {
+      alertEl.classList.toggle(ALERT_INVISIBLE_CLASS, !visible);
+      checkToggler();
+    }
+
+    function checkToggler() {
+      if (togglerCheckRequested) {
+        return;
+      }
+
+      var alertsHidden = alertElements.reduce(function(acc, alert) {
+        return acc && alert.classList.contains(ALERT_INVISIBLE_CLASS);
+      }, true);
+
+      window.setTimeout(function() {
+        togglerElement.classList.toggle(ALERTS_TOGGLER_VISIBLE_CLASS, alertsHidden);
+        togglerCheckRequested = false;
+      }, ALERTS_TOGGLER_APPEAR_DELAY);
+    }
+
+    function setupHttpInterceptor() {
+      if (HttpClient) {
+        HttpClient.addResponseInterceptor(responseInterceptor.bind(this));
+      }
+    }
+
+    function elevateAlerts() {
+      element.classList.add(ALERTS_ELEVATED_CLASS);
+    }
+
+    function responseInterceptor(response) {
+      var alerts;
+      for (var header of response.headers) {
+        if (header[0] === 'alerts') {
+          var decodedHeader = decodeURIComponent(header[1]);
+          alerts = JSON.parse(decodedHeader);
+          break;
+        }
+      }
+
+      if (alerts) {
+        alerts.forEach(function(alert) {
+          var alertElement = createAlertElement(alert.status, alert.content);
+          element.appendChild(alertElement);
+          alertElements.push(alertElement);
+          initAlert(alertElement);
+        });
+
+        elevateAlerts();
+      }
+    }
+
+    function createAlertElement(type, content) {
+      var alertElement = document.createElement('div');
+      alertElement.classList.add(ALERT_CLASS, 'alert-' + type);
+
+      var alertCloser = document.createElement('div');
+      alertCloser.classList.add(ALERT_CLOSER_CLASS);
+
+      var alertIcon = document.createElement('div');
+      alertIcon.classList.add(ALERT_ICON_CLASS);
+
+      var alertContent = document.createElement('div');
+      alertContent.classList.add(ALERT_CONTENT_CLASS);
+      alertContent.innerHTML = content;
+
+      alertElement.appendChild(alertCloser);
+      alertElement.appendChild(alertIcon);
+      alertElement.appendChild(alertContent);
+
+      return alertElement;
+    }
+
+    return init();
+  };
+
+  if (UtilRegistry) {
+    UtilRegistry.register({
+      name: ALERTS_UTIL_NAME,
+      selector: ALERTS_UTIL_SELECTOR,
+      setup: alertsUtil,
+    });
+  }
+})();
diff --git a/static/es/utils/asidenav.js b/static/es/utils/asidenav.js
new file mode 100644
index 000000000..b9fc1e323
--- /dev/null
+++ b/static/es/utils/asidenav.js
@@ -0,0 +1,109 @@
+(function() {
+  'use strict';
+
+  /**
+   *
+   * Asidenav Utility
+   *  Correctly positions hovered asidenav submenus and handles the favorites button on mobile
+   *
+   * Attribute: uw-asidenav
+   *
+   * Example usage:
+   *  <div uw-asidenav>
+   *    <div .asidenav>
+   *      <div .asidenav__box>
+   *        <ul .asidenav__list.list--iconless>
+   *          <li .asidenav__list-item>
+   *            <a .asidenav__link-wrapper href="#">
+   *              <div .asidenav__link-shorthand>EIP
+   *              <div .asidenav__link-label>Einführung in die Programmierung
+   *            <div .asidenav__nested-list-wrapper>
+   *              <ul .asidenav__nested-list.list--iconless>
+   *                Übungsblätter
+   *                ...
+   *
+   */
+
+  var ASIDENAV_UTIL_NAME = 'asidenav';
+  var ASIDENAV_UTIL_SELECTOR = '[uw-asidenav]';
+
+  var FAVORITES_BTN_CLASS = 'navbar__list-item--favorite';
+  var FAVORITES_BTN_ACTIVE_CLASS = 'navbar__list-item--active';
+  var ASIDENAV_INITIALIZED_CLASS = 'asidenav--initialized';
+  var ASIDENAV_EXPANDED_CLASS = 'main__aside--expanded';
+  var ASIDENAV_LIST_ITEM_CLASS = 'asidenav__list-item';
+  var ASIDENAV_SUBMENU_CLASS = 'asidenav__nested-list-wrapper';
+
+  var asidenavUtil = function(element) {
+
+    function init() {
+      if (!element) {
+        throw new Error('Asidenav utility cannot be setup without an element!');
+      }
+
+      if (element.classList.contains(ASIDENAV_INITIALIZED_CLASS)) {
+        return false;
+      }
+
+      initFavoritesButton();
+      initAsidenavSubmenus();
+
+      // mark initialized
+      element.classList.add(ASIDENAV_INITIALIZED_CLASS);
+
+      return {
+        name: ASIDENAV_UTIL_NAME,
+        element: element,
+        destroy: function() {},
+      };
+    }
+
+    function initFavoritesButton() {
+      var favoritesBtn = document.querySelector('.' + FAVORITES_BTN_CLASS);
+      favoritesBtn.addEventListener('click', function(event) {
+        favoritesBtn.classList.toggle(FAVORITES_BTN_ACTIVE_CLASS);
+        element.classList.toggle(ASIDENAV_EXPANDED_CLASS);
+        event.preventDefault();
+      }, true);
+    }
+
+    function initAsidenavSubmenus() {
+      var asidenavLinksWithSubmenus = Array.from(element.querySelectorAll('.' + ASIDENAV_LIST_ITEM_CLASS))
+        .map(function(listItem) {
+          var submenu = listItem.querySelector('.' + ASIDENAV_SUBMENU_CLASS);
+          return { listItem, submenu };
+        }).filter(function(union) {
+          return union.submenu !== null;
+        });
+
+      asidenavLinksWithSubmenus.forEach(function(union) {
+        union.listItem.addEventListener('mouseover', createMouseoverHandler(union));
+      });
+    }
+
+    function createMouseoverHandler(union) {
+      return function mouseoverHanlder() {
+        var rectListItem = union.listItem.getBoundingClientRect();
+        var rectSubMenu = union.submenu.getBoundingClientRect();
+
+        union.submenu.style.left = (rectListItem.left + rectListItem.width) + 'px';
+        if (window.innerHeight - rectListItem.top < rectSubMenu.height) {
+          union.submenu.style.top = (rectListItem.top + rectListItem.height - rectSubMenu.height) + 'px';
+        } else {
+          union.submenu.style.top = rectListItem.top + 'px';
+        }
+
+      };
+    }
+
+    return init();
+  };
+
+  if (UtilRegistry) {
+    UtilRegistry.register({
+      name: ASIDENAV_UTIL_NAME,
+      selector: ASIDENAV_UTIL_SELECTOR,
+      setup: asidenavUtil,
+    });
+  }
+})();
diff --git a/static/es/utils/asyncForm.js b/static/es/utils/asyncForm.js
new file mode 100644
index 000000000..38ecb1f5f
--- /dev/null
+++ b/static/es/utils/asyncForm.js
@@ -0,0 +1,126 @@
+(function collonadeClosure() {
+  'use strict';
+
+  /**
+   *
+   * Async Form Utility
+   *  prevents form submissions from reloading the page but instead firing an AJAX request
+   *
+   * Attribute: uw-async-form
+   *   (works only on <form> elements)
+   *
+   * Example usage:
+   *   <form uw-async-form method='POST' action='...'>
+   *     ...
+   *
+   * Internationalization:
+   *  This utility expects the following translations to be available:
+   *    asyncFormFailure: text that gets shown if an async form request fails
+   *      example: "Oops. Something went wrong."
+   */
+
+  var ASYNC_FORM_UTIL_NAME = 'asyncForm';
+  var ASYNC_FORM_UTIL_SELECTOR = 'form[uw-async-form]';
+
+  var ASYNC_FORM_INITIALIZED_CLASS = 'check-all--initialized';
+  var ASYNC_FORM_RESPONSE_CLASS = 'async-form__response';
+  var ASYNC_FORM_LOADING_CLASS = 'async-form--loading';
+  var ASYNC_FORM_MIN_DELAY = 600;
+
+  var MODAL_SELECTOR = '.modal';
+  var MODAL_HEADER_KEY = 'Is-Modal';
+  var MODAL_HEADER_VALUE = 'True';
+
+  var asyncFormUtil = function(element) {
+
+    var lastRequestTimestamp = 0;
+
+    function init() {
+      if (!element) {
+        throw new Error('Async Form Utility cannot be setup without an element!');
+      }
+
+      if (element.classList.contains(ASYNC_FORM_INITIALIZED_CLASS)) {
+        return false;
+      }
+
+      element.addEventListener('submit', submitHandler);
+
+      element.classList.add(ASYNC_FORM_INITIALIZED_CLASS);
+
+      return {
+        name: ASYNC_FORM_UTIL_NAME,
+        element: element,
+        destroy: function() {},
+      };
+    }
+
+    function processResponse(response) {
+      var responseElement = makeResponseElement(response.content, response.status);
+      var parentElement = element.parentElement;
+
+      // make sure there is a delay between click and response
+      var delay = Math.max(0, ASYNC_FORM_MIN_DELAY + lastRequestTimestamp - Date.now());
+
+      setTimeout(function() {
+        parentElement.insertBefore(responseElement, element);
+        element.remove();
+      }, delay);
+    }
+
+    function makeResponseElement(content, status) {
+      var responseElement = document.createElement('div');
+      status = status || 'info';
+      responseElement.classList.add(ASYNC_FORM_RESPONSE_CLASS);
+      responseElement.classList.add(ASYNC_FORM_RESPONSE_CLASS + '--' + status);
+      responseElement.innerHTML = content;
+      return responseElement;
+    }
+
+    function submitHandler(event) {
+      event.preventDefault();
+
+      if (!HttpClient) {
+        throw new Error('HttpClient not found! Can\'t fetch submit form asynchronously!');
+      }
+
+      element.classList.add(ASYNC_FORM_LOADING_CLASS);
+      lastRequestTimestamp = Date.now();
+
+      var url = element.getAttribute('action');
+      var headers = { };
+      var body = new FormData(element);
+
+      var isModal = element.closest(MODAL_SELECTOR);
+      if (isModal) {
+        headers[MODAL_HEADER_KEY] = MODAL_HEADER_VALUE;
+      }
+
+      HttpClient.post({
+        url: url,
+        headers: headers,
+        body: body,
+        accept: HttpClient.ACCEPT.JSON,
+      }).then(function(response) {
+        return response.json();
+      }).then(function(response) {
+        processResponse(response[0]);
+      }).catch(function() {
+        var failureMessage = I18n.get('asyncFormFailure');
+        processResponse({ content: failureMessage });
+
+        element.classList.remove(ASYNC_FORM_LOADING_CLASS);
+      });
+    }
+
+    return init();
+  };
+
+  if (UtilRegistry) {
+    UtilRegistry.register({
+      name: ASYNC_FORM_UTIL_NAME,
+      selector: ASYNC_FORM_UTIL_SELECTOR,
+      setup: asyncFormUtil,
+    });
+  }
+})();
diff --git a/static/es/utils/asyncTable.js b/static/es/utils/asyncTable.js
new file mode 100644
index 000000000..8d3b4c8d8
--- /dev/null
+++ b/static/es/utils/asyncTable.js
@@ -0,0 +1,422 @@
+(function collonadeClosure() {
+  'use strict';
+
+  /**
+   *
+   * Async Table Utility
+   *  makes table filters, sorting and pagination behave asynchronously via AJAX calls
+   *
+   * Attribute: uw-async-table
+   *
+   * Example usage:
+  *   (regular table)
+   */
+
+  var INPUT_DEBOUNCE = 600;
+  var HEADER_HEIGHT = 80;
+
+  var ASYNC_TABLE_UTIL_NAME = 'asyncTable';
+  var ASYNC_TABLE_UTIL_SELECTOR = '[uw-async-table]';
+
+  var ASYNC_TABLE_LOCAL_STORAGE_KEY = 'ASYNC_TABLE';
+  var ASYNC_TABLE_SCROLLTABLE_SELECTOR = '.scrolltable';
+  var ASYNC_TABLE_INITIALIZED_CLASS = 'async-table--initialized';
+  var ASYNC_TABLE_LOADING_CLASS = 'async-table--loading';
+
+  var ASYNC_TABLE_FILTER_FORM_SELECTOR = '.table-filter-form';
+  var ASYNC_TABLE_FILTER_FORM_ID_SELECTOR = '[name="form-identifier"]';
+
+
+  var asyncTableUtil = function(element) {
+    var asyncTableHeader;
+    var asyncTableId;
+
+    var ths = [];
+    var pageLinks = [];
+    var pagesizeForm;
+    var scrollTable;
+    var cssIdPrefix = '';
+
+    var tableFilterInputs = {
+      search: [],
+      input: [],
+      change: [],
+      select: [],
+    };
+
+    function init() {
+      if (!element) {
+        throw new Error('Async Table utility cannot be setup without an element!');
+      }
+
+      if (element.classList.contains(ASYNC_TABLE_INITIALIZED_CLASS)) {
+        return false;
+      }
+
+      // param asyncTableDbHeader
+      if (element.dataset.asyncTableDbHeader !== undefined) {
+        asyncTableHeader = element.dataset.asyncTableDbHeader;
+      }
+
+      var rawTableId = element.querySelector('table').id;
+      cssIdPrefix = findCssIdPrefix(rawTableId);
+      asyncTableId = rawTableId.replace(cssIdPrefix, '');
+
+      // find scrolltable wrapper
+      scrollTable = element.querySelector(ASYNC_TABLE_SCROLLTABLE_SELECTOR);
+      if (!scrollTable) {
+        throw new Error('Async Table cannot be set up without a scrolltable element!');
+      }
+
+      setupSortableHeaders();
+      setupPagination();
+      setupPageSizeSelect();
+      setupTableFilter();
+
+      processLocalStorage();
+
+      // clear currentTableUrl from previous requests
+      setLocalStorageParameter('currentTableUrl', null);
+
+      // mark initialized
+      element.classList.add(ASYNC_TABLE_INITIALIZED_CLASS);
+
+      return {
+        name: ASYNC_TABLE_UTIL_NAME,
+        element: element,
+        destroy: function() {},
+      };
+    }
+
+    function setupSortableHeaders() {
+      ths = Array.from(scrollTable.querySelectorAll('th.sortable')).map(function(th) {
+        return { element: th };
+      });
+
+      ths.forEach(function(th) {
+        th.clickHandler = function(event) {
+          setLocalStorageParameter('horizPos', (scrollTable || {}).scrollLeft);
+          linkClickHandler(event);
+        };
+        th.element.addEventListener('click', th.clickHandler);
+      });
+    }
+
+    function setupPagination() {
+      var pagination = element.querySelector('#' + cssIdPrefix + asyncTableId + '-pagination');
+      if (pagination) {
+        pageLinks = Array.from(pagination.querySelectorAll('.page-link')).map(function(link) {
+          return { element: link };
+        });
+
+        pageLinks.forEach(function(link) {
+          link.clickHandler = function(event) {
+            var tableBoundingRect = scrollTable.getBoundingClientRect();
+            if (tableBoundingRect.top < HEADER_HEIGHT) {
+              var scrollTo = {
+                top: (scrollTable.offsetTop || 0) - HEADER_HEIGHT,
+                left: scrollTable.offsetLeft || 0,
+                behavior: 'smooth',
+              };
+              setLocalStorageParameter('scrollTo', scrollTo);
+            }
+            linkClickHandler(event);
+          };
+          link.element.addEventListener('click', link.clickHandler);
+        });
+      }
+    }
+
+    function setupPageSizeSelect() {
+      // pagesize form
+      pagesizeForm = element.querySelector('#' + cssIdPrefix + asyncTableId + '-pagesize-form');
+
+      if (pagesizeForm) {
+        var pagesizeSelect = pagesizeForm.querySelector('[name=' + asyncTableId + '-pagesize]');
+        pagesizeSelect.addEventListener('change', changePagesizeHandler);
+      }
+    }
+
+    function setupTableFilter() {
+      var tableFilterForm = element.querySelector(ASYNC_TABLE_FILTER_FORM_SELECTOR);
+
+      if (tableFilterForm) {
+        gatherTableFilterInputs(tableFilterForm);
+        addTableFilterEventListeners(tableFilterForm);
+      }
+    }
+
+    function gatherTableFilterInputs(tableFilterForm) {
+      Array.from(tableFilterForm.querySelectorAll('input[type="search"]')).forEach(function(input) {
+        tableFilterInputs.search.push(input);
+      });
+
+      Array.from(tableFilterForm.querySelectorAll('input[type="text"]')).forEach(function(input) {
+        tableFilterInputs.input.push(input);
+      });
+
+      Array.from(tableFilterForm.querySelectorAll('input:not([type="text"]):not([type="search"])')).forEach(function(input) {
+        tableFilterInputs.change.push(input);
+      });
+
+      Array.from(tableFilterForm.querySelectorAll('select')).forEach(function(input) {
+        tableFilterInputs.select.push(input);
+      });
+    }
+
+    function addTableFilterEventListeners(tableFilterForm) {
+      tableFilterInputs.search.forEach(function(input) {
+        var debouncedInput = debounce(function() {
+          if (input.value.length === 0 || input.value.length > 2) {
+            updateFromTableFilter(tableFilterForm);
+          }
+        }, INPUT_DEBOUNCE);
+        input.addEventListener('input', debouncedInput);
+      });
+
+      tableFilterInputs.input.forEach(function(input) {
+        var debouncedInput = debounce(function() {
+          if (input.value.length === 0 || input.value.length > 2) {
+            updateFromTableFilter(tableFilterForm);
+          }
+        }, INPUT_DEBOUNCE);
+        input.addEventListener('input', debouncedInput);
+      });
+
+      tableFilterInputs.change.forEach(function(input) {
+        input.addEventListener('change', function() {
+          updateFromTableFilter(tableFilterForm);
+        });
+      });
+
+      tableFilterInputs.select.forEach(function(input) {
+        input.addEventListener('change', function() {
+          updateFromTableFilter(tableFilterForm);
+        });
+      });
+
+      tableFilterForm.addEventListener('submit', function(event) {
+        event.preventDefault();
+        updateFromTableFilter(tableFilterForm);
+      });
+    }
+
+    function updateFromTableFilter(tableFilterForm) {
+      var url = serializeTableFilterToURL();
+      var callback = null;
+
+      var focusedInput = tableFilterForm.querySelector(':focus, :active');
+      // focus previously focused input
+      if (focusedInput && focusedInput.selectionStart !== null) {
+        var selectionStart = focusedInput.selectionStart;
+        // remove the following part of the id to get rid of the random
+        // (yet somewhat structured) prefix we got from nudging.
+        var prefix = findCssIdPrefix(focusedInput.id);
+        var focusId = focusedInput.id.replace(prefix, '');
+        callback = function(wrapper) {
+          var idPrefix = getLocalStorageParameter('cssIdPrefix');
+          var toBeFocused = wrapper.querySelector('#' + idPrefix + focusId);
+          if (toBeFocused) {
+            toBeFocused.focus();
+            toBeFocused.selectionStart = selectionStart;
+          }
+        };
+      }
+      updateTableFrom(url, callback);
+    }
+
+    function serializeTableFilterToURL() {
+      var url = new URL(getLocalStorageParameter('currentTableUrl') || window.location.href);
+
+      var formIdElement = element.querySelector(ASYNC_TABLE_FILTER_FORM_ID_SELECTOR);
+      if (!formIdElement) {
+        // cannot serialize the filter form without an identifier
+        return;
+      }
+
+      url.searchParams.set('form-identifier', formIdElement.value);
+      url.searchParams.set('_hasdata', 'true');
+      url.searchParams.set(asyncTableId + '-page', '0');
+
+      tableFilterInputs.search.forEach(function(input) {
+        url.searchParams.set(input.name, input.value);
+      });
+
+      tableFilterInputs.input.forEach(function(input) {
+        url.searchParams.set(input.name, input.value);
+      });
+
+      tableFilterInputs.change.forEach(function(input) {
+        if (input.checked) {
+          url.searchParams.set(input.name, input.value);
+        }
+      });
+
+      tableFilterInputs.select.forEach(function(select) {
+        var options = Array.from(select.querySelectorAll('option'));
+        var selected = options.find(function(option) { return option.selected; });
+        if (selected) {
+          url.searchParams.set(select.name, selected.value);
+        }
+      });
+
+      return url;
+    }
+
+    function processLocalStorage() {
+      var scrollTo = getLocalStorageParameter('scrollTo');
+      if (scrollTo && scrollTable) {
+        window.scrollTo(scrollTo);
+      }
+      setLocalStorageParameter('scrollTo', null);
+
+      var horizPos = getLocalStorageParameter('horizPos');
+      if (horizPos && scrollTable) {
+        scrollTable.scrollLeft = horizPos;
+      }
+      setLocalStorageParameter('horizPos', null);
+    }
+
+    function removeListeners() {
+      ths.forEach(function(th) {
+        th.element.removeEventListener('click', th.clickHandler);
+      });
+
+      pageLinks.forEach(function(link) {
+        link.element.removeEventListener('click', link.clickHandler);
+      });
+
+      if (pagesizeForm) {
+        var pagesizeSelect = pagesizeForm.querySelector('[name=' + asyncTableId + '-pagesize]');
+        pagesizeSelect.removeEventListener('change', changePagesizeHandler);
+      }
+    }
+
+    function linkClickHandler(event) {
+      event.preventDefault();
+      var url = getClickDestination(event.target);
+      if (!url.match(/^http/)) {
+        url = window.location.origin + window.location.pathname + url;
+      }
+      updateTableFrom(url);
+    }
+
+    function getClickDestination(el) {
+      if (!el.matches('a') && !el.querySelector('a')) {
+        return '';
+      }
+      return el.getAttribute('href') || el.querySelector('a').getAttribute('href');
+    }
+
+    function changePagesizeHandler(event) {
+      var pagesizeParamKey = asyncTableId + '-pagesize';
+      var pageParamKey = asyncTableId + '-page';
+      var url = new URL(getLocalStorageParameter('currentTableUrl') || window.location.href);
+      url.searchParams.set(pagesizeParamKey, event.target.value);
+      url.searchParams.set(pageParamKey, 0);
+      updateTableFrom(url.href);
+    }
+
+    // fetches new sorted element from url with params and replaces contents of current element
+    function updateTableFrom(url, callback) {
+      if (!HttpClient) {
+        throw new Error('HttpClient not found!');
+      }
+
+      element.classList.add(ASYNC_TABLE_LOADING_CLASS);
+
+      var headers = {
+        'Accept': 'text/html',
+        [asyncTableHeader]: asyncTableId,
+      };
+
+      HttpClient.get({
+        url: url,
+        headers: headers,
+        accept: HttpClient.ACCEPT.TEXT_HTML,
+      }).then(function(response) {
+        return HtmlHelpers.parseResponse(response);
+      }).then(function(response) {
+        setLocalStorageParameter('currentTableUrl', url.href);
+        // reset table
+        removeListeners();
+        element.classList.remove(ASYNC_TABLE_INITIALIZED_CLASS);
+        // update table with new
+        updateWrapperContents(response);
+
+        if (UtilRegistry) {
+          UtilRegistry.setupAll(element);
+        }
+
+        if (callback && typeof callback === 'function') {
+          setLocalStorageParameter('cssIdPrefix', response.idPrefix);
+          callback(element);
+          setLocalStorageParameter('cssIdPrefix', '');
+        }
+      }).catch(function(err) {
+        console.error(err);
+      }).finally(function() {
+        element.classList.remove(ASYNC_TABLE_LOADING_CLASS);
+      });
+    }
+
+    function updateWrapperContents(response) {
+      var newPage = document.createElement('div');
+      newPage.appendChild(response.element);
+      var newWrapperContents = newPage.querySelector('#' + response.idPrefix + element.id);
+      element.innerHTML = newWrapperContents.innerHTML;
+    }
+
+    return init();
+  };
+
+  // returns any random nudged prefix found in the given id
+  function findCssIdPrefix(id) {
+    var matcher = /r\d*?__/;
+    var maybePrefix = id.match(matcher);
+    if (maybePrefix && maybePrefix[0]) {
+      return maybePrefix[0];
+    }
+    return '';
+  }
+
+  function setLocalStorageParameter(key, value) {
+    var currentLSState = JSON.parse(window.localStorage.getItem(ASYNC_TABLE_LOCAL_STORAGE_KEY)) || {};
+    if (value !== null) {
+      currentLSState[key] = value;
+    } else {
+      delete currentLSState[key];
+    }
+    window.localStorage.setItem(ASYNC_TABLE_LOCAL_STORAGE_KEY, JSON.stringify(currentLSState));
+  }
+
+  function getLocalStorageParameter(key) {
+    var currentLSState = JSON.parse(window.localStorage.getItem(ASYNC_TABLE_LOCAL_STORAGE_KEY)) || {};
+    return currentLSState[key];
+  }
+
+  // debounce function, taken from Underscore.js
+  function debounce(func, wait, immediate) {
+    var timeout;
+    return function() {
+      var context = this, args = arguments;
+      var later = function() {
+        timeout = null;
+        if (!immediate) func.apply(context, args);
+      };
+      var callNow = immediate && !timeout;
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+      if (callNow) func.apply(context, args);
+    };
+  }
+
+  // register async table utility
+  if (UtilRegistry) {
+    UtilRegistry.register({
+      name: ASYNC_TABLE_UTIL_NAME,
+      selector: ASYNC_TABLE_UTIL_SELECTOR,
+      setup: asyncTableUtil,
+    });
+  }
+})();
diff --git a/static/es/utils/checkAll.js b/static/es/utils/checkAll.js
new file mode 100644
index 000000000..7886fc9e6
--- /dev/null
+++ b/static/es/utils/checkAll.js
@@ -0,0 +1,150 @@
+(function() {
+  'use strict';
+
+  /**
+   *
+   * Check All Checkbox Utility
+   *  adds a Check All Checkbox above columns with only checkboxes
+   *
+   * Attribute: [none]
+   *   (will be set up automatically on tables)
+   *
+   * Example usage:
+   *  (table with one column thats only checkboxes)
+   */
+
+  var CHECK_ALL_UTIL_NAME = 'checkAll';
+  var CHECK_ALL_UTIL_SELECTOR = 'table';
+
+  var CHECKBOX_SELECTOR    = '[type="checkbox"]';
+
+  var CHECK_ALL_INITIALIZED_CLASS = 'check-all--initialized';
+
+  var checkAllUtil = function(element) {
+    var columns = [];
+    var checkboxColumn = [];
+    var checkAllCheckbox = null;
+
+    function init() {
+      if (!element) {
+        throw new Error('Check All utility cannot be setup without an element!');
+      }
+
+      if (element.classList.contains(CHECK_ALL_INITIALIZED_CLASS)) {
+        return false;
+      }
+
+      gatherColumns();
+      setupCheckAllCheckbox();
+
+      // mark initialized
+      element.classList.add(CHECK_ALL_INITIALIZED_CLASS);
+
+      return {
+        name: CHECK_ALL_UTIL_NAME,
+        element: element,
+        destroy: function() {},
+      };
+    }
+
+    function getCheckboxId() {
+      return 'check-all-checkbox-' + Math.floor(Math.random() * 100000);
+    }
+
+    function gatherColumns() {
+      var rows = Array.from(element.querySelectorAll('tr'));
+      var cols = [];
+      rows.forEach(function(tr) {
+        var cells = Array.from(tr.querySelectorAll('td'));
+        cells.forEach(function(cell, cellIndex) {
+          if (!cols[cellIndex]) {
+            cols[cellIndex] = [];
+          }
+          cols[cellIndex].push(cell);
+        });
+      });
+      columns = cols;
+    }
+
+    function findCheckboxColumn(columns) {
+      var checkboxColumnId = null;
+      columns.forEach(function(col, i) {
+        if (isCheckboxColumn(col)) {
+          checkboxColumnId = i;
+        }
+      });
+      return checkboxColumnId;
+    }
+
+    function isCheckboxColumn(col) {
+      var onlyCheckboxes = true;
+      col.forEach(function(cell) {
+        if (onlyCheckboxes && !cell.querySelector(CHECKBOX_SELECTOR)) {
+          onlyCheckboxes = false;
+        }
+      });
+      return onlyCheckboxes;
+    }
+
+    function setupCheckAllCheckbox() {
+      var checkboxColumnId = findCheckboxColumn(columns);
+      if (checkboxColumnId === null) {
+        return;
+      }
+
+      checkboxColumn = columns[checkboxColumnId];
+      var firstRow = element.querySelector('tr');
+      var th = Array.from(firstRow.querySelectorAll('th, td'))[checkboxColumnId];
+      checkAllCheckbox = document.createElement('input');
+      checkAllCheckbox.setAttribute('type', 'checkbox');
+      checkAllCheckbox.setAttribute('id', getCheckboxId());
+      th.insertBefore(checkAllCheckbox, th.firstChild);
+
+      // manually set up new checkbox
+      if (UtilRegistry) {
+        UtilRegistry.setup(UtilRegistry.find('checkbox'), th);
+      }
+
+      checkAllCheckbox.addEventListener('input', onCheckAllCheckboxInput);
+      setupCheckboxListeners();
+    }
+
+    function onCheckAllCheckboxInput() {
+      toggleAll(checkAllCheckbox.checked);
+    }
+
+    function setupCheckboxListeners() {
+      checkboxColumn
+        .map(function(cell) {
+          return cell.querySelector(CHECKBOX_SELECTOR);
+        })
+        .forEach(function(checkbox) {
+          checkbox.addEventListener('input', updateCheckAllCheckboxState);
+        });
+    }
+
+    function updateCheckAllCheckboxState() {
+      var allChecked = checkboxColumn.every(function(cell) {
+        return cell.querySelector(CHECKBOX_SELECTOR).checked;
+      });
+      checkAllCheckbox.checked = allChecked;
+    }
+
+    function toggleAll(checked) {
+      checkboxColumn.forEach(function(cell) {
+        cell.querySelector(CHECKBOX_SELECTOR).checked = checked;
+      });
+    }
+
+    return init();
+  };
+
+  // register check all checkbox util
+  if (UtilRegistry) {
+    UtilRegistry.register({
+      name: CHECK_ALL_UTIL_NAME,
+      selector: CHECK_ALL_UTIL_SELECTOR,
+      setup: checkAllUtil,
+    });
+  }
+})();
diff --git a/static/es/utils/form.js b/static/es/utils/form.js
new file mode 100644
index 000000000..fe9bf351d
--- /dev/null
+++ b/static/es/utils/form.js
@@ -0,0 +1,611 @@
+(function() {
+  'use strict';
+
+  var formUtilities = [];
+
+  /**
+   *
+   * Reactive Submit Button Utility
+   *  disables a forms LAST sumit button as long as the required inputs are invalid
+   *  (only checks if the value of the inputs are not empty)
+   *
+   * Attribute: [none]
+   *  (automatically setup on all form tags)
+   *
+   * Params:
+   *  data-formnorequired: string
+   *    If present the submit button will never get disabled
+   *
+   * Example usage:
+   *  <form uw-reactive-submit-button>
+   *   <input type="text" required>
+   *   <button type="submit">
+   *  </form>
+   */
+
+  var REACTIVE_SUBMIT_BUTTON_UTIL_NAME = 'reactiveSubmitButton';
+  // var REACTIVE_SUBMIT_BUTTON_UTIL_SELECTOR = 'form';
+
+  var REACTIVE_SUBMIT_BUTTON_INITIALIZED_CLASS = 'reactive-submit-button--initialized';
+
+  /* eslint-disable-next-line */
+  var reactiveSubmitButtonUtil = function(element) {
+    var requiredInputs;
+    var submitButton;
+
+    function init() {
+      if (!element) {
+        throw new Error('Reactive Submit Button utility cannot be setup without an element!');
+      }
+
+      if (element.classList.contains(REACTIVE_SUBMIT_BUTTON_INITIALIZED_CLASS)) {
+        return false;
+      }
+
+      // abort if form has param data-formnorequired
+      if (element.dataset.formnorequired !== undefined) {
+        throw new Error('Form has formnorequired data attribute. Will skip setup of reactive submit button.');
+      }
+
+      requiredInputs = Array.from(element.querySelectorAll('[required]'));
+      if (!requiredInputs) {
+        // abort if form has no required inputs
+        throw new Error('Submit button has formnorequired data attribute. Will skip setup of reactive submit button.');
+      }
+
+      var submitButtons = Array.from(element.querySelectorAll('[type="submit"]'));
+      if (!submitButtons || !submitButtons.length) {
+        throw new Error('Reactive Submit Button utility couldn\'t find any submit buttons!');
+      }
+      submitButton = submitButtons.reverse()[0];
+      // abort if form has param data-formnorequired
+      if (submitButton.dataset.formnorequired !== undefined) {
+        return false;
+      }
+
+      setupInputs();
+      updateButtonState();
+
+      element.classList.add(REACTIVE_SUBMIT_BUTTON_INITIALIZED_CLASS);
+
+      return {
+        name: REACTIVE_SUBMIT_BUTTON_UTIL_NAME,
+        element: element,
+        destroy: function() {},
+      };
+    }
+
+    function setupInputs() {
+      requiredInputs.forEach(function(el) {
+        var checkbox = el.getAttribute('type') === 'checkbox';
+        var eventType = checkbox ? 'change' : 'input';
+        el.addEventListener(eventType, function() {
+          updateButtonState();
+        });
+      });
+    }
+
+    function updateButtonState() {
+      if (inputsValid()) {
+        submitButton.removeAttribute('disabled');
+      } else {
+        submitButton.setAttribute('disabled', 'true');
+      }
+    }
+
+    function inputsValid() {
+      var done = true;
+      requiredInputs.forEach(function(inp) {
+        var len = inp.value.trim().length;
+        if (done && len === 0) {
+          done = false;
+        }
+      });
+      return done;
+    }
+
+    return init();
+  };
+
+  // skipping reactiveButtonUtil (for now)
+  // the button did not properly re-enable after filling out a form for some safari users.
+  // if maybe in the future there is going to be a proper way of (asynchronously) and
+  // meaningfully validating forms this can be re-activated by commenting in the next few lines
+  // formUtilities.push({
+  //   name: REACTIVE_SUBMIT_BUTTON_UTIL_NAME,
+  //   selector: REACTIVE_SUBMIT_BUTTON_UTIL_SELECTOR,
+  //   setup: reactiveSubmitButtonUtil,
+  // });
+
+  /**
+   *
+   * Interactive Fieldset Utility
+   *  shows/hides inputs based on value of particular input
+   *
+   * Attribute: uw-interactive-fieldset
+   *
+   * Params:
+   *  data-conditional-input: string
+   *    Selector for the input that this fieldset watches for changes
+   *  data-conditional-value: string
+   *    The value the conditional input needs to be set to for this fieldset to be shown
+   *    Can be omitted if conditionalInput is a checkbox
+   *
+   * Example usage:
+   * ## example with text input
+   *  <input id="input-0" type="text">
+   *  <fieldset uw-interactive-fieldset data-conditional-input="#input-0" data-conditional-value="yes">...</fieldset>
+   *  <fieldset uw-interactive-fieldset data-conditional-input="#input-0" data-conditional-value="no">...</fieldset>
+   * ## example with <select>
+   *  <select id="select-0">
+   *    <option value="0">Zero
+   *    <option value="1">One
+   *  <fieldset uw-interactive-fieldset data-conditional-input="#select-0" data-conditional-value="0">...</fieldset>
+   *  <fieldset uw-interactive-fieldset data-conditional-input="#select-0" data-conditional-value="1">...</fieldset>
+   * ## example with checkbox
+   *  <input id="checkbox-0" type="checkbox">
+   *  <input id="checkbox-1" type="checkbox">
+   *  <fieldset uw-interactive-fieldset data-conditional-input="#checkbox-0">...</fieldset>
+   *  <fieldset uw-interactive-fieldset data-conditional-input="#checkbox-1">...</fieldset>
+   */
+
+  var INTERACTIVE_FIELDSET_UTIL_NAME = 'interactiveFieldset';
+  var INTERACTIVE_FIELDSET_UTIL_SELECTOR = '[uw-interactive-fieldset]';
+  var INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR = '.interactive-fieldset__target';
+
+  var INTERACTIVE_FIELDSET_INITIALIZED_CLASS = 'interactive-fieldset--initialized';
+  var INTERACTIVE_FIELDSET_CHILD_SELECTOR = 'input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled])';
+
+  var interactiveFieldsetUtil = function(element) {
+    var conditionalInput;
+    var conditionalValue;
+    var target;
+    var childInputs;
+
+    function init() {
+      if (!element) {
+        throw new Error('Interactive Fieldset utility cannot be setup without an element!');
+      }
+
+      if (element.classList.contains(INTERACTIVE_FIELDSET_INITIALIZED_CLASS)) {
+        return false;
+      }
+
+      // param conditionalInput
+      if (!element.dataset.conditionalInput) {
+        throw new Error('Interactive Fieldset needs a selector for a conditional input!');
+      }
+      conditionalInput = document.querySelector('#' + element.dataset.conditionalInput);
+      if (!conditionalInput) {
+        // abort if form has no required inputs
+        throw new Error('Couldn\'t find the conditional input. Aborting setup for interactive fieldset.');
+      }
+
+      // param conditionalValue
+      if (!element.dataset.conditionalValue && !isCheckbox()) {
+        throw new Error('Interactive Fieldset needs a conditional value!');
+      }
+      conditionalValue = element.dataset.conditionalValue;
+
+      target = element.closest(INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR);
+      if (!target || element.matches(INTERACTIVE_FIELDSET_UTIL_TARGET_SELECTOR)) {
+        target = element;
+      }
+
+      childInputs = Array.from(element.querySelectorAll(INTERACTIVE_FIELDSET_CHILD_SELECTOR));
+
+      // add event listener
+      var observer = new MutationObserver(() => updateVisibility());
+      observer.observe(conditionalInput, { attributes: true, attributeFilter: ['disabled'] });
+      conditionalInput.addEventListener('input', updateVisibility);
+
+      // initial visibility update
+      updateVisibility();
+
+      // mark as initialized
+      element.classList.add(INTERACTIVE_FIELDSET_INITIALIZED_CLASS);
+
+      return {
+        name: INTERACTIVE_FIELDSET_UTIL_NAME,
+        element: element,
+        destroy: function() {},
+      };
+    }
+
+    function updateVisibility() {
+      var active = matchesConditionalValue() && !conditionalInput.disabled;
+
+      target.classList.toggle('hidden', !active);
+
+      childInputs.forEach(function(el) {
+        el.disabled = !active;
+        if (el._flatpickr) {
+          el._flatpickr.altInput.disabled = !active;
+        }
+      });
+    }
+
+    function matchesConditionalValue() {
+      if (isCheckbox()) {
+        return conditionalInput.checked === true;
+      }
+
+      return conditionalInput.value === conditionalValue;
+    }
+
+    function isCheckbox() {
+      return conditionalInput.getAttribute('type') === 'checkbox';
+    }
+
+    return init();
+  };
+
+  formUtilities.push({
+    name: INTERACTIVE_FIELDSET_UTIL_NAME,
+    selector: INTERACTIVE_FIELDSET_UTIL_SELECTOR,
+    setup: interactiveFieldsetUtil,
+  });
+
+  /**
+   *
+   * Navigate Away Prompt Utility
+   *  This utility asks the user if (s)he really wants to navigate away
+   *  from a page containing a form if (s)he already touched an input.
+   *  Form-Submits will not trigger the prompt.
+   *  Utility will ignore forms that contain auto submit elements (buttons, inputs).
+   *
+   * Attribute: [none]
+   *  (automatically setup on all form tags that dont automatically submit, see AutoSubmitButtonUtil)
+   *
+   * Example usage:
+   *  (any page with a form)
+   */
+
+  var NAVIGATE_AWAY_PROMPT_UTIL_NAME = 'navigateAwayPrompt';
+  var NAVIGATE_AWAY_PROMPT_UTIL_SELECTOR = 'form';
+
+  var NAVIGATE_AWAY_PROMPT_INITIALIZED_CLASS = 'navigate-away-prompt--initialized';
+
+  var navigateAwayPromptUtil = function(element) {
+    var touched = false;
+    var unloadDueToSubmit = false;
+
+    function init() {
+      if (!element) {
+        throw new Error('Navigate Away Prompt utility needs to be passed an element!');
+      }
+
+      if (element.classList.contains(NAVIGATE_AWAY_PROMPT_INITIALIZED_CLASS)) {
+        return false;
+      }
+
+      // ignore forms that get submitted automatically
+      if (element.querySelector(AUTO_SUBMIT_BUTTON_UTIL_SELECTOR) || element.querySelector(AUTO_SUBMIT_INPUT_UTIL_SELECTOR)) {
+        return false;
+      }
+
+      window.addEventListener('beforeunload', beforeUnloadHandler);
+
+      element.addEventListener('submit', function() {
+        unloadDueToSubmit = true;
+      });
+      element.addEventListener('change', function() {
+        touched = true;
+        unloadDueToSubmit = false;
+      });
+
+      // mark initialized
+      element.classList.add(NAVIGATE_AWAY_PROMPT_INITIALIZED_CLASS);
+
+      return {
+        name: NAVIGATE_AWAY_PROMPT_UTIL_NAME,
+        element: element,
+        destroy: function() {
+          window.removeEventListener('beforeunload', beforeUnloadHandler);
+        },
+      };
+    }
+
+    function beforeUnloadHandler(event) {
+      // allow the event to happen if the form was not touched by the
+      // user or the unload event was initiated by a form submit
+      if (!touched || unloadDueToSubmit) {
+        return false;
+      }
+
+      // cancel the unload event. This is the standard to force the prompt to appear.
+      event.preventDefault();
+      // for all non standard compliant browsers we return a truthy value to activate the prompt.
+      return true;
+    }
+
+    return init();
+  };
+
+  formUtilities.push({
+    name: NAVIGATE_AWAY_PROMPT_UTIL_NAME,
+    selector: NAVIGATE_AWAY_PROMPT_UTIL_SELECTOR,
+    setup: navigateAwayPromptUtil,
+  });
+
+  /**
+   *
+   * Auto Submit Button Utility
+   *  Hides submit buttons in forms that are submitted programmatically
+   *  We hide the button using JavaScript so no-js users will still be able to submit the form
+   *
+   * Attribute: uw-auto-submit-button
+   *
+   * Example usage:
+   *  <button type="submit" uw-auto-submit-button>Submit
+   */
+
+  var AUTO_SUBMIT_BUTTON_UTIL_NAME = 'autoSubmitButton';
+  var AUTO_SUBMIT_BUTTON_UTIL_SELECTOR = '[uw-auto-submit-button]';
+
+  var AUTO_SUBMIT_BUTTON_INITIALIZED_CLASS = 'auto-submit-button--initialized';
+  var AUTO_SUBMIT_BUTTON_HIDDEN_CLASS = 'hidden';
+
+  var autoSubmitButtonUtil = function(element) {
+    if (!element) {
+      throw new Error('Auto Submit Button utility needs to be passed an element!');
+    }
+
+    if (element.classList.contains(AUTO_SUBMIT_BUTTON_INITIALIZED_CLASS)) {
+      return false;
+    }
+
+    // hide and mark initialized
+    element.classList.add(AUTO_SUBMIT_BUTTON_HIDDEN_CLASS, AUTO_SUBMIT_BUTTON_INITIALIZED_CLASS);
+
+    return {
+      name: AUTO_SUBMIT_BUTTON_UTIL_NAME,
+      element: element,
+      destroy: function() {},
+    };
+  };
+
+  formUtilities.push({
+    name: AUTO_SUBMIT_BUTTON_UTIL_NAME,
+    selector: AUTO_SUBMIT_BUTTON_UTIL_SELECTOR,
+    setup: autoSubmitButtonUtil,
+  });
+
+  /**
+   *
+   * Auto Submit Input Utility
+   *  Programmatically submits forms when a certain input changes value
+   *
+   * Attribute: uw-auto-submit-input
+   *
+   * Example usage:
+   *  <input type="text" uw-auto-submit-input />
+   */
+
+  var AUTO_SUBMIT_INPUT_UTIL_NAME = 'autoSubmitInput';
+  var AUTO_SUBMIT_INPUT_UTIL_SELECTOR = '[uw-auto-submit-input]';
+
+  var AUTO_SUBMIT_INPUT_INITIALIZED_CLASS = 'auto-submit-input--initialized';
+
+  var autoSubmitInputUtil = function(element) {
+    var form;
+    var debouncedHandler;
+
+    function autoSubmit() {
+      form.submit();
+    }
+
+    function init() {
+      if (!element) {
+        throw new Error('Auto Submit Input utility needs to be passed an element!');
+      }
+
+      if (element.classList.contains(AUTO_SUBMIT_INPUT_INITIALIZED_CLASS)) {
+        return false;
+      }
+
+      form = element.form;
+      if (!form) {
+        throw new Error('Could not determine associated form for auto submit input');
+      }
+
+      debouncedHandler = debounce(autoSubmit, 500);
+
+      element.addEventListener('input', debouncedHandler);
+
+      element.classList.add(AUTO_SUBMIT_INPUT_INITIALIZED_CLASS);
+
+      return {
+        name: AUTO_SUBMIT_INPUT_UTIL_NAME,
+        element: element,
+        destroy: function() {
+          element.removeEventListener('input', debouncedHandler);
+        },
+      };
+    }
+
+    return init();
+  };
+
+  formUtilities.push({
+    name: AUTO_SUBMIT_INPUT_UTIL_NAME,
+    selector: AUTO_SUBMIT_INPUT_UTIL_SELECTOR,
+    setup: autoSubmitInputUtil,
+  });
+
+  /**
+   *
+   * Form Error Remover Utility
+   *  Removes errors from inputs when they are focused
+   *
+   * Attribute: [none]
+   *  (automatically setup on all form tags)
+   *
+   * Example usage:
+   *  (any regular form that can show input errors)
+   */
+
+  var FORM_ERROR_REMOVER_UTIL_NAME = 'formErrorRemover';
+  var FORM_ERROR_REMOVER_UTIL_SELECTOR = 'form';
+
+  var FORM_ERROR_REMOVER_INITIALIZED_CLASS = 'form-error-remover--initialized';
+  var FORM_ERROR_REMOVER_INPUTS_SELECTOR = 'input:not([type="hidden"]), textarea, select';
+
+  var FORM_GROUP_SELECTOR = '.form-group';
+  var FORM_GROUP_WITH_ERRORS_CLASS = 'form-group--has-error';
+
+
+  var formErrorRemoverUtil = function(element) {
+    var formGroups;
+
+    function init() {
+      if (!element) {
+        throw new Error('Form Error Remover utility needs to be passed an element!');
+      }
+
+      if (element.classList.contains(FORM_ERROR_REMOVER_INITIALIZED_CLASS)) {
+        return false;
+      }
+
+      // find form groups
+      formGroups = Array.from(element.querySelectorAll(FORM_GROUP_SELECTOR));
+
+      formGroups.forEach(function(formGroup) {
+        if (!formGroup.classList.contains(FORM_GROUP_WITH_ERRORS_CLASS)) {
+          return;
+        }
+
+        var inputElements = Array.from(formGroup.querySelectorAll(FORM_ERROR_REMOVER_INPUTS_SELECTOR));
+        if (!inputElements) {
+          return false;
+        }
+
+        inputElements.forEach(function(inputElement) {
+          inputElement.addEventListener('input', function() {
+            formGroup.classList.remove(FORM_GROUP_WITH_ERRORS_CLASS);
+          });
+        });
+      });
+
+      // mark initialized
+      element.classList.add(FORM_ERROR_REMOVER_INITIALIZED_CLASS);
+
+      return {
+        name: FORM_ERROR_REMOVER_UTIL_NAME,
+        element: element,
+        destroy: function() {},
+      };
+    }
+
+    return init();
+  };
+
+  formUtilities.push({
+    name: FORM_ERROR_REMOVER_UTIL_NAME,
+    selector: FORM_ERROR_REMOVER_UTIL_SELECTOR,
+    setup: formErrorRemoverUtil,
+  });
+
+  /**
+   *
+   * Datepicker Utility
+   *  Provides UI for entering dates and times
+   *
+   * Attribute: [none]
+   *  (automatically setup on all relevant input tags)
+   *
+   * Example usage:
+   *  (any form that uses inputs of type date, time, or datetime-local)
+   */
+
+  var DATEPICKER_UTIL_NAME = 'datepicker';
+  var DATEPICKER_UTIL_SELECTOR = 'input[type="date"], input[type="time"], input[type="datetime-local"]';
+
+  var DATEPICKER_INITIALIZED_CLASS = 'datepicker--initialized';
+
+  var DATEPICKER_CONFIG = {
+    "datetime-local": {
+      enableTime: true,
+      altInput: true,
+      altFormat: "j. F Y, H:i", // maybe interpolate these formats for locale
+      dateFormat: "Y-m-dTH:i",
+      time_24hr: true,
+    },
+    "date": {
+      altFormat: "j. F Y",
+      dateFormat: "Y-m-d",
+      altInput: true,
+    },
+    "time": {
+      enableTime: true,
+      noCalendar: true,
+      altFormat: "H:i",
+      dateFormat: "H:i",
+      altInput: true,
+      time_24hr: true,
+    },
+  };
+
+  var datepickerUtil = function(element) {
+    var flatpickrInstance;
+
+    function init() {
+      if (!element) {
+        throw new Error('Datepicker utility needs to be passed an element!');
+      }
+
+      if (element.classList.contains(DATEPICKER_INITIALIZED_CLASS)) {
+        return false;
+      }
+
+      var flatpickrConfig = DATEPICKER_CONFIG[element.getAttribute("type")];
+
+      if (!flatpickrConfig) {
+        throw new Error('Datepicker utility called on unsupported element!');
+      }
+
+      flatpickrInstance = flatpickr(element, flatpickrConfig);
+
+      // mark initialized
+      element.classList.add(DATEPICKER_INITIALIZED_CLASS);
+
+      return {
+        name: DATEPICKER_UTIL_NAME,
+        element: element,
+        destroy: function() { flatpickrInstance.destroy(); },
+      };
+    }
+
+    return init();
+  };
+
+  formUtilities.push({
+    name: DATEPICKER_UTIL_NAME,
+    selector: DATEPICKER_UTIL_SELECTOR,
+    setup: datepickerUtil,
+  });
+
+  // debounce function, taken from Underscore.js
+  function debounce(func, wait, immediate) {
+    var timeout;
+    return function() {
+      var context = this, args = arguments;
+      var later = function() {
+        timeout = null;
+        if (!immediate) func.apply(context, args);
+      };
+      var callNow = immediate && !timeout;
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+      if (callNow) func.apply(context, args);
+    };
+  }
+
+  // register the collected form utilities
+  if (UtilRegistry) {
+    formUtilities.forEach((util) => {
+      UtilRegistry.register(util);
+    });
+  }
+
+})();
diff --git a/static/es/utils/inputs.js b/static/es/utils/inputs.js
new file mode 100644
index 000000000..2fd8b8b30
--- /dev/null
+++ b/static/es/utils/inputs.js
@@ -0,0 +1,200 @@
+(function() {
+  'use strict';
+
+  var inputUtilities = [];
+
+  /**
+   *
+   * FileInput Utility
+   *  wraps native file input
+   *
+   * Attribute: uw-file-input
+   *  (element must be an input of type='file')
+   *
+   * Example usage:
+   * <input type='file' uw-file-input>
+   *
+   * Internationalization:
+   *  This utility expects the following translations to be available:
+   *    »filesSelected«: label of multi-input button after selection
+   *      example: "Dateien ausgewählt" (will be prepended by number of selected files)
+   *    »selectFile«: label of single-input button before selection
+   *      example: "Datei auswählen"
+   *    »selectFiles«: label of multi-input button before selection
+   *      example: "Datei(en) auswählen"
+   *
+   */
+
+  var FILE_INPUT_UTIL_NAME = 'fileInput';
+  var FILE_INPUT_UTIL_SELECTOR = 'input[type="file"][uw-file-input]';
+
+  var FILE_INPUT_CLASS = 'file-input';
+  var FILE_INPUT_INITIALIZED_CLASS = 'file-input--initialized';
+  var FILE_INPUT_LIST_CLASS = 'file-input__list';
+  var FILE_INPUT_UNPACK_CHECKBOX_CLASS = 'file-input__unpack';
+  var FILE_INPUT_LABEL_CLASS = 'file-input__label';
+
+  var fileInputUtil = function(element) {
+    var isMultiFileInput = false;
+    var fileList;
+    var label;
+
+    function init() {
+      if (!element) {
+        throw new Error('FileInput utility cannot be setup without an element!');
+      }
+
+      if (element.classList.contains(FILE_INPUT_INITIALIZED_CLASS)) {
+        throw new Error('FileInput utility already initialized!');
+      }
+
+      // check if is multi-file input
+      isMultiFileInput = element.hasAttribute('multiple');
+      if (isMultiFileInput) {
+        fileList = createFileList();
+      }
+
+      label = createFileLabel();
+      updateLabel();
+
+      // add change listener
+      element.addEventListener('change', function() {
+        updateLabel();
+        renderFileList();
+      });
+
+      // add util class for styling and mark as initialized
+      element.classList.add(FILE_INPUT_CLASS, FILE_INPUT_INITIALIZED_CLASS);
+
+      return {
+        name: FILE_INPUT_UTIL_NAME,
+        element: element,
+        destroy: function() {},
+      };
+    }
+
+    function renderFileList() {
+      if (!fileList) {
+        return;
+      }
+
+      var files = element.files;
+      fileList.innerHTML = '';
+      Array.from(files).forEach(function(file) {
+        var fileDisplayEl = document.createElement('li');
+        fileDisplayEl.innerHTML = file.name;
+        fileList.appendChild(fileDisplayEl);
+      });
+    }
+
+    function createFileList() {
+      var list = document.createElement('ol');
+      list.classList.add(FILE_INPUT_LIST_CLASS);
+      var unpackEl = element.parentElement.querySelector('.' + FILE_INPUT_UNPACK_CHECKBOX_CLASS);
+      if (unpackEl) {
+        element.parentElement.insertBefore(list, unpackEl);
+      } else {
+        element.parentElement.appendChild(list);
+      }
+      return list;
+    }
+
+    function createFileLabel() {
+      var label = document.createElement('label');
+      label.classList.add(FILE_INPUT_LABEL_CLASS);
+      label.setAttribute('for', element.id);
+      element.parentElement.insertBefore(label, element);
+      return label;
+    }
+
+    function updateLabel() {
+      var files = element.files;
+      if (files && files.length) {
+        label.innerText = isMultiFileInput ? files.length + ' ' + I18n.get('filesSelected') : files[0].name;
+      } else {
+        label.innerText = isMultiFileInput ? I18n.get('selectFiles') : I18n.get('selectFile');
+      }
+    }
+
+    return init();
+  };
+
+  inputUtilities.push({
+    name: FILE_INPUT_UTIL_NAME,
+    selector: FILE_INPUT_UTIL_SELECTOR,
+    setup: fileInputUtil,
+  });
+
+  /**
+   *
+   * Checkbox Utility
+   *  wraps native checkbox
+   *
+   * Attribute: (none)
+   *  (element must be an input of type="checkbox")
+   *
+   * Example usage:
+   * <input type="checkbox">
+   *
+   */
+
+  var CHECKBOX_UTIL_NAME = 'checkbox';
+  var CHECKBOX_UTIL_SELECTOR = 'input[type="checkbox"]';
+
+  var CHECKBOX_CLASS = 'checkbox';
+  var CHECKBOX_INITIALIZED_CLASS = 'checkbox--initialized';
+
+  var checkboxUtil = function(element) {
+
+    function init() {
+      if (!element) {
+        throw new Error('Checkbox utility cannot be setup without an element!');
+      }
+
+      if (element.classList.contains(CHECKBOX_INITIALIZED_CLASS)) {
+        // throw new Error('Checkbox utility already initialized!');
+        return false;
+      }
+
+      if (element.parentElement.classList.contains(CHECKBOX_CLASS)) {
+        // throw new Error('Checkbox element\'s wrapper already has class "' + CHECKBOX_CLASS + '"!');
+        return false;
+      }
+
+      var siblingEl = element.nextSibling;
+      var parentEl = element.parentElement;
+
+      var wrapperEl = document.createElement('div');
+      wrapperEl.classList.add(CHECKBOX_CLASS);
+
+      var labelEl = document.createElement('label');
+      labelEl.setAttribute('for', element.id);
+
+      wrapperEl.appendChild(element);
+      wrapperEl.appendChild(labelEl);
+
+      parentEl.insertBefore(wrapperEl, siblingEl);
+
+      element.classList.add(CHECKBOX_INITIALIZED_CLASS);
+
+      return {
+        name: CHECKBOX_UTIL_NAME,
+        element: element,
+        destroy: function() {},
+      };
+    }
+
+    return init();
+  };
+
+  inputUtilities.push({
+    name: CHECKBOX_UTIL_NAME,
+    selector: CHECKBOX_UTIL_SELECTOR,
+    setup: checkboxUtil,
+  });
+
+  // register the collected input utilities
+  if (UtilRegistry) {
+    inputUtilities.forEach(UtilRegistry.register);
+  }
+})();
diff --git a/static/es/utils/massInput.js b/static/es/utils/massInput.js
new file mode 100644
index 000000000..8094bfac9
--- /dev/null
+++ b/static/es/utils/massInput.js
@@ -0,0 +1,232 @@
+(function() {
+  'use strict';
+
+  /**
+   *
+   * Mass Input Utility
+   *  allows form shapes to be manipulated asynchronously:
+   *  will asynchronously submit the containing form and replace the contents
+   *  of the mass input element with the one from the BE response
+   *  The utility will only trigger an AJAX request if the mass input element has
+   *  an active/focused element whilst the form is being submitted.
+   *
+   * Attribute:   uw-mass-input
+   *
+   * Example usage:
+   *  <form method="POST" action="...">
+   *   <input type="text">
+   *   <div uw-mass-input>
+   *     <input type="text">
+   *     <button type="submit">
+   */
+
+  var MASS_INPUT_UTIL_NAME = 'massInput';
+  var MASS_INPUT_UTIL_SELECTOR = '[uw-mass-input]';
+
+  var MASS_INPUT_CELL_SELECTOR = '.massinput__cell';
+  var MASS_INPUT_ADD_CELL_SELECTOR = '.massinput__cell--add';
+  var MASS_INPUT_SUBMIT_BUTTON_CLASS = 'massinput__submit-button';
+  var MASS_INPUT_INITIALIZED_CLASS = 'mass-input--initialized';
+
+  var massInputUtil = function(element) {
+    var massInputId;
+    var massInputFormSubmitHandler;
+    var massInputForm;
+
+    function init() {
+      if (!element) {
+        throw new Error('Mass Input utility cannot be setup without an element!');
+      }
+
+      if (element.classList.contains(MASS_INPUT_INITIALIZED_CLASS)) {
+        return false;
+      }
+
+      massInputId = element.dataset.massInputIdent || '_';
+      massInputForm = element.closest('form');
+
+      if (!massInputForm) {
+        throw new Error('Mass Input utility cannot be setup without being wrapped in a <form>!');
+      }
+
+      massInputFormSubmitHandler = makeSubmitHandler();
+
+      // setup submit buttons inside this massinput so browser
+      // uses correct submit button for form submission.
+      var buttons = getMassInputSubmitButtons();
+      buttons.forEach(function(button) {
+        setupSubmitButton(button);
+      });
+
+      massInputForm.addEventListener('submit', massInputFormSubmitHandler);
+      massInputForm.addEventListener('keypress', keypressHandler);
+
+      // mark initialized
+      element.classList.add(MASS_INPUT_INITIALIZED_CLASS);
+
+      return {
+        name: MASS_INPUT_UTIL_NAME,
+        element: element,
+        destroy: function() {
+          reset();
+        },
+      };
+    }
+
+    function makeSubmitHandler() {
+      if (!HttpClient) {
+        throw new Error('HttpClient not found!');
+      }
+
+      var method = massInputForm.getAttribute('method') || 'POST';
+      var url = massInputForm.getAttribute('action') || window.location.href;
+      var enctype = massInputForm.getAttribute('enctype') || 'application/json';
+
+      var requestFn;
+      if (HttpClient[method.toLowerCase()]) {
+        requestFn = HttpClient[method.toLowerCase()];
+      }
+
+      return function(event) {
+        var activeElement;
+
+        // check if event occured from either a mass input add/delete button or
+        // from inside one of massinput's inputs (i.e. a child is focused/active)
+        activeElement = element.querySelector(':focus, :active');
+
+        if (!activeElement) {
+          return false;
+        }
+
+        // find the according massinput cell thats hosts the element that triggered the submit
+        var massInputCell = activeElement.closest(MASS_INPUT_CELL_SELECTOR);
+        if (!massInputCell) {
+          return false;
+        }
+
+        var submitButton = massInputCell.querySelector('.' + MASS_INPUT_SUBMIT_BUTTON_CLASS);
+        if (!submitButton) {
+          return false;
+        }
+
+        var isAddCell = massInputCell.matches(MASS_INPUT_ADD_CELL_SELECTOR);
+        var submitButtonIsActive = submitButton.matches(':focus, :active');
+        // if the cell is not an add cell the active element must at least be the cells submit button
+        if (!isAddCell && !submitButtonIsActive) {
+          return false;
+        }
+
+        event.preventDefault();
+        var requestBody = serializeForm(submitButton, enctype);
+
+        if (requestFn && requestBody) {
+          var headers = {'Mass-Input-Shortcircuit': massInputId};
+
+          if (enctype !== 'multipart/form-data')
+            headers['Content-Type'] = enctype;
+
+          requestFn({
+            url: url,
+            headers: headers,
+            body: requestBody,
+            accept: HttpClient.ACCEPT.TEXT_HTML,
+          }).then(function(response) {
+            return HtmlHelpers.parseResponse(response);
+          }).then(function(response) {
+              processResponse(response.element);
+              if (isAddCell) {
+                reFocusAddCell();
+              }
+            });
+        }
+      };
+    }
+
+    function keypressHandler(event) {
+      if (event.keyCode !== 13) {
+        return false;
+      }
+
+      if (massInputFormSubmitHandler) {
+        return massInputFormSubmitHandler(event);
+      }
+    }
+
+    function getMassInputSubmitButtons() {
+      return Array.from(element.querySelectorAll('button[type="submit"][name][value], .' + MASS_INPUT_SUBMIT_BUTTON_CLASS));
+    }
+
+    function setupSubmitButton(button) {
+      button.setAttribute('type', 'button');
+      button.classList.add(MASS_INPUT_SUBMIT_BUTTON_CLASS);
+      button.addEventListener('click', massInputFormSubmitHandler);
+    }
+
+    function resetSubmitButton(button) {
+      button.setAttribute('type', 'submit');
+      button.classList.remove(MASS_INPUT_SUBMIT_BUTTON_CLASS);
+      button.removeEventListener('click', massInputFormSubmitHandler);
+    }
+
+    function processResponse(responseElement) {
+      element.innerHTML = "";
+      element.appendChild(responseElement);
+
+      reset();
+
+      if (UtilRegistry) {
+        UtilRegistry.setupAll(element);
+      }
+    }
+
+    function serializeForm(submitButton, enctype) {
+      var formData = new FormData(massInputForm);
+
+      // manually add name and value of submit button to formData
+      formData.append(submitButton.name, submitButton.value);
+
+      if (enctype === 'application/x-www-form-urlencoded') {
+        return new URLSearchParams(formData);
+      } else if (enctype === 'multipart/form-data') {
+        return formData;
+      } else {
+        throw new Error('Unsupported form enctype: ' + enctype);
+      }
+    }
+
+    function reFocusAddCell() {
+      var addCell = element.querySelector(MASS_INPUT_ADD_CELL_SELECTOR);
+      if (!addCell) {
+        return false;
+      }
+
+      var addCellInput = addCell.querySelector('input:not([type="hidden"])');
+      if (addCellInput) {
+        // Clearing of add-inputs is done in the backend
+        addCellInput.focus();
+      }
+    }
+
+    function reset() {
+      element.classList.remove(MASS_INPUT_INITIALIZED_CLASS);
+      massInputForm.removeEventListener('submit', massInputFormSubmitHandler);
+      massInputForm.removeEventListener('keypress', keypressHandler);
+
+      var buttons = getMassInputSubmitButtons();
+      buttons.forEach(function(button) {
+        resetSubmitButton(button);
+      });
+    }
+
+    return init();
+  };
+
+  // register mass input util
+  if (UtilRegistry) {
+    UtilRegistry.register({
+      name: MASS_INPUT_UTIL_NAME,
+      selector: MASS_INPUT_UTIL_SELECTOR,
+      setup: massInputUtil,
+    });
+  }
+})();
diff --git a/static/es/utils/modal.js b/static/es/utils/modal.js
new file mode 100644
index 000000000..46cb5ef51
--- /dev/null
+++ b/static/es/utils/modal.js
@@ -0,0 +1,212 @@
+(function() {
+  'use strict';
+
+  /**
+   *
+   * Modal Utility
+   *
+   * Attribute: uw-modal
+   *
+   * Params:
+   *  data-modal-trigger: string
+   *    Selector for the element that toggles the modal.
+   *    If trigger element has "href" attribute the modal will be dynamically loaded from the referenced page
+   *  data-modal-closeable: boolean property
+   *    If the param is present the modal will have a close-icon and can also be closed by clicking anywhere on the overlay
+   *
+   * Example usage:
+   * <div uw-modal data-modal-trigger='#trigger' data-modal-closeable>This is the modal content
+   * <div id='trigger'>Click me to open the modal
+   */
+
+  var MODAL_UTIL_NAME = 'modal';
+  var MODAL_UTIL_SELECTOR = '[uw-modal]';
+
+  var MODAL_HEADERS = {
+    'Is-Modal': 'True',
+  };
+
+  var MODAL_INITIALIZED_CLASS = 'modal--initialized';
+  var MODAL_CLASS = 'modal';
+  var MODAL_OPEN_CLASS = 'modal--open';
+  var MODAL_TRIGGER_CLASS = 'modal__trigger';
+  var MODAL_CONTENT_CLASS = 'modal__content';
+  var MODAL_OVERLAY_CLASS = 'modal__overlay';
+  var MODAL_OVERLAY_OPEN_CLASS = 'modal__overlay--open';
+  var MODAL_CLOSER_CLASS = 'modal__closer';
+
+  var MAIN_CONTENT_CLASS = 'main__content-body';
+
+  // one singleton wrapper to keep all the modals to avoid CSS bug
+  // with blurry text due to `transform: translate(-50%, -50%)`
+  // will be created (and reused) for the first modal that gets initialized
+  var MODALS_WRAPPER_CLASS = 'modals-wrapper';
+  var MODALS_WRAPPER_SELECTOR = '.' + MODALS_WRAPPER_CLASS;
+  var MODALS_WRAPPER_OPEN_CLASS = 'modals-wrapper--open';
+
+  var modalUtil = function(element) {
+
+    var modalsWrapper;
+    var modalOverlay;
+    var modalUrl;
+
+    function _init() {
+      if (!element) {
+        throw new Error('Modal utility cannot be setup without an element!');
+      }
+
+      if (element.classList.contains(MODAL_INITIALIZED_CLASS)) {
+        return false;
+      }
+
+      ensureModalWrapper();
+
+      // param modalTrigger
+      if (!element.dataset.modalTrigger) {
+        throw new Error('Modal utility cannot be setup without a trigger element!');
+      } else {
+        setupTrigger();
+      }
+
+      // param modalCloseable
+      if (element.dataset.modalCloseable !== undefined) {
+        setupCloser();
+      }
+
+      // mark as initialized and add modal class for styling
+      element.classList.add(MODAL_INITIALIZED_CLASS, MODAL_CLASS);
+
+      return {
+        name: MODAL_UTIL_NAME,
+        element: element,
+        destroy: function() {},
+      };
+    }
+
+    function ensureModalWrapper() {
+      modalsWrapper = document.querySelector(MODALS_WRAPPER_SELECTOR);
+      if (!modalsWrapper) {
+        // create modal wrapper
+        modalsWrapper = document.createElement('div');
+        modalsWrapper.classList.add(MODALS_WRAPPER_CLASS);
+        document.body.appendChild(modalsWrapper);
+      }
+
+      modalOverlay = modalsWrapper.querySelector('.' + MODAL_OVERLAY_CLASS);
+      if (!modalOverlay) {
+        // create modal overlay
+        modalOverlay = document.createElement('div');
+        modalOverlay.classList.add(MODAL_OVERLAY_CLASS);
+        modalsWrapper.appendChild(modalOverlay);
+      }
+    }
+
+    function setupTrigger() {
+      var triggerSelector = element.dataset.modalTrigger;
+      if (!triggerSelector.startsWith('#')) {
+        triggerSelector = '#' + triggerSelector;
+      }
+      var triggerElement = document.querySelector(triggerSelector);
+
+      if (!triggerElement) {
+        throw new Error('Trigger element for Modal not found: "' + triggerSelector + '"');
+      }
+
+      triggerElement.classList.add(MODAL_TRIGGER_CLASS);
+      triggerElement.addEventListener('click', onTriggerClicked, false);
+      modalUrl = triggerElement.getAttribute('href');
+    }
+
+    function setupCloser() {
+      var closerElement = document.createElement('div');
+      element.insertBefore(closerElement, null);
+      closerElement.classList.add(MODAL_CLOSER_CLASS);
+      closerElement.addEventListener('click', onCloseClicked, false);
+      modalOverlay.addEventListener('click', onCloseClicked, false);
+    }
+
+    function onTriggerClicked(event) {
+      event.preventDefault();
+      open();
+    }
+
+    function onCloseClicked(event) {
+      event.preventDefault();
+      close();
+    }
+
+    function onKeyUp(event) {
+      if (event.key === 'Escape') {
+        close();
+      }
+    }
+
+    function open() {
+      element.classList.add(MODAL_OPEN_CLASS);
+      modalOverlay.classList.add(MODAL_OVERLAY_OPEN_CLASS);
+      modalsWrapper.classList.add(MODALS_WRAPPER_OPEN_CLASS);
+      modalsWrapper.appendChild(element);
+
+      if (modalUrl) {
+        fillModal(modalUrl);
+      }
+
+      document.addEventListener('keyup', onKeyUp);
+    }
+
+    function close() {
+      modalOverlay.classList.remove(MODAL_OVERLAY_OPEN_CLASS);
+      element.classList.remove(MODAL_OPEN_CLASS);
+      modalsWrapper.classList.remove(MODALS_WRAPPER_OPEN_CLASS);
+
+      document.removeEventListener('keyup', onKeyUp);
+    };
+
+    function fillModal(url) {
+      if (!HttpClient) {
+        throw new Error('HttpClient not found! Can\'t fetch modal content from ' + url);
+      }
+
+      HttpClient.get({
+        url: url,
+        headers: MODAL_HEADERS,
+        accept: HttpClient.ACCEPT.TEXT_HTML,
+      }).then(function(response) {
+        return HtmlHelpers.parseResponse(response);
+      }).then(function(response) {
+        processResponse(response.element);
+      });
+    }
+
+    function processResponse(responseElement) {
+      var modalContent = document.createElement('div');
+      modalContent.classList.add(MODAL_CONTENT_CLASS);
+
+      var contentBody = responseElement.querySelector('.' + MAIN_CONTENT_CLASS);
+
+      if (contentBody) {
+        modalContent.innerHTML = contentBody.innerHTML;
+      }
+
+      var previousModalContent = element.querySelector('.' + MODAL_CONTENT_CLASS);
+      if (previousModalContent) {
+        previousModalContent.remove();
+      }
+
+      element.insertBefore(modalContent, null);
+
+      // setup any newly arrived utils
+      UtilRegistry.setupAll(element);
+    }
+
+    return _init();
+  };
+
+  if (UtilRegistry) {
+    UtilRegistry.register({
+      name: MODAL_UTIL_NAME,
+      selector: MODAL_UTIL_SELECTOR,
+      setup: modalUtil,
+    });
+  }
+})();
diff --git a/static/es/utils/showHide.js b/static/es/utils/showHide.js
new file mode 100644
index 000000000..a9bb9bc89
--- /dev/null
+++ b/static/es/utils/showHide.js
@@ -0,0 +1,114 @@
+(function() {
+  'use strict';
+
+  var SHOW_HIDE_UTIL_NAME = 'showHide';
+  var SHOW_HIDE_UTIL_SELECTOR = '[uw-show-hide]';
+
+  var SHOW_HIDE_LOCAL_STORAGE_KEY = 'SHOW_HIDE';
+  var SHOW_HIDE_INITIALIZED_CLASS = 'show-hide--initialized';
+  var SHOW_HIDE_COLLAPSED_CLASS = 'show-hide--collapsed';
+  var SHOW_HIDE_TOGGLE_CLASS = 'show-hide__toggle';
+  var SHOW_HIDE_TOGGLE_RIGHT_CLASS = 'show-hide__toggle--right';
+
+  /**
+   *
+   * ShowHide Utility
+   *
+   * Attribute: uw-show-hide
+   *
+   * Params: (all optional)
+   *  data-show-hide-id: string
+   *    If this param is given the state of the utility will be persisted in the clients local storage.
+   *  data-show-hide-collapsed: boolean property
+   *    If this param is present the ShowHide utility will be collapsed. This value will be overruled by any value stored in the LocalStorage.
+   *  data-show-hide-align: 'right'
+   *    Where to put the arrow that marks the element as a ShowHide toggle. Left of toggle by default.
+   *
+   * Example usage:
+   * <div>
+   *   <div uw-show-hide>Click me
+   *   <div>This will be toggled
+   *   <div>This will be toggled as well
+   */
+  var showHideUtil = function(element) {
+
+    var showHideId;
+
+    function init() {
+      if (!element) {
+        throw new Error('ShowHide utility cannot be setup without an element!');
+      }
+
+      if (element.classList.contains(SHOW_HIDE_INITIALIZED_CLASS)) {
+        return false;
+      }
+
+      // register click listener
+      addClickListener();
+
+      // param showHideId
+      if (element.dataset.showHideId) {
+        showHideId = element.dataset.showHideId;
+      }
+
+      // param showHideCollapsed
+      var collapsed = false;
+      if (element.dataset.showHideCollapsed !== undefined) {
+        collapsed = true;
+      }
+      if (showHideId) {
+        var localStorageCollapsed = getLocalStorage()[showHideId];
+        if (typeof localStorageCollapsed !== 'undefined') {
+          collapsed = localStorageCollapsed;
+        }
+      }
+      element.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS, collapsed);
+
+      // param showHideAlign
+      var alignment = element.dataset.showHideAlign;
+      if (alignment === 'right') {
+        element.classList.add(SHOW_HIDE_TOGGLE_RIGHT_CLASS);
+      }
+
+      // mark as initialized
+      element.classList.add(SHOW_HIDE_INITIALIZED_CLASS, SHOW_HIDE_TOGGLE_CLASS);
+
+      return {
+        name: SHOW_HIDE_UTIL_NAME,
+        element: element,
+        destroy: function() {},
+      };
+    }
+
+    function addClickListener() {
+      element.addEventListener('click', function clickListener() {
+        var newState = element.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS);
+
+        if (showHideId) {
+          setLocalStorage(showHideId, newState);
+        }
+      });
+    }
+
+    function setLocalStorage(id, state) {
+      var lsData = getLocalStorage();
+      lsData[id] = state;
+      window.localStorage.setItem(SHOW_HIDE_LOCAL_STORAGE_KEY, JSON.stringify(lsData));
+    }
+
+    function getLocalStorage() {
+      return JSON.parse(window.localStorage.getItem(SHOW_HIDE_LOCAL_STORAGE_KEY)) || {};
+    }
+
+    return init();
+  };
+
+  if (UtilRegistry) {
+    UtilRegistry.register({
+      name: SHOW_HIDE_UTIL_NAME,
+      selector: SHOW_HIDE_UTIL_SELECTOR,
+      setup: showHideUtil,
+    });
+  }
+
+})();
diff --git a/static/es/utils/tabber.js b/static/es/utils/tabber.js
new file mode 100644
index 000000000..e1c906d6b
--- /dev/null
+++ b/static/es/utils/tabber.js
@@ -0,0 +1,90 @@
+(function($) {
+
+  document.addEventListener('DOMContentLoaded', function() {
+    'use strict';
+
+    // define plugin
+    $.fn.tabgroup = function() {
+
+      var $this = $(this);
+      var $openers = $('<div class="tab-group-openers"></div>');
+      $this.prepend($openers);
+
+      var openedByDefault = $this.data('tab-open') || 0;
+      var tabs = [];
+      var currentTab = {};
+
+      $this.find('.tab').each(function(i, t) {
+        var tab = $(t);
+        tab.data('tab-index', i);
+        var tabName = tab.data('tab-name') || 'Tab '+i;
+        var tabFile = tab.data('tab-file') || false;
+        var $opener = makeOpener(tabName, i);
+        $openers.append($opener);
+        if (tab.find('.tab-title')) {
+          tab.find('.tab-title').remove();
+        }
+        tab.hide();
+        var loaded = false;
+        tabs.push({index: i, name: tabName, file: tabFile, dom: tab, opener: $opener, loaded: loaded });
+      });
+
+      $this.on('click', 'a[href^="#"]', function(event) {
+        var $target = $(event.currentTarget);
+        var tab = getTabByName($target.attr('href').replace('#', ''));
+        if ( tab ) {
+          showTab(tab.index);
+        }
+        event.preventDefault();
+      });
+
+      function getTabByName(name) {
+        var it = -1;
+        $.each(tabs, function(i, t) {
+          if ( t.name.toLowerCase() === name.toLowerCase() ) {
+            it = i;
+          }
+        });
+        if ( it >= 0 ) {
+          return tabs[it];
+        } else {
+          return false;
+        }
+      }
+
+      function makeOpener(tabName, i) {
+        return $('<span class="tab-opener">'+tabName+'</span>').
+                on('click', function() {
+                  showTab(i);
+                });
+      }
+
+      function showTab(i) {
+        tabs.forEach(function(t) {
+          t.dom.hide();
+          t.opener.removeClass('tab-visible');
+        });
+        currentTab = tabs[i];
+        if ( !currentTab.loaded && currentTab.file ){
+          $.get(currentTab.file, function(res) {
+            currentTab.dom.html(res);
+            currentTab.loaded = true;
+          });
+        }
+        currentTab.opener.addClass('tab-visible');
+        currentTab.dom.show();
+      }
+
+      showTab(openedByDefault);
+      currentTab = tabs[openedByDefault];
+
+    };
+
+    // apply plugin to all available tab-groups if on wide screen
+    if (window.innerWidth > 768) {
+      $('.tab-group').each(function(i, t) {
+        $(t).tabgroup();
+      });
+    }
+  });
+})($);