pikvm/pikvm#616: secure text switch

2 files changed, 20 insertions, 3 deletions

diff --git a/web/share/js/kvm/hid.js b/web/share/js/kvm/hid.js
index ecf8d39f..1d7a4ff3 100644
--- a/web/share/js/kvm/hid.js
+++ b/web/share/js/kvm/hid.js
@@ -72,6 +72,14 @@ export function Hid(__getGeometry, __recorder) {
 		window.addEventListener("blur", __releaseAll);
 
 		tools.storage.bindSimpleSwitch($("hid-pak-ask-switch"), "hid.pak.ask", true);
+		tools.storage.bindSimpleSwitch($("hid-pak-secure-switch"), "hid.pak.secure", false, function(value) {
+			$("hid-pak-text").style.setProperty("-webkit-text-security", (value ? "disc" : "none"));
+		});
+		tools.feature.setEnabled($("hid-pak-secure"), (
+			tools.browser.is_chrome
+			|| tools.browser.is_safari
+			|| tools.browser.is_opera
+		));
 
 		$("hid-pak-keymap-selector").addEventListener("change", function() {
 			tools.storage.set("hid.pak.keymap", $("hid-pak-keymap-selector").value);
diff --git a/web/share/js/tools.js b/web/share/js/tools.js
index 31e8b9b4..59b8ba13 100644
--- a/web/share/js/tools.js
+++ b/web/share/js/tools.js
@@ -319,9 +319,18 @@ export var tools = new function() {
 			"getBool": (key, default_value) => !!parseInt(self.storage.get(key, (default_value ? "1" : "0"))),
 			"setBool": (key, value) => self.storage.set(key, (value ? "1" : "0")),
 
-			"bindSimpleSwitch": function(el, key, default_value) {
-				el.checked = self.storage.getBool(key, default_value);
-				self.el.setOnClick(el, () => self.storage.setBool(key, el.checked), false);
+			"bindSimpleSwitch": function(el, key, default_value, callback=null) {
+				let value = self.storage.getBool(key, default_value);
+				el.checked = value;
+				if (callback) {
+					callback(value);
+				}
+				self.el.setOnClick(el, function() {
+					if (callback) {
+						callback(el.checked);
+					}
+					self.storage.setBool(key, el.checked);
+				}, false);
 			},
 		};
 	};