Add some helpers

clipboard.js

@@ -0,0 +1,12 @@
+export const clipboard = function(superClass) {
+  return class extends superClass {
+    copy(content) {
+      const txtEl = document.createElement('input');
+      txtEl.type = 'hidden';
+      document.body.appendChild(txtEl);
+      txtEl.value = content;
+      navigator.clipboard.writeText(content);
+      document.body.removeChild(txtEl);
+    }
+  };
+};

email-validator.js

@@ -0,0 +1,6 @@
+export const validateEmail = (control, value) => {
+  if (typeof value !== 'string') {
+    return false;
+  }
+  return value.toLowerCase().match(/^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/) !== null;
+}

upload-files.js

@@ -0,0 +1,43 @@
+export const upload = function(superClass) {
+  return class extends superClass {
+    /**
+     * Upload files to the backend
+     *
+     * @param {String} id An identifier send with the upload events to filter out the right upload if multiple onces are running.
+     * @param {Array} files List of files to upload
+     * @param {Object} opts Upload options
+     * @returns Promise
+     */
+    uploadFiles(url, files, opts = {}) {
+      return new Promise((resolve, reject) => {
+        const request = new XMLHttpRequest();
+        const formData = new FormData();
+
+        for (const key in opts) {
+          formData.append(key, opts[key]);
+        }
+
+        request.open('POST', url, true);
+        request.addEventListener('readystatechange', () => {
+          if (request.readyState === 4) {
+            resolve(request);
+          }
+        });
+
+        request.upload.addEventListener('progress', e => {
+          this.dispatchEvent(new CustomEvent('upload-progress', { detail: { percent: ((e.loaded / e.total) * 100).toFixed(2) }, bubbles: true, composed: true }));
+        });
+
+        request.addEventListener('load', () => {
+          this.dispatchEvent(new CustomEvent('upload-finished', { detail: null, bubbles: true, composed: true }));
+        });
+
+        for (let i = 0; i < files.length; i++) {
+          formData.append(files[i].name, files[i]);
+        }
+
+        request.send(formData);
+      });
+    }
+  };
+};