From 7cdce566daa7fb2ca4325860e71883a8cb9465dd Mon Sep 17 00:00:00 2001
From: Nathan Woodburn <github@nathan.woodburn.au>
Date: Mon, 23 Mar 2026 18:54:26 +1100
Subject: [PATCH] feat: Add VPN status label

---
 templates/assets/css/index.css |  8 ++++++++
 templates/assets/js/index.js   | 27 +++++++++++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/templates/assets/css/index.css b/templates/assets/css/index.css
index 5593aa9..dad9aab 100644
--- a/templates/assets/css/index.css
+++ b/templates/assets/css/index.css
@@ -104,3 +104,11 @@ a:hover {
     background-color: #444;
     text-decoration: none;
 }
+
+.success {
+    color: #4CAF50;
+}
+
+.failure {
+    color: #f44336;
+}
\ No newline at end of file
diff --git a/templates/assets/js/index.js b/templates/assets/js/index.js
index d4c9c9b..ecf0ce9 100644
--- a/templates/assets/js/index.js
+++ b/templates/assets/js/index.js
@@ -64,4 +64,31 @@ document.addEventListener("DOMContentLoaded", () => {
                 console.error("Error fetching Links stats:", error);
             });
     }
+
+    // Check VPN status and display it
+    const vpnLink = document.getElementById("vpn");
+    if (vpnLink) {
+        fetch("https://vpn.woodburn.net.au/api/v1/status")
+            .then(response => response.json())
+            .then(data => {
+                if (!data.error) {
+                    // Create a new span element to display the VPN status
+                    const statusLabel = document.createElement("p");
+                    statusLabel.classList.add("service-note");
+                    statusLabel.textContent = data.connected ? "Connected" : "Disconnected";
+                    if (data.connected) {
+                        statusLabel.classList.add("success");
+                    } else {
+                        statusLabel.classList.add("failure");
+                    }
+                    // Append the status span to the VPN link
+                    vpnLink.appendChild(statusLabel);
+                } else {
+                    console.error("Error fetching VPN status:", data.error);
+                }
+            })
+            .catch(error => {
+                console.error("Error fetching VPN status:", error);
+            });
+    }
 });
\ No newline at end of file