test2/Amnezia-Web-Panel-main
Template
1
2
Fork 1
Code Issues Pull Requests Packages Projects Releases 18 Wiki Activity

v1.7.0: pick server first, then protocol in create flows.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
orohi
2026-07-26 09:00:09 +03:00
co-authored by Cursor
parent 64aa1850a0
commit a9a0eea61d
7 changed files with 266 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/invites.html
+113 -29
View File
@@ -127,17 +127,22 @@
</div>
<div class="form-group">
<label class="form-label">{{ _('server_label') }}</label>
<select class="form-select" id="inviteServer" onchange="onInviteServerChange()">
{% if xui_configured %}
<option value="xui">3x-ui</option>
{% endif %}
{% for s in servers %}
<option value="{{ loop.index0 }}">{{ s.name or s.host }} ({{ s.host }})</option>
{% endfor %}
</select>
<div class="form-hint">{{ _('server_then_protocol_hint') }}</div>
</div>
<div class="form-group" id="inviteProtoGroup">
<label class="form-label">{{ _('protocol_label') }}</label>
<select class="form-select" id="inviteProtocol" onchange="updateInviteProtoFields()">
<option value="xui">3x-ui VLESS</option>
{% for s in servers %}
{% set server_idx = loop.index0 %}
{% for key, info in (s.protocols or {}).items() %}
{% if info.installed and key.split('__')[0] in ['awg','awg2','awg_legacy','xray','wireguard','telemt'] %}
<option value="{{ key }}|{{ server_idx }}">{{ s.name or s.host }} — {{ key }}</option>
{% endif %}
{% endfor %}
{% endfor %}
<!-- filled by JS from selected server -->
</select>
</div>
@@ -187,9 +192,28 @@
<script>
const invitesData = {{ invites | tojson }};
const serversData = {{ servers | tojson }};
const xuiConfigured = {{ 'true' if xui_configured else 'false' }};
const xuiDefaultInbound = {{ xui_default_inbound | int }};
const xuiDefaultPanelId = {{ (xui_default_panel_id or '') | tojson }};
const VPN_PROTO_ORDER = ['awg2', 'awg', 'awg_legacy', 'wireguard', 'xray', 'telemt'];
const PROTO_TITLES = {
awg2: 'AmneziaWG 2.0',
awg: 'AmneziaWG',
awg_legacy: 'AWG Legacy',
wireguard: 'WireGuard',
xray: 'Xray (VLESS-Reality)',
telemt: 'Telemt',
xui: '3x-ui VLESS',
};
function protoTitle(key) {
const raw = String(key || '');
const base = raw.split('__')[0];
const title = PROTO_TITLES[base] || base.toUpperCase();
const m = raw.match(/__(\d+)$/);
return m ? `${title} #${m[1]}` : title;
}
function inviteUrl(token) {
return `${window.location.origin}/invite/${token}`;
@@ -200,6 +224,57 @@
showToast(_('copied'), 'success');
}
function fillInviteProtocols(preferProtocol) {
const serverVal = document.getElementById('inviteServer').value;
const sel = document.getElementById('inviteProtocol');
sel.innerHTML = '';
if (serverVal === 'xui') {
const opt = document.createElement('option');
opt.value = 'xui';
opt.textContent = PROTO_TITLES.xui;
sel.appendChild(opt);
updateInviteProtoFields();
return;
}
const server = serversData[parseInt(serverVal, 10)];
const protocols = (server && server.protocols) || {};
const installed = Object.keys(protocols).filter(k => {
const info = protocols[k] || {};
if (!info.installed) return false;
return VPN_PROTO_ORDER.includes(k.split('__')[0]);
});
installed.sort((a, b) => {
const ia = VPN_PROTO_ORDER.indexOf(a.split('__')[0]);
const ib = VPN_PROTO_ORDER.indexOf(b.split('__')[0]);
return (ia < 0 ? 99 : ia) - (ib < 0 ? 99 : ib) || a.localeCompare(b);
});
if (!installed.length) {
const opt = document.createElement('option');
opt.value = '';
opt.textContent = _('no_protocols');
opt.disabled = true;
sel.appendChild(opt);
updateInviteProtoFields();
return;
}
installed.forEach(key => {
const opt = document.createElement('option');
opt.value = key;
opt.textContent = protoTitle(key);
if (preferProtocol && preferProtocol === key) opt.selected = true;
sel.appendChild(opt);
});
updateInviteProtoFields();
}
function onInviteServerChange() {
fillInviteProtocols();
}
function updateInviteProtoFields() {
const v = document.getElementById('inviteProtocol').value;
document.getElementById('inviteInboundGroup').style.display = (v === 'xui') ? '' : 'none';
@@ -237,25 +312,26 @@
}
}
function parseProtocolValue() {
const raw = document.getElementById('inviteProtocol').value;
if (raw === 'xui') return { protocol: 'xui', server_id: 0 };
if (raw.includes('|')) {
const [protocol, sid] = raw.split('|');
return { protocol, server_id: parseInt(sid || '0') };
function parseInviteSelection() {
const serverVal = document.getElementById('inviteServer').value;
const protocol = document.getElementById('inviteProtocol').value;
if (serverVal === 'xui' || protocol === 'xui') {
return { protocol: 'xui', server_id: 0 };
}
return { protocol: raw, server_id: 0 };
return { protocol, server_id: parseInt(serverVal || '0', 10) || 0 };
}
function setProtocolSelect(protocol, serverId) {
const sel = document.getElementById('inviteProtocol');
if (protocol === 'xui') sel.value = 'xui';
else {
const want = `${protocol}|${serverId || 0}`;
if ([...sel.options].some(o => o.value === want)) sel.value = want;
else sel.value = 'xui';
function setInviteSelection(protocol, serverId) {
const serverSel = document.getElementById('inviteServer');
if (protocol === 'xui') {
if ([...serverSel.options].some(o => o.value === 'xui')) serverSel.value = 'xui';
fillInviteProtocols('xui');
return;
}
updateInviteProtoFields();
const sid = String(serverId || 0);
if ([...serverSel.options].some(o => o.value === sid)) serverSel.value = sid;
else if (serverSel.options.length) serverSel.selectedIndex = xuiConfigured ? 1 : 0;
fillInviteProtocols(protocol);
}
function openCreateInvite() {
@@ -269,12 +345,17 @@
document.getElementById('inviteNote').value = '';
document.getElementById('inviteClearPwdWrap').style.display = 'none';
document.getElementById('inviteResetUsedWrap').style.display = 'none';
setProtocolSelect('xui', 0);
const serverSel = document.getElementById('inviteServer');
if (xuiConfigured && [...serverSel.options].some(o => o.value === 'xui')) serverSel.value = 'xui';
else if (serverSel.options.length) serverSel.selectedIndex = 0;
fillInviteProtocols();
if (xuiDefaultPanelId) {
const p = document.getElementById('inviteXuiPanel');
if (p && [...p.options].some(o => o.value === xuiDefaultPanelId)) p.value = xuiDefaultPanelId;
}
loadInviteInbounds(xuiDefaultInbound);
if (document.getElementById('inviteProtocol').value === 'xui') {
loadInviteInbounds(xuiDefaultInbound);
}
openModal('inviteModal');
}
@@ -293,12 +374,14 @@
document.getElementById('inviteClearPassword').checked = false;
document.getElementById('inviteResetUsedWrap').style.display = 'block';
document.getElementById('inviteResetUsed').checked = false;
setProtocolSelect(inv.protocol || 'xui', inv.server_id || 0);
setInviteSelection(inv.protocol || 'xui', inv.server_id || 0);
const panelSel = document.getElementById('inviteXuiPanel');
if (panelSel && inv.xui_panel_id && [...panelSel.options].some(o => o.value === inv.xui_panel_id)) {
panelSel.value = inv.xui_panel_id;
}
loadInviteInbounds(inv.xui_inbound_id || xuiDefaultInbound);
if ((inv.protocol || '') === 'xui') {
loadInviteInbounds(inv.xui_inbound_id || xuiDefaultInbound);
}
openModal('inviteModal');
}
@@ -309,7 +392,8 @@
spinner.classList.remove('hidden');
try {
const editId = document.getElementById('inviteEditId').value;
const proto = parseProtocolValue();
const proto = parseInviteSelection();
if (!proto.protocol) throw new Error(_('no_protocols'));
const inbound = parseInt(document.getElementById('inviteInboundId').value || '0');
if (proto.protocol === 'xui' && !inbound) throw new Error(_('invite_inbound_required'));
templates/settings.html
+87 -18
View File
@@ -110,21 +110,26 @@
<div id="guestCreateFields"
style="{% if not settings.guest.allow_create %}display:none;{% endif %} background: var(--bg-primary); padding: var(--space-md); border-radius: var(--radius-md);">
<div class="form-group">
<label class="form-label">{{ _('protocol_label') }}</label>
<select class="form-select" id="guest_create_protocol" onchange="updateGuestCreateFields()">
<option value="xui" {% if settings.guest.create_protocol == 'xui' %}selected{% endif %}>3x-ui VLESS</option>
{% for s in servers %}
{% set server_idx = loop.index0 %}
{% for key, info in (s.protocols or {}).items() %}
{% if info.installed and key.split('__')[0] in ['awg','awg2','awg_legacy','xray','wireguard','telemt'] %}
<option value="{{ key }}|{{ server_idx }}"
{% if settings.guest.create_protocol == key and settings.guest.create_server_id == server_idx %}selected{% endif %}>
{{ s.name or s.host }} — {{ key }}
</option>
<label class="form-label">{{ _('server_label') }}</label>
<select class="form-select" id="guest_create_server" onchange="fillGuestProtocols()">
{% if xui_servers %}
<option value="xui" {% if settings.guest.create_protocol == 'xui' %}selected{% endif %}>3x-ui</option>
{% endif %}
{% endfor %}
{% for s in servers %}
<option value="{{ loop.index0 }}"
{% if settings.guest.create_protocol != 'xui' and settings.guest.create_server_id == loop.index0 %}selected{% endif %}>
{{ s.name or s.host }} ({{ s.host }})
</option>
{% endfor %}
</select>
<div class="form-hint">{{ _('server_then_protocol_hint') }}</div>
</div>
<div class="form-group">
<label class="form-label">{{ _('protocol_label') }}</label>
<select class="form-select" id="guest_create_protocol" onchange="updateGuestCreateFields()">
<!-- filled by JS -->
</select>
<input type="hidden" id="guest_create_protocol_pref" value="{{ settings.guest.create_protocol or '' }}">
</div>
<div class="form-group" id="guestInboundGroup" style="{% if settings.guest.create_protocol != 'xui' %}display:none;{% endif %}">
<label class="form-label">{{ _('xui_server_select_label') }}</label>
@@ -1275,13 +1280,14 @@
let createProtocol = 'xui';
let createServerId = 0;
const guestProtoRaw = document.getElementById('guest_create_protocol').value;
if (guestProtoRaw === 'xui') {
const guestServerVal = document.getElementById('guest_create_server')?.value || 'xui';
const guestProtoVal = document.getElementById('guest_create_protocol')?.value || '';
if (guestServerVal === 'xui' || guestProtoVal === 'xui') {
createProtocol = 'xui';
} else if (guestProtoRaw.includes('|')) {
const parts = guestProtoRaw.split('|');
createProtocol = parts[0];
createServerId = parseInt(parts[1] || '0');
createServerId = 0;
} else {
createProtocol = guestProtoVal;
createServerId = parseInt(guestServerVal || '0', 10) || 0;
}
const guest = {
@@ -1314,6 +1320,68 @@
}
}
const guestServersData = {{ servers | default([]) | tojson }};
const VPN_PROTO_ORDER = ['awg2', 'awg', 'awg_legacy', 'wireguard', 'xray', 'telemt'];
const PROTO_TITLES = {
awg2: 'AmneziaWG 2.0',
awg: 'AmneziaWG',
awg_legacy: 'AWG Legacy',
wireguard: 'WireGuard',
xray: 'Xray (VLESS-Reality)',
telemt: 'Telemt',
xui: '3x-ui VLESS',
};
function protoTitle(key) {
const raw = String(key || '');
const base = raw.split('__')[0];
const title = PROTO_TITLES[base] || base.toUpperCase();
const m = raw.match(/__(\d+)$/);
return m ? `${title} #${m[1]}` : title;
}
function fillGuestProtocols() {
const serverSel = document.getElementById('guest_create_server');
const protoSel = document.getElementById('guest_create_protocol');
if (!serverSel || !protoSel) return;
const prefer = document.getElementById('guest_create_protocol_pref')?.value || protoSel.value || '';
const serverVal = serverSel.value;
protoSel.innerHTML = '';
if (serverVal === 'xui') {
const opt = document.createElement('option');
opt.value = 'xui';
opt.textContent = PROTO_TITLES.xui;
protoSel.appendChild(opt);
updateGuestCreateFields();
return;
}
const server = guestServersData[parseInt(serverVal, 10)];
const protocols = (server && server.protocols) || {};
const installed = Object.keys(protocols).filter(k => {
const info = protocols[k] || {};
return !!info.installed && VPN_PROTO_ORDER.includes(k.split('__')[0]);
}).sort((a, b) => {
const ia = VPN_PROTO_ORDER.indexOf(a.split('__')[0]);
const ib = VPN_PROTO_ORDER.indexOf(b.split('__')[0]);
return (ia < 0 ? 99 : ia) - (ib < 0 ? 99 : ib) || a.localeCompare(b);
});
if (!installed.length) {
const opt = document.createElement('option');
opt.value = '';
opt.disabled = true;
opt.textContent = _('no_protocols');
protoSel.appendChild(opt);
} else {
installed.forEach(key => {
const opt = document.createElement('option');
opt.value = key;
opt.textContent = protoTitle(key);
if (prefer && prefer === key) opt.selected = true;
protoSel.appendChild(opt);
});
}
updateGuestCreateFields();
}
function updateGuestCreateFields() {
const v = document.getElementById('guest_create_protocol')?.value;
const group = document.getElementById('guestInboundGroup');
@@ -1321,6 +1389,7 @@
if (v === 'xui') loadGuestInbounds();
}
fillGuestProtocols();
if (document.getElementById('guest_create_protocol')?.value === 'xui') {
loadGuestInbounds();
}
templates/users.html
+58 -20
View File
@@ -143,9 +143,10 @@
<select class="form-select" id="newUserServer">
<option value="">{{ _('no_create_conn') }}</option>
{% for s in servers %}
<option value="{{ loop.index0 }}">{{ s.name }} ({{ s.host }})</option>
<option value="{{ loop.index0 }}">{{ s.name or s.host }} ({{ s.host }})</option>
{% endfor %}
</select>
<div class="form-hint">{{ _('server_then_protocol_hint') }}</div>
</div>
<div class="form-group" id="newUserProtoGroup" style="display:none;">
@@ -293,10 +294,14 @@
<div class="form-group" id="ucServerGroup">
<label class="form-label">{{ _('server_label') }}</label>
<select class="form-select" id="ucServer">
{% if xui_servers %}
<option value="xui">3x-ui</option>
{% endif %}
{% for s in servers %}
<option value="{{ loop.index0 }}">{{ s.name }} ({{ s.host }})</option>
<option value="{{ loop.index0 }}">{{ s.name or s.host }} ({{ s.host }})</option>
{% endfor %}
</select>
<div class="form-hint">{{ _('server_then_protocol_hint') }}</div>
</div>
<div class="form-group" id="ucProtoGroup">
@@ -626,30 +631,55 @@
const select = document.getElementById(selectId);
const group = groupId ? document.getElementById(groupId) : null;
select.innerHTML = '';
const vpnBases = new Set(['awg', 'awg2', 'awg_legacy', 'xray', 'telemt', 'wireguard']);
const vpnOrder = ['awg2', 'awg', 'awg_legacy', 'wireguard', 'xray', 'telemt'];
const titles = {
awg2: 'AmneziaWG 2.0',
awg: 'AmneziaWG',
awg_legacy: 'AWG Legacy',
wireguard: 'WireGuard',
xray: 'Xray (VLESS-Reality)',
telemt: 'Telemt',
xui: '3x-ui VLESS',
};
const protoTitle = (key) => {
const base = String(key || '').split('__')[0];
const title = titles[base] || base.toUpperCase();
const m = String(key || '').match(/__(\d+)$/);
return m ? `${title} #${m[1]}` : title;
};
let count = 0;
// Special source: 3x-ui (server picker value "xui")
if (String(serverId) === 'xui') {
const opt = document.createElement('option');
opt.value = 'xui';
opt.textContent = titles.xui;
select.appendChild(opt);
count = 1;
if (group) group.style.display = '';
if (selectId === 'ucProtocol') updateXuiInboundVisibility();
return;
}
const server = (serverId !== '' && serversData[serverId]) ? serversData[serverId] : null;
const protocols = (server && server.protocols) || {};
const installed = Object.keys(protocols).filter(key => {
const info = protocols[key] || {};
if (!info.installed) return false;
return vpnOrder.includes(key.split('__')[0]);
}).sort((a, b) => {
const ia = vpnOrder.indexOf(a.split('__')[0]);
const ib = vpnOrder.indexOf(b.split('__')[0]);
return (ia < 0 ? 99 : ia) - (ib < 0 ? 99 : ib) || a.localeCompare(b);
});
for (const [key, info] of Object.entries(protocols)) {
if (!info.installed) continue;
const base = key.split('__')[0];
if (!vpnBases.has(base)) continue;
installed.forEach(key => {
const opt = document.createElement('option');
opt.value = key;
opt.textContent = key === 'awg' ? 'AmneziaWG' : (key === 'awg2' ? 'AmneziaWG 2.0' : (key === 'awg_legacy' ? 'AWG Legacy' : (key === 'xray' ? 'Xray' : (key === 'wireguard' ? 'WireGuard' : (key === 'telemt' ? 'Telemt' : key.toUpperCase())))));
opt.textContent = protoTitle(key);
select.appendChild(opt);
count++;
}
if (xuiConfigured && selectId === 'ucProtocol') {
const opt = document.createElement('option');
opt.value = 'xui';
opt.textContent = '3x-ui VLESS';
select.appendChild(opt);
count++;
}
});
if (count > 0) {
if (group) group.style.display = '';
@@ -724,9 +754,12 @@
document.getElementById('ucServer').addEventListener('change', (e) => {
updateProtocols(e.target.value, 'ucProtocol');
if (document.getElementById('ucMode').value === 'existing') {
const mode = document.getElementById('ucMode').value;
if (mode === 'existing' && e.target.value !== 'xui') {
fetchExistingClients();
}
updateTelemtOptions('ucProtocol', 'ucTelemtOptions');
updateXuiInboundVisibility();
});
document.getElementById('ucProtocol').addEventListener('change', (e) => {
@@ -898,13 +931,18 @@
spinner.classList.remove('hidden');
try {
const serverRaw = document.getElementById('ucServer').value;
const protocol = document.getElementById('ucProtocol').value;
const body = {
server_id: parseInt(document.getElementById('ucServer').value) || 0,
protocol: document.getElementById('ucProtocol').value,
server_id: serverRaw === 'xui' ? 0 : (parseInt(serverRaw, 10) || 0),
protocol: protocol,
name: document.getElementById('ucName').value || 'VPN Connection',
};
if (mode === 'existing') {
if (serverRaw === 'xui' || protocol === 'xui') {
throw new Error(_('link_existing_xui_unsupported') || 'Link existing is only for Amnezia server protocols');
}
const clientId = document.getElementById('ucExistingClient').value;
if (!clientId) throw new Error(_('select_connection'));
body.client_id = clientId;