Template
Make Hysteria UDP port selectable when 443 is busy.
Show an inline port field on the stopped card, a dedicated install port, and clearer bind-error hints so admins can switch to 8998/8443 without guessing. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
orohi
+83
-17
@@ -574,7 +574,7 @@
|
||||
</div>
|
||||
|
||||
<div id="installForm">
|
||||
<div class="form-group">
|
||||
<div class="form-group" id="installPortGroup">
|
||||
<label class="form-label" id="installPortLabel">{{ _('port') }}</label>
|
||||
<input class="form-input" type="number" id="installPort" value="55424" min="1" max="65535">
|
||||
<div class="form-hint" id="installPortHint">{{ _('port_default_hint') }}</div>
|
||||
@@ -681,6 +681,11 @@
|
||||
|
||||
<div id="hysteriaOptions"
|
||||
style="display:none; padding: var(--space-md); background: rgba(0,0,0,0.03); border-radius: var(--radius-md); margin-bottom: var(--space-md);">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ _('port') }} (UDP) *</label>
|
||||
<input class="form-input" type="number" id="installHysteriaPort" value="8998" min="1" max="65535">
|
||||
<div class="form-hint">{{ _('hysteria_port_hint') }}</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ _('hysteria_domain') }}</label>
|
||||
<input class="form-input" type="text" id="installHysteriaDomain" placeholder="vpn.example.com" oninput="updateHysteriaDnsHint()">
|
||||
@@ -1632,15 +1637,16 @@
|
||||
}
|
||||
} else if (info.container_exists) {
|
||||
installedProtocols[proto] = true;
|
||||
const errText = (info.error || '').trim();
|
||||
const errText = String(info.error || '').trim();
|
||||
const portBusy = !!info.port_busy || /address already in use|UDP port \d+ already in use|already in use/i.test(errText);
|
||||
statusEl.innerHTML = errText
|
||||
? `<span class="badge badge-danger"><span class="badge-dot"></span> ${_('stop')}: ${escapeHtml(errText.slice(0, 80))}</span>`
|
||||
? `<span class="badge badge-danger" style="max-width:100%; white-space:normal; text-align:left; line-height:1.35;"><span class="badge-dot"></span> ${_('stop')}: ${escapeHtml(errText.slice(0, 120))}</span>`
|
||||
: `<span class="badge badge-danger"><span class="badge-dot"></span> ${_('stop')}</span>`;
|
||||
if (infoEl && infoGrid) {
|
||||
infoEl.classList.remove('hidden');
|
||||
let grid = '';
|
||||
if (info.port) {
|
||||
grid += `<div class="protocol-info-item"><span class="protocol-info-label">${_('port')}</span><span class="protocol-info-value">${info.port}</span></div>`;
|
||||
grid += `<div class="protocol-info-item"><span class="protocol-info-label">${_('port')}</span><span class="protocol-info-value">${info.port}/UDP</span></div>`;
|
||||
}
|
||||
if (info.container_status) {
|
||||
grid += `<div class="protocol-info-item"><span class="protocol-info-label">${_('container_status')}</span><span class="protocol-info-value">${escapeHtml(String(info.container_status))}</span></div>`;
|
||||
@@ -1651,6 +1657,26 @@
|
||||
if (errText) {
|
||||
grid += `<div class="protocol-info-item" style="grid-column:1/-1;"><span class="protocol-info-label">${_('error')}</span><span class="protocol-info-value" style="color:var(--danger); word-break:break-word;">${escapeHtml(errText)}</span></div>`;
|
||||
}
|
||||
// Inline port picker — always visible when Hysteria is stopped so admin can fix bind conflicts
|
||||
if (protoBase(proto) === 'hysteria') {
|
||||
const curPort = parseInt(info.port, 10) || 443;
|
||||
const suggest = (curPort === 443 || portBusy) ? 8998 : curPort;
|
||||
grid += `
|
||||
<div class="protocol-info-item" style="grid-column:1/-1; display:block; padding-top:8px;">
|
||||
<span class="protocol-info-label" style="display:block; margin-bottom:6px;">${_('hysteria_change_port')} (UDP)</span>
|
||||
<div style="display:flex; gap:8px; flex-wrap:wrap; align-items:center;">
|
||||
<input class="form-input" type="number" id="hysteriaInlinePort-${protoDomKey(proto)}"
|
||||
value="${suggest}" min="1" max="65535" style="width:120px; flex:0 0 auto;">
|
||||
<button class="btn btn-primary btn-sm" type="button"
|
||||
onclick="applyHysteriaPort('${proto}', document.getElementById('hysteriaInlinePort-${protoDomKey(proto)}').value)">
|
||||
${_('save')} & ${_('start_btn')}
|
||||
</button>
|
||||
<button class="btn btn-secondary btn-sm" type="button" onclick="openHysteriaSettings('${proto}')">${_('hysteria_settings_title')}</button>
|
||||
</div>
|
||||
<div class="form-hint" style="margin-top:6px;">${_('hysteria_port_change_hint')}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
infoGrid.innerHTML = grid;
|
||||
}
|
||||
if (isService) {
|
||||
@@ -1965,6 +1991,7 @@
|
||||
const portInput = document.getElementById('installPort');
|
||||
const portLabel = document.getElementById('installPortLabel');
|
||||
const portHint = document.getElementById('installPortHint');
|
||||
const portGroup = document.getElementById('installPortGroup');
|
||||
const telemtOpts = document.getElementById('telemtOptions');
|
||||
const socks5Opts = document.getElementById('socks5Options');
|
||||
const adguardOpts = document.getElementById('adguardOptions');
|
||||
@@ -1976,6 +2003,7 @@
|
||||
adguardOpts.style.display = 'none';
|
||||
nginxOpts.style.display = 'none';
|
||||
hysteriaOpts.style.display = 'none';
|
||||
if (portGroup) portGroup.style.display = '';
|
||||
|
||||
if (base === 'dns') {
|
||||
portLabel.textContent = _('port') + ' (Internal)';
|
||||
@@ -2013,11 +2041,17 @@
|
||||
nginxOpts.style.display = 'block';
|
||||
updateNginxDnsHint();
|
||||
} else if (base === 'hysteria') {
|
||||
portLabel.textContent = _('port') + ' (UDP)';
|
||||
portInput.value = currentInstallAnother ? nextSuggestedPort(currentInstallProto, 8998) : '8998';
|
||||
// Port is chosen inside hysteriaOptions (dedicated UDP field)
|
||||
if (portGroup) portGroup.style.display = 'none';
|
||||
const suggested = currentInstallAnother ? nextSuggestedPort(currentInstallProto, 8998) : '8998';
|
||||
portInput.value = suggested;
|
||||
portInput.disabled = false;
|
||||
portHint.textContent = currentInstallAnother ? _('port_next_instance_hint') : _('hysteria_port_hint');
|
||||
hysteriaOpts.style.display = 'block';
|
||||
const hyPort = document.getElementById('installHysteriaPort');
|
||||
if (hyPort) {
|
||||
hyPort.value = suggested;
|
||||
hyPort.oninput = () => { portInput.value = hyPort.value; };
|
||||
}
|
||||
updateHysteriaDnsHint();
|
||||
} else {
|
||||
portLabel.textContent = _('port') + ' (UDP)';
|
||||
@@ -2086,6 +2120,10 @@
|
||||
params.nginx_domain = document.getElementById('installNginxDomain').value.trim();
|
||||
params.nginx_email = document.getElementById('installNginxEmail').value.trim();
|
||||
} else if (protoBase(currentInstallProto) === 'hysteria') {
|
||||
const hyPortEl = document.getElementById('installHysteriaPort');
|
||||
if (hyPortEl && hyPortEl.value) {
|
||||
params.port = hyPortEl.value;
|
||||
}
|
||||
params.hysteria_domain = document.getElementById('installHysteriaDomain').value.trim();
|
||||
params.hysteria_email = document.getElementById('installHysteriaEmail').value.trim();
|
||||
}
|
||||
@@ -2262,22 +2300,50 @@
|
||||
}
|
||||
|
||||
// ========== Hysteria Settings (port) ==========
|
||||
async function openHysteriaSettings(proto = 'hysteria') {
|
||||
async function applyHysteriaPort(proto, portValue) {
|
||||
const port = parseInt(portValue, 10);
|
||||
if (!port || port < 1 || port > 65535) {
|
||||
showToast(_('error') + ': invalid port', 'error');
|
||||
return;
|
||||
}
|
||||
if (port === 80) {
|
||||
showToast(_('error') + ': port 80 reserved', 'error');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const data = await apiCall(`/api/servers/${SERVER_ID}/hysteria/settings?protocol=${encodeURIComponent(proto)}`);
|
||||
document.getElementById('hysteriaSetProto').value = proto;
|
||||
document.getElementById('hysteriaSettingsTitle').textContent =
|
||||
`${_('hysteria_settings_title')} — ${getProtoTitle(proto)}`;
|
||||
document.getElementById('hysteriaSetDomain').value = data.domain || '';
|
||||
// Prefer live/status port, then settings, then 8998
|
||||
const livePort = (currentProtocolStatus[proto] || {}).port;
|
||||
document.getElementById('hysteriaSetPort').value = livePort || data.port || 8998;
|
||||
openModal('hysteriaSettingsModal');
|
||||
showToast(_('saving') || 'Saving...', 'info');
|
||||
const res = await apiCall(`/api/servers/${SERVER_ID}/hysteria/settings`, 'POST', {
|
||||
protocol: proto || 'hysteria', port,
|
||||
});
|
||||
showToast(res.message || _('hysteria_settings_saved'), 'success');
|
||||
setTimeout(() => checkServer(), 800);
|
||||
} catch (err) {
|
||||
showToast(_('error') + ': ' + err.message, 'error');
|
||||
// Still open settings so admin can try another port
|
||||
openHysteriaSettings(proto);
|
||||
}
|
||||
}
|
||||
|
||||
async function openHysteriaSettings(proto = 'hysteria') {
|
||||
const live = currentProtocolStatus[proto] || {};
|
||||
const livePort = live.port || 443;
|
||||
const suggest = (parseInt(livePort, 10) === 443) ? 8998 : (livePort || 8998);
|
||||
document.getElementById('hysteriaSetProto').value = proto;
|
||||
document.getElementById('hysteriaSettingsTitle').textContent =
|
||||
`${_('hysteria_settings_title')} — ${getProtoTitle(proto)}`;
|
||||
document.getElementById('hysteriaSetDomain').value = live.domain || '';
|
||||
document.getElementById('hysteriaSetPort').value = suggest;
|
||||
openModal('hysteriaSettingsModal');
|
||||
// Enrich from server when possible (don't block UI if SSH is slow/fails)
|
||||
try {
|
||||
const data = await apiCall(`/api/servers/${SERVER_ID}/hysteria/settings?protocol=${encodeURIComponent(proto)}`);
|
||||
if (data.domain) document.getElementById('hysteriaSetDomain').value = data.domain;
|
||||
const p = parseInt(data.port, 10);
|
||||
if (p && p !== 443) document.getElementById('hysteriaSetPort').value = p;
|
||||
else if (p === 443) document.getElementById('hysteriaSetPort').value = 8998;
|
||||
} catch (_) { /* modal already open with local values */ }
|
||||
}
|
||||
|
||||
async function saveHysteriaSettings() {
|
||||
const btn = document.getElementById('hysteriaSaveBtn');
|
||||
const text = document.getElementById('hysteriaSaveBtnText');
|
||||
|
||||
Reference in New Issue
Block a user