allow/denny list, darkmode switch

Author: pavelrevak

README.md

@@ -19,6 +19,7 @@ https://github.com/cortexm/ser2tcp
   - serial port send received data to all connected clients
 - non-blocking send with configurable timeout and buffer limit
 - serial signal control (RTS, DTR, CTS, DSR, RI, CD) via escape protocol or WebSocket JSON
+- IP filtering with allow/deny lists (CIDR notation supported)
 - built-in HTTP server with REST API for status monitoring
 - web interface for viewing configured ports and connections
 - web terminal clients (xterm.js VT100 terminal and raw colored view)
@@ -218,6 +219,33 @@ For `ssl` protocol, add `ssl` object with certificate paths:
 
 If `ca_certs` is specified, clients must provide a valid certificate signed by the CA.
 
+#### IP filtering
+
+Restrict client connections by IP address using `allow` and/or `deny` lists:
+
+```json
+{
+    "address": "0.0.0.0",
+    "port": 10001,
+    "protocol": "tcp",
+    "allow": ["192.168.1.0/24", "10.0.0.5"],
+    "deny": ["192.168.1.100"]
+}
+```
+
+| Parameter | Description |
+|-----------|-------------|
+| `allow` | List of allowed IP addresses/networks (CIDR notation supported) |
+| `deny` | List of denied IP addresses/networks (CIDR notation supported) |
+
+Filter logic:
+- **No config**: all IPs allowed
+- **Only `deny`**: all IPs allowed except those in deny list
+- **Only `allow`**: only IPs in allow list are allowed
+- **Both**: deny takes precedence, then allow list is checked
+
+Works on TCP, TELNET, SSL, WebSocket and HTTP servers. Not applicable to Unix socket (no IP addresses). Rejected connections are logged.
+
 ##### Creating self-signed certificates
 
 Generate CA and server certificate for testing:
@@ -315,6 +343,19 @@ HTTPS with SSL:
 }
 ```
 
+With IP filtering:
+
+```json
+{
+    "http": [{
+        "address": "0.0.0.0",
+        "port": 8080,
+        "allow": ["192.168.0.0/16"],
+        "deny": ["192.168.1.100"]
+    }]
+}
+```
+
 #### API endpoints
 
 | Method | Path | Auth | Description |

ser2tcp/html/app.js

@@ -6,6 +6,57 @@ const el = (tag, text, cls) => {
   return e;
 };
 
+// Theme switcher
+function applyTheme(theme) {
+  if (theme === 'auto') {
+    document.documentElement.removeAttribute('data-theme');
+  } else {
+    document.documentElement.setAttribute('data-theme', theme);
+  }
+  // Update icon visibility
+  ['light', 'dark', 'auto'].forEach(t => {
+    const icon = $('theme-icon-' + t);
+    if (icon) icon.classList.toggle('active', t === theme);
+  });
+  // Update dropdown active state
+  const dropdown = $('theme-dropdown');
+  if (dropdown) {
+    dropdown.querySelectorAll('button').forEach(btn => {
+      btn.classList.toggle('active', btn.dataset.theme === theme);
+    });
+  }
+}
+
+function initTheme() {
+  const saved = localStorage.getItem('ser2tcp_theme') || 'auto';
+  const btn = $('theme-btn');
+  const dropdown = $('theme-dropdown');
+  if (btn && dropdown) {
+    btn.onclick = e => {
+      e.stopPropagation();
+      dropdown.classList.toggle('open');
+    };
+    dropdown.querySelectorAll('button').forEach(b => {
+      b.onclick = () => {
+        const theme = b.dataset.theme;
+        localStorage.setItem('ser2tcp_theme', theme);
+        applyTheme(theme);
+        dropdown.classList.remove('open');
+      };
+    });
+    document.addEventListener('click', () => dropdown.classList.remove('open'));
+  }
+  applyTheme(saved);
+}
+
+// Apply theme immediately to avoid flash
+(function() {
+  const saved = localStorage.getItem('ser2tcp_theme');
+  if (saved && saved !== 'auto') {
+    document.documentElement.setAttribute('data-theme', saved);
+  }
+})();
+
 // Hash password with SHA-256 and random salt (same format as server)
 async function hashPassword(password) {
   const salt = Array.from(crypto.getRandomValues(new Uint8Array(16)))
@@ -118,7 +169,9 @@ function switchTab(tab, data) {
     t => t.classList.toggle('hidden', t.id !== 'tab-' + tab));
   if (tab === 'ports') loadPorts(data);
   else if (tab === 'users') loadUsers();
-  if (location.hash !== '#' + tab) history.pushState(null, '', '#' + tab);
+  const newPath = tab === 'ports' ? location.pathname : '#' + tab;
+  if (location.hash !== (tab === 'ports' ? '' : '#' + tab))
+    history.pushState(null, '', newPath);
 }
 
 // --- Ports ---
@@ -277,26 +330,19 @@ function renderPortCard(port, index) {
       const urlEl = el('div', wsUrl, 'port-config-detail');
       urlEl.style.cursor = 'pointer';
       urlEl.title = 'Click to copy';
-      urlEl.onclick = () => {
+      urlEl.onclick = e => {
+        e.stopPropagation();
         navigator.clipboard.writeText(wsUrl);
         urlEl.textContent = 'Copied!';
         setTimeout(() => { urlEl.textContent = wsUrl; }, 1000);
       };
       li.appendChild(urlEl);
       if (s.data !== false) {
-        const termLink = document.createElement('a');
-        termLink.href = '/xterm/' + s.endpoint;
-        termLink.className = 'detect-link';
-        termLink.textContent = 'Terminal';
-        termLink.target = '_blank';
         const linksDiv = el('div', null, 'ws-links');
-        linksDiv.appendChild(termLink);
-        const rawLink = document.createElement('a');
-        rawLink.href = '/raw/' + s.endpoint;
-        rawLink.className = 'detect-link';
-        rawLink.textContent = 'Raw';
-        rawLink.target = '_blank';
-        linksDiv.appendChild(rawLink);
+        linksDiv.innerHTML = '<a href="/xterm/' + s.endpoint
+          + '" class="detect-link" target="_blank" rel="noopener">Terminal</a>'
+          + '<a href="/raw/' + s.endpoint
+          + '" class="detect-link" target="_blank" rel="noopener">Raw</a>';
         li.appendChild(linksDiv);
       }
       if (s.data === false)
@@ -730,7 +776,8 @@ function renderServerBox(srv, index, total) {
   const box = el('div', null, 'server-box');
   box.dataset.serverIndex = index;
 
-  const removeBtn = el('button', '\u00d7', 'btn-remove');
+  const removeBtn = el('button', null, 'btn-remove');
+  removeBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14"/></svg>';
   removeBtn.disabled = total <= 1;
   removeBtn.onclick = () => removeServerBox(box);
   box.appendChild(removeBtn);
@@ -912,6 +959,29 @@ function renderServerBox(srv, index, total) {
   updateCtlVisibility();
   box.appendChild(ctlDiv);
 
+  // IP filter section
+  const ipDiv = el('div');
+  ipDiv.className = 'srv-ip-filter';
+  const ipAllowRow = el('div', null, 'field-row');
+  ipAllowRow.appendChild(el('label', 'Allow IPs:'));
+  const ipAllowInput = document.createElement('input');
+  ipAllowInput.type = 'text';
+  ipAllowInput.className = 'srv-allow';
+  ipAllowInput.placeholder = '192.168.1.0/24, 10.0.0.5';
+  ipAllowInput.value = (srv.allow || []).join(', ');
+  ipAllowRow.appendChild(ipAllowInput);
+  ipDiv.appendChild(ipAllowRow);
+  const ipDenyRow = el('div', null, 'field-row');
+  ipDenyRow.appendChild(el('label', 'Deny IPs:'));
+  const ipDenyInput = document.createElement('input');
+  ipDenyInput.type = 'text';
+  ipDenyInput.className = 'srv-deny';
+  ipDenyInput.placeholder = '192.168.1.100';
+  ipDenyInput.value = (srv.deny || []).join(', ');
+  ipDenyRow.appendChild(ipDenyInput);
+  ipDiv.appendChild(ipDenyRow);
+  box.appendChild(ipDiv);
+
   // Update visibility based on protocol
   const updateProtoFields = () => {
     const proto = protoSel.value;
@@ -925,6 +995,7 @@ function renderServerBox(srv, index, total) {
     addrLabel.textContent = isSocket ? 'Path:' : 'Address:';
     sslDiv.classList.toggle('hidden', !isSsl);
     ctlDiv.classList.toggle('hidden', isTelnet);
+    ipDiv.classList.toggle('hidden', isSocket);
     // Update control description
     ctlDesc.textContent = '';
     if (isWs) {
@@ -1095,6 +1166,17 @@ function collectConfig() {
       if (pollMs) ctl.poll_interval = pollMs / 1000;
       srv.control = ctl;
     }
+    // IP filter
+    if (proto !== 'socket') {
+      const allowStr = box.querySelector('.srv-allow').value.trim();
+      if (allowStr) {
+        srv.allow = allowStr.split(',').map(s => s.trim()).filter(s => s);
+      }
+      const denyStr = box.querySelector('.srv-deny').value.trim();
+      if (denyStr) {
+        srv.deny = denyStr.split(',').map(s => s.trim()).filter(s => s);
+      }
+    }
     config.servers.push(srv);
   });
 
@@ -1222,6 +1304,7 @@ async function addUser() {
 
 // --- Init ---
 function init() {
+  initTheme();
   $('login-btn').addEventListener('click', doLogin);
   $('login-pass').addEventListener('keydown',
     e => { if (e.key === 'Enter') doLogin(); });

ser2tcp/html/index.html

@@ -17,6 +17,24 @@
     </nav>
   </div>
   <div class="topbar-right">
+    <div class="theme-menu" id="theme-menu">
+      <button class="theme-btn" id="theme-btn" title="Theme">
+        <svg class="theme-icon" id="theme-icon-light" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+        </svg>
+        <svg class="theme-icon" id="theme-icon-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+        </svg>
+        <svg class="theme-icon" id="theme-icon-auto" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path d="M12 2a10 10 0 0 1 0 20" fill="none"/><path d="M12 2a10 10 0 0 0 0 20" fill="currentColor"/>
+        </svg>
+      </button>
+      <div class="theme-dropdown" id="theme-dropdown">
+        <button data-theme="auto" class="theme-opt-auto"><svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M12 2a10 10 0 0 1 0 20" fill="none"/><path d="M12 2a10 10 0 0 0 0 20" fill="currentColor"/></svg>Auto</button>
+        <button data-theme="light" class="theme-opt-light"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>Light</button>
+        <button data-theme="dark" class="theme-opt-dark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>Dark</button>
+      </div>
+    </div>
     <div class="user-info hidden" id="user-info">
       <span id="user-name"></span>
       <button id="logout-btn">Logout</button>

ser2tcp/html/style.css

@@ -1,4 +1,4 @@
-:root {
+:root, [data-theme="light"] {
   --bg: #f5f5f5;
   --bg-card: #fff;
   --bg-input: #fff;
@@ -29,8 +29,39 @@
   --toolbar-bg: #f0f0f0;
 }
 
+[data-theme="dark"] {
+  --bg: #1a1a1a;
+  --bg-card: #242424;
+  --bg-input: #1a1a1a;
+  --bg-input-focus: #111;
+  --text-input-focus: #eee;
+  --bg-server: #2c2c2c;
+  --border: #484848;
+  --border-light: #3a3a3a;
+  --text: #ddd;
+  --text-secondary: #eee;
+  --text-muted: #777;
+  --accent: #5aadff;
+  --accent-hover: #7dc0ff;
+  --danger: #f66;
+  --success: #5d5;
+  --shadow: rgba(0,0,0,0.3);
+  --edit-border: #5aadff;
+  --badge-bg: #333;
+  --badge-text: #aaa;
+  --nav-bg: transparent;
+  --dialog-bg: #2a2a2a;
+  --dialog-overlay: rgba(0,0,0,0.6);
+  --signal-off-bg: #333;
+  --signal-off-text: #666;
+  --control-border: #3a3a3a;
+  --input-disabled-bg: #222;
+  --input-disabled-text: #555;
+  --toolbar-bg: #242424;
+}
+
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([data-theme="light"]) {
     --bg: #1a1a1a;
     --bg-card: #242424;
     --bg-input: #1a1a1a;
@@ -108,6 +139,7 @@ input, select { padding: 0.4em 0.6em; border: 1px solid var(--border);
 input:focus, select:focus { outline: none; border-color: var(--accent);
   box-shadow: 0 0 0 2px rgba(74,158,255,0.2);
   background: var(--bg-input-focus); color: var(--text-input-focus); }
+input::placeholder { color: var(--text-muted); opacity: 0.6; }
 button { padding: 0.4em 1em; border: none; border-radius: 6px;
   cursor: pointer; color: #fff; font-size: 0.9em; }
 .btn-primary { background: var(--accent); }
@@ -132,6 +164,27 @@ button { padding: 0.4em 1em; border: none; border-radius: 6px;
 .dot-off { color: var(--text-muted); }
 .dot-err { color: var(--danger); }
 .toolbar { margin: 0.8em 0; padding: 0.6em 0; }
+.theme-menu { position: relative; margin-right: 0.8em; }
+.theme-btn { background: none; border: none; color: var(--text-secondary);
+  cursor: pointer; padding: 0.3em; display: flex; align-items: center; }
+.theme-btn:hover { color: var(--accent); }
+.theme-icon { width: 1.2em; height: 1.2em; display: none; }
+.theme-icon.active { display: block; }
+.theme-dropdown { position: absolute; top: 100%; right: 0; margin-top: 0.3em;
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 6px; box-shadow: 0 4px 12px var(--shadow);
+  display: none; min-width: 5em; z-index: 100; overflow: hidden; }
+.theme-dropdown.open { display: block; }
+.theme-dropdown button { display: flex; align-items: center; gap: 0.5em;
+  width: 100%; padding: 0.5em 0.8em; background: none; border: none;
+  text-align: left; cursor: pointer; color: var(--text); font-size: 0.85em; }
+.theme-dropdown button:hover { background: var(--bg-server); }
+.theme-dropdown button.active { font-weight: 600; }
+.theme-dropdown button svg { width: 1em; height: 1em; flex-shrink: 0; }
+.theme-opt-light { color: #d90 !important; }
+.theme-opt-dark { color: #68f !important; }
+.theme-dropdown button.active.theme-opt-light { color: #b70 !important; }
+.theme-dropdown button.active.theme-opt-dark { color: #46d !important; }
 .user-info { display: flex; align-items: center; gap: 0.8em;
   color: var(--text-secondary); font-size: 0.85em; }
 .user-info button { background: none; border: 1px solid var(--border);
@@ -166,9 +219,12 @@ button { padding: 0.4em 1em; border: none; border-radius: 6px;
   border-radius: 6px; border: 1px solid var(--control-border);
   position: relative; }
 .server-box .btn-remove { position: absolute; top: 0.5em; right: 0.5em;
-  background: none; color: var(--danger); font-size: 1.2em; padding: 0 0.4em;
-  border: none; }
-.server-box .btn-remove:disabled { color: var(--text-muted); cursor: default; }
+  background: none; color: var(--text-muted); padding: 0.2em;
+  border: none; display: flex; align-items: center; }
+.server-box .btn-remove:hover { color: var(--danger); }
+.server-box .btn-remove:disabled { color: var(--border); cursor: default; }
+.server-box .btn-remove:disabled:hover { color: var(--border); }
+.server-box .btn-remove svg { width: 1.1em; height: 1.1em; }
 .edit-actions { display: flex; gap: 0.5em; margin-top: 1em; }
 .edit-actions .spacer { flex: 1; }
 .btn-edit { position: absolute; top: 1em; right: 1em; background: none;
@@ -197,7 +253,9 @@ button { padding: 0.4em 1em; border: none; border-radius: 6px;
 .ctl-signal-label { min-width: auto !important; display: inline-flex;
   align-items: center; gap: 0.2em; font-size: 0.9em; }
 .srv-control-fields { margin-top: 0.5em; padding-top: 0.5em;
-  border-top: 1px dashed var(--control-border); }
+  border-top: 1px dashed var(--border); }
+.srv-ip-filter { margin-top: 0.5em; padding-top: 0.5em;
+  border-top: 1px dashed var(--border); }
 .ctl-poll-interval { max-width: 8em; }
 .signal-indicators { display: flex; gap: 0.3em; margin: 0.4em 0; }
 .signal-badge { display: inline-block; padding: 0.2em 0.5em; border-radius: 3px;