improved wm dialogs

9 files changed, 71 insertions, 65 deletions

diff --git a/web/share/js/index/main.js b/web/share/js/index/main.js
index 38c848c7..19cba440 100644
--- a/web/share/js/index/main.js
+++ b/web/share/js/index/main.js
@@ -57,7 +57,7 @@ function __loadKvmdInfo() {
 
 			let apps = [];
 			if (info.extras === null) {
-				wm.error("Not all applications in the menu can be displayed<br>due an error. See KVMD logs for details.");
+				wm.error("Not all applications in the menu can be displayed due an error.<br>See KVMD logs for details.");
 			} else {
 				apps = Object.values(info.extras).sort(function(a, b) {
 					if (a.place < b.place) {
@@ -113,7 +113,7 @@ function __makeApp(id, path, icon, name) {
 			<a href="${path}">
 				<div>
 					<img class="svg-gray" src="${icon}">
-					${name}
+					${tools.escape(name)}
 				</div>
 			</a>
 		</div>
@@ -125,7 +125,7 @@ function __logout() {
 		if (http.status === 200 || http.status === 401 || http.status === 403) {
 			document.location.href = "/login";
 		} else {
-			wm.error("Logout error:<br>", http.responseText);
+			wm.error("Logout error", http.responseText);
 		}
 	});
 }
diff --git a/web/share/js/kvm/atx.js b/web/share/js/kvm/atx.js
index 2a0e38f9..bb8b5543 100644
--- a/web/share/js/kvm/atx.js
+++ b/web/share/js/kvm/atx.js
@@ -38,19 +38,9 @@ export function Atx(__recorder) {
 
 		tools.storage.bindSimpleSwitch($("atx-ask-switch"), "atx.ask", true);
 
-		for (let args of [
-			["atx-power-button", "power", "Are you sure you want to press the power button?"],
-			["atx-power-button-long", "power_long", `
-				Are you sure you want to long press the power button?<br>
-				Warning! This could cause data loss on the server.
-			`],
-			["atx-reset-button", "reset", `
-				Are you sure you want to press the reset button?<br>
-				Warning! This could case data loss on the server.
-			`],
-		]) {
-			tools.el.setOnClick($(args[0]), () => __clickButton(args[1], args[2]));
-		}
+		tools.el.setOnClick($("atx-power-button"), () => __clickAtx("power"));
+		tools.el.setOnClick($("atx-power-button-long"), () => __clickAtx("power_long"));
+		tools.el.setOnClick($("atx-reset-button"), () => __clickAtx("reset"));
 	};
 
 	/************************************************************************/
@@ -71,20 +61,23 @@ export function Atx(__recorder) {
 		}
 	};
 
-	var __clickButton = function(button, confirm_msg) {
+	var __clickAtx = function(button) {
 		let click_button = function() {
 			tools.httpPost("/api/atx/click", {"button": button}, function(http) {
 				if (http.status === 409) {
-					wm.error("Performing another ATX operation for other client.<br>Please try again later");
+					wm.error("Performing another ATX operation for other client.<br>Please try again later.");
 				} else if (http.status !== 200) {
-					wm.error("Click error:<br>", http.responseText);
+					wm.error("Click error", http.responseText);
 				}
 			});
 			__recorder.recordAtxButtonEvent(button);
 		};
 
 		if ($("atx-ask-switch").checked) {
-			wm.confirm(confirm_msg).then(function(ok) {
+			wm.confirm(`
+				Are you sure you want to press the <b>${button}</b> button?<br>
+				Warning! This could case data loss on the server.
+			`).then(function(ok) {
 				if (ok) {
 					click_button();
 				}
diff --git a/web/share/js/kvm/gpio.js b/web/share/js/kvm/gpio.js
index fe326205..29e6da08 100644
--- a/web/share/js/kvm/gpio.js
+++ b/web/share/js/kvm/gpio.js
@@ -185,7 +185,7 @@ export function Gpio(__recorder) {
 			__recorder.recordGpioSwitchEvent(channel, to);
 		};
 		if (confirm) {
-			wm.confirm(confirm).then(function(ok) {
+			wm.confirm(tools.escape(confirm)).then(function(ok) {
 				if (ok) {
 					act();
 				} else {
@@ -205,7 +205,7 @@ export function Gpio(__recorder) {
 			__recorder.recordGpioPulseEvent(channel);
 		};
 		if (confirm) {
-			wm.confirm(confirm).then(function(ok) { if (ok) act(); });
+			wm.confirm(tools.escape(confirm)).then(function(ok) { if (ok) act(); });
 		} else {
 			act();
 		}
@@ -216,7 +216,7 @@ export function Gpio(__recorder) {
 			if (http.status === 409) {
 				wm.error("Performing another operation for this GPIO channel.<br>Please try again later");
 			} else if (http.status !== 200) {
-				wm.error("GPIO error:<br>", http.responseText);
+				wm.error("GPIO error", http.responseText);
 			}
 		});
 	};
diff --git a/web/share/js/kvm/hid.js b/web/share/js/kvm/hid.js
index ef16bcaf..68c19e37 100644
--- a/web/share/js/kvm/hid.js
+++ b/web/share/js/kvm/hid.js
@@ -98,8 +98,7 @@ export function Hid(__getGeometry, __recorder) {
 				}
 				let codes = el_shortcut.getAttribute("data-shortcut").split(" ");
 				if (ask) {
-					let confirm_msg = `Do you want to press <b>${codes.join(" + ")}</b>?`;
-					wm.confirm(confirm_msg).then(function(ok) {
+					wm.confirm("Do you want to press this hotkey?", codes.join(" + ")).then(function(ok) {
 						if (ok) {
 							__emitShortcut(codes);
 						}
@@ -261,7 +260,7 @@ export function Hid(__getGeometry, __recorder) {
 					if (http.status === 413) {
 						wm.error("Too many text for paste!");
 					} else if (http.status !== 200) {
-						wm.error("HID paste error:<br>", http.responseText);
+						wm.error("HID paste error", http.responseText);
 					} else if (http.status === 200) {
 						__recorder.recordPrintEvent(text);
 					}
@@ -269,9 +268,10 @@ export function Hid(__getGeometry, __recorder) {
 			};
 
 			if ($("hid-pak-ask-switch").checked) {
-				let confirm_msg = `You're going to paste ${text.length} character${text.length ? "s" : ""}.<br>`;
-				confirm_msg += "Are you sure you want to continue?";
-				wm.confirm(confirm_msg).then(function(ok) {
+				wm.confirm(`
+					You're going to paste ${text.length} character${text.length ? "s" : ""}.<br>
+					Are you sure you want to continue?
+				`).then(function(ok) {
 					if (ok) {
 						paste_as_keys();
 					} else {
@@ -288,7 +288,7 @@ export function Hid(__getGeometry, __recorder) {
 		let output = tools.radio.getValue(`hid-outputs-${hid}-radio`);
 		tools.httpPost("/api/hid/set_params", {[`${hid}_output`]: output}, function(http) {
 			if (http.status !== 200) {
-				wm.error("Can't configure HID:<br>", http.responseText);
+				wm.error("Can't configure HID", http.responseText);
 			}
 		});
 	};
@@ -297,7 +297,7 @@ export function Hid(__getGeometry, __recorder) {
 		let enabled = $("hid-jiggler-switch").checked;
 		tools.httpPost("/api/hid/set_params", {"jiggler": enabled}, function(http) {
 			if (http.status !== 200) {
-				wm.error(`Can't ${enabled ? "enabled" : "disable"} mouse juggler:<br>`, http.responseText);
+				wm.error(`Can't ${enabled ? "enabled" : "disable"} mouse jiggler`, http.responseText);
 			}
 		});
 	};
@@ -306,7 +306,7 @@ export function Hid(__getGeometry, __recorder) {
 		let connected = $("hid-connect-switch").checked;
 		tools.httpPost("/api/hid/set_connected", {"connected": connected}, function(http) {
 			if (http.status !== 200) {
-				wm.error(`Can't ${connected ? "connect" : "disconnect"} HID:<br>`, http.responseText);
+				wm.error(`Can't ${connected ? "connect" : "disconnect"} HID`, http.responseText);
 			}
 		});
 	};
@@ -316,7 +316,7 @@ export function Hid(__getGeometry, __recorder) {
 			if (ok) {
 				tools.httpPost("/api/hid/reset", null, function(http) {
 					if (http.status !== 200) {
-						wm.error("HID reset error:<br>", http.responseText);
+						wm.error("HID reset error", http.responseText);
 					}
 				});
 			}
diff --git a/web/share/js/kvm/msd.js b/web/share/js/kvm/msd.js
index 88491a23..3885bd50 100644
--- a/web/share/js/kvm/msd.js
+++ b/web/share/js/kvm/msd.js
@@ -86,11 +86,11 @@ export function Msd() {
 
 	var __clickRemoveButton = function() {
 		let name = $("msd-image-selector").value;
-		wm.confirm(`Are you sure you want to remove the image<br><b>${tools.escape(name)}</b> from PiKVM?`).then(function(ok) {
+		wm.confirm("Are you sure you want to remove this image?", name).then(function(ok) {
 			if (ok) {
 				tools.httpPost("/api/msd/remove", {"image": name}, function(http) {
 					if (http.status !== 200) {
-						wm.error("Can't remove image:<br>", http.responseText);
+						wm.error("Can't remove image", http.responseText);
 					}
 				});
 			}
@@ -100,7 +100,7 @@ export function Msd() {
 	var __sendParam = function(name, value) {
 		tools.httpPost("/api/msd/set_params", {[name]: value}, function(http) {
 			if (http.status !== 200) {
-				wm.error("Can't configure MSD:<br>", http.responseText);
+				wm.error("Can't configure Mass Storage", http.responseText);
 			}
 		});
 	};
@@ -124,8 +124,9 @@ export function Msd() {
 	var __httpStateChange = function() {
 		if (__http.readyState === 4) {
 			if (__http.status !== 200) {
-				wm.error("Can't upload image to the Mass Storage Drive:<br>", __http.responseText);
+				wm.error("Can't upload image", __http.responseText);
 			} else if ($("msd-new-url").value.length > 0) {
+				let html = "";
 				let msg = "";
 				try {
 					let end = __http.responseText.lastIndexOf("\r\n");
@@ -139,13 +140,15 @@ export function Msd() {
 					let result_str = __http.responseText.slice(begin, end);
 					let result = JSON.parse(result_str);
 					if (!result.ok) {
-						msg = `Can't upload image to the Mass Storage Drive:<br>${result_str}`;
+						html = "Can't upload image";
+						msg = result_str;
 					}
 				} catch (ex) {
-					msg = `Can't parse upload result:<br>${ex}`;
+					html = "Can't parse upload result";
+					msg = `${ex}`;
 				}
-				if (msg.length > 0) {
-					wm.error(msg);
+				if (html.length > 0) {
+					wm.error(html, msg);
 				}
 			}
 			tools.hidden.setVisible($("msd-new-sub"), false);
@@ -166,7 +169,7 @@ export function Msd() {
 	var __clickConnectButton = function(connected) {
 		tools.httpPost("/api/msd/set_connected", {"connected": connected}, function(http) {
 			if (http.status !== 200) {
-				wm.error("Switch error:<br>", http.responseText);
+				wm.error("Can't switch Mass Storage", http.responseText);
 			}
 			__applyState();
 		});
@@ -175,11 +178,11 @@ export function Msd() {
 	};
 
 	var __clickResetButton = function() {
-		wm.confirm("Are you sure you want to reset Mass Storage Drive?").then(function(ok) {
+		wm.confirm("Are you sure you want to reset Mass Storage?").then(function(ok) {
 			if (ok) {
 				tools.httpPost("/api/msd/reset", null, function(http) {
 					if (http.status !== 200) {
-						wm.error("MSD reset error:<br>", http.responseText);
+						wm.error("Mass Storage reset error", http.responseText);
 					}
 					__applyState();
 				});
@@ -206,7 +209,7 @@ export function Msd() {
 			$("msd-new-url").value = "";
 			let part = __state.storage.parts[$("msd-new-part-selector").value];
 			if (file.size > part.size) {
-				wm.error("New image is too big for the MSD partition.<br>Maximum:", tools.formatSize(part.size));
+				wm.error(`New image is too big for the Mass Storage partition.<br>Maximum: ${tools.formatSize(part.size)}`);
 				el_input.value = "";
 			}
 		}
diff --git a/web/share/js/kvm/recorder.js b/web/share/js/kvm/recorder.js
index 7ba0b3cb..f32b5a2e 100644
--- a/web/share/js/kvm/recorder.js
+++ b/web/share/js/kvm/recorder.js
@@ -215,7 +215,7 @@ export function Recorder() {
 					__events = events;
 					__events_time = events_time;
 				} catch (ex) {
-					wm.error(`Invalid script: ${ex}`);
+					wm.error("Invalid script", `${ex}`);
 				}
 
 				el_input.value = "";
@@ -285,7 +285,7 @@ export function Recorder() {
 						wm.error("Too many text for paste!");
 						__stopProcess();
 					} else if (http.status !== 200) {
-						wm.error("HID paste error:<br>", http.responseText);
+						wm.error("HID paste error", http.responseText);
 						__stopProcess();
 					} else if (http.status === 200) {
 						__play_timer = setTimeout(() => __runEvents(index + 1, time), 0);
@@ -296,7 +296,7 @@ export function Recorder() {
 			} else if (event.event_type === "atx_button") {
 				tools.httpPost("/api/atx/click", {"button": event.event.button}, function(http) {
 					if (http.status !== 200) {
-						wm.error("ATX error:<br>", http.responseText);
+						wm.error("ATX error", http.responseText);
 						__stopProcess();
 					} else if (http.status === 200) {
 						__play_timer = setTimeout(() => __runEvents(index + 1, time), 0);
@@ -315,7 +315,7 @@ export function Recorder() {
 				}
 				tools.httpPost(path, params, function(http) {
 					if (http.status !== 200) {
-						wm.error("GPIO error:<br>", http.responseText);
+						wm.error("GPIO error", http.responseText);
 						__stopProcess();
 					} else if (http.status === 200) {
 						__play_timer = setTimeout(() => __runEvents(index + 1, time), 0);
diff --git a/web/share/js/kvm/stream.js b/web/share/js/kvm/stream.js
index 1b93e7c4..f96f02d2 100644
--- a/web/share/js/kvm/stream.js
+++ b/web/share/js/kvm/stream.js
@@ -297,7 +297,7 @@ export function Streamer() {
 				__resetStream();
 				tools.httpPost("/api/streamer/reset", null, function(http) {
 					if (http.status !== 200) {
-						wm.error("Can't reset stream:<br>", http.responseText);
+						wm.error("Can't reset stream", http.responseText);
 					}
 				});
 			}
@@ -307,7 +307,7 @@ export function Streamer() {
 	var __sendParam = function(name, value) {
 		tools.httpPost("/api/streamer/set_params", {[name]: value}, function(http) {
 			if (http.status !== 200) {
-				wm.error("Can't configure stream:<br>", http.responseText);
+				wm.error("Can't configure stream", http.responseText);
 			}
 		});
 	};
diff --git a/web/share/js/login/main.js b/web/share/js/login/main.js
index 58e7c80d..c779a6d9 100644
--- a/web/share/js/login/main.js
+++ b/web/share/js/login/main.js
@@ -64,7 +64,7 @@ function __login() {
 				if (error === "ValidatorError") {
 					wm.error("Invalid characters in credentials").then(__tryAgain);
 				} else {
-					wm.error("Login error:<br>", http.responseText).then(__tryAgain);
+					wm.error("Login error", http.responseText).then(__tryAgain);
 				}
 			}
 		}, body, "application/x-www-form-urlencoded");
diff --git a/web/share/js/wm.js b/web/share/js/wm.js
index 41709dd2..1c1b67df 100644
--- a/web/share/js/wm.js
+++ b/web/share/js/wm.js
@@ -173,13 +173,13 @@ function __WindowManager() {
 
 				if (ex) {
 					tools.error("copyTextToClipboard(): Workaround failed:", ex);
-					wm.error("Can't copy text to the clipboard:<br>", ex);
+					self.error("Can't copy text to the clipboard", `${ex}`);
 				}
 			});
 		};
 		if (navigator.clipboard) {
 			navigator.clipboard.writeText(text).then(function() {
-				wm.info("The text has been copied to the clipboard");
+				self.info("The text has been copied to the clipboard");
 			}, function(ex) {
 				workaround(ex);
 			});
@@ -188,12 +188,22 @@ function __WindowManager() {
 		}
 	};
 
-	self.info = (...args) => __modalDialog("Info", args.join(" "), true, false);
-	self.error = (...args) => __modalDialog("Error", args.join(" "), true, false);
-	self.confirm = (...args) => __modalDialog("Question", args.join(" "), true, true);
-	self.modal = (header, text, ok, cancel) => __modalDialog(header, text, ok, cancel);
+	self.info = (html, ...args) => __modalCodeDialog("Info", html, args.join("\n"), true, false);
+	self.error = (html, ...args) => __modalCodeDialog("Error", html, args.join("\n"), true, false);
+	self.confirm = (html, ...args) => __modalCodeDialog("Question", html, args.join("\n"), true, true);
+	self.modal = (header, html, ok, cancel) => __modalDialog(header, html, ok, cancel);
 
-	var __modalDialog = function(header, text, ok, cancel, parent=null) {
+	var __modalCodeDialog = function(header, html, code, ok, cancel) {
+		let create_content = function(el_content) {
+			if (code) {
+				html += `<br><br><div class="code"><pre style="margin:0px">${tools.escape(code)}</pre></div>`;
+			}
+			el_content.innerHTML = html;
+		};
+		return __modalDialog(header, create_content, ok, cancel);
+	};
+
+	var __modalDialog = function(header, html, ok, cancel, parent=null) {
 		let el_active_menu = (document.activeElement && document.activeElement.closest(".menu"));
 
 		let el_modal = document.createElement("div");
@@ -207,7 +217,7 @@ function __WindowManager() {
 
 		let el_header = document.createElement("div");
 		el_header.className = "modal-header";
-		el_header.innerHTML = header;
+		el_header.innerText = header;
 		el_window.appendChild(el_header);
 
 		let el_content = document.createElement("div");
@@ -223,13 +233,13 @@ function __WindowManager() {
 		if (cancel) {
 			el_cancel_button = document.createElement("button");
 			el_cancel_button.className = "row100";
-			el_cancel_button.innerHTML = "Cancel";
+			el_cancel_button.innerText = "Cancel";
 			el_buttons.appendChild(el_cancel_button);
 		}
 		if (ok) {
 			el_ok_button = document.createElement("button");
 			el_ok_button.className = "row100";
-			el_ok_button.innerHTML = "OK";
+			el_ok_button.innerText = "OK";
 			el_buttons.appendChild(el_ok_button);
 		}
 		if (ok && cancel) {
@@ -276,11 +286,11 @@ function __WindowManager() {
 
 		__windows.push(el_modal);
 		(parent || document.fullscreenElement || document.body).appendChild(el_modal);
-		if (typeof text === "function") {
+		if (typeof html === "function") {
 			// Это должно быть здесь, потому что элемент должен иметь родителя чтобы существовать
-			text(el_content, el_ok_button);
+			html(el_content, el_ok_button);
 		} else {
-			el_content.innerHTML = text;
+			el_content.innerHTML = html;
 		}
 		__activateWindow(el_modal);