503 lines
16 KiB
HTML
503 lines
16 KiB
HTML
{% extends "base.html" %}
|
|
{% from "macros/icons.html" import icon %}
|
|
|
|
{% block title_extra %} — {{ _('guest_title') }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="share-page">
|
|
<header class="share-hero">
|
|
<h1 class="share-title">{{ _('guest_title') }}</h1>
|
|
<p class="share-user">{{ _('guest_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>{{ _('guest_protected_desc') }}</p>
|
|
<form id="authForm" onsubmit="authGuest(event)" class="share-auth-form">
|
|
<input type="password" id="guestPassword" 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 id="connectionsList">
|
|
{% if allow_create %}
|
|
<div class="share-create">
|
|
<button class="btn btn-secondary share-btn-lg" type="button" onclick="createGuestConfig()" id="createBtn">
|
|
<span id="createBtnText">{{ _('guest_get_config') }}</span>
|
|
<div class="spinner hidden" id="createSpinner"></div>
|
|
</button>
|
|
<p class="share-create-hint">{{ _('guest_get_config_hint') }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="share-loading" id="loadingState">
|
|
<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>{{ _('no_active_conns') }}</p>
|
|
</div>
|
|
</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 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 }}";
|
|
const ALLOW_CREATE = {{ 'true' if allow_create else 'false' }};
|
|
let currentConfig = '';
|
|
let currentVpnLink = '';
|
|
let currentName = '';
|
|
|
|
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) {
|
|
if (p === 'awg') return 'AmneziaWG';
|
|
if (p === 'awg2') return 'AmneziaWG 2.0';
|
|
if (p === 'awg_legacy') return 'AWG Legacy';
|
|
if (p === 'xray') return 'Xray';
|
|
if (p === 'xui') return '3x-ui VLESS';
|
|
return (p || '').toUpperCase();
|
|
}
|
|
|
|
function pickKey(config, vpnLink) {
|
|
const link = (vpnLink || '').trim();
|
|
if (link) return link;
|
|
return (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 fetchGuestConfig(connId) {
|
|
const res = await fetch(`/api/guest/${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 authGuest(e) {
|
|
e.preventDefault();
|
|
const password = document.getElementById('guestPassword').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/guest/${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');
|
|
}
|
|
}
|
|
|
|
async function loadConnections() {
|
|
if (!document.getElementById('loadingState')) return;
|
|
try {
|
|
const res = await fetch(`/api/guest/${TOKEN}/connections`);
|
|
if (res.status === 401) return;
|
|
const data = await res.json();
|
|
document.getElementById('loadingState').classList.add('hidden');
|
|
|
|
if (!data.connections || data.connections.length === 0) {
|
|
document.getElementById('emptyState').classList.remove('hidden');
|
|
document.getElementById('connectionsGrid').classList.add('hidden');
|
|
document.getElementById('connectionsGrid').innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
document.getElementById('emptyState').classList.add('hidden');
|
|
const grid = document.getElementById('connectionsGrid');
|
|
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)}')">
|
|
${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);
|
|
}
|
|
}
|
|
|
|
async function createGuestConfig() {
|
|
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 res = await fetch(`/api/guest/${TOKEN}/create`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name: 'Guest VPN' })
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok || data.error) throw new Error(data.error || _('error'));
|
|
if (data.config) {
|
|
fillModal(data.connection?.name || 'Guest VPN', data.config, data.vpn_link || '');
|
|
await copyKeyText(pickKey(data.config, data.vpn_link));
|
|
openModal('configModal');
|
|
}
|
|
await loadConnections();
|
|
document.getElementById('emptyState')?.classList.add('hidden');
|
|
} catch (err) {
|
|
alert(`${_('error')}: ` + err.message);
|
|
} finally {
|
|
btn.disabled = false;
|
|
text.classList.remove('hidden');
|
|
spinner.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 fetchGuestConfig(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');
|
|
}
|
|
}
|
|
|
|
function fillModal(name, config, vpnLink) {
|
|
currentConfig = config || '';
|
|
currentVpnLink = vpnLink || '';
|
|
currentName = name || '';
|
|
document.getElementById('configModalTitle').textContent = name;
|
|
document.getElementById('configText').value = currentConfig;
|
|
document.getElementById('configText').classList.add('hidden');
|
|
const dl = document.getElementById('downloadBtn');
|
|
dl.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 showDetails(connId, name) {
|
|
try {
|
|
const data = await fetchGuestConfig(connId);
|
|
fillModal(name, data.config, data.vpn_link || '');
|
|
openModal('configModal');
|
|
} catch (err) {
|
|
alert(`${_('error')}: ` + err.message);
|
|
}
|
|
}
|
|
|
|
async function copyCurrentKey() {
|
|
try {
|
|
await copyKeyText(pickKey(currentConfig, currentVpnLink));
|
|
} catch (err) {
|
|
alert(`${_('error')}: ` + err.message);
|
|
}
|
|
}
|
|
|
|
function toggleConfigText() {
|
|
document.getElementById('configText').classList.toggle('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-create {
|
|
margin-bottom: var(--space-md);
|
|
text-align: center;
|
|
}
|
|
.share-create-hint {
|
|
margin: var(--space-xs) 0 0;
|
|
color: var(--text-muted);
|
|
font-size: 0.85rem;
|
|
}
|
|
.share-auth {
|
|
padding: var(--space-xl);
|
|
text-align: center;
|
|
}
|
|
.share-auth-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
margin: 0 auto var(--space-md);
|
|
color: var(--text-muted);
|
|
}
|
|
.share-auth-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
max-width: 300px;
|
|
margin: var(--space-md) auto 0;
|
|
}
|
|
.share-grid {
|
|
display: grid;
|
|
gap: var(--space-md);
|
|
}
|
|
.share-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 16px;
|
|
padding: 1.1rem 1rem 0.85rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.65rem;
|
|
}
|
|
.share-card-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: var(--space-sm);
|
|
text-align: left;
|
|
}
|
|
.share-card-name {
|
|
font-weight: 650;
|
|
font-size: 1.15rem;
|
|
line-height: 1.25;
|
|
}
|
|
.share-card-meta {
|
|
margin-top: 0.2rem;
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.share-badge {
|
|
flex-shrink: 0;
|
|
opacity: 0.85;
|
|
font-size: 0.7rem;
|
|
}
|
|
.share-btn-lg {
|
|
width: 100%;
|
|
min-height: 54px;
|
|
font-size: 1.1rem;
|
|
font-weight: 650;
|
|
border-radius: 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.55rem;
|
|
padding: 0.85rem 1rem;
|
|
}
|
|
.share-btn-lg .ui-icon {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
.share-link-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-size: 0.9rem;
|
|
padding: 0.35rem;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
align-self: center;
|
|
}
|
|
.share-link-btn:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
.share-loading,
|
|
.share-empty {
|
|
text-align: center;
|
|
padding: 2.5rem 1rem;
|
|
color: var(--text-muted);
|
|
}
|
|
.share-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 0 auto;
|
|
}
|
|
.share-modal {
|
|
max-width: 420px;
|
|
}
|
|
.share-modal-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
padding: 0 var(--space-md) var(--space-lg);
|
|
}
|
|
.share-qr-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-md);
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
color: #111;
|
|
}
|
|
.share-qr-wrap #qrcode {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.share-qr-caption {
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
color: #444;
|
|
}
|
|
.share-extra {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
.share-config-text {
|
|
width: 100%;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
background: var(--bg-primary);
|
|
color: inherit;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
font-size: 0.75rem;
|
|
padding: 0.75rem;
|
|
resize: vertical;
|
|
outline: none;
|
|
}
|
|
.w-full { width: 100%; }
|
|
.spinner {
|
|
border: 3px solid rgba(127, 127, 127, 0.2);
|
|
border-top-color: var(--accent);
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
animation: share-spin 0.8s linear infinite;
|
|
display: inline-block;
|
|
}
|
|
@keyframes share-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
{% endblock %}
|