Add dynamic port status detection and improved port forwarding instructions
Agent-Logs-Url: https://github.com/naturallaw777/staging_alpha/sessions/cd52f6a2-250b-49e3-8558-aa2ae7512d1b Co-authored-by: naturallaw777 <99053422+naturallaw777@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
committed by
GitHub
GitHub
parent
0b122d8669
commit
df5ad3afe2
@@ -228,8 +228,7 @@ function buildTile(svc) {
|
||||
var ports = svc.port_requirements || [];
|
||||
var portsHtml = "";
|
||||
if (ports.length > 0) {
|
||||
var portLabels = ports.map(function(p) { return escHtml(p.port) + ' (' + escHtml(p.protocol) + ')'; });
|
||||
portsHtml = '<div class="tile-ports" title="Click to view required router ports"><span class="tile-ports-icon">🔌</span><span class="tile-ports-label">Ports: ' + portLabels.join(', ') + '</span></div>';
|
||||
portsHtml = '<div class="tile-ports" title="Click to view required router ports"><span class="tile-ports-icon">🔌</span><span class="tile-ports-label tile-ports-label--loading">Ports: ' + ports.length + ' required</span></div>';
|
||||
}
|
||||
|
||||
tile.innerHTML = infoBtn + '<img class="tile-icon" src="/static/icons/' + escHtml(svc.icon) + '.svg" alt="' + escHtml(svc.name) + '" onerror="this.style.display=\'none\';this.nextElementSibling.style.display=\'flex\'"><div class="tile-icon-fallback" style="display:none">?</div><div class="tile-name">' + escHtml(svc.name) + '</div><div class="tile-status"><span class="status-dot ' + sc + '"></span><span class="status-text">' + st + '</span></div>' + portsHtml;
|
||||
@@ -249,6 +248,40 @@ function buildTile(svc) {
|
||||
e.stopPropagation();
|
||||
openPortRequirementsModal(svc.name, ports, null);
|
||||
});
|
||||
|
||||
// Async: fetch port status and update badge summary
|
||||
if (ports.length > 0) {
|
||||
fetch("/api/ports/status", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ ports: ports }),
|
||||
})
|
||||
.then(function(r) { return r.json(); })
|
||||
.then(function(data) {
|
||||
var listeningCount = 0;
|
||||
(data.ports || []).forEach(function(p) {
|
||||
if (p.status === "listening") listeningCount++;
|
||||
});
|
||||
var total = ports.length;
|
||||
var labelEl = portsEl.querySelector(".tile-ports-label");
|
||||
if (labelEl) {
|
||||
labelEl.classList.remove("tile-ports-label--loading");
|
||||
if (listeningCount === total) {
|
||||
labelEl.className = "tile-ports-label tile-ports-all-ready";
|
||||
labelEl.textContent = "Ports: " + total + "/" + total + " ready ✓";
|
||||
} else if (listeningCount > 0) {
|
||||
labelEl.className = "tile-ports-label tile-ports-partial";
|
||||
labelEl.textContent = "Ports: " + listeningCount + "/" + total + " ready";
|
||||
} else {
|
||||
labelEl.className = "tile-ports-label tile-ports-none-ready";
|
||||
labelEl.textContent = "Ports: " + total + " required";
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(function() {
|
||||
// Leave badge as-is on error
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return tile;
|
||||
@@ -912,43 +945,119 @@ function closeDomainSetupModal() {
|
||||
function openPortRequirementsModal(featureName, ports, onContinue) {
|
||||
if (!$portReqModal || !$portReqBody) return;
|
||||
|
||||
var rows = ports.map(function(p) {
|
||||
return '<tr><td class="port-req-port">' + escHtml(p.port) + '</td>' +
|
||||
'<td class="port-req-proto">' + escHtml(p.protocol) + '</td>' +
|
||||
'<td class="port-req-desc">' + escHtml(p.description) + '</td></tr>';
|
||||
}).join("");
|
||||
|
||||
var continueBtn = onContinue
|
||||
? '<button class="btn btn-primary" id="port-req-continue-btn">I Understand — Continue</button>'
|
||||
: '';
|
||||
|
||||
// Show loading state while fetching port status
|
||||
$portReqBody.innerHTML =
|
||||
'<p class="port-req-intro">You have enabled <strong>' + escHtml(featureName) + '</strong>. ' +
|
||||
'For it to work with clients outside your local network you must open the following ports ' +
|
||||
'on your <strong>home router / WAN firewall</strong>:</p>' +
|
||||
'<table class="port-req-table">' +
|
||||
'<thead><tr><th>Port(s)</th><th>Protocol</th><th>Purpose</th></tr></thead>' +
|
||||
'<tbody>' + rows + '</tbody>' +
|
||||
'</table>' +
|
||||
'<p class="port-req-hint">ℹ Consult your router manual or search "<em>how to open ports on [router model]</em>" ' +
|
||||
'for instructions. Features like Element Video Calling will not work for remote users until these ports are open.</p>' +
|
||||
'<div class="domain-field-actions">' +
|
||||
'<button class="btn btn-close-modal" id="port-req-dismiss-btn">Dismiss</button>' +
|
||||
continueBtn +
|
||||
'</div>';
|
||||
|
||||
document.getElementById("port-req-dismiss-btn").addEventListener("click", function() {
|
||||
closePortRequirementsModal();
|
||||
});
|
||||
|
||||
if (onContinue) {
|
||||
document.getElementById("port-req-continue-btn").addEventListener("click", function() {
|
||||
closePortRequirementsModal();
|
||||
onContinue();
|
||||
});
|
||||
}
|
||||
'<p class="port-req-intro">Checking port status for <strong>' + escHtml(featureName) + '</strong>…</p>' +
|
||||
'<p class="port-req-hint">Detecting which ports are open on this machine…</p>';
|
||||
|
||||
$portReqModal.classList.add("open");
|
||||
|
||||
// Fetch live port status from local system commands (no external calls)
|
||||
fetch("/api/ports/status", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ ports: ports }),
|
||||
})
|
||||
.then(function(r) { return r.json(); })
|
||||
.then(function(data) {
|
||||
var internalIp = (data.internal_ip && data.internal_ip !== "unavailable")
|
||||
? data.internal_ip : null;
|
||||
var portStatuses = {};
|
||||
(data.ports || []).forEach(function(p) {
|
||||
portStatuses[p.port + "/" + p.protocol] = p.status;
|
||||
});
|
||||
|
||||
var rows = ports.map(function(p) {
|
||||
var key = p.port + "/" + p.protocol;
|
||||
var status = portStatuses[key] || "unknown";
|
||||
var statusHtml;
|
||||
if (status === "listening") {
|
||||
statusHtml = '<span class="port-status-listening" title="Service is running and firewall allows this port">🟢 Listening</span>';
|
||||
} else if (status === "firewall_open") {
|
||||
statusHtml = '<span class="port-status-open" title="Firewall allows this port but no service is bound yet">🟡 Open (idle)</span>';
|
||||
} else if (status === "closed") {
|
||||
statusHtml = '<span class="port-status-closed" title="Firewall blocks this port and/or nothing is listening">🔴 Closed</span>';
|
||||
} else {
|
||||
statusHtml = '<span class="port-status-unknown" title="Status could not be determined">⚪ Unknown</span>';
|
||||
}
|
||||
return '<tr>' +
|
||||
'<td class="port-req-port">' + escHtml(p.port) + '</td>' +
|
||||
'<td class="port-req-proto">' + escHtml(p.protocol) + '</td>' +
|
||||
'<td class="port-req-desc">' + escHtml(p.description) + '</td>' +
|
||||
'<td class="port-req-status">' + statusHtml + '</td>' +
|
||||
'</tr>';
|
||||
}).join("");
|
||||
|
||||
var ipLine = internalIp
|
||||
? '<p class="port-req-intro">Forward each port below <strong>to this machine\'s internal IP: <code class="port-req-internal-ip">' + escHtml(internalIp) + '</code></strong></p>'
|
||||
: '<p class="port-req-intro">Forward each port below to this machine\'s internal LAN IP in your router\'s port forwarding settings.</p>';
|
||||
|
||||
$portReqBody.innerHTML =
|
||||
'<p class="port-req-intro"><strong>Port Forwarding Required</strong></p>' +
|
||||
'<p class="port-req-intro">For <strong>' + escHtml(featureName) + '</strong> to work with clients outside your local network, ' +
|
||||
'you must configure <strong>port forwarding</strong> in your router\'s admin panel.</p>' +
|
||||
ipLine +
|
||||
'<table class="port-req-table">' +
|
||||
'<thead><tr><th>Port(s)</th><th>Protocol</th><th>Purpose</th><th>Status</th></tr></thead>' +
|
||||
'<tbody>' + rows + '</tbody>' +
|
||||
'</table>' +
|
||||
'<p class="port-req-hint"><strong>How to verify:</strong> Router-side forwarding cannot be checked from inside your network. ' +
|
||||
'To confirm ports are forwarded correctly, test from a device on a different network (e.g. a phone on mobile data) ' +
|
||||
'or check your router\'s port forwarding page.</p>' +
|
||||
'<p class="port-req-hint">ℹ Search "<em>how to set up port forwarding on [your router model]</em>" for step-by-step instructions.</p>' +
|
||||
'<div class="domain-field-actions">' +
|
||||
'<button class="btn btn-close-modal" id="port-req-dismiss-btn">Dismiss</button>' +
|
||||
continueBtn +
|
||||
'</div>';
|
||||
|
||||
document.getElementById("port-req-dismiss-btn").addEventListener("click", function() {
|
||||
closePortRequirementsModal();
|
||||
});
|
||||
|
||||
if (onContinue) {
|
||||
document.getElementById("port-req-continue-btn").addEventListener("click", function() {
|
||||
closePortRequirementsModal();
|
||||
onContinue();
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(function() {
|
||||
// Fallback: show static table without status column if fetch fails
|
||||
var rows = ports.map(function(p) {
|
||||
return '<tr><td class="port-req-port">' + escHtml(p.port) + '</td>' +
|
||||
'<td class="port-req-proto">' + escHtml(p.protocol) + '</td>' +
|
||||
'<td class="port-req-desc">' + escHtml(p.description) + '</td></tr>';
|
||||
}).join("");
|
||||
|
||||
$portReqBody.innerHTML =
|
||||
'<p class="port-req-intro"><strong>Port Forwarding Required</strong></p>' +
|
||||
'<p class="port-req-intro">For <strong>' + escHtml(featureName) + '</strong> to work with clients outside your local network, ' +
|
||||
'you must configure <strong>port forwarding</strong> in your router\'s admin panel and forward each port below to this machine\'s internal LAN IP.</p>' +
|
||||
'<table class="port-req-table">' +
|
||||
'<thead><tr><th>Port(s)</th><th>Protocol</th><th>Purpose</th></tr></thead>' +
|
||||
'<tbody>' + rows + '</tbody>' +
|
||||
'</table>' +
|
||||
'<p class="port-req-hint">ℹ Search "<em>how to set up port forwarding on [your router model]</em>" for step-by-step instructions.</p>' +
|
||||
'<div class="domain-field-actions">' +
|
||||
'<button class="btn btn-close-modal" id="port-req-dismiss-btn">Dismiss</button>' +
|
||||
continueBtn +
|
||||
'</div>';
|
||||
|
||||
document.getElementById("port-req-dismiss-btn").addEventListener("click", function() {
|
||||
closePortRequirementsModal();
|
||||
});
|
||||
|
||||
if (onContinue) {
|
||||
document.getElementById("port-req-continue-btn").addEventListener("click", function() {
|
||||
closePortRequirementsModal();
|
||||
onContinue();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closePortRequirementsModal() {
|
||||
|
||||
@@ -1390,3 +1390,57 @@ button.btn-reboot:hover:not(:disabled) {
|
||||
line-height: 1.5;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
/* ── Port status indicators ─────────────────────────────────────── */
|
||||
|
||||
.port-req-status {
|
||||
padding: 5px 10px;
|
||||
white-space: nowrap;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.port-status-listening {
|
||||
color: #a6e3a1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.port-status-open {
|
||||
color: #f9e2af;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.port-status-closed {
|
||||
color: #f38ba8;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.port-status-unknown {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* Internal IP highlight in port modal */
|
||||
.port-req-internal-ip {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
background: rgba(137, 180, 250, 0.15);
|
||||
color: var(--accent-color);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
/* Tile port badge status colours */
|
||||
.tile-ports-all-ready {
|
||||
color: #a6e3a1;
|
||||
}
|
||||
|
||||
.tile-ports-partial {
|
||||
color: #f9e2af;
|
||||
}
|
||||
|
||||
.tile-ports-none-ready {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.tile-ports-label--loading {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user