Change text input to custom dialog

index.html

@@ -199,6 +199,14 @@
             <button class="purple-button ok-button">Ok</button>
         </div>
     </div>
+    <div class="popup-modal shadow prompt" data-popup-modal="input">
+        <div id="message"></div>
+        <input type="text" id="inputvalue" />
+        <div class="buttons centered">
+            <button class="purple-button ok-button">Ok</button>
+            <button class="purple-button cancel-button">Cancel</button>
+        </div>
+    </div>
     <div class="popup-modal shadow prompt" data-popup-modal="progress" data-tabbable="false">
         <div class="label centered" id="status"></div>
         <div class="label centered" id="percentage"></div>

js/common/dialogs.js

@@ -241,6 +241,26 @@ class MessageModal extends GenericModal {
     }
 }
 
+class InputModal extends GenericModal {
+    _handleOkButton(event) {
+        this._returnValue(this._getElement('inputValueField').value);
+    }
+
+    async open(message, defaultValue="") {
+        let p = super.open();
+        const cancelButton = this._currentModal.querySelector("button.cancel-button");
+        this._addDialogElement('cancelButton', cancelButton, 'click', this._closeModal);
+        const okButton = this._currentModal.querySelector("button.ok-button");
+        this._addDialogElement('okButton', okButton, 'click', this._handleOkButton);
+        const inputValueField = this._currentModal.querySelector("#inputvalue");
+        this._addDialogElement('inputValueField', inputValueField);
+        this._setElementValue('inputValueField', defaultValue);
+        this._currentModal.querySelector("#message").innerHTML = message;
+
+        return p;
+    }
+}
+
 class ProgressDialog extends GenericModal {
     async open() {
         let p = super.open();
@@ -424,5 +444,6 @@ export {
     UnsavedDialog,
     DiscoveryModal,
     ProgressDialog,
-    DeviceInfoModal
+    DeviceInfoModal,
+    InputModal
 };

js/common/file_dialog.js

@@ -1,4 +1,4 @@
-import {GenericModal, ProgressDialog, ButtonValueDialog} from './dialogs.js';
+import {GenericModal, ProgressDialog, ButtonValueDialog, InputModal} from './dialogs.js';
 import {readUploadedFileAsArrayBuffer} from './utilities.js';
 import {saveAs} from 'file-saver';
 import JSZip from 'jszip';
@@ -321,6 +321,11 @@ class FileDialog extends GenericModal {
         return selectedItems > 1;
     }
 
+    async _prompt(message, defaultValue="") {
+        const inputModal = new InputModal("input");
+        return await inputModal.open(message, defaultValue);
+    }
+
     _updateToolbar() {
         this._setElementEnabled('delButton', this._canPerformWritableFileOperation());
         this._setElementEnabled('renameButton', !this._multipleItemsSelected() && this._canPerformWritableFileOperation());
@@ -653,7 +658,8 @@ class FileDialog extends GenericModal {
             return;
         }
         oldName = oldName[0];
-        let newName = prompt("Enter a new folder name", oldName);
+        let newName = await this._prompt("Enter a new name", oldName);
+
         // If cancelled, do nothing
         if (!newName) {
             return;
@@ -688,7 +694,7 @@ class FileDialog extends GenericModal {
     async _handleNewFolderButton() {
         if (this._readOnlyMode) return;
         // prompt for new folder name
-        let folderName = prompt("Enter a new folder name");
+        let folderName = await this._prompt("Enter a new folder name");
         // If cancelled, do nothing
         if (!folderName) {
             return;

package.json

@@ -15,11 +15,11 @@
   },
   "dependencies": {
     "@adafruit/ble-file-transfer-js": "adafruit/ble-file-transfer-js#1.0.4",
-    "@adafruit/circuitpython-repl-js": "adafruit/circuitpython-repl-js#3.2.4",
+    "@adafruit/circuitpython-repl-js": "adafruit/circuitpython-repl-js#3.2.5",
     "@codemirror/lang-python": "^6.2.1",
     "@fortawesome/fontawesome-free": "^7.1.0",
-    "@xterm/addon-fit": "^0.10.0",
-    "@xterm/addon-web-links": "^0.11.0",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^5.5.0",
     "chart.js": "^4.5.1",
     "codemirror": "^6.0.2",