Template
orohimaru2andCursor
3ea638d9c5
Invite pages keep created configs for repeat copy; guest/invite can pick a server when enabled. Co-authored-by: Cursor <cursoragent@cursor.com>
402 lines
19 KiB
HTML
402 lines
19 KiB
HTML
{% extends "base.html" %}
|
|
{% from "macros/icons.html" import icon %}
|
|
|
|
{% block title_extra %} — {{ _('invite_public_title') }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="share-page">
|
|
<header class="share-hero">
|
|
<h1 class="share-title">{{ invite.name }}</h1>
|
|
<p class="share-user">{{ _('invite_public_subtitle') }}</p>
|
|
{% if not need_password %}
|
|
<p class="share-hint">{{ _('share_copy_hint') }}</p>
|
|
{% endif %}
|
|
</header>
|
|
|
|
{% if need_password %}
|
|
<div class="share-auth card">
|
|
<div class="share-auth-icon">{{ icon('lock') }}</div>
|
|
<p>{{ _('invite_protected_desc') }}</p>
|
|
<form id="authForm" onsubmit="authInvite(event)" class="share-auth-form">
|
|
<input type="password" id="invitePassword" class="form-input" placeholder="{{ _('password') }}" required autofocus>
|
|
<button type="submit" class="btn btn-primary share-btn-lg" id="authBtn">
|
|
<span id="authBtnText">{{ _('login') }}</span>
|
|
<div class="spinner hidden" id="authSpinner"></div>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{% else %}
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:var(--space-sm); margin-bottom:var(--space-md);">
|
|
<div style="background:var(--bg-card); border-radius:var(--radius-md); padding:var(--space-md); text-align:center;">
|
|
<div style="font-size:0.72rem; color:var(--text-muted); text-transform:uppercase;">{{ _('invite_uses') }}</div>
|
|
<div id="usesValue" style="font-weight:700; font-size:1.15rem; margin-top:4px;">
|
|
{% if invite.unlimited %}∞{% else %}{{ invite.remaining }}{% endif %}
|
|
</div>
|
|
</div>
|
|
<div style="background:var(--bg-card); border-radius:var(--radius-md); padding:var(--space-md); text-align:center;">
|
|
<div style="font-size:0.72rem; color:var(--text-muted); text-transform:uppercase;">{{ _('invite_duration_short') }}</div>
|
|
<div style="font-weight:700; font-size:1.15rem; margin-top:4px;">
|
|
{% if invite.duration_days %}{{ invite.duration_days }} {{ _('days_short') }}{% else %}∞{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p id="statusHint" style="text-align:center; color:var(--text-muted); font-size:0.88rem; margin:0 0 var(--space-md);">
|
|
{% if invite.duration_days %}
|
|
{{ _('invite_duration_starts_hint').replace('{}', invite.duration_days|string) }}
|
|
{% else %}
|
|
{{ _('invite_get_config_hint') }}
|
|
{% endif %}
|
|
</p>
|
|
|
|
<div id="createBlock" {% if not invite.available %}style="display:none;"{% endif %}>
|
|
<div id="serverPickWrap" class="form-group" style="margin-bottom:var(--space-md); {% if not invite.allow_server_choice or not invite.servers %}display:none;{% endif %}">
|
|
<label class="form-label">{{ _('choose_server') }}</label>
|
|
<select class="form-select" id="inviteServerPick">
|
|
{% for s in invite.servers or [] %}
|
|
<option value="{{ s.id }}" {% if s.id == invite.server_id %}selected{% endif %}>{{ s.name }}{% if s.host %} ({{ s.host }}){% endif %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<button class="btn btn-primary share-btn-lg" style="width:100%;" onclick="createInviteConfig()" id="createBtn">
|
|
<span id="createBtnText">{{ _('guest_get_config') }}</span>
|
|
<div class="spinner hidden" id="createSpinner" style="width:14px;height:14px;"></div>
|
|
</button>
|
|
</div>
|
|
<p id="exhaustedMsg" style="text-align:center; color:#ef4444; margin:0 0 var(--space-md); {% if invite.available or not invite.exhausted %}display:none;{% endif %}">{{ _('invite_exhausted') }}</p>
|
|
<p id="disabledMsg" style="text-align:center; color:#ef4444; margin:0 0 var(--space-md); {% if invite.available or invite.exhausted %}display:none;{% endif %}">{{ _('disabled') }}</p>
|
|
|
|
<div class="share-loading" id="loadingState" style="margin-top:var(--space-lg);">
|
|
<div class="spinner share-spinner"></div>
|
|
<p>{{ _('loading_share_conns') }}</p>
|
|
</div>
|
|
<div id="connectionsGrid" class="share-grid hidden"></div>
|
|
<div id="emptyState" class="share-empty hidden">
|
|
<p>{{ _('invite_no_saved_configs') }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="modal-backdrop" id="configModal">
|
|
<div class="modal share-modal">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title" id="configModalTitle">{{ _('config') }}</h2>
|
|
<button class="modal-close" onclick="closeModal('configModal')" type="button">×</button>
|
|
</div>
|
|
<div id="expiresBanner" class="hidden" style="margin:0 var(--space-md) var(--space-sm); padding:var(--space-sm) var(--space-md); border-radius:var(--radius-md); background:rgba(59,130,246,0.1); color:var(--text-muted); font-size:0.85rem;"></div>
|
|
<div class="share-modal-body">
|
|
<button type="button" class="btn btn-primary share-btn-lg" id="modalCopyBtn" onclick="copyCurrentKey()">
|
|
{{ icon('copy') }}
|
|
<span>{{ _('copy_key_big') }}</span>
|
|
</button>
|
|
<div class="share-qr-wrap">
|
|
<div id="qrcode"></div>
|
|
<p class="share-qr-caption">{{ _('qr_code_tab') }}</p>
|
|
</div>
|
|
<div class="share-extra">
|
|
<button type="button" class="btn btn-secondary w-full" id="downloadBtn">{{ _('download_config_file') }}</button>
|
|
<button type="button" class="share-link-btn" onclick="toggleConfigText()">{{ _('show_config_text') }}</button>
|
|
<textarea class="config-text share-config-text hidden" id="configText" readonly rows="8"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const TOKEN = "{{ token }}";
|
|
let currentConfig = '';
|
|
let currentVpnLink = '';
|
|
|
|
function escAttr(s) {
|
|
return String(s || '').replace(/\\/g, '\\\\').replace(/'/g, "\\'");
|
|
}
|
|
function escHtml(s) {
|
|
return String(s || '')
|
|
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
|
}
|
|
function protoLabel(p) {
|
|
const base = String(p || '').split('__')[0];
|
|
const map = {
|
|
awg: 'AmneziaWG', awg2: 'AmneziaWG 2.0', awg_legacy: 'AWG Legacy',
|
|
xray: 'Xray', xui: '3x-ui VLESS', hysteria: 'Hysteria 2',
|
|
naiveproxy: 'NaiveProxy', mieru: 'Mieru', telemt: 'Telemt', wireguard: 'WireGuard',
|
|
};
|
|
return map[base] || (base || '').toUpperCase();
|
|
}
|
|
function pickKey(config, vpnLink) {
|
|
const link = (vpnLink || '').trim();
|
|
return link || (config || '').trim();
|
|
}
|
|
async function copyKeyText(text) {
|
|
if (!text) throw new Error(_('error'));
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
} catch {
|
|
const ta = document.createElement('textarea');
|
|
ta.value = text;
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
document.execCommand('copy');
|
|
ta.remove();
|
|
}
|
|
showToast(_('key_copied'), 'success');
|
|
}
|
|
|
|
async function authInvite(e) {
|
|
e.preventDefault();
|
|
const password = document.getElementById('invitePassword').value;
|
|
const btn = document.getElementById('authBtn');
|
|
const text = document.getElementById('authBtnText');
|
|
const spinner = document.getElementById('authSpinner');
|
|
btn.disabled = true;
|
|
text.classList.add('hidden');
|
|
spinner.classList.remove('hidden');
|
|
try {
|
|
const res = await fetch(`/api/invite/${TOKEN}/auth`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ password })
|
|
});
|
|
const data = await res.json();
|
|
if (data.status === 'success') window.location.reload();
|
|
else alert(data.error || _('login_error'));
|
|
} catch (err) {
|
|
alert(`${_('error')}: ` + err.message);
|
|
} finally {
|
|
btn.disabled = false;
|
|
text.classList.remove('hidden');
|
|
spinner.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function fillModal(name, config, vpnLink, expiresAt) {
|
|
currentConfig = config || '';
|
|
currentVpnLink = vpnLink || '';
|
|
document.getElementById('configModalTitle').textContent = name;
|
|
document.getElementById('configText').value = currentConfig;
|
|
document.getElementById('configText').classList.add('hidden');
|
|
const banner = document.getElementById('expiresBanner');
|
|
if (expiresAt) {
|
|
banner.textContent = _('invite_config_expires_at').replace('{}', new Date(expiresAt).toLocaleString());
|
|
banner.classList.remove('hidden');
|
|
} else {
|
|
banner.classList.add('hidden');
|
|
}
|
|
document.getElementById('downloadBtn').onclick = () => downloadFile(currentConfig, `${name || 'vpn'}.conf`);
|
|
const qrContainer = document.getElementById('qrcode');
|
|
qrContainer.innerHTML = '';
|
|
const qrPayload = pickKey(currentConfig, currentVpnLink) || currentConfig;
|
|
if (qrPayload && typeof QRCode !== 'undefined') {
|
|
new QRCode(qrContainer, {
|
|
text: qrPayload, width: 220, height: 220,
|
|
colorDark: '#000000', colorLight: '#ffffff',
|
|
correctLevel: QRCode.CorrectLevel.L
|
|
});
|
|
}
|
|
}
|
|
|
|
async function copyCurrentKey() {
|
|
try { await copyKeyText(pickKey(currentConfig, currentVpnLink)); }
|
|
catch (err) { alert(`${_('error')}: ` + err.message); }
|
|
}
|
|
function toggleConfigText() {
|
|
document.getElementById('configText').classList.toggle('hidden');
|
|
}
|
|
|
|
function updateStatus(invite) {
|
|
if (!invite) return;
|
|
const uses = document.getElementById('usesValue');
|
|
if (uses) uses.textContent = invite.unlimited ? '∞' : String(invite.remaining ?? 0);
|
|
const createBlock = document.getElementById('createBlock');
|
|
const exhaustedMsg = document.getElementById('exhaustedMsg');
|
|
const disabledMsg = document.getElementById('disabledMsg');
|
|
if (invite.available) {
|
|
if (createBlock) createBlock.style.display = '';
|
|
if (exhaustedMsg) exhaustedMsg.style.display = 'none';
|
|
if (disabledMsg) disabledMsg.style.display = 'none';
|
|
} else {
|
|
if (createBlock) createBlock.style.display = 'none';
|
|
if (invite.exhausted) {
|
|
if (exhaustedMsg) exhaustedMsg.style.display = '';
|
|
if (disabledMsg) disabledMsg.style.display = 'none';
|
|
} else {
|
|
if (exhaustedMsg) exhaustedMsg.style.display = 'none';
|
|
if (disabledMsg) disabledMsg.style.display = '';
|
|
}
|
|
}
|
|
const wrap = document.getElementById('serverPickWrap');
|
|
const sel = document.getElementById('inviteServerPick');
|
|
if (wrap && sel && invite.allow_server_choice && (invite.servers || []).length) {
|
|
const prev = sel.value;
|
|
sel.innerHTML = '';
|
|
(invite.servers || []).forEach(s => {
|
|
const opt = document.createElement('option');
|
|
opt.value = String(s.id);
|
|
opt.textContent = s.host ? `${s.name} (${s.host})` : s.name;
|
|
if (String(s.id) === String(prev) || String(s.id) === String(invite.server_id)) opt.selected = true;
|
|
sel.appendChild(opt);
|
|
});
|
|
wrap.style.display = '';
|
|
} else if (wrap) {
|
|
wrap.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
async function fetchInviteConfig(connId) {
|
|
const res = await fetch(`/api/invite/${TOKEN}/config/${connId}`, { method: 'POST' });
|
|
const data = await res.json();
|
|
if (!res.ok || data.error) throw new Error(data.error || _('error'));
|
|
return data;
|
|
}
|
|
|
|
async function loadConnections() {
|
|
const loading = document.getElementById('loadingState');
|
|
if (!loading) return;
|
|
try {
|
|
const res = await fetch(`/api/invite/${TOKEN}/connections`);
|
|
if (res.status === 401) return;
|
|
const data = await res.json();
|
|
loading.classList.add('hidden');
|
|
if (data.invite) updateStatus(data.invite);
|
|
|
|
const grid = document.getElementById('connectionsGrid');
|
|
const empty = document.getElementById('emptyState');
|
|
if (!data.connections || !data.connections.length) {
|
|
empty.classList.remove('hidden');
|
|
grid.classList.add('hidden');
|
|
grid.innerHTML = '';
|
|
return;
|
|
}
|
|
empty.classList.add('hidden');
|
|
grid.classList.remove('hidden');
|
|
grid.innerHTML = data.connections.map(c => `
|
|
<article class="share-card" data-conn-id="${escHtml(c.id)}">
|
|
<div class="share-card-top">
|
|
<div>
|
|
<div class="share-card-name">${escHtml(c.name)}</div>
|
|
<div class="share-card-meta">${escHtml(protoLabel(c.protocol))} · ${escHtml(c.server_name || '')}</div>
|
|
</div>
|
|
<span class="badge badge-success share-badge">${_('active')}</span>
|
|
</div>
|
|
<button type="button" class="btn btn-primary share-btn-lg share-copy-btn"
|
|
onclick="copyKeyFromCard(this, '${escAttr(c.id)}')">
|
|
${typeof uiIcon === 'function' ? uiIcon('copy') : '📋'}
|
|
<span class="share-copy-label">${_('copy_key_big')}</span>
|
|
</button>
|
|
<button type="button" class="share-link-btn"
|
|
onclick="showDetails('${escAttr(c.id)}', '${escAttr(c.name)}')">
|
|
${_('more_qr_download')}
|
|
</button>
|
|
</article>
|
|
`).join('');
|
|
} catch (err) {
|
|
console.error(err);
|
|
loading.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
async function copyKeyFromCard(btn, connId) {
|
|
const label = btn.querySelector('.share-copy-label');
|
|
const prev = label ? label.textContent : '';
|
|
btn.disabled = true;
|
|
if (label) label.textContent = _('copying_key');
|
|
try {
|
|
const data = await fetchInviteConfig(connId);
|
|
await copyKeyText(pickKey(data.config, data.vpn_link));
|
|
} catch (err) {
|
|
alert(`${_('error')}: ` + err.message);
|
|
} finally {
|
|
btn.disabled = false;
|
|
if (label) label.textContent = prev || _('copy_key_big');
|
|
}
|
|
}
|
|
|
|
async function showDetails(connId, name) {
|
|
try {
|
|
const data = await fetchInviteConfig(connId);
|
|
fillModal(name, data.config, data.vpn_link || '', data.expires_at);
|
|
openModal('configModal');
|
|
} catch (err) {
|
|
alert(`${_('error')}: ` + err.message);
|
|
}
|
|
}
|
|
|
|
async function createInviteConfig() {
|
|
const btn = document.getElementById('createBtn');
|
|
const text = document.getElementById('createBtnText');
|
|
const spinner = document.getElementById('createSpinner');
|
|
btn.disabled = true;
|
|
text.classList.add('hidden');
|
|
spinner.classList.remove('hidden');
|
|
try {
|
|
const body = { name: 'Invite VPN' };
|
|
const wrap = document.getElementById('serverPickWrap');
|
|
const sel = document.getElementById('inviteServerPick');
|
|
if (wrap && wrap.style.display !== 'none' && sel && sel.value !== '') {
|
|
body.server_id = parseInt(sel.value, 10);
|
|
}
|
|
const res = await fetch(`/api/invite/${TOKEN}/create`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body)
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok || data.error) throw new Error(data.error || _('error'));
|
|
const share = data.subscription_url || data.config || '';
|
|
if (share || data.vpn_link) {
|
|
fillModal(data.connection?.name || 'VPN', share || data.config || '', data.vpn_link || share, data.expires_at);
|
|
await copyKeyText(pickKey(share || data.config || '', data.vpn_link || share));
|
|
openModal('configModal');
|
|
}
|
|
updateStatus(data.invite);
|
|
await loadConnections();
|
|
} catch (err) {
|
|
alert(`${_('error')}: ` + err.message);
|
|
} finally {
|
|
btn.disabled = false;
|
|
text.classList.remove('hidden');
|
|
spinner.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', loadConnections);
|
|
</script>
|
|
|
|
<style>
|
|
.share-page { max-width: 440px; margin: 1.25rem auto 2.5rem; padding: 0 var(--space-md); }
|
|
.share-hero { text-align: center; margin-bottom: var(--space-lg); }
|
|
.share-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--space-xs); }
|
|
.share-user { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 var(--space-sm); }
|
|
.share-hint {
|
|
margin: 0 auto; max-width: 22rem; padding: 0.75rem 1rem; border-radius: 12px;
|
|
background: var(--accent-glow); color: var(--text-primary); font-size: 0.95rem; line-height: 1.4;
|
|
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
|
|
}
|
|
.share-grid { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); }
|
|
.share-card {
|
|
background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
|
|
padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm);
|
|
}
|
|
.share-card-top { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: flex-start; }
|
|
.share-card-name { font-weight: 600; }
|
|
.share-card-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
|
|
.share-btn-lg { width: 100%; justify-content: center; min-height: 48px; }
|
|
.share-link-btn {
|
|
background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.85rem; padding: 4px 0;
|
|
}
|
|
.share-loading, .share-empty { text-align: center; color: var(--text-muted); padding: var(--space-lg) 0; }
|
|
.share-modal { max-width: 420px; }
|
|
.share-modal-body { padding: var(--space-md) var(--space-lg) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
|
|
.share-qr-wrap { text-align: center; }
|
|
.share-qr-caption { font-size: 0.8rem; color: var(--text-muted); margin-top: var(--space-xs); }
|
|
.share-config-text { width: 100%; font-family: monospace; font-size: 0.75rem; }
|
|
.share-auth { max-width: 360px; margin: 0 auto; text-align: center; padding: var(--space-xl); }
|
|
.share-auth-form { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-md); }
|
|
.spinner {
|
|
border: 3px solid rgba(255,255,255,0.1); border-top: 3px solid var(--accent-color);
|
|
border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block;
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
</style>
|
|
{% endblock %}
|