Added UI for unpairing individual clients

xanderfrangos · Jan 20, 2024 · b8f8b46 · b8f8b46
1 parent 2e7655b
commit b8f8b46
Showing 1 changed file with 48 additions and 2 deletions.
diff --git a/src_assets/common/assets/web/pin.html b/src_assets/common/assets/web/pin.html
@@ -8,7 +8,7 @@
 <body id="app">
   <Navbar></Navbar>
   <div id="content" class="container">
-    <h1 class="my-4">PIN Pairing</h1>
+    <h1 class="my-4 text-center">PIN Pairing</h1>
     <form action="" class="form d-flex flex-column align-items-center" id="form">
       <div class="card flex-column d-flex p-4 mb-4">
         <input type="number" pattern="\d*"  placeholder="PIN" id="pin-input" class="form-control mt-2" />
@@ -22,6 +22,19 @@ <h1 class="my-4">PIN Pairing</h1>
       </div>
       <div id="status"></div>
     </form>
+    <div id="client-management" class="m-auto mt-5" style="max-width: 900px;">
+      <div class="container">
+        <div class="d-flex justify-content-end align-items-center mb-2">
+          <h2 class="text-center me-auto">Paired Clients</h2>
+          <div id="client-refresh" class="btn btn-sm d-flex align-items-center me-1"><i class="fas fa-fw fa-refresh me-1"></i> Refresh</div>
+        </div>
+        <div id="apply-alert" class="alert alert-success d-flex align-items-center" style="display: none !important;">
+          <div class="me-2"><b>Success!</b> Click 'Apply' to restart Sunshine and apply changes. This will terminate any running sessions.</div>
+          <button class="btn btn-success ms-auto apply">Apply</button>
+        </div>
+        <ul id="client-list" class="list-group"></ul>
+      </div>
+    </div>
   </div>
 </body>
 
@@ -55,6 +68,39 @@ <h1 class="my-4">PIN Pairing</h1>
             "#status"
           ).innerHTML = `<div class="alert alert-danger" role="alert">Pairing Failed: Check if the PIN is typed correctly</div>`;
         }
+        refreshClients();
       });
   });
-</script>
+
+  const clientList = document.querySelector("#client-list");
+
+  function refreshClients() {
+    fetch("/api/clients/list")
+      .then((response) => response.json())
+      .then((response) => {
+        clientList.innerHTML = "";
+        if (response.status === 'true' && response.named_certs && response.named_certs.length) {
+          for (const named_cert of response.named_certs) {
+            clientList.innerHTML += `<div class="list-group-item d-flex"><div class="p-2 flex-grow-1">${named_cert.name != "" ? named_cert.name : "Unknown"}</div><div class="unpair p-2 ms-auto btn btn-danger" data-uniqueid="${named_cert.uniqueID}">Remove</div></div>`;
+          }
+        } else {
+          clientList.innerHTML = `<p class="p-2 text-center mt-2">There are no paired clients.</p>`;
+        }
+        for (const unpairOption of clientList.querySelectorAll(".unpair")) {
+          unpairOption.addEventListener("click", () => {
+            fetch("/api/clients/unpair-single", { method: "POST", body: JSON.stringify({ uniqueid: unpairOption.dataset.uniqueid }) }).then(() => {
+              document.querySelector("#apply-alert").style.display = "";
+              refreshClients();
+            });
+          });
+        }
+      });
+  }
+  refreshClients();
+
+  document.querySelector("#client-refresh").addEventListener("click", refreshClients);
+  document.querySelector("#apply-alert .apply").addEventListener("click", () => { 
+    document.querySelector("#apply-alert").style.display = "none!important";
+    fetch("/api/restart", { method: "POST" });
+  });
+</script>