Add basic login and clean up config

2 files changed, 88 insertions, 3 deletions

diff --git a/static/css/styles.css b/static/css/styles.css
index 9c26cab..af767a7 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -37,13 +37,27 @@ html {
   .connection.active {
     border-color: var(--light-green);
   }
+
+  .login__form input[type=submit] {
+    color: var(--light-green);
+  }
+}
+
+/* Handle logout on small devices */
+@media (max-width: 600px) {
+  .header__logout {
+    position: inherit !important;
+  }
+  .header__logout input[type=submit] {
+    width: 100% !important;
+  }
 }
 
 body {
   font-family: "PT Sans", "Kohinoor Bangla", sans-serif;
   max-width: 1024px;
   min-width: 375px;
-  margin: 0 auto;
+  margin: 0 2rem;
   float: none;
   font-size: 18px;
 }
@@ -59,8 +73,19 @@ header {
   }
 }
 
-main {
-  margin: 32px;
+.header__logout {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+}
+
+.header__logout input[type=submit] {
+  border: 1px solid;
+  padding: 1rem;
+  color: var(--dark-red);
+  background-color: inherit;
+  font-family: monospace;
+  margin-top: 1rem;
 }
 
 .status {
@@ -115,6 +140,39 @@ main {
   border-color: var(--dark-green);
 }
 
+.login {
+  font-family: monospace;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.login__container {
+  min-width: 280px;
+}
+
+.login__form {
+  display: grid;
+  font-size: 14px;
+  margin-top: 2rem;
+}
+
+.login__form input[type=password] {
+  border: 1px solid;
+  padding: 1rem;
+  font-family: monospace;
+  background-color: inherit;
+}
+
+.login__form input[type=submit] {
+  border: 1px solid;
+  padding: 1rem;
+  color: var(--dark-green);
+  background-color: inherit;
+  font-family: monospace;
+  margin-top: 1rem;
+}
+
 footer {
   margin: 32px;
 }
diff --git a/static/js/app.js b/static/js/app.js
index db8ed8a..dd2aa75 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -112,6 +112,8 @@ const ConnectionManager = {
 
 // Status management
 const StatusManager = {
+    intervalId: null,
+
     // Load and display WireGuard status
     async loadStatus() {
         try {
@@ -126,10 +128,35 @@ const StatusManager = {
             Utils.renderError(App.elements.statusArea, error.message);
         }
     },
+
+    startAutoRefresh() {
+        // Clear any existing interval first
+        this.stopAutoRefresh();
+        // Start new interval
+        this.intervalId = setInterval(() => this.loadStatus(), 5000);
+    },
+
+    stopAutoRefresh() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+    }
 };
 
 // Initialize the application
 document.addEventListener('DOMContentLoaded', () => {
     StatusManager.loadStatus();
     ConnectionManager.loadConnections();
+    StatusManager.startAutoRefresh();
+});
+
+// Pause when tab is hidden, resume when visible
+document.addEventListener('visibilitychange', () => {
+    if (document.hidden) {
+        StatusManager.stopAutoRefresh();
+    } else {
+        StatusManager.loadStatus(); // Immediate refresh when back
+        StatusManager.startAutoRefresh();
+    }
 });