Template
Allow re-copying invite configs and end-user server choice (v3.0.1).
Invite pages keep created configs for repeat copy; guest/invite can pick a server when enabled. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
orohimaru2
+283
-106
@@ -1,102 +1,104 @@
|
||||
{% extends "base.html" %}
|
||||
{% from "macros/icons.html" import icon %}
|
||||
|
||||
{% block title_extra %} — {{ _('invite_public_title') }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="card" style="max-width: 520px; margin: 2.5rem auto; overflow:hidden;">
|
||||
<div style="padding: var(--space-xl) var(--space-lg) var(--space-md); text-align:center; background: linear-gradient(180deg, rgba(59,130,246,0.12), transparent);">
|
||||
<div style="width:56px;height:56px;border-radius:16px;margin:0 auto var(--space-md);display:flex;align-items:center;justify-content:center;background:var(--bg-primary);font-size:1.6rem;">🔗</div>
|
||||
<h2 class="card-title" style="margin-bottom:6px;">{{ invite.name }}</h2>
|
||||
<p style="color: var(--text-muted); font-size: 0.92rem; margin:0;">{{ _('invite_public_subtitle') }}</p>
|
||||
</div>
|
||||
<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 style="padding: var(--space-lg); text-align: center;">
|
||||
<p style="margin-bottom: var(--space-md);">{{ _('invite_protected_desc') }}</p>
|
||||
<form id="authForm" onsubmit="authInvite(event)"
|
||||
style="display: flex; flex-direction: column; gap: var(--space-md); max-width: 300px; margin: 0 auto;">
|
||||
<div class="form-group">
|
||||
<input type="password" id="invitePassword" class="form-input" placeholder="{{ _('password') }}" required autofocus>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary" id="authBtn">
|
||||
<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="padding: var(--space-lg);">
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:var(--space-sm); margin-bottom:var(--space-lg);">
|
||||
<div style="background:var(--bg-primary); 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-primary); 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 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>
|
||||
<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>
|
||||
|
||||
{% if invite.available %}
|
||||
<button class="btn btn-primary" style="width:100%;" onclick="createInviteConfig()" id="createBtn">
|
||||
<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>
|
||||
{% elif invite.exhausted %}
|
||||
<p style="text-align:center; color:#ef4444; margin:0;">{{ _('invite_exhausted') }}</p>
|
||||
{% else %}
|
||||
<p style="text-align:center; color:#ef4444; margin:0;">{{ _('disabled') }}</p>
|
||||
{% endif %}
|
||||
</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" style="max-width: 600px;">
|
||||
<div class="modal share-modal">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title" id="configModalTitle">{{ _('config') }}</h2>
|
||||
<button class="modal-close" onclick="closeModal('configModal')">×</button>
|
||||
<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="config-tabs">
|
||||
<button class="config-tab active" onclick="switchConfigTab('conf')">{{ _('invite_sub_tab') }}</button>
|
||||
<button class="config-tab" onclick="switchConfigTab('vpn')">{{ _('vpn_key_tab') }}</button>
|
||||
<button class="config-tab" onclick="switchConfigTab('qr')">{{ _('qr_code_tab') }}</button>
|
||||
</div>
|
||||
<div class="config-panel active" id="panel-conf">
|
||||
<div class="config-display">
|
||||
<textarea class="config-text" id="configText" readonly rows="8"
|
||||
style="width:100%; border:none; background:transparent; color:inherit; font-family:monospace; resize:none; outline:none;"></textarea>
|
||||
<div class="config-actions">
|
||||
<button class="btn btn-secondary btn-sm" onclick="copyConfig()" style="flex:1">{{ _('copy_config') }}</button>
|
||||
<a id="downloadBtn" class="btn btn-primary btn-sm"
|
||||
style="flex:1; text-decoration:none; display:flex; align-items:center; justify-content:center;">
|
||||
{{ _('download_conf') }}
|
||||
</a>
|
||||
</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>
|
||||
<div class="config-panel" id="panel-vpn">
|
||||
<div class="vpn-link-box" id="vpnLinkText" style="min-height: 100px;"></div>
|
||||
<div class="config-actions" style="margin-top:var(--space-sm);">
|
||||
<button class="btn btn-secondary btn-sm" onclick="copyVpnLink()" style="flex:1">{{ _('copy_key') }}</button>
|
||||
<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 class="config-panel" id="panel-qr">
|
||||
<div class="qr-container"><div id="qrcode"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -105,6 +107,41 @@
|
||||
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;
|
||||
@@ -132,22 +169,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
function switchConfigTab(tab) {
|
||||
document.querySelectorAll('.config-tab').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.config-panel').forEach(p => p.classList.remove('active'));
|
||||
const tabs = document.querySelectorAll('.config-tab');
|
||||
const panels = { conf: 'panel-conf', vpn: 'panel-vpn', qr: 'panel-qr' };
|
||||
const tabIdx = { conf: 0, vpn: 1, qr: 2 };
|
||||
tabs[tabIdx[tab]].classList.add('active');
|
||||
document.getElementById(panels[tab]).classList.add('active');
|
||||
}
|
||||
|
||||
function openConfigModal(name, config, vpnLink, expiresAt) {
|
||||
currentConfig = config;
|
||||
currentVpnLink = vpnLink || config || '';
|
||||
document.getElementById('configText').value = config;
|
||||
document.getElementById('vpnLinkText').textContent = currentVpnLink;
|
||||
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());
|
||||
@@ -155,29 +182,142 @@
|
||||
} else {
|
||||
banner.classList.add('hidden');
|
||||
}
|
||||
document.getElementById('downloadBtn').onclick = () => downloadFile(config, `${name}.txt`);
|
||||
document.getElementById('downloadBtn').onclick = () => downloadFile(currentConfig, `${name || 'vpn'}.conf`);
|
||||
const qrContainer = document.getElementById('qrcode');
|
||||
qrContainer.innerHTML = '';
|
||||
new QRCode(qrContainer, {
|
||||
text: currentVpnLink || config, width: 256, height: 256,
|
||||
colorDark: '#000000', colorLight: '#ffffff',
|
||||
correctLevel: QRCode.CorrectLevel.L
|
||||
});
|
||||
switchConfigTab('conf');
|
||||
openModal('configModal');
|
||||
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
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function copyConfig() { copyToClipboard(currentConfig); }
|
||||
function copyVpnLink() { copyToClipboard(currentVpnLink); }
|
||||
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 && invite) {
|
||||
uses.textContent = invite.unlimited ? '∞' : String(invite.remaining ?? 0);
|
||||
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 = '';
|
||||
}
|
||||
}
|
||||
if (invite && !invite.available) {
|
||||
const btn = document.getElementById('createBtn');
|
||||
if (btn) btn.style.display = 'none';
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -189,16 +329,27 @@
|
||||
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({ name: 'Invite VPN' })
|
||||
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) openConfigModal(data.connection?.name || 'VPN', share, data.vpn_link || share, data.expires_at);
|
||||
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 {
|
||||
@@ -207,17 +358,43 @@
|
||||
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;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user