Template
Add AWG/WireGuard connect-domain UI on server page and fix Traefik port for Dokploy.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
orohi
@@ -155,6 +155,25 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="connectDomainSection" class="hidden" style="margin-top: var(--space-md);">
|
||||
<div class="divider"></div>
|
||||
<div class="form-group" style="margin-bottom: 0;">
|
||||
<label class="form-label">{{ _('server_connect_domain') }}</label>
|
||||
<div class="flex gap-sm" style="flex-wrap: wrap; align-items: flex-end;">
|
||||
<div style="flex: 0 0 200px; min-width: 160px;">
|
||||
<select class="form-input" id="connectDomainProto" onchange="refreshConnectDomainFields()"></select>
|
||||
</div>
|
||||
<div style="flex: 1; min-width: 200px;">
|
||||
<input class="form-input" type="text" id="connectDomainInput" placeholder="vpn.example.com">
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary btn-sm" id="connectDomainSaveBtn" onclick="saveConnectDomain()">
|
||||
{{ _('save') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-hint" style="margin-top: var(--space-xs);">{{ _('server_connect_domain_awg_hint') }}</div>
|
||||
<div class="text-muted text-sm" id="connectDomainEffective" style="margin-top: var(--space-xs);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Installed Applications Section -->
|
||||
@@ -1132,6 +1151,7 @@
|
||||
const SERVER_ID = {{ server_id }};
|
||||
const ALL_SERVERS = {{ servers_for_move | tojson }};
|
||||
const SERVER_HOST = "{{ server.host }}";
|
||||
const SERVER_CONNECT_DOMAIN = {{ ((server.server_info or {}).get('connect_domain') or '') | tojson }};
|
||||
const SERVER_SSL_DOMAIN = {{ ((server.server_info or {}).get('ssl_domain') or '') | tojson }};
|
||||
const SERVER_SSL_EMAIL = {{ ((server.server_info or {}).get('ssl_email') or '') | tojson }};
|
||||
const MARKETPLACE_APPS = [
|
||||
@@ -1153,6 +1173,8 @@
|
||||
{ id: 'services', icon: 'wrench', titleKey: 'services' },
|
||||
{ id: 'web_servers', icon: 'globe', titleKey: 'web_servers' },
|
||||
];
|
||||
const WG_AWG_BASES = new Set(['awg', 'awg2', 'awg_legacy', 'wireguard']);
|
||||
let connectDomainEffective = {};
|
||||
let currentInstallProto = 'awg';
|
||||
let currentInstallAnother = false;
|
||||
let currentConfig = '';
|
||||
@@ -1212,6 +1234,94 @@
|
||||
return Object.keys(installedProtocols).some(key => protoBase(key) === base && installedProtocols[key]);
|
||||
}
|
||||
|
||||
function hasWgAwgInstalled() {
|
||||
return Object.entries(installedProtocols || {}).some(([key, installed]) => installed && WG_AWG_BASES.has(protoBase(key)));
|
||||
}
|
||||
|
||||
function listInstalledWgAwgProtocols() {
|
||||
const protos = new Set();
|
||||
Object.entries(installedProtocols || {}).forEach(([key, installed]) => {
|
||||
if (installed && WG_AWG_BASES.has(protoBase(key))) protos.add(key);
|
||||
});
|
||||
return Array.from(protos).sort((a, b) => {
|
||||
const ao = MARKETPLACE_APPS.findIndex(app => app.proto === protoBase(a));
|
||||
const bo = MARKETPLACE_APPS.findIndex(app => app.proto === protoBase(b));
|
||||
if (ao !== bo) return ao - bo;
|
||||
return protoInstance(a) - protoInstance(b);
|
||||
});
|
||||
}
|
||||
|
||||
function updateConnectDomainSection() {
|
||||
const section = document.getElementById('connectDomainSection');
|
||||
if (!section) return;
|
||||
const show = hasWgAwgInstalled();
|
||||
section.classList.toggle('hidden', !show);
|
||||
if (!show) return;
|
||||
const select = document.getElementById('connectDomainProto');
|
||||
if (!select) return;
|
||||
const prev = select.value;
|
||||
const installed = listInstalledWgAwgProtocols();
|
||||
select.innerHTML = `<option value="">${_('server_connect_domain_all')}</option>` +
|
||||
installed.map(p => `<option value="${p}">${getProtoTitle(p)}</option>`).join('');
|
||||
if (prev && [...select.options].some(opt => opt.value === prev)) {
|
||||
select.value = prev;
|
||||
}
|
||||
refreshConnectDomainFields();
|
||||
}
|
||||
|
||||
async function refreshConnectDomainFields() {
|
||||
const proto = document.getElementById('connectDomainProto')?.value || '';
|
||||
const input = document.getElementById('connectDomainInput');
|
||||
const eff = document.getElementById('connectDomainEffective');
|
||||
try {
|
||||
const query = proto ? `?protocol=${encodeURIComponent(proto)}` : '';
|
||||
const data = await apiCall(`/api/servers/${SERVER_ID}/connect-domain${query}`, 'GET');
|
||||
connectDomainEffective = data;
|
||||
if (input) {
|
||||
input.value = proto ? (data.protocol_connect_domain || '') : (data.connect_domain || '');
|
||||
}
|
||||
if (eff) {
|
||||
if (data.effective_host && data.effective_host !== data.ssh_host) {
|
||||
eff.textContent = `${_('server_connect_domain_current')}: ${data.effective_host} (${_('server_connect_domain_ssh')}: ${data.ssh_host})`;
|
||||
} else {
|
||||
eff.textContent = `${_('server_connect_domain_current')}: ${data.ssh_host || SERVER_HOST}`;
|
||||
}
|
||||
}
|
||||
Object.entries(currentProtocolStatus || {}).forEach(([p, info]) => {
|
||||
if (WG_AWG_BASES.has(protoBase(p)) && isAppInstalled(info)) {
|
||||
updateProtocolCard(p, info);
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
if (input && !proto) input.value = SERVER_CONNECT_DOMAIN || '';
|
||||
if (eff) eff.textContent = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function saveConnectDomain() {
|
||||
const btn = document.getElementById('connectDomainSaveBtn');
|
||||
const proto = document.getElementById('connectDomainProto')?.value || '';
|
||||
const domain = document.getElementById('connectDomainInput')?.value.trim() || '';
|
||||
if (btn) btn.disabled = true;
|
||||
try {
|
||||
await apiCall(`/api/servers/${SERVER_ID}/connect-domain`, 'POST', {
|
||||
connect_domain: domain,
|
||||
protocol: proto || null,
|
||||
});
|
||||
showToast(_('server_connect_domain_saved'), 'success');
|
||||
await refreshConnectDomainFields();
|
||||
Object.entries(currentProtocolStatus || {}).forEach(([p, info]) => {
|
||||
if (WG_AWG_BASES.has(protoBase(p)) && isAppInstalled(info)) {
|
||||
updateProtocolCard(p, info);
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
showToast(err.message, 'error');
|
||||
} finally {
|
||||
if (btn) btn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function switchCategory(cat) {
|
||||
if (cat === 'management') {
|
||||
openManagementModal();
|
||||
@@ -1370,6 +1480,7 @@
|
||||
if (empty) empty.classList.toggle('hidden', installedAppsLoading || installedCount > 0);
|
||||
const loading = document.getElementById('installedAppsLoading');
|
||||
if (loading) loading.classList.toggle('hidden', !installedAppsLoading);
|
||||
updateConnectDomainSection();
|
||||
}
|
||||
|
||||
function getProtoTitle(proto) {
|
||||
@@ -1672,6 +1783,12 @@
|
||||
grid = buildServiceInfoGrid(proto, info);
|
||||
} else if (info.port) {
|
||||
grid += `<div class="protocol-info-item"><span class="protocol-info-label">${_('port')}</span><span class="protocol-info-value">${info.port}/${(['xray', 'telemt', 'naiveproxy'].includes(protoBase(proto))) ? 'TCP' : 'UDP'}</span></div>`;
|
||||
if (WG_AWG_BASES.has(protoBase(proto))) {
|
||||
const endpoint = (connectDomainEffective.effective_host && connectDomainEffective.effective_host !== SERVER_HOST)
|
||||
? connectDomainEffective.effective_host
|
||||
: SERVER_HOST;
|
||||
grid += `<div class="protocol-info-item"><span class="protocol-info-label">${_('server_endpoint_label')}</span><span class="protocol-info-value">${endpoint}</span></div>`;
|
||||
}
|
||||
if (protoBase(proto) === 'hysteria' && info.domain) {
|
||||
grid += `<div class="protocol-info-item"><span class="protocol-info-label">${_('hysteria_domain')}</span><span class="protocol-info-value">${info.domain}</span></div>`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user