dcp-client 4.2.13 → 4.2.14

package/dist/dcp-client-bundle.js

@@ -3841,7 +3841,7 @@ eval("// Copyright Joyent, Inc. and other Node contributors.\n//\n// Permission
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Modal)\n/* harmony export */ });\n/**\n * A Small Modal Class\n * @module Modal\n */\n/* globals Event dcpConfig */\nclass Modal {\n  constructor (title, message, callback = false, exitHandler = false, {\n    continueLabel = 'Continue',\n    cancelLabel = 'Cancel',\n    cancelVisible = true\n  } = {}) {\n    const modal = document.createElement('div')\n    modal.className = 'dcp-modal-container-old day'\n    modal.innerHTML = `\n      <dialog class=\"dcp-modal-content\">\n        <div class=\"dcp-modal-header\">\n          <h2>${title}<button type=\"button\" class=\"close\">&times;</button></h2>\n          ${message ? '<p>' + message + '</p>' : ''}\n        </div>\n        <div class=\"dcp-modal-loading hidden\">\n          <div class='loading'></div>\n        </div>\n        <form onsubmit='return false' method=\"dialog\">\n          <div class=\"dcp-modal-body\"></div>\n          <div class=\"dcp-modal-footer ${cancelVisible ? '' : 'centered'}\">\n            <button type=\"submit\" class=\"continue green-modal-button\">${continueLabel}</button>\n            <button type=\"button\" class=\"cancel green-modal-button\">${cancelLabel}</button>\n          </div>\n        </form>\n      </dialog>`\n\n    // To give a reference to do developer who wants to override the form submit.\n    // May occur if they want to validate the information in the backend\n    // without closing the modal prematurely.\n    this.form = modal.querySelector('.dcp-modal-content form')\n    this.continueButton = modal.querySelector('.dcp-modal-footer button.continue')\n    this.cancelButton = modal.querySelector('.dcp-modal-footer button.cancel')\n    this.closeButton = modal.querySelector('.dcp-modal-header .close')\n    if (!cancelVisible) {\n      this.cancelButton.style.display = 'none'\n    }\n\n    // To remove the event listener, the reference to the original function\n    // added is required.\n    this.formSubmitHandler = this.continue.bind(this)\n\n    modal.addEventListener('keydown', function (event) {\n      event.stopPropagation()\n      // 27 is the keycode for the escape key.\n      if (event.keyCode === 27) this.close()\n    }.bind(this))\n\n    this.container = modal\n    this.callback = callback\n    this.exitHandler = exitHandler\n    document.body.appendChild(modal)\n  }\n\n  changeFormSubmitHandler (newFormSubmitHandler) {\n    this.formSubmitHandler = newFormSubmitHandler\n  }\n\n  /**\n   * Validates the form values in the modal and calls the modal's callback\n   */\n  async continue (event) {\n    // To further prevent form submission from trying to redirect from the\n    // current page.\n    if (event instanceof Event) {\n      event.preventDefault()\n    }\n    let fieldsAreValid = true\n    let formElements = this.container.querySelectorAll('.dcp-modal-body select, .dcp-modal-body input, .dcp-modal-body textarea')\n\n    const formValues = []\n    if (typeof formElements.length === 'undefined') formElements = [formElements]\n    // Separate into two loops to enable input validation requiring formValues\n    // that come after it. e.g. Two password fields matching.\n    for (let i = 0; i < formElements.length; i++) {\n      switch (formElements[i].type) {\n        case 'file':\n          formValues.push(formElements[i])\n          break\n        case 'checkbox':\n          formValues.push(formElements[i].checked)\n          break\n        default:\n          formValues.push(formElements[i].value)\n          break\n      }\n    }\n    for (let i = 0; i < formElements.length; i++) {\n      if (formElements[i].validation) {\n        // Optional fields are allowed to be empty but still can't be wrong if not empty.\n        if (!(formElements[i].value === '' && !formElements[i].required)) {\n          if (typeof formElements[i].validation === 'function') {\n            if (!formElements[i].validation(formValues)) {\n              fieldsAreValid = false\n              formElements[i].classList.add('is-invalid')\n            }\n          } else if (!formElements[i].validation.test(formElements[i].value)) {\n            fieldsAreValid = false\n            formElements[i].classList.add('is-invalid')\n          }\n        }\n      }\n    }\n\n    if (!fieldsAreValid) return\n\n    this.loading()\n    if (typeof this.callback === 'function') {\n      try {\n        return this.callback(formValues)\n      } catch (error) {\n        console.error('Unexpected error in modal.continue:', error);\n        return this.close(false)\n      }\n    }\n    this.close(true)\n  }\n\n  loading () {\n    this.container.querySelector('.dcp-modal-loading').classList.remove('hidden')\n    this.container.querySelector('.dcp-modal-body').classList.add('hidden')\n    this.container.querySelector('.dcp-modal-footer').classList.add('hidden')\n  }\n\n  open () {\n    this.form.addEventListener('submit', async (event) => {\n      const success = await this.formSubmitHandler(event)\n      if (success === false) {\n        return\n      }\n      this.close(true)\n    })\n    // When the user clicks on <span> (x), close the modal\n    this.closeButton.addEventListener('click', this.close.bind(this))\n    this.cancelButton.addEventListener('click', this.close.bind(this))\n\n    // Prevent lingering outlines after clicking some form elements.\n    this.container.querySelectorAll('.dcp-modal-body button, .dcp-modal-body input[type=\"checkbox\"]').forEach(element => {\n      element.addEventListener('click', () => {\n        element.blur()\n      })\n    })\n\n    // Show the modal.\n    this.container.style.display = 'block'\n\n    const formElements = this.container.querySelectorAll('.dcp-modal-body select, .dcp-modal-body input')\n    if (formElements.length) {\n      formElements[0].focus()\n      if (formElements[0].type === 'text') {\n        formElements[0].select()\n      }\n      for (const el of formElements) {\n        if (el.realType) {\n          el.type = el.realType\n        }\n      }\n    } else {\n      // With no form elements to allow for form submission on enter, focus the\n      // continue button.\n      this.container.querySelector('.dcp-modal-footer button.continue').focus()\n    }\n  } // TODO: This should return a promise with the action resolving it\n\n  /**\n   * Shows the modal and returns a promise of the result of the modal (e.g. was\n   * it closed, did its action succeed?)\n   */\n  showModal () {\n    return new Promise((resolve, reject) => {\n      this.form.addEventListener('submit', handleContinue.bind(this))\n      this.cancelButton.addEventListener('click', handleCancel.bind(this))\n      this.closeButton.addEventListener('click', handleCancel.bind(this))\n\n      // Prevent lingering outlines after clicking some form elements.\n      this.container.querySelectorAll('.dcp-modal-body button, .dcp-modal-body input[type=\"checkbox\"]').forEach(element => {\n        element.addEventListener('click', () => {\n          element.blur()\n        })\n      })\n\n      // Show the modal.\n      this.container.style.display = 'block'\n\n      const formElements = this.container.querySelectorAll('.dcp-modal-body select, .dcp-modal-body input')\n      if (formElements.length) {\n        formElements[0].focus()\n        if (formElements[0].type === 'text') {\n          formElements[0].select()\n        }\n        for (const el of formElements) {\n          if (el.realType) {\n            el.type = el.realType\n          }\n        }\n      } else {\n        // With no form elements to allow for form submission on enter, focus the\n        // continue button.\n        this.continueButton.focus()\n      }\n\n      async function handleContinue (event) {\n        let result\n        try {\n          result = await this.formSubmitHandler(event)\n        } catch (error) {\n          reject(error)\n        }\n        this.close(true)\n        resolve(result)\n      }\n\n      async function handleCancel () {\n        let result\n        try {\n          result = await this.close()\n        } catch (error) {\n          reject(error)\n        }\n        resolve(result)\n      }\n    })\n  }\n\n  close (success = false) {\n    this.container.style.display = 'none'\n    if (this.container.parentNode) {\n      this.container.parentNode.removeChild(this.container)\n    }\n\n    // @todo this needs to remove eventlisteners to prevent memory leaks\n\n    if ((success !== true) && typeof this.exitHandler === 'function') {\n      return this.exitHandler(this)\n    }\n  }\n\n  /**\n   * Adds different form elements to the modal depending on the case.\n   *\n   * @param {*} elements - The properties of the form elements to add.\n   * @returns {HTMLElement} The input form elements.\n   */\n  addFormElement (...elements) {\n    const body = this.container.querySelector('.dcp-modal-body')\n    const inputElements = []\n    let label\n    for (let i = 0; i < elements.length; i++) {\n      let row = document.createElement('div')\n      row.className = 'row'\n\n      let col, input\n      switch (elements[i].type) {\n        case 'button':\n          col = document.createElement('div')\n          col.className = 'col-md-12'\n\n          input = document.createElement('button')\n          input.innerHTML = elements[i].label\n          input.type = 'button'\n          input.classList.add('green-modal-button')\n          if (!elements[i].onclick) {\n            throw new Error('A button in the modal body should have an on click event handler.')\n          }\n          input.addEventListener('click', elements[i].onclick)\n\n          col.appendChild(input)\n          row.appendChild(col)\n          break\n        case 'textarea':\n          col = document.createElement('div')\n          col.className = 'col-md-12'\n\n          input = document.createElement('textarea')\n          input.className = 'text-input-field form-control'\n          if (elements[i].placeholder) input.placeholder = elements[i].placeholder\n\n          col.appendChild(input)\n          row.appendChild(col)\n          break\n        case 'text':\n        case 'email':\n        case 'number':\n        case 'password': {\n          const inputCol = document.createElement('div')\n\n          input = document.createElement('input')\n          input.type = elements[i].type\n          input.validation = elements[i].validation\n          input.autocomplete = elements[i].autocomplete || (elements[i].type === 'password' ? 'off' : 'on')\n          input.className = 'text-input-field form-control'\n\n          // Adding bootstraps custom feedback styles.\n          let invalidFeedback = null\n          if (elements[i].invalidFeedback) {\n            invalidFeedback = document.createElement('div')\n            invalidFeedback.className = 'invalid-feedback'\n            invalidFeedback.innerText = elements[i].invalidFeedback\n          }\n\n          if (elements[i].type === 'password') {\n            elements[i].realType = 'password'\n          }\n\n          if (elements[i].label) {\n            const labelCol = document.createElement('div')\n            label = document.createElement('label')\n            label.innerText = elements[i].label\n            const inputId = 'dcp-modal-input-' + this.container.querySelectorAll('input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"]').length\n            label.setAttribute('for', inputId)\n            input.id = inputId\n            labelCol.classList.add('col-md-6', 'label-column')\n            labelCol.appendChild(label)\n            row.appendChild(labelCol)\n            inputCol.className = 'col-md-6'\n          } else {\n            inputCol.className = 'col-md-12'\n          }\n\n          inputCol.appendChild(input)\n          if (invalidFeedback !== null) {\n            inputCol.appendChild(invalidFeedback)\n          }\n          row.appendChild(inputCol)\n          break\n        }\n        case 'select':\n          col = document.createElement('div')\n          col.className = 'col-md-4'\n\n          label = document.createElement('span')\n          label.innerText = elements[i].label\n\n          col.appendChild(label)\n          row.appendChild(col)\n\n          col = document.createElement('div')\n          col.className = 'col-md-8'\n\n          input = document.createElement('select')\n\n          col.appendChild(input)\n          row.appendChild(col)\n          break\n        case 'checkbox': {\n          row.classList.add('checkbox-row')\n          const checkboxLabelCol = document.createElement('div')\n          checkboxLabelCol.classList.add('label-column', 'checkbox-label-column')\n\n          label = document.createElement('label')\n          label.innerText = elements[i].label\n          label.for = 'dcp-checkbox-input-' + this.container.querySelectorAll('input[type=\"checkbox\"]').length\n          label.setAttribute('for', label.for)\n          label.className = 'checkbox-label'\n\n          checkboxLabelCol.appendChild(label)\n\n          const checkboxCol = document.createElement('div')\n          checkboxCol.classList.add('checkbox-column')\n\n          input = document.createElement('input')\n          input.type = 'checkbox'\n          input.id = label.for\n          if (elements[i].checked) {\n            input.checked = true\n          }\n\n          checkboxCol.appendChild(input)\n\n          if (elements[i].labelToTheRightOfCheckbox) {\n            checkboxCol.classList.add('col-md-5')\n            row.appendChild(checkboxCol)\n            checkboxLabelCol.classList.add('col-md-7')\n            row.appendChild(checkboxLabelCol)\n          } else {\n            checkboxLabelCol.classList.add('col-md-6')\n            checkboxCol.classList.add('col-md-6')\n            row.appendChild(checkboxLabelCol)\n            row.appendChild(checkboxCol)\n          }\n          break\n        }\n        case 'file':\n          [input, row] = this.addFileInput(elements[i], input, row)\n          break\n        case 'label':\n          row.classList.add('label-row')\n          label = document.createElement('label')\n          label.innerText = elements[i].label\n          row.appendChild(label)\n          break\n      }\n\n      // Copy other possibly specified element properties:\n      const inputPropertyNames = ['title', 'inputmode', 'value', 'minLength', 'maxLength', 'size', 'required', 'pattern', 'min', 'max', 'step', 'placeholder', 'accept', 'multiple', 'id', 'onkeypress', 'oninput', 'for', 'readonly', 'autocomplete']\n      for (const propertyName of inputPropertyNames) {\n        if (Object.prototype.hasOwnProperty.call(elements[i], propertyName)) {\n          if (propertyName === 'for' && !label.hasAttribute(propertyName)) {\n            label.setAttribute(propertyName, elements[i][propertyName])\n          }\n          if (propertyName.startsWith('on')) {\n            input.addEventListener(propertyName.slice(2), elements[i][propertyName])\n          } else {\n            input.setAttribute(propertyName, elements[i][propertyName])\n          }\n        }\n      }\n\n      inputElements.push(input)\n      body.appendChild(row)\n    }\n\n    if (inputElements.length === 1) return inputElements[0]\n    else return inputElements\n  }\n\n  /**\n   * Adds a drag and drop file form element to the modal.\n   *\n   * @param {*} fileInputProperties  - An object specifying some of the\n   *                                   properties of the file input element.\n   * @param {*} fileInput            - Placeholders to help create the file\n   *                                   input.\n   * @param {HTMLDivElement} row     - Placeholders to help create the file\n   *                                   input.\n   */\n  addFileInput (fileInputProperties, fileInput, row) {\n    // Adding the upload label.\n    const uploadLabel = document.createElement('label')\n    uploadLabel.innerText = fileInputProperties.label\n    row.appendChild(uploadLabel)\n    const body = this.container.querySelector('.dcp-modal-body')\n    body.appendChild(row)\n    const fileSelectionRow = document.createElement('div')\n    fileSelectionRow.id = 'file-selection-row'\n\n    // Adding the drag and drop file upload input.\n    const dropContainer = document.createElement('div')\n    dropContainer.id = 'drop-container'\n\n    // Adding an image of a wallet\n    const imageContainer = document.createElement('div')\n    imageContainer.id = 'image-container'\n    const walletImage = document.createElement('span')\n    walletImage.classList.add('fas', 'fa-wallet')\n    imageContainer.appendChild(walletImage)\n\n    // Adding some text prompts\n    const dropMessage = document.createElement('span')\n    dropMessage.innerText = 'Drop a keystore file here'\n    const orMessage = document.createElement('span')\n    orMessage.innerText = 'or'\n\n    // Adding the manual file input element (hiding the default one)\n    const fileInputContainer = document.createElement('div')\n    const fileInputLabel = document.createElement('label')\n    // Linking the label to the file input so that clicking on the label\n    // activates the file input.\n    fileInputLabel.setAttribute('for', 'file-input')\n    fileInputLabel.innerText = 'Browse'\n    fileInput = document.createElement('input')\n    fileInput.type = fileInputProperties.type\n    fileInput.id = 'file-input'\n    // To remove the lingering outline after selecting the file.\n    fileInput.addEventListener('click', () => {\n      fileInput.blur()\n    })\n    fileInputContainer.append(fileInput, fileInputLabel)\n\n    // Creating the final row element to append to the modal body.\n    dropContainer.append(imageContainer, dropMessage, orMessage, fileInputContainer)\n    fileSelectionRow.appendChild(dropContainer)\n\n    // Adding functionality to the drag and drop file input.\n    dropContainer.addEventListener('drop', selectDroppedFile.bind(this))\n    dropContainer.addEventListener('drop', unhighlightDropArea)\n    // Prevent file from being opened by the browser.\n    dropContainer.ondragover = highlightDropArea\n    dropContainer.ondragenter = highlightDropArea\n    dropContainer.ondragleave = unhighlightDropArea\n\n    fileInput.addEventListener('change', handleFileChange)\n\n    const fileNamePlaceholder = document.createElement('center')\n    fileNamePlaceholder.id = 'file-name-placeholder'\n    fileNamePlaceholder.className = 'row'\n    fileNamePlaceholder.innerText = ''\n    fileSelectionRow.appendChild(fileNamePlaceholder)\n    fileNamePlaceholder.classList.add('hidden')\n\n    // Check if the continue button is invalid on the keystore upload modal and\n    // click it if it should no longer be invalid.\n    this.continueButton.addEventListener('invalid', () => {\n      const fileFormElements = this.container.querySelectorAll('.dcp-modal-body input[type=\"file\"], .dcp-modal-body input[type=\"text\"]')\n      const filledInFileFormElements = Array.from(fileFormElements).filter(fileFormElement => fileFormElement.value !== '')\n      if (fileFormElements.length !== 0 && filledInFileFormElements.length !== 0) {\n        this.continueButton.setCustomValidity('')\n        // Clicking instead of dispatching a submit event to ensure other form validation is used before submitting the form.\n        this.continueButton.click()\n      }\n    })\n\n    return [fileInput, fileSelectionRow]\n\n    /**\n     * Checks that the dropped items contain only a single keystore file.\n     * If valid, sets the file input's value to the dropped file.\n     * @param {DragEvent} event - Contains the files dropped.\n     */\n    function selectDroppedFile (event) {\n      // Prevent file from being opened.\n      event.preventDefault()\n\n      // Check if only one file was dropped.\n      const wasOneFileDropped = event.dataTransfer.items.length === 1 ||\n        event.dataTransfer.files.length === 1\n      updateFileSelectionStatus(wasOneFileDropped)\n      if (!wasOneFileDropped) {\n        fileInput.setCustomValidity('Only one file can be uploaded.')\n        fileInput.reportValidity()\n        return\n      } else {\n        fileInput.setCustomValidity('')\n      }\n\n      // Now to use the DataTransfer interface to access the file(s), setting\n      // the value of the file input.\n      const file = event.dataTransfer.files[0]\n\n      if (checkFileExtension(file)) {\n        fileInput.files = event.dataTransfer.files\n        fileInput.dispatchEvent(new Event('change'))\n      }\n    }\n\n    function handleFileChange () {\n      if (checkFileExtension(this.files[0]) && this.files.length === 1) {\n        fileNamePlaceholder.innerText = `Selected File: ${this.files[0].name}`\n        updateFileSelectionStatus(true)\n        // Invoke a callback if additional functionality is required.\n        if (typeof fileInputProperties.callback === 'function') {\n          fileInputProperties.callback(this.files[0])\n        }\n      }\n    }\n\n    /**\n     * Checks if the file extension on the inputted file is correct.\n     * @param {File} file - The file to check\n     * @returns {boolean} True if the file extension is valid, false otherwise.\n     */\n    function checkFileExtension (file) {\n      // If there's no restriction, return true.\n      if (!fileInputProperties.extension) {\n        return true\n      }\n      const fileExtension = file.name.split('.').pop()\n      const isValidExtension = fileExtension === fileInputProperties.extension\n      updateFileSelectionStatus(isValidExtension)\n      if (!isValidExtension) {\n        fileInput.setCustomValidity(`Only a .${fileInputProperties.extension} file can be uploaded.`)\n        fileInput.reportValidity()\n        fileNamePlaceholder.classList.add('hidden')\n      } else {\n        fileInput.setCustomValidity('')\n      }\n      return isValidExtension\n    }\n\n    /**\n      * Updates the file input to reflect the validity of the current file\n      * selection.\n      * @param {boolean} isValidFileSelection - True if a single .keystore file\n      *                                         was selected. False otherwise.\n      */\n    function updateFileSelectionStatus (isValidFileSelection) {\n      imageContainer.innerHTML = ''\n      const statusImage = document.createElement('span')\n      statusImage.classList.add('fas', isValidFileSelection ? 'fa-check' : 'fa-times')\n      statusImage.style.color = isValidFileSelection ? 'green' : 'red'\n      imageContainer.appendChild(statusImage)\n\n      if (!isValidFileSelection) {\n        fileInput.value = null\n        fileNamePlaceholder.classList.add('hidden')\n      } else {\n        fileNamePlaceholder.classList.remove('hidden')\n      }\n\n      // If the modal contains a password field for a keystore file, change its\n      // visibility.\n      const walletPasswordInputContainer = document.querySelector('.dcp-modal-body input[type=\"password\"]').parentElement.parentElement\n      if (walletPasswordInputContainer) {\n        if (isValidFileSelection) {\n          walletPasswordInputContainer.classList.remove('hidden')\n          const walletPasswordInput = document.querySelector('.dcp-modal-body input[type=\"password\"]')\n          walletPasswordInput.focus()\n        } else {\n          walletPasswordInputContainer.classList.add('hidden')\n        }\n      }\n    }\n\n    function highlightDropArea (event) {\n      event.preventDefault()\n      this.classList.add('highlight')\n    }\n\n    function unhighlightDropArea (event) {\n      event.preventDefault()\n      this.classList.remove('highlight')\n    }\n  }\n\n  /**\n   * Sets up a custom tooltip to pop up when the passwords do not match, but are\n   * valid otherwise.\n   */\n  addFormValidationForPasswordConfirmation () {\n    const [newPassword, confirmPassword] = document.querySelectorAll('.dcp-modal-body input[type=\"password\"]')\n    if (!newPassword || !confirmPassword) {\n      throw Error('New Password field and Confirm Password fields not present.')\n    }\n\n    newPassword.addEventListener('input', checkMatchingPasswords)\n    confirmPassword.addEventListener('input', checkMatchingPasswords)\n\n    function checkMatchingPasswords () {\n      if (newPassword.value !== confirmPassword.value &&\n        newPassword.validity.valid &&\n        confirmPassword.validity.valid) {\n        newPassword.setCustomValidity('Both passwords must match.')\n      } else if (newPassword.value === confirmPassword.value ||\n        newPassword.validity.tooShort ||\n        newPassword.validity.patternMismatch ||\n        newPassword.validity.valueMissing ||\n        confirmPassword.validity.tooShort ||\n        confirmPassword.validity.patternMismatch ||\n        confirmPassword.validity.valueMissing) {\n        // If the passwords fields match or have become invalidated some other\n        // way again, reset the custom message.\n        newPassword.setCustomValidity('')\n      }\n    }\n  }\n\n  updateInvalidEmailMessage() {\n    const email = document.querySelector('.dcp-modal-body input[id=\"email\"')\n    if (!email){\n      throw Error(\"Email field not present\")\n    }\n    email.addEventListener('input', checkValidEmail);\n    function checkValidEmail() {\n      if (!email.validity.patternMismatch &&\n          !email.validity.valueMissing) {\n        email.setCustomValidity('')\n      } else {\n        email.setCustomValidity(\"Enter a valid email address.\")\n      }\n\n    }\n  }\n\n  /**\n   * Adds message(s) to the modal's body.\n   * @param {string} messages - The message(s) to add to the modal's body.\n   * @returns Paragraph element(s) containing the message(s) added to the\n   * modal's body.\n   */\n  addMessage (...messages) {\n    const elements = []\n    const body = this.container.querySelector('.dcp-modal-body')\n    for (let i = 0; i < messages.length; i++) {\n      const row = document.createElement('div')\n      row.className = 'row'\n\n      const paragraph = document.createElement('p')\n      paragraph.innerHTML = messages[i]\n      paragraph.classList.add('message')\n      row.appendChild(paragraph)\n      body.appendChild(row)\n\n      elements.push(paragraph)\n    }\n\n    if (elements.length === 1) return elements[0]\n    else return elements\n  }\n\n  addHorizontalRule () {\n    const body = this.container.querySelector('.dcp-modal-body')\n    body.appendChild(document.createElement('hr'))\n  }\n\n  // Does what it says. Still ill advised to use unless you have to.\n  addCustomHTML (htmlStr, browseCallback) {\n    const elements = []\n    const body = this.container.querySelector('.dcp-modal-body')\n    body.innerHTML += htmlStr\n    body.querySelector('#browse-button').addEventListener('click', browseCallback.bind(this, this))\n\n    if (elements.length === 1) return elements[0]\n    else return elements\n  }\n\n  addButton (...buttons) {\n    const elements = []\n    const body = this.container.querySelector('.dcp-modal-body')\n    for (let i = 0; i < buttons.length; i++) {\n      const row = document.createElement('div')\n      row.className = 'row'\n\n      let col = document.createElement('div')\n      col.className = 'col-md-4'\n\n      const description = document.createElement('span')\n      description.innerText = buttons[i].description\n\n      col.appendChild(description)\n      row.appendChild(col)\n\n      col = document.createElement('div')\n      col.className = 'col-md-8'\n\n      const button = document.createElement('button')\n      button.innerText = buttons[i].label\n      button.addEventListener('click', buttons[i].callback.bind(this, this))\n\n      elements.push(button)\n\n      col.appendChild(button)\n      row.appendChild(col)\n\n      body.appendChild(row)\n    }\n\n    if (elements.length === 1) return elements[0]\n    else return elements\n  }\n}\n\n\n// Inject our special stylesheet from dcp-client only if we're on the portal webpage.\nif (typeof window !== 'undefined' && typeof document !== 'undefined' && dcpConfig.portal.location.hostname === window.location.hostname) {\n  // <link rel='stylesheet' href='/css/dashboard.css'>\n  const stylesheet = document.createElement('link')\n  stylesheet.rel = 'stylesheet'\n  // Needed for the duplicate check done later.\n  stylesheet.id = 'dcp-modal-styles'\n\n  const dcpClientBundle = document.getElementById('_dcp_client_bundle')\n  let src\n  if (dcpClientBundle) {\n    src = dcpClientBundle.src.replace('dcp-client-bundle.js', 'dcp-modal-style.css')\n  } else {\n    src = dcpConfig.portal.location.href + 'dcp-client/dist/dcp-modal-style.css'\n  }\n\n  stylesheet.href = src\n  // If the style was injected before, don't inject it again.\n  // Could occur when loading a file that imports Modal.js and loading\n  // comput.min.js in the same HTML file.\n  if (document.getElementById(stylesheet.id) === null) {\n    document.getElementsByTagName('head')[0].appendChild(stylesheet)\n  }\n\n  if (typeof {\"version\":\"8f44464faf259aae5ef214f8752f7ce8728dd5f0\",\"branch\":\"release\",\"dcpClient\":{\"version\":\"4.2.12\",\"from\":\"git+ssh://git@gitlab.com/Distributed-Compute-Protocol/dcp-client.git#prod-20220907\",\"resolved\":\"git+ssh://git@gitlab.com/Distributed-Compute-Protocol/dcp-client.git#85f2b5d11fef51c90410286f12fa800492957c39\"},\"built\":\"Mon Sep 12 2022 15:21:54 GMT-0400 (Eastern Daylight Saving Time)\",\"config\":{\"generated\":\"Mon 12 Sep 2022 03:21:51 PM EDT by erose on lorge\",\"build\":\"debug\"},\"webpack\":\"5.70.0\",\"node\":\"v14.20.0\"} !== 'undefined' && typeof window.Modal === 'undefined') {\n    window.Modal = Modal\n  }\n}\n\n\n//# sourceURL=webpack://dcp/./portal/www/js/modal.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Modal)\n/* harmony export */ });\n/**\n * A Small Modal Class\n * @module Modal\n */\n/* globals Event dcpConfig */\nclass Modal {\n  constructor (title, message, callback = false, exitHandler = false, {\n    continueLabel = 'Continue',\n    cancelLabel = 'Cancel',\n    cancelVisible = true\n  } = {}) {\n    const modal = document.createElement('div')\n    modal.className = 'dcp-modal-container-old day'\n    modal.innerHTML = `\n      <dialog class=\"dcp-modal-content\">\n        <div class=\"dcp-modal-header\">\n          <h2>${title}<button type=\"button\" class=\"close\">&times;</button></h2>\n          ${message ? '<p>' + message + '</p>' : ''}\n        </div>\n        <div class=\"dcp-modal-loading hidden\">\n          <div class='loading'></div>\n        </div>\n        <form onsubmit='return false' method=\"dialog\">\n          <div class=\"dcp-modal-body\"></div>\n          <div class=\"dcp-modal-footer ${cancelVisible ? '' : 'centered'}\">\n            <button type=\"submit\" class=\"continue green-modal-button\">${continueLabel}</button>\n            <button type=\"button\" class=\"cancel green-modal-button\">${cancelLabel}</button>\n          </div>\n        </form>\n      </dialog>`\n\n    // To give a reference to do developer who wants to override the form submit.\n    // May occur if they want to validate the information in the backend\n    // without closing the modal prematurely.\n    this.form = modal.querySelector('.dcp-modal-content form')\n    this.continueButton = modal.querySelector('.dcp-modal-footer button.continue')\n    this.cancelButton = modal.querySelector('.dcp-modal-footer button.cancel')\n    this.closeButton = modal.querySelector('.dcp-modal-header .close')\n    if (!cancelVisible) {\n      this.cancelButton.style.display = 'none'\n    }\n\n    // To remove the event listener, the reference to the original function\n    // added is required.\n    this.formSubmitHandler = this.continue.bind(this)\n\n    modal.addEventListener('keydown', function (event) {\n      event.stopPropagation()\n      // 27 is the keycode for the escape key.\n      if (event.keyCode === 27) this.close()\n    }.bind(this))\n\n    this.container = modal\n    this.callback = callback\n    this.exitHandler = exitHandler\n    document.body.appendChild(modal)\n  }\n\n  changeFormSubmitHandler (newFormSubmitHandler) {\n    this.formSubmitHandler = newFormSubmitHandler\n  }\n\n  /**\n   * Validates the form values in the modal and calls the modal's callback\n   */\n  async continue (event) {\n    // To further prevent form submission from trying to redirect from the\n    // current page.\n    if (event instanceof Event) {\n      event.preventDefault()\n    }\n    let fieldsAreValid = true\n    let formElements = this.container.querySelectorAll('.dcp-modal-body select, .dcp-modal-body input, .dcp-modal-body textarea')\n\n    const formValues = []\n    if (typeof formElements.length === 'undefined') formElements = [formElements]\n    // Separate into two loops to enable input validation requiring formValues\n    // that come after it. e.g. Two password fields matching.\n    for (let i = 0; i < formElements.length; i++) {\n      switch (formElements[i].type) {\n        case 'file':\n          formValues.push(formElements[i])\n          break\n        case 'checkbox':\n          formValues.push(formElements[i].checked)\n          break\n        default:\n          formValues.push(formElements[i].value)\n          break\n      }\n    }\n    for (let i = 0; i < formElements.length; i++) {\n      if (formElements[i].validation) {\n        // Optional fields are allowed to be empty but still can't be wrong if not empty.\n        if (!(formElements[i].value === '' && !formElements[i].required)) {\n          if (typeof formElements[i].validation === 'function') {\n            if (!formElements[i].validation(formValues)) {\n              fieldsAreValid = false\n              formElements[i].classList.add('is-invalid')\n            }\n          } else if (!formElements[i].validation.test(formElements[i].value)) {\n            fieldsAreValid = false\n            formElements[i].classList.add('is-invalid')\n          }\n        }\n      }\n    }\n\n    if (!fieldsAreValid) return\n\n    this.loading()\n    if (typeof this.callback === 'function') {\n      try {\n        return this.callback(formValues)\n      } catch (error) {\n        console.error('Unexpected error in modal.continue:', error);\n        return this.close(false)\n      }\n    }\n    this.close(true)\n  }\n\n  loading () {\n    this.container.querySelector('.dcp-modal-loading').classList.remove('hidden')\n    this.container.querySelector('.dcp-modal-body').classList.add('hidden')\n    this.container.querySelector('.dcp-modal-footer').classList.add('hidden')\n  }\n\n  open () {\n    this.form.addEventListener('submit', async (event) => {\n      const success = await this.formSubmitHandler(event)\n      if (success === false) {\n        return\n      }\n      this.close(true)\n    })\n    // When the user clicks on <span> (x), close the modal\n    this.closeButton.addEventListener('click', this.close.bind(this))\n    this.cancelButton.addEventListener('click', this.close.bind(this))\n\n    // Prevent lingering outlines after clicking some form elements.\n    this.container.querySelectorAll('.dcp-modal-body button, .dcp-modal-body input[type=\"checkbox\"]').forEach(element => {\n      element.addEventListener('click', () => {\n        element.blur()\n      })\n    })\n\n    // Show the modal.\n    this.container.style.display = 'block'\n\n    const formElements = this.container.querySelectorAll('.dcp-modal-body select, .dcp-modal-body input')\n    if (formElements.length) {\n      formElements[0].focus()\n      if (formElements[0].type === 'text') {\n        formElements[0].select()\n      }\n      for (const el of formElements) {\n        if (el.realType) {\n          el.type = el.realType\n        }\n      }\n    } else {\n      // With no form elements to allow for form submission on enter, focus the\n      // continue button.\n      this.container.querySelector('.dcp-modal-footer button.continue').focus()\n    }\n  } // TODO: This should return a promise with the action resolving it\n\n  /**\n   * Shows the modal and returns a promise of the result of the modal (e.g. was\n   * it closed, did its action succeed?)\n   */\n  showModal () {\n    return new Promise((resolve, reject) => {\n      this.form.addEventListener('submit', handleContinue.bind(this))\n      this.cancelButton.addEventListener('click', handleCancel.bind(this))\n      this.closeButton.addEventListener('click', handleCancel.bind(this))\n\n      // Prevent lingering outlines after clicking some form elements.\n      this.container.querySelectorAll('.dcp-modal-body button, .dcp-modal-body input[type=\"checkbox\"]').forEach(element => {\n        element.addEventListener('click', () => {\n          element.blur()\n        })\n      })\n\n      // Show the modal.\n      this.container.style.display = 'block'\n\n      const formElements = this.container.querySelectorAll('.dcp-modal-body select, .dcp-modal-body input')\n      if (formElements.length) {\n        formElements[0].focus()\n        if (formElements[0].type === 'text') {\n          formElements[0].select()\n        }\n        for (const el of formElements) {\n          if (el.realType) {\n            el.type = el.realType\n          }\n        }\n      } else {\n        // With no form elements to allow for form submission on enter, focus the\n        // continue button.\n        this.continueButton.focus()\n      }\n\n      async function handleContinue (event) {\n        let result\n        try {\n          result = await this.formSubmitHandler(event)\n        } catch (error) {\n          reject(error)\n        }\n        this.close(true)\n        resolve(result)\n      }\n\n      async function handleCancel () {\n        let result\n        try {\n          result = await this.close()\n        } catch (error) {\n          reject(error)\n        }\n        resolve(result)\n      }\n    })\n  }\n\n  close (success = false) {\n    this.container.style.display = 'none'\n    if (this.container.parentNode) {\n      this.container.parentNode.removeChild(this.container)\n    }\n\n    // @todo this needs to remove eventlisteners to prevent memory leaks\n\n    if ((success !== true) && typeof this.exitHandler === 'function') {\n      return this.exitHandler(this)\n    }\n  }\n\n  /**\n   * Adds different form elements to the modal depending on the case.\n   *\n   * @param {*} elements - The properties of the form elements to add.\n   * @returns {HTMLElement} The input form elements.\n   */\n  addFormElement (...elements) {\n    const body = this.container.querySelector('.dcp-modal-body')\n    const inputElements = []\n    let label\n    for (let i = 0; i < elements.length; i++) {\n      let row = document.createElement('div')\n      row.className = 'row'\n\n      let col, input\n      switch (elements[i].type) {\n        case 'button':\n          col = document.createElement('div')\n          col.className = 'col-md-12'\n\n          input = document.createElement('button')\n          input.innerHTML = elements[i].label\n          input.type = 'button'\n          input.classList.add('green-modal-button')\n          if (!elements[i].onclick) {\n            throw new Error('A button in the modal body should have an on click event handler.')\n          }\n          input.addEventListener('click', elements[i].onclick)\n\n          col.appendChild(input)\n          row.appendChild(col)\n          break\n        case 'textarea':\n          col = document.createElement('div')\n          col.className = 'col-md-12'\n\n          input = document.createElement('textarea')\n          input.className = 'text-input-field form-control'\n          if (elements[i].placeholder) input.placeholder = elements[i].placeholder\n\n          col.appendChild(input)\n          row.appendChild(col)\n          break\n        case 'text':\n        case 'email':\n        case 'number':\n        case 'password': {\n          const inputCol = document.createElement('div')\n\n          input = document.createElement('input')\n          input.type = elements[i].type\n          input.validation = elements[i].validation\n          input.autocomplete = elements[i].autocomplete || (elements[i].type === 'password' ? 'off' : 'on')\n          input.className = 'text-input-field form-control'\n\n          // Adding bootstraps custom feedback styles.\n          let invalidFeedback = null\n          if (elements[i].invalidFeedback) {\n            invalidFeedback = document.createElement('div')\n            invalidFeedback.className = 'invalid-feedback'\n            invalidFeedback.innerText = elements[i].invalidFeedback\n          }\n\n          if (elements[i].type === 'password') {\n            elements[i].realType = 'password'\n          }\n\n          if (elements[i].label) {\n            const labelCol = document.createElement('div')\n            label = document.createElement('label')\n            label.innerText = elements[i].label\n            const inputId = 'dcp-modal-input-' + this.container.querySelectorAll('input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"]').length\n            label.setAttribute('for', inputId)\n            input.id = inputId\n            labelCol.classList.add('col-md-6', 'label-column')\n            labelCol.appendChild(label)\n            row.appendChild(labelCol)\n            inputCol.className = 'col-md-6'\n          } else {\n            inputCol.className = 'col-md-12'\n          }\n\n          inputCol.appendChild(input)\n          if (invalidFeedback !== null) {\n            inputCol.appendChild(invalidFeedback)\n          }\n          row.appendChild(inputCol)\n          break\n        }\n        case 'select':\n          col = document.createElement('div')\n          col.className = 'col-md-4'\n\n          label = document.createElement('span')\n          label.innerText = elements[i].label\n\n          col.appendChild(label)\n          row.appendChild(col)\n\n          col = document.createElement('div')\n          col.className = 'col-md-8'\n\n          input = document.createElement('select')\n\n          col.appendChild(input)\n          row.appendChild(col)\n          break\n        case 'checkbox': {\n          row.classList.add('checkbox-row')\n          const checkboxLabelCol = document.createElement('div')\n          checkboxLabelCol.classList.add('label-column', 'checkbox-label-column')\n\n          label = document.createElement('label')\n          label.innerText = elements[i].label\n          label.for = 'dcp-checkbox-input-' + this.container.querySelectorAll('input[type=\"checkbox\"]').length\n          label.setAttribute('for', label.for)\n          label.className = 'checkbox-label'\n\n          checkboxLabelCol.appendChild(label)\n\n          const checkboxCol = document.createElement('div')\n          checkboxCol.classList.add('checkbox-column')\n\n          input = document.createElement('input')\n          input.type = 'checkbox'\n          input.id = label.for\n          if (elements[i].checked) {\n            input.checked = true\n          }\n\n          checkboxCol.appendChild(input)\n\n          if (elements[i].labelToTheRightOfCheckbox) {\n            checkboxCol.classList.add('col-md-5')\n            row.appendChild(checkboxCol)\n            checkboxLabelCol.classList.add('col-md-7')\n            row.appendChild(checkboxLabelCol)\n          } else {\n            checkboxLabelCol.classList.add('col-md-6')\n            checkboxCol.classList.add('col-md-6')\n            row.appendChild(checkboxLabelCol)\n            row.appendChild(checkboxCol)\n          }\n          break\n        }\n        case 'file':\n          [input, row] = this.addFileInput(elements[i], input, row)\n          break\n        case 'label':\n          row.classList.add('label-row')\n          label = document.createElement('label')\n          label.innerText = elements[i].label\n          row.appendChild(label)\n          break\n      }\n\n      // Copy other possibly specified element properties:\n      const inputPropertyNames = ['title', 'inputmode', 'value', 'minLength', 'maxLength', 'size', 'required', 'pattern', 'min', 'max', 'step', 'placeholder', 'accept', 'multiple', 'id', 'onkeypress', 'oninput', 'for', 'readonly', 'autocomplete']\n      for (const propertyName of inputPropertyNames) {\n        if (Object.prototype.hasOwnProperty.call(elements[i], propertyName)) {\n          if (propertyName === 'for' && !label.hasAttribute(propertyName)) {\n            label.setAttribute(propertyName, elements[i][propertyName])\n          }\n          if (propertyName.startsWith('on')) {\n            input.addEventListener(propertyName.slice(2), elements[i][propertyName])\n          } else {\n            input.setAttribute(propertyName, elements[i][propertyName])\n          }\n        }\n      }\n\n      inputElements.push(input)\n      body.appendChild(row)\n    }\n\n    if (inputElements.length === 1) return inputElements[0]\n    else return inputElements\n  }\n\n  /**\n   * Adds a drag and drop file form element to the modal.\n   *\n   * @param {*} fileInputProperties  - An object specifying some of the\n   *                                   properties of the file input element.\n   * @param {*} fileInput            - Placeholders to help create the file\n   *                                   input.\n   * @param {HTMLDivElement} row     - Placeholders to help create the file\n   *                                   input.\n   */\n  addFileInput (fileInputProperties, fileInput, row) {\n    // Adding the upload label.\n    const uploadLabel = document.createElement('label')\n    uploadLabel.innerText = fileInputProperties.label\n    row.appendChild(uploadLabel)\n    const body = this.container.querySelector('.dcp-modal-body')\n    body.appendChild(row)\n    const fileSelectionRow = document.createElement('div')\n    fileSelectionRow.id = 'file-selection-row'\n\n    // Adding the drag and drop file upload input.\n    const dropContainer = document.createElement('div')\n    dropContainer.id = 'drop-container'\n\n    // Adding an image of a wallet\n    const imageContainer = document.createElement('div')\n    imageContainer.id = 'image-container'\n    const walletImage = document.createElement('span')\n    walletImage.classList.add('fas', 'fa-wallet')\n    imageContainer.appendChild(walletImage)\n\n    // Adding some text prompts\n    const dropMessage = document.createElement('span')\n    dropMessage.innerText = 'Drop a keystore file here'\n    const orMessage = document.createElement('span')\n    orMessage.innerText = 'or'\n\n    // Adding the manual file input element (hiding the default one)\n    const fileInputContainer = document.createElement('div')\n    const fileInputLabel = document.createElement('label')\n    // Linking the label to the file input so that clicking on the label\n    // activates the file input.\n    fileInputLabel.setAttribute('for', 'file-input')\n    fileInputLabel.innerText = 'Browse'\n    fileInput = document.createElement('input')\n    fileInput.type = fileInputProperties.type\n    fileInput.id = 'file-input'\n    // To remove the lingering outline after selecting the file.\n    fileInput.addEventListener('click', () => {\n      fileInput.blur()\n    })\n    fileInputContainer.append(fileInput, fileInputLabel)\n\n    // Creating the final row element to append to the modal body.\n    dropContainer.append(imageContainer, dropMessage, orMessage, fileInputContainer)\n    fileSelectionRow.appendChild(dropContainer)\n\n    // Adding functionality to the drag and drop file input.\n    dropContainer.addEventListener('drop', selectDroppedFile.bind(this))\n    dropContainer.addEventListener('drop', unhighlightDropArea)\n    // Prevent file from being opened by the browser.\n    dropContainer.ondragover = highlightDropArea\n    dropContainer.ondragenter = highlightDropArea\n    dropContainer.ondragleave = unhighlightDropArea\n\n    fileInput.addEventListener('change', handleFileChange)\n\n    const fileNamePlaceholder = document.createElement('center')\n    fileNamePlaceholder.id = 'file-name-placeholder'\n    fileNamePlaceholder.className = 'row'\n    fileNamePlaceholder.innerText = ''\n    fileSelectionRow.appendChild(fileNamePlaceholder)\n    fileNamePlaceholder.classList.add('hidden')\n\n    // Check if the continue button is invalid on the keystore upload modal and\n    // click it if it should no longer be invalid.\n    this.continueButton.addEventListener('invalid', () => {\n      const fileFormElements = this.container.querySelectorAll('.dcp-modal-body input[type=\"file\"], .dcp-modal-body input[type=\"text\"]')\n      const filledInFileFormElements = Array.from(fileFormElements).filter(fileFormElement => fileFormElement.value !== '')\n      if (fileFormElements.length !== 0 && filledInFileFormElements.length !== 0) {\n        this.continueButton.setCustomValidity('')\n        // Clicking instead of dispatching a submit event to ensure other form validation is used before submitting the form.\n        this.continueButton.click()\n      }\n    })\n\n    return [fileInput, fileSelectionRow]\n\n    /**\n     * Checks that the dropped items contain only a single keystore file.\n     * If valid, sets the file input's value to the dropped file.\n     * @param {DragEvent} event - Contains the files dropped.\n     */\n    function selectDroppedFile (event) {\n      // Prevent file from being opened.\n      event.preventDefault()\n\n      // Check if only one file was dropped.\n      const wasOneFileDropped = event.dataTransfer.items.length === 1 ||\n        event.dataTransfer.files.length === 1\n      updateFileSelectionStatus(wasOneFileDropped)\n      if (!wasOneFileDropped) {\n        fileInput.setCustomValidity('Only one file can be uploaded.')\n        fileInput.reportValidity()\n        return\n      } else {\n        fileInput.setCustomValidity('')\n      }\n\n      // Now to use the DataTransfer interface to access the file(s), setting\n      // the value of the file input.\n      const file = event.dataTransfer.files[0]\n\n      if (checkFileExtension(file)) {\n        fileInput.files = event.dataTransfer.files\n        fileInput.dispatchEvent(new Event('change'))\n      }\n    }\n\n    function handleFileChange () {\n      if (checkFileExtension(this.files[0]) && this.files.length === 1) {\n        fileNamePlaceholder.innerText = `Selected File: ${this.files[0].name}`\n        updateFileSelectionStatus(true)\n        // Invoke a callback if additional functionality is required.\n        if (typeof fileInputProperties.callback === 'function') {\n          fileInputProperties.callback(this.files[0])\n        }\n      }\n    }\n\n    /**\n     * Checks if the file extension on the inputted file is correct.\n     * @param {File} file - The file to check\n     * @returns {boolean} True if the file extension is valid, false otherwise.\n     */\n    function checkFileExtension (file) {\n      // If there's no restriction, return true.\n      if (!fileInputProperties.extension) {\n        return true\n      }\n      const fileExtension = file.name.split('.').pop()\n      const isValidExtension = fileExtension === fileInputProperties.extension\n      updateFileSelectionStatus(isValidExtension)\n      if (!isValidExtension) {\n        fileInput.setCustomValidity(`Only a .${fileInputProperties.extension} file can be uploaded.`)\n        fileInput.reportValidity()\n        fileNamePlaceholder.classList.add('hidden')\n      } else {\n        fileInput.setCustomValidity('')\n      }\n      return isValidExtension\n    }\n\n    /**\n      * Updates the file input to reflect the validity of the current file\n      * selection.\n      * @param {boolean} isValidFileSelection - True if a single .keystore file\n      *                                         was selected. False otherwise.\n      */\n    function updateFileSelectionStatus (isValidFileSelection) {\n      imageContainer.innerHTML = ''\n      const statusImage = document.createElement('span')\n      statusImage.classList.add('fas', isValidFileSelection ? 'fa-check' : 'fa-times')\n      statusImage.style.color = isValidFileSelection ? 'green' : 'red'\n      imageContainer.appendChild(statusImage)\n\n      if (!isValidFileSelection) {\n        fileInput.value = null\n        fileNamePlaceholder.classList.add('hidden')\n      } else {\n        fileNamePlaceholder.classList.remove('hidden')\n      }\n\n      // If the modal contains a password field for a keystore file, change its\n      // visibility.\n      const walletPasswordInputContainer = document.querySelector('.dcp-modal-body input[type=\"password\"]').parentElement.parentElement\n      if (walletPasswordInputContainer) {\n        if (isValidFileSelection) {\n          walletPasswordInputContainer.classList.remove('hidden')\n          const walletPasswordInput = document.querySelector('.dcp-modal-body input[type=\"password\"]')\n          walletPasswordInput.focus()\n        } else {\n          walletPasswordInputContainer.classList.add('hidden')\n        }\n      }\n    }\n\n    function highlightDropArea (event) {\n      event.preventDefault()\n      this.classList.add('highlight')\n    }\n\n    function unhighlightDropArea (event) {\n      event.preventDefault()\n      this.classList.remove('highlight')\n    }\n  }\n\n  /**\n   * Sets up a custom tooltip to pop up when the passwords do not match, but are\n   * valid otherwise.\n   */\n  addFormValidationForPasswordConfirmation () {\n    const [newPassword, confirmPassword] = document.querySelectorAll('.dcp-modal-body input[type=\"password\"]')\n    if (!newPassword || !confirmPassword) {\n      throw Error('New Password field and Confirm Password fields not present.')\n    }\n\n    newPassword.addEventListener('input', checkMatchingPasswords)\n    confirmPassword.addEventListener('input', checkMatchingPasswords)\n\n    function checkMatchingPasswords () {\n      if (newPassword.value !== confirmPassword.value &&\n        newPassword.validity.valid &&\n        confirmPassword.validity.valid) {\n        newPassword.setCustomValidity('Both passwords must match.')\n      } else if (newPassword.value === confirmPassword.value ||\n        newPassword.validity.tooShort ||\n        newPassword.validity.patternMismatch ||\n        newPassword.validity.valueMissing ||\n        confirmPassword.validity.tooShort ||\n        confirmPassword.validity.patternMismatch ||\n        confirmPassword.validity.valueMissing) {\n        // If the passwords fields match or have become invalidated some other\n        // way again, reset the custom message.\n        newPassword.setCustomValidity('')\n      }\n    }\n  }\n\n  updateInvalidEmailMessage() {\n    const email = document.querySelector('.dcp-modal-body input[id=\"email\"')\n    if (!email){\n      throw Error(\"Email field not present\")\n    }\n    email.addEventListener('input', checkValidEmail);\n    function checkValidEmail() {\n      if (!email.validity.patternMismatch &&\n          !email.validity.valueMissing) {\n        email.setCustomValidity('')\n      } else {\n        email.setCustomValidity(\"Enter a valid email address.\")\n      }\n\n    }\n  }\n\n  /**\n   * Adds message(s) to the modal's body.\n   * @param {string} messages - The message(s) to add to the modal's body.\n   * @returns Paragraph element(s) containing the message(s) added to the\n   * modal's body.\n   */\n  addMessage (...messages) {\n    const elements = []\n    const body = this.container.querySelector('.dcp-modal-body')\n    for (let i = 0; i < messages.length; i++) {\n      const row = document.createElement('div')\n      row.className = 'row'\n\n      const paragraph = document.createElement('p')\n      paragraph.innerHTML = messages[i]\n      paragraph.classList.add('message')\n      row.appendChild(paragraph)\n      body.appendChild(row)\n\n      elements.push(paragraph)\n    }\n\n    if (elements.length === 1) return elements[0]\n    else return elements\n  }\n\n  addHorizontalRule () {\n    const body = this.container.querySelector('.dcp-modal-body')\n    body.appendChild(document.createElement('hr'))\n  }\n\n  // Does what it says. Still ill advised to use unless you have to.\n  addCustomHTML (htmlStr, browseCallback) {\n    const elements = []\n    const body = this.container.querySelector('.dcp-modal-body')\n    body.innerHTML += htmlStr\n    body.querySelector('#browse-button').addEventListener('click', browseCallback.bind(this, this))\n\n    if (elements.length === 1) return elements[0]\n    else return elements\n  }\n\n  addButton (...buttons) {\n    const elements = []\n    const body = this.container.querySelector('.dcp-modal-body')\n    for (let i = 0; i < buttons.length; i++) {\n      const row = document.createElement('div')\n      row.className = 'row'\n\n      let col = document.createElement('div')\n      col.className = 'col-md-4'\n\n      const description = document.createElement('span')\n      description.innerText = buttons[i].description\n\n      col.appendChild(description)\n      row.appendChild(col)\n\n      col = document.createElement('div')\n      col.className = 'col-md-8'\n\n      const button = document.createElement('button')\n      button.innerText = buttons[i].label\n      button.addEventListener('click', buttons[i].callback.bind(this, this))\n\n      elements.push(button)\n\n      col.appendChild(button)\n      row.appendChild(col)\n\n      body.appendChild(row)\n    }\n\n    if (elements.length === 1) return elements[0]\n    else return elements\n  }\n}\n\n\n// Inject our special stylesheet from dcp-client only if we're on the portal webpage.\nif (typeof window !== 'undefined' && typeof document !== 'undefined' && dcpConfig.portal.location.hostname === window.location.hostname) {\n  // <link rel='stylesheet' href='/css/dashboard.css'>\n  const stylesheet = document.createElement('link')\n  stylesheet.rel = 'stylesheet'\n  // Needed for the duplicate check done later.\n  stylesheet.id = 'dcp-modal-styles'\n\n  const dcpClientBundle = document.getElementById('_dcp_client_bundle')\n  let src\n  if (dcpClientBundle) {\n    src = dcpClientBundle.src.replace('dcp-client-bundle.js', 'dcp-modal-style.css')\n  } else {\n    src = dcpConfig.portal.location.href + 'dcp-client/dist/dcp-modal-style.css'\n  }\n\n  stylesheet.href = src\n  // If the style was injected before, don't inject it again.\n  // Could occur when loading a file that imports Modal.js and loading\n  // comput.min.js in the same HTML file.\n  if (document.getElementById(stylesheet.id) === null) {\n    document.getElementsByTagName('head')[0].appendChild(stylesheet)\n  }\n\n  if (typeof {\"version\":\"8f44464faf259aae5ef214f8752f7ce8728dd5f0\",\"branch\":\"release\",\"dcpClient\":{\"version\":\"4.2.14\",\"from\":\"git+ssh://git@gitlab.com/Distributed-Compute-Protocol/dcp-client.git#prod-20220907\",\"resolved\":\"git+ssh://git@gitlab.com/Distributed-Compute-Protocol/dcp-client.git#b2174de210661f6204e3844481b275c3e3346407\"},\"built\":\"Wed Sep 21 2022 13:44:32 GMT-0400 (Eastern Daylight Saving Time)\",\"config\":{\"generated\":\"Wed 21 Sep 2022 01:44:29 PM EDT by erose on lorge\",\"build\":\"debug\"},\"webpack\":\"5.70.0\",\"node\":\"v14.20.0\"} !== 'undefined' && typeof window.Modal === 'undefined') {\n    window.Modal = Modal\n  }\n}\n\n\n//# sourceURL=webpack://dcp/./portal/www/js/modal.js?");
 
 /***/ }),
 
@@ -4178,7 +4178,7 @@ eval("/**\n *  @file  Module that implements Compute API\n *  @module dcp/comput
   \*********************************/
 /***/ ((module, exports, __webpack_require__) => {
 
-eval("/* module decorator */ module = __webpack_require__.nmd(module);\n/**\n * @file        dcp-client-bundle-src.js\n *              Top-level file which gets webpacked into the bundle consumed by dcp-client 2.5\n * @author      Wes Garland, wes@kingsds.network\n * @date        July 2019\n */\n\n{\n  let thisScript = typeof document !== 'undefined' ? (typeof document.currentScript !== 'undefined' && document.currentScript) || document.getElementById('_dcp_client_bundle') : {}\n  let realModuleDeclare\n\n  if ( false || typeof module.declare === 'undefined') {\n    realModuleDeclare = ( true) ? module.declare : 0\n    if (false) {}\n    module.declare = function moduleUnWrapper (deps, factory) {\n      factory(null, module.exports, module)\n      return module.exports\n    }\n  }\n\n  let _debugging = () => false\n  dcpConfig.future = (__webpack_require__(/*! ../common/config-future.js */ \"./src/common/config-future.js\").futureFactory)(_debugging, dcpConfig);\n\n  /* These modules are official API and must be part of DCP Client */\n  let officialApi = {\n    'protocol':          __webpack_require__(/*! ../protocol-v4 */ \"./src/protocol-v4/index.js\"),\n    'compute':           (__webpack_require__(/*! ./compute */ \"./src/dcp-client/compute.js\").compute),\n    'worker':            __webpack_require__(/*! ./worker */ \"./src/dcp-client/worker/index.js\"),\n    'wallet':            __webpack_require__(/*! ./wallet */ \"./src/dcp-client/wallet/index.js\"),\n  };\n\n  /* Allow client programs to use modules which happen to be in the bundle anyhow */\n  let conveniencePeers = {\n    'ethereumjs-wallet': (__webpack_require__(/*! ./wallet/keystore */ \"./src/dcp-client/wallet/keystore.js\")._internalEth.wallet),\n    'ethereumjs-util':   (__webpack_require__(/*! ./wallet/keystore */ \"./src/dcp-client/wallet/keystore.js\")._internalEth.util),\n    'socket.io-client':  __webpack_require__(/*! socket.io-client */ \"./node_modules/socket.io-client/build/cjs/index.js\"),\n    'bignumber.js':      __webpack_require__(/*! bignumber.js */ \"./node_modules/bignumber.js/bignumber.js\"),\n    'semver':            __webpack_require__(/*! semver */ \"./node_modules/semver/semver.js\"),\n  };\n\n  /* Some of these modules are API-track. Some of them need to be published to be\n   * available for top-level resolution by DCP internals. Those (mostly) should have\n   * been written using relative module paths.....\n   */\n  let modules = Object.assign({\n    'dcp-build': {\"version\":\"8f44464faf259aae5ef214f8752f7ce8728dd5f0\",\"branch\":\"release\",\"dcpClient\":{\"version\":\"4.2.12\",\"from\":\"git+ssh://git@gitlab.com/Distributed-Compute-Protocol/dcp-client.git#prod-20220907\",\"resolved\":\"git+ssh://git@gitlab.com/Distributed-Compute-Protocol/dcp-client.git#85f2b5d11fef51c90410286f12fa800492957c39\"},\"built\":\"Mon Sep 12 2022 15:21:54 GMT-0400 (Eastern Daylight Saving Time)\",\"config\":{\"generated\":\"Mon 12 Sep 2022 03:21:51 PM EDT by erose on lorge\",\"build\":\"debug\"},\"webpack\":\"5.70.0\",\"node\":\"v14.20.0\"},\n    'dcp-xhr': __webpack_require__(/*! ../common/dcp-xhr */ \"./src/common/dcp-xhr.js\"),\n    'dcp-env': __webpack_require__(/*! ../common/dcp-env */ \"./src/common/dcp-env.js\"),\n    'dcp-url': __webpack_require__(/*! ../common/dcp-url */ \"./src/common/dcp-url.js\"),\n    'cli': __webpack_require__(/*! ../common/cli */ \"./src/common/cli.js\"),\n    'dcp-timers': __webpack_require__(/*! ../common/dcp-timers */ \"./src/common/dcp-timers.js\"),\n    'dcp-dot-dir': __webpack_require__(/*! ../common/dcp-dot-dir */ \"./src/common/dcp-dot-dir.js\"),\n    'dcp-assert': __webpack_require__(/*! ../common/dcp-assert */ \"./src/common/dcp-assert.js\"),\n    'dcp-events': __webpack_require__(/*! ../common/dcp-events */ \"./src/common/dcp-events/index.js\"),\n    'utils': __webpack_require__(/*! ../utils */ \"./src/utils/index.js\"),\n    'debugging': __webpack_require__(/*! ../debugging */ \"./src/debugging.js\"),\n    'publish': __webpack_require__(/*! ../common/dcp-publish */ \"./src/common/dcp-publish.js\"),\n    'compute-groups': {\n      ...__webpack_require__(/*! ./compute-groups */ \"./src/dcp-client/compute-groups/index.js\"),\n      publicGroupOpaqueId: (__webpack_require__(/*! ../common/scheduler-constants */ \"./src/common/scheduler-constants.js\").computeGroups[\"public\"].opaqueId),\n    },\n    'bank-util': __webpack_require__(/*! ./bank-util */ \"./src/dcp-client/bank-util.js\"),\n    'protocol-v4': __webpack_require__(/*! ../protocol-v4 */ \"./src/protocol-v4/index.js\"), /* deprecated */\n    'client-modal': __webpack_require__(/*! ./client-modal */ \"./src/dcp-client/client-modal/index.js\"),\n    'legacy-modal': (__webpack_require__(/*! ../../portal/www/js/modal */ \"./portal/www/js/modal.js\").Modal),\n    'eth': __webpack_require__(/*! ./wallet/eth */ \"./src/dcp-client/wallet/eth.js\"),\n    'serialize': __webpack_require__(/*! ../utils/serialize */ \"./src/utils/serialize.js\"),\n    'job': __webpack_require__(/*! ./job */ \"./src/dcp-client/job/index.js\"),\n    'range-object': __webpack_require__(/*! ./range-object */ \"./src/dcp-client/range-object.js\"),\n    'stats-ranges': __webpack_require__(/*! ./stats-ranges */ \"./src/dcp-client/stats-ranges.js\"),\n    'job-values': __webpack_require__(/*! ./job-values */ \"./src/dcp-client/job-values.js\"),\n    'standard-objects': {}\n  }, conveniencePeers, officialApi);\n\n  /* Export the JS Standard Classes (etc) from the global object of the bundle evaluation context,\n   * in case we have code somewhere that needs to use these for instanceof checks.\n   */\n  ;[ Object, Function, Boolean, Symbol,\n    Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError,\n    Number, Math, Date,\n    String, RegExp,\n    Array, Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array,\n    Map, Set, WeakMap, WeakSet,\n    ArrayBuffer, DataView, JSON,\n    Promise, \n    Reflect, Proxy, Intl, WebAssembly, __webpack_require__\n  ].forEach(function (obj) {\n    if (obj.name && (typeof obj === 'function' || typeof obj === 'object'))\n      modules['standard-objects'][obj.name] = obj\n  })\n\n  if (typeof BigInt !== 'undefined')\n    modules['standard-objects']['BigInt'] === BigInt;\n  if (typeof BigInt64Array !== 'undefined')\n    modules['standard-objects']['BigInt64Array'] === BigInt64Array;\n  if (typeof BigInt64Array !== 'undefined')\n    modules['standard-objects']['BigUint64Array'] === BigUint64Array;\n\n  module.declare([], function(require, exports, module) {\n    Object.assign(exports, modules)\n    exports['dcp-config'] = dcpConfig\n  })\n  if (realModuleDeclare)\n    module.declare = realModuleDeclare\n\n  bundleExports = thisScript.exports = exports; /* must be last expression evaluated! */\n}\n\n\n//# sourceURL=webpack://dcp/./src/dcp-client/index.js?");
+eval("/* module decorator */ module = __webpack_require__.nmd(module);\n/**\n * @file        dcp-client-bundle-src.js\n *              Top-level file which gets webpacked into the bundle consumed by dcp-client 2.5\n * @author      Wes Garland, wes@kingsds.network\n * @date        July 2019\n */\n\n{\n  let thisScript = typeof document !== 'undefined' ? (typeof document.currentScript !== 'undefined' && document.currentScript) || document.getElementById('_dcp_client_bundle') : {}\n  let realModuleDeclare\n\n  if ( false || typeof module.declare === 'undefined') {\n    realModuleDeclare = ( true) ? module.declare : 0\n    if (false) {}\n    module.declare = function moduleUnWrapper (deps, factory) {\n      factory(null, module.exports, module)\n      return module.exports\n    }\n  }\n\n  let _debugging = () => false\n  dcpConfig.future = (__webpack_require__(/*! ../common/config-future.js */ \"./src/common/config-future.js\").futureFactory)(_debugging, dcpConfig);\n\n  /* These modules are official API and must be part of DCP Client */\n  let officialApi = {\n    'protocol':          __webpack_require__(/*! ../protocol-v4 */ \"./src/protocol-v4/index.js\"),\n    'compute':           (__webpack_require__(/*! ./compute */ \"./src/dcp-client/compute.js\").compute),\n    'worker':            __webpack_require__(/*! ./worker */ \"./src/dcp-client/worker/index.js\"),\n    'wallet':            __webpack_require__(/*! ./wallet */ \"./src/dcp-client/wallet/index.js\"),\n  };\n\n  /* Allow client programs to use modules which happen to be in the bundle anyhow */\n  let conveniencePeers = {\n    'ethereumjs-wallet': (__webpack_require__(/*! ./wallet/keystore */ \"./src/dcp-client/wallet/keystore.js\")._internalEth.wallet),\n    'ethereumjs-util':   (__webpack_require__(/*! ./wallet/keystore */ \"./src/dcp-client/wallet/keystore.js\")._internalEth.util),\n    'socket.io-client':  __webpack_require__(/*! socket.io-client */ \"./node_modules/socket.io-client/build/cjs/index.js\"),\n    'bignumber.js':      __webpack_require__(/*! bignumber.js */ \"./node_modules/bignumber.js/bignumber.js\"),\n    'semver':            __webpack_require__(/*! semver */ \"./node_modules/semver/semver.js\"),\n  };\n\n  /* Some of these modules are API-track. Some of them need to be published to be\n   * available for top-level resolution by DCP internals. Those (mostly) should have\n   * been written using relative module paths.....\n   */\n  let modules = Object.assign({\n    'dcp-build': {\"version\":\"8f44464faf259aae5ef214f8752f7ce8728dd5f0\",\"branch\":\"release\",\"dcpClient\":{\"version\":\"4.2.14\",\"from\":\"git+ssh://git@gitlab.com/Distributed-Compute-Protocol/dcp-client.git#prod-20220907\",\"resolved\":\"git+ssh://git@gitlab.com/Distributed-Compute-Protocol/dcp-client.git#b2174de210661f6204e3844481b275c3e3346407\"},\"built\":\"Wed Sep 21 2022 13:44:32 GMT-0400 (Eastern Daylight Saving Time)\",\"config\":{\"generated\":\"Wed 21 Sep 2022 01:44:29 PM EDT by erose on lorge\",\"build\":\"debug\"},\"webpack\":\"5.70.0\",\"node\":\"v14.20.0\"},\n    'dcp-xhr': __webpack_require__(/*! ../common/dcp-xhr */ \"./src/common/dcp-xhr.js\"),\n    'dcp-env': __webpack_require__(/*! ../common/dcp-env */ \"./src/common/dcp-env.js\"),\n    'dcp-url': __webpack_require__(/*! ../common/dcp-url */ \"./src/common/dcp-url.js\"),\n    'cli': __webpack_require__(/*! ../common/cli */ \"./src/common/cli.js\"),\n    'dcp-timers': __webpack_require__(/*! ../common/dcp-timers */ \"./src/common/dcp-timers.js\"),\n    'dcp-dot-dir': __webpack_require__(/*! ../common/dcp-dot-dir */ \"./src/common/dcp-dot-dir.js\"),\n    'dcp-assert': __webpack_require__(/*! ../common/dcp-assert */ \"./src/common/dcp-assert.js\"),\n    'dcp-events': __webpack_require__(/*! ../common/dcp-events */ \"./src/common/dcp-events/index.js\"),\n    'utils': __webpack_require__(/*! ../utils */ \"./src/utils/index.js\"),\n    'debugging': __webpack_require__(/*! ../debugging */ \"./src/debugging.js\"),\n    'publish': __webpack_require__(/*! ../common/dcp-publish */ \"./src/common/dcp-publish.js\"),\n    'compute-groups': {\n      ...__webpack_require__(/*! ./compute-groups */ \"./src/dcp-client/compute-groups/index.js\"),\n      publicGroupOpaqueId: (__webpack_require__(/*! ../common/scheduler-constants */ \"./src/common/scheduler-constants.js\").computeGroups[\"public\"].opaqueId),\n    },\n    'bank-util': __webpack_require__(/*! ./bank-util */ \"./src/dcp-client/bank-util.js\"),\n    'protocol-v4': __webpack_require__(/*! ../protocol-v4 */ \"./src/protocol-v4/index.js\"), /* deprecated */\n    'client-modal': __webpack_require__(/*! ./client-modal */ \"./src/dcp-client/client-modal/index.js\"),\n    'legacy-modal': (__webpack_require__(/*! ../../portal/www/js/modal */ \"./portal/www/js/modal.js\").Modal),\n    'eth': __webpack_require__(/*! ./wallet/eth */ \"./src/dcp-client/wallet/eth.js\"),\n    'serialize': __webpack_require__(/*! ../utils/serialize */ \"./src/utils/serialize.js\"),\n    'job': __webpack_require__(/*! ./job */ \"./src/dcp-client/job/index.js\"),\n    'range-object': __webpack_require__(/*! ./range-object */ \"./src/dcp-client/range-object.js\"),\n    'stats-ranges': __webpack_require__(/*! ./stats-ranges */ \"./src/dcp-client/stats-ranges.js\"),\n    'job-values': __webpack_require__(/*! ./job-values */ \"./src/dcp-client/job-values.js\"),\n    'standard-objects': {}\n  }, conveniencePeers, officialApi);\n\n  /* Export the JS Standard Classes (etc) from the global object of the bundle evaluation context,\n   * in case we have code somewhere that needs to use these for instanceof checks.\n   */\n  ;[ Object, Function, Boolean, Symbol,\n    Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError,\n    Number, Math, Date,\n    String, RegExp,\n    Array, Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array,\n    Map, Set, WeakMap, WeakSet,\n    ArrayBuffer, DataView, JSON,\n    Promise, \n    Reflect, Proxy, Intl, WebAssembly, __webpack_require__\n  ].forEach(function (obj) {\n    if (obj.name && (typeof obj === 'function' || typeof obj === 'object'))\n      modules['standard-objects'][obj.name] = obj\n  })\n\n  if (typeof BigInt !== 'undefined')\n    modules['standard-objects']['BigInt'] === BigInt;\n  if (typeof BigInt64Array !== 'undefined')\n    modules['standard-objects']['BigInt64Array'] === BigInt64Array;\n  if (typeof BigInt64Array !== 'undefined')\n    modules['standard-objects']['BigUint64Array'] === BigUint64Array;\n\n  module.declare([], function(require, exports, module) {\n    Object.assign(exports, modules)\n    exports['dcp-config'] = dcpConfig\n  })\n  if (realModuleDeclare)\n    module.declare = realModuleDeclare\n\n  bundleExports = thisScript.exports = exports; /* must be last expression evaluated! */\n}\n\n\n//# sourceURL=webpack://dcp/./src/dcp-client/index.js?");
 
 /***/ }),
 
@@ -4895,7 +4895,7 @@ eval("/**\n * @file        fetch-keystore.js\n *              Utility code to fe
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-eval("/**\n * @file        fetch-uri.js\n * @author      Nazila Akhavan <nazila@kingsds.network>, Wes Garland <wes@kingsds.network>\n * @date        Sep 2020, Nov 2020\n *\n * Fetch URLs/ Data that is stored in the database.\n * Bootstrap some our own needs via custom MIME Types in data URLs.\n */\n\n\nconst { assert } = __webpack_require__(/*! dcp/common/dcp-assert */ \"./src/common/dcp-assert.js\");\nconst kvin = __webpack_require__(/*! kvin */ \"./node_modules/kvin/kvin.js\");\nconst scopedKvin = new kvin.KVIN({Object: ({}).constructor,\n                                  Array: ([]).constructor, \n                                  Function: (()=>{}).constructor});\n\nconst { justFetch } = __webpack_require__(/*! ./just-fetch */ \"./src/utils/just-fetch.js\");\nconst DCP_ENV = __webpack_require__(/*! dcp/common/dcp-env */ \"./src/common/dcp-env.js\");\nconst { DCPError } = __webpack_require__(/*! dcp/common/dcp-error */ \"./src/common/dcp-error.js\");\nconst { atob } = __webpack_require__(/*! dcp/utils/content-encoding */ \"./src/utils/content-encoding.js\");\n\n/** @typedef {import('dcp/common/dcp-url').DcpURL} DcpURL */\n\n/**\n * Fetch the data via HTTP GET at the given URI. data: URIs are decoded directly, \n * http: or https: URIs are fetched via GET queries. \n *\n * data: URIs will always be decoded.\n * Other URIs (eg https:) must have their origins listed in the allow origin list\n *\n * The return type is unpacked by justFetch - maybe not the best place for this - but this means\n * that we will return a promise that resolves to many possible JS types, dependening on the MIME\n * content-type of the response. The same observation holds for the content-type inside any data:\n * URIs.\n * \n * \n * @param {string[]}                    allowOriginList         the allow origin list (optional, needed for non-data: URIs)\n * @param {URL | DcpURL | string}       uri                     uri of the resource to be fetched\n * @returns If successful, promise which resolves to the data at the URI; see justFetch() for details.\n *          Otherwise, promise which results to an instance of error.  Errors which happen to due bad\n *          origins have the code EFETCH_BAD_ORIGIN.\n */\nexports.fetchURI = async function fetchURI(uri, allowOriginList) {\n  if ((typeof uri === 'object' && uri.protocol === 'data:') || uri.startsWith('data:'))\n    return exports.parseDataURI(uri);\n  \n  const url = typeof uri === 'string' ? new URL(uri) : uri;\n  \n  if (url.protocol === 'file:')\n  {\n    if (allowOriginList.indexOf(url.pathname) === -1)\n      throw new DCPError(`Not allowed to fetch from the file path '${url.pathname}'`, 'EFETCH_BAD_ORIGIN')\n    \n    return exports.parseFileURI(url);\n  }\n  \n  if (allowOriginList.indexOf(url.origin) === -1)\n    throw new DCPError(`Not allowed to fetch from the origin '${url.origin}'`, 'EFETCH_BAD_ORIGIN')\n  \n  return await justFetch(url, 'string', 'GET');\n}\n\n/**\n * @constructor\n * Instanciate an object based on a data: uri which has properties matching\n * the parameter attributes of the uri.\n * \n * @param {string} uriString The data: URI to decode\n *\n * Object Properties:\n * - contentType:       boxed string which is the content type (eg 'image/png')\n * - contentType.major: string which is the major part of the content type (eg 'image')\n * - contentType.minor: string which is the minor part of the content type (eg 'png')\n * - length:            the length of the media type section of the data: URI\n * - parameters:        object which holds any parameters which were specified in\n *                      the URI; keys are lowercased attributes.\n *\n * @note    The parameters.charset property is treated a little differently to make\n *          it easier on API consumers; it is *always* defined, and lower case.\n *          If the charset was not specified, it is false.\n */  \nexports.MediaType = function fetchUri$$MediaType(uriString) {\n  var mtArr;\n  var mtStr = /(^data:)([^,]*)/.exec(uriString)[2];\n\n  assert(uriString.startsWith('data:'));\n  this.length = mtStr.length;\n  if (mtStr === '')\n    mtStr = 'text/plain;charset=US-ASCII';\n\n  mtArr = mtStr.split(';');\n  this.contentType = new String(mtArr.shift());\n  [ this.contentType.major, this.contentType.minor ] = this.contentType.split('/');\n  \n  this.parameters = {}\n  for (let parameter of mtArr) {\n    let [ attribute, value ] = parameter.split('=');\n    if (!value)\n      value = true;\n    this.parameters[attribute.toLowerCase()] = value;\n  }\n\n  if (typeof this.parameters.charset === 'undefined')\n    this.parameters.charset = false;\n  else\n    this.parameters.charset = this.parameters.charset.toLowerCase();\n  \n  if (this.contentType == 'application/json' || this.contentType == 'text/plain')\n  {\n    this.serializer = {\n      method: 'json',\n      parse:  JSON.parse\n    }\n  }\n  else if (this.contentType == 'application/x-kvin')\n  {\n    this.serializer = {\n      method: 'kvin',\n      parse:  scopedKvin.deserialize.bind(scopedKvin)\n    }\n  }\n}\n\n/**\n * Estimate the number of raw bytes stored in a data URI.  The estimate is pretty good for URIs\n * embedding base64. URIs which are made up of escaped characters are estimated by counting the number\n * of characters in the first part of the array, and then assuming that the encoding density is constant\n * through out. This is because the URI can be made up of bytes encoded with 1-or-3 bytes, but will \n * normally be all either almost all 1 or all 3. Mixed would be pretty rare in the wild.\n *\n * This does mean that it's possible to under-estimate by nearly 66%, so backing store should be ready\n * for this, but it's realllly unlikely to happen.\n */\nexports.estimateDataUriContentLength = function estimateDataUriContentLength(uriString, mediaType)\n{\n  const headerLength = 5 + mediaType.length + 1; /* data: mediaType comma */\n\n  if (!mediaType)\n    mediaType = new exports.MediaType(uriString);\n  if (mediaType.parameters.base64)\n    return Math.ceil(((uriString.length - (mediaType.length + headerLength)) * 6) / 8);\n\n  /* Assume that the distribution of escaped characters in the first bit is representative\n   * of the URI as a whole. We don't want to take this apart just to estimate.\n   */\n  const leading  = uriString.slice(mediaType.length, 1024);\n  const remain   = leading.replace(/%../g, '');\n  const numEscs  = (leading.length - remain.length);\n  const bytes    = remain.length + numEscs;\n  const dilation = bytes / leading.length;\n  \n  return Math.ceil((uriString.length - headerLength) * dilation);\n}\n\n/**\n * Extract the raw data encoded a data URI.\n *\n * @param {string}      uriString       a valid data: URI\n * @param {exports.MediaType}   mediaType       optional instance of MediaType that describes this URI.\n *\n * @returns string or Buffer representing the RAW data. If the return type is a string, each character\n *          in the string will represent 1 byte, 0-255, of the raw data.\n */\nexports.dataUri_extractBytes = function fetchUri$$dataUri_extractBytes(uriString, mediaType)\n{\n  if (!mediaType)\n    mediaType = new exports.MediaType(uriString);\n\n  const payload = uriString.slice(5 + mediaType.length + 1); /* data: mediaType comma */\n  const data = mediaType.parameters.base64 ? atob(payload) : unescape(payload);\n\n  return data;\n}\n\n/**\n * Extract text encoded in a data URI.\n *\n * @param {string}      uriString       a valid data: URI\n * @param {exports.MediaType}   mediaType       optional instance of MediaType that describes this URI.\n *\n * @returns a JS-style Unicode string, converting from whatever charset is indicated in the\n *          data URI's content-type charset attribute.\n */\nexports.dataUri_extractText = function fetchUri$$dataUri_extractText(uriString, mediaType)\n{\n  if (!mediaType)\n    mediaType = new exports.MediaType(uriString);\n\n  switch (mediaType.parameters.charset)\n  {\n    default:\n      throw new Error(`Character set ${mediaType.parameters.charset} not supported`);\n\n    case undefined:\n    case false:\n    case 'iso-8859-1': case 'latin1': case 'latin-1':\n    case 'us-ascii':   case 'ascii':\n      /* These character sets map directly onto unicode */\n      return exports.dataUri_extractBytes(uriString, mediaType);\n    case 'utf8': case 'utf-8':\n      const payload = uriString.slice(5 + mediaType.length + 1); /* data: mediaType comma */\n      return mediaType.parameters.base64 ? decodeURI(escape(atob(payload))) : decodeURI(payload);\n  }\n\n  throw 'unreached';\n}\n\nexports.parseFileURI = function fetchUri$$parseFileURI(uriString) {\n  var fetchedResource = (__webpack_require__(/*! fs */ \"fs\").readFileSync)(uriString, 'utf-8');\n  var fileExt = (__webpack_require__(/*! path */ \"./node_modules/path-browserify/index.js\").extname)(uriString.pathname);\n  \n  var parse;\n  switch (fileExt) {\n    case '.kvin':\n      parse = scopedKvin.deserialize.bind(scopedKvin);\n      break;\n    case '.json':\n      parse = JSON.parse\n      break;\n  }\n  \n  if (parse)\n    fetchedResource = parse(fetchedResource);\n  \n  return fetchedResource;\n}\n\n/**\n * Parse a data: URI, returning the JavaScript value it encodes. The return type is selected\n * based on the content-type.\n *\n * <pre>\n * MIME Type                    Return Type\n * ------------------           ----------------------------------------------------------------------------------------------------\n * text/plain or none           string primitive\n * text/*                       A boxed string with the contentType property set, and the charset property set if it was specified.\n * application/json             whatever JSON.parse returns on the data when it is treated as a string\n * application/x-kvin           whatever kvin.deserialze returns on the data when it is treated as a string\n * image/*                      A Uint8Array of the decoded contents with the contentType property set.\n * *                            A Uint8Array of the decoded contents with the contentType property set and the charset property \n *                              set if it was specified.\n * </pre>\n *\n * @param {string}  uriString    the URI\n */\nexports.parseDataURI = function(uriString, mediaType = null) {\n  if (!mediaType)\n    mediaType = new exports.MediaType(uriString);\n  \n  if (mediaType.contentType.major === 'text')\n  {\n    const unicodeString = exports.dataUri_extractText(uriString, mediaType);\n\n    if (mediaType.contentType == 'text/plain')\n      return unicodeString;\n\n    const boxedUnicodeString = new String(unicodeString); \n    if (mediaType.parameters.charset)\n      boxedUnicodeString.charset = mediaType.parameters.charset;\n    return boxedUnicodeString;\n  }\n  \n  if (mediaType.serializer)\n  {\n    /* ALL supported serializers in DCP serialize to UTF-8 */\n    const unicodeString = exports.dataUri_extractText(uriString, mediaType);\n    return mediaType.serializer.parse(unicodeString);\n  }\n  \n  let ui8;\n  const rawData = exports.dataUri_extractBytes(uriString, mediaType);\n  if (mediaType.contentType.major === 'image')\n  {\n    ui8 = Uint8Array.from(rawData, c => c.charCodeAt(0));\n    ui8.contentType = mediaType.contentType;\n  }\n  else \n  {\n    ui8 = Uint8Array.from(rawData, c => c.charCodeAt(0));\n    ui8.contentType = mediaType.contentType.toString();\n    if (mediaType.parameters.charset)\n      ui8.charset = charset;\n  }\n\n  return ui8;\n};\n\n\n//# sourceURL=webpack://dcp/./src/utils/fetch-uri.js?");
+eval("/**\n * @file        fetch-uri.js\n * @author      Nazila Akhavan <nazila@kingsds.network>, Wes Garland <wes@kingsds.network>\n * @date        Sep 2020, Nov 2020\n *\n * Fetch URLs/ Data that is stored in the database.\n * Bootstrap some our own needs via custom MIME Types in data URLs.\n */\n\n\nconst { assert } = __webpack_require__(/*! dcp/common/dcp-assert */ \"./src/common/dcp-assert.js\");\nconst kvin = __webpack_require__(/*! kvin */ \"./node_modules/kvin/kvin.js\");\nconst scopedKvin = new kvin.KVIN({Object: ({}).constructor,\n                                  Array: ([]).constructor, \n                                  Function: (()=>{}).constructor});\n\nconst { justFetch } = __webpack_require__(/*! ./just-fetch */ \"./src/utils/just-fetch.js\");\nconst DCP_ENV = __webpack_require__(/*! dcp/common/dcp-env */ \"./src/common/dcp-env.js\");\nconst { DCPError } = __webpack_require__(/*! dcp/common/dcp-error */ \"./src/common/dcp-error.js\");\nconst { atob } = __webpack_require__(/*! dcp/utils/content-encoding */ \"./src/utils/content-encoding.js\");\n\n/** @typedef {import('dcp/common/dcp-url').DcpURL} DcpURL */\n\n/**\n * Fetch the data via HTTP GET at the given URI. data: URIs are decoded directly, \n * http: or https: URIs are fetched via GET queries. \n *\n * data: URIs will always be decoded.\n * Other URIs (eg https:) must have their origins listed in the allow origin list\n *\n * The return type is unpacked by justFetch - maybe not the best place for this - but this means\n * that we will return a promise that resolves to many possible JS types, dependening on the MIME\n * content-type of the response. The same observation holds for the content-type inside any data:\n * URIs.\n * \n * \n * @param {string[]}                    allowOriginList         the allow origin list (optional, needed for non-data: URIs)\n * @param {URL | DcpURL | string}       uri                     uri of the resource to be fetched\n * @returns If successful, promise which resolves to the data at the URI; see justFetch() for details.\n *          Otherwise, promise which results to an instance of error.  Errors which happen to due bad\n *          origins have the code EFETCH_BAD_ORIGIN.\n */\nexports.fetchURI = async function fetchURI(uri, allowOriginList) {\n  if ((typeof uri === 'object' && uri.protocol === 'data:') || uri.startsWith('data:'))\n    return exports.parseDataURI(uri);\n  \n  const url = typeof uri === 'string' ? new URL(uri) : uri;\n  \n  if (url.protocol === 'file:')\n  {\n    if (allowOriginList.indexOf(url.pathname) === -1)\n      throw new DCPError(`Not allowed to fetch from the file path '${url.pathname}'`, 'EFETCH_BAD_ORIGIN')\n    \n    return exports.parseFileURI(url);\n  }\n  \n  if (allowOriginList.indexOf(url.origin) === -1)\n    throw new DCPError(`Not allowed to fetch from the origin '${url.origin}'`, 'EFETCH_BAD_ORIGIN')\n  \n  return await justFetch(url, 'string', 'GET');\n}\n\n/**\n * @constructor\n * Instanciate an object based on a data: uri which has properties matching\n * the parameter attributes of the uri.\n * \n * @param {string} uriString The data: URI to decode\n *\n * Object Properties:\n * - contentType:       boxed string which is the content type (eg 'image/png')\n * - contentType.major: string which is the major part of the content type (eg 'image')\n * - contentType.minor: string which is the minor part of the content type (eg 'png')\n * - length:            the length of the media type section of the data: URI\n * - parameters:        object which holds any parameters which were specified in\n *                      the URI; keys are lowercased attributes.\n *\n * @note    The parameters.charset property is treated a little differently to make\n *          it easier on API consumers; it is *always* defined, and lower case.\n *          If the charset was not specified, it is false.\n */  \nexports.MediaType = function fetchUri$$MediaType(uriString) {\n  var mtArr;\n  var mtStr = /(^data:)([^,]*)/.exec(uriString)[2];\n\n  assert(uriString.startsWith('data:'));\n  this.length = mtStr.length;\n  if (mtStr === '')\n    mtStr = 'text/plain;charset=US-ASCII';\n\n  mtArr = mtStr.split(';');\n  this.contentType = new String(mtArr.shift());\n  [ this.contentType.major, this.contentType.minor ] = this.contentType.split('/');\n  \n  this.parameters = {}\n  for (let parameter of mtArr) {\n    let [ attribute, value ] = parameter.split('=');\n    if (!value)\n      value = true;\n    this.parameters[attribute.toLowerCase()] = value;\n  }\n\n  if (typeof this.parameters.charset === 'undefined')\n    this.parameters.charset = false;\n  else\n    this.parameters.charset = this.parameters.charset.toLowerCase();\n  \n  if (this.contentType == 'application/json' || this.contentType == 'text/plain')\n  {\n    this.serializer = {\n      method: 'json',\n      parse:  JSON.parse\n    }\n  }\n  else if (this.contentType == 'application/x-kvin')\n  {\n    this.serializer = {\n      method: 'kvin',\n      parse:  scopedKvin.deserialize.bind(scopedKvin)\n    }\n  }\n}\n\n/**\n * Estimate the number of raw bytes stored in a data URI.  The estimate is pretty good for URIs\n * embedding base64. URIs which are made up of escaped characters are estimated by counting the number\n * of characters in the first part of the array, and then assuming that the encoding density is constant\n * through out. This is because the URI can be made up of bytes encoded with 1-or-3 bytes, but will \n * normally be all either almost all 1 or all 3. Mixed would be pretty rare in the wild.\n *\n * This does mean that it's possible to under-estimate by nearly 66%, so backing store should be ready\n * for this, but it's realllly unlikely to happen.\n */\nexports.estimateDataUriContentLength = function estimateDataUriContentLength(uriString, mediaType)\n{\n  const headerLength = 5 + mediaType.length + 1; /* data: mediaType comma */\n\n  if (!mediaType)\n    mediaType = new exports.MediaType(uriString);\n  if (mediaType.parameters.base64)\n    return Math.ceil(((uriString.length - (mediaType.length + headerLength)) * 6) / 8);\n\n  /* Assume that the distribution of escaped characters in the first bit is representative\n   * of the URI as a whole. We don't want to take this apart just to estimate.\n   */\n  const leading  = uriString.slice(mediaType.length, 1024);\n  const remain   = leading.replace(/%../g, '');\n  const numEscs  = (leading.length - remain.length);\n  const bytes    = remain.length + numEscs;\n  const dilation = bytes / leading.length;\n  \n  return Math.ceil((uriString.length - headerLength) * dilation);\n}\n\n/**\n * Extract the raw data encoded a data URI.\n *\n * @param {string}      uriString       a valid data: URI\n * @param {exports.MediaType}   mediaType       optional instance of MediaType that describes this URI.\n *\n * @returns string or Buffer representing the RAW data. If the return type is a string, each character\n *          in the string will represent 1 byte, 0-255, of the raw data.\n */\nexports.dataUri_extractBytes = function fetchUri$$dataUri_extractBytes(uriString, mediaType)\n{\n  if (!mediaType)\n    mediaType = new exports.MediaType(uriString);\n\n  const payload = uriString.slice(5 + mediaType.length + 1); /* data: mediaType comma */\n  const data = mediaType.parameters.base64 ? atob(payload) : decodeURI(payload);\n\n  return data;\n}\n\n/**\n * Extract text encoded in a data URI.\n *\n * @param {string}      uriString       a valid data: URI\n * @param {exports.MediaType}   mediaType       optional instance of MediaType that describes this URI.\n *\n * @returns a JS-style Unicode string, converting from whatever charset is indicated in the\n *          data URI's content-type charset attribute.\n */\nexports.dataUri_extractText = function fetchUri$$dataUri_extractText(uriString, mediaType)\n{\n  if (!mediaType)\n    mediaType = new exports.MediaType(uriString);\n\n  switch (mediaType.parameters.charset)\n  {\n    default:\n      throw new Error(`Character set ${mediaType.parameters.charset} not supported`);\n\n    case undefined:\n    case false:\n    case 'iso-8859-1': case 'latin1': case 'latin-1':\n    case 'us-ascii':   case 'ascii':\n      /* These character sets map directly onto unicode */\n      return exports.dataUri_extractBytes(uriString, mediaType);\n    case 'utf8': case 'utf-8':\n      const payload = uriString.slice(5 + mediaType.length + 1); /* data: mediaType comma */\n      return mediaType.parameters.base64 ? decodeURI(escape(atob(payload))) : decodeURI(payload);\n  }\n\n  throw 'unreached';\n}\n\nexports.parseFileURI = function fetchUri$$parseFileURI(uriString) {\n  var fetchedResource = (__webpack_require__(/*! fs */ \"fs\").readFileSync)(uriString, 'utf-8');\n  var fileExt = (__webpack_require__(/*! path */ \"./node_modules/path-browserify/index.js\").extname)(uriString.pathname);\n  \n  var parse;\n  switch (fileExt) {\n    case '.kvin':\n      parse = scopedKvin.deserialize.bind(scopedKvin);\n      break;\n    case '.json':\n      parse = JSON.parse\n      break;\n  }\n  \n  if (parse)\n    fetchedResource = parse(fetchedResource);\n  \n  return fetchedResource;\n}\n\n/**\n * Parse a data: URI, returning the JavaScript value it encodes. The return type is selected\n * based on the content-type.\n *\n * <pre>\n * MIME Type                    Return Type\n * ------------------           ----------------------------------------------------------------------------------------------------\n * text/plain or none           string primitive\n * text/*                       A boxed string with the contentType property set, and the charset property set if it was specified.\n * application/json             whatever JSON.parse returns on the data when it is treated as a string\n * application/x-kvin           whatever kvin.deserialze returns on the data when it is treated as a string\n * image/*                      A Uint8Array of the decoded contents with the contentType property set.\n * *                            A Uint8Array of the decoded contents with the contentType property set and the charset property \n *                              set if it was specified.\n * </pre>\n *\n * @param {string}  uriString    the URI\n */\nexports.parseDataURI = function(uriString, mediaType = null) {\n  if (!mediaType)\n    mediaType = new exports.MediaType(uriString);\n  \n  if (mediaType.contentType.major === 'text')\n  {\n    const unicodeString = exports.dataUri_extractText(uriString, mediaType);\n\n    if (mediaType.contentType == 'text/plain')\n      return unicodeString;\n\n    const boxedUnicodeString = new String(unicodeString); \n    if (mediaType.parameters.charset)\n      boxedUnicodeString.charset = mediaType.parameters.charset;\n    return boxedUnicodeString;\n  }\n  \n  if (mediaType.serializer)\n  {\n    /* ALL supported serializers in DCP serialize to UTF-8 */\n    const unicodeString = exports.dataUri_extractText(uriString, mediaType);\n    return mediaType.serializer.parse(unicodeString);\n  }\n  \n  let ui8;\n  const rawData = exports.dataUri_extractBytes(uriString, mediaType);\n  if (mediaType.contentType.major === 'image')\n  {\n    ui8 = Uint8Array.from(rawData, c => c.charCodeAt(0));\n    ui8.contentType = mediaType.contentType;\n  }\n  else \n  {\n    ui8 = Uint8Array.from(rawData, c => c.charCodeAt(0));\n    ui8.contentType = mediaType.contentType.toString();\n    if (mediaType.parameters.charset)\n      ui8.charset = charset;\n  }\n\n  return ui8;\n};\n\n\n//# sourceURL=webpack://dcp/./src/utils/fetch-uri.js?");
 
 /***/ }),
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcp-client",
-  "version": "4.2.13",
+  "version": "4.2.14",
   "description": "Core libraries for accessing DCP network",
   "keywords": [
     "dcp"