Hide preshared keys unless hovered

3 files changed, 30 insertions, 1 deletions

diff --git a/src/styles.css b/src/styles.css
index cb9f506..72100ec 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -116,3 +116,19 @@ table td {
 fieldset {
   border: 1px solid #f0f0f0;
 }
+
+.hider .hoverunhide {
+  display: none;
+}
+
+.hider .hoverhide {
+  display: default;
+}
+
+.hider:hover .hoverunhide {
+  display: block;
+}
+
+.hider:hover .hoverhide {
+  display: none;
+}
diff --git a/src/vpn.html b/src/vpn.html
index b4b11d7..d1da4cd 100644
--- a/src/vpn.html
+++ b/src/vpn.html
@@ -144,6 +144,9 @@
             <output id="client-status">Warte auf Initialisierung...</output>
           </div>
 
+          <p>Information: Symmetrische Schlüssel werden nur angezeigt, solange
+          sich der Mauszeiger auf ihnen befindet.</p>
+
           <p>Information: Es ist zulässig (aber nicht sinnvoll), mehrere
           Clients mit dem gleichen Namen zu erstellen. Beim Löschen werden alle
           Clients mit passendem Namen entfernt, unabhängig davon, welcher
diff --git a/src/vpn.js b/src/vpn.js
index e7c080b..4e89161 100644
--- a/src/vpn.js
+++ b/src/vpn.js
@@ -62,8 +62,18 @@ async function loadClients() {
     let pubkey = document.createElement("td");
     pubkey.innerText = client.pubkey;
 
+    let pskSpan = document.createElement("span");
+    pskSpan.className = "hoverunhide";
+    pskSpan.innerText = client.psk;
+
+    let pskPlaceholder = document.createElement("span");
+    pskPlaceholder.className = "hoverhide";
+    pskPlaceholder.innerText = "(versteckt)";
+
     let psk = document.createElement("td");
-    psk.innerText = client.psk;
+    psk.className = "hider";
+    psk.appendChild(pskSpan);
+    psk.appendChild(pskPlaceholder);
 
     let allowedIps = document.createElement("td");
     allowedIps.innerText = client.allowed_ips;