Evilfox/Amnezia-Web-Panel-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Simplify share/guest pages with one-tap key copy.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
orohi
2026-07-26 05:32:04 +03:00
co-authored by Cursor
parent 64079c1724
commit f2311c0795
4 changed files with 685 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/guest.html
+344 -132
View File
@@ -4,96 +4,77 @@
{% block title_extra %} — {{ _('guest_title') }}{% endblock %}
{% block content %}
<div class="card" style="max-width: 600px; margin: 2rem auto;">
<div class="card-header"
style="justify-content: center; text-align: center; flex-direction: column; gap: var(--space-xs);">
<h2 class="card-title">{{ _('guest_title') }}</h2>
<p style="color: var(--text-muted); font-size: 0.9rem;">{{ _('guest_subtitle') }}</p>
</div>
<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 style="padding: var(--space-lg); text-align: center;">
<div class="logo-icon" style="width:64px;height:64px;margin:0 auto var(--space-md);">{{ icon('lock') }}</div>
<p style="margin-bottom: var(--space-md);">{{ _('guest_protected_desc') }}</p>
<form id="authForm" onsubmit="authGuest(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="guestPassword" 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>{{ _('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" style="padding: var(--space-md);">
<div id="connectionsList">
{% if allow_create %}
<div style="margin-bottom: var(--space-md);">
<button class="btn btn-primary" style="width:100%;" onclick="createGuestConfig()" id="createBtn">
<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" style="width:14px;height:14px;"></div>
<div class="spinner hidden" id="createSpinner"></div>
</button>
<div class="form-hint" style="text-align:center; margin-top: var(--space-xs);">
{{ _('guest_get_config_hint') }}
</div>
<p class="share-create-hint">{{ _('guest_get_config_hint') }}</p>
</div>
{% endif %}
<div style="text-align: center; padding: 2rem;" id="loadingState">
<div class="spinner" style="width: 40px; height: 40px; margin: 0 auto;"></div>
<p style="margin-top: 1rem; color: var(--text-muted);">{{ _('loading_share_conns') }}</p>
<div class="share-loading" id="loadingState">
<div class="spinner share-spinner"></div>
<p>{{ _('loading_share_conns') }}</p>
</div>
<div id="connectionsGrid" class="hidden" style="display: grid; gap: var(--space-md);">
</div>
<div id="emptyState" class="hidden" style="text-align: center; padding: 2rem;">
<p style="color: var(--text-muted);">{{ _('no_active_conns') }}</p>
<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" 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">&times;</button>
</div>
<div class="config-tabs">
<button class="config-tab active" onclick="switchConfigTab('conf')">{{ _('config_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="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="config-panel active" id="panel-conf">
<div class="config-display">
<textarea class="config-text" id="configText" readonly rows="12"
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>
</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>
</div>
<div class="config-panel" id="panel-qr">
<div class="qr-container">
<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>
@@ -102,6 +83,57 @@
<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, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;');
}
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';
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();
@@ -109,11 +141,9 @@
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',
@@ -135,21 +165,11 @@
}
}
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';
return (p || '').toUpperCase();
}
async function loadConnections() {
if (document.getElementById('loadingState') === null) return;
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');
@@ -164,19 +184,25 @@
const grid = document.getElementById('connectionsGrid');
grid.classList.remove('hidden');
grid.innerHTML = data.connections.map(c => `
<div class="card" style="padding: var(--space-md); border: 1px solid var(--border-color);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-sm);">
<div style="text-align: initial;">
<div style="font-weight: 600; font-size: 1.1rem;">${c.name}</div>
<div style="font-size: 0.8rem; color: var(--text-muted);">${protoLabel(c.protocol)} • ${c.server_name || ''}</div>
<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>
<span class="badge badge-success">${_('active')}</span>
</div>
<button class="btn btn-secondary btn-sm w-full" onclick="showConfig('${c.id}', '${(c.name || '').replace(/'/g, "\\'")}')">
${_('show_settings_btn')}
</button>
</div>
`).join('');
<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);
}
@@ -198,7 +224,9 @@
const data = await res.json();
if (!res.ok || data.error) throw new Error(data.error || _('error'));
if (data.config) {
openConfigModal(data.connection?.name || 'Guest VPN', data.config, data.vpn_link || '');
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');
@@ -211,79 +239,263 @@
}
}
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');
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');
}
}
let currentConfig = '';
let currentVpnLink = '';
function openConfigModal(name, config, vpnLink) {
currentConfig = config;
function fillModal(name, config, vpnLink) {
currentConfig = config || '';
currentVpnLink = vpnLink || '';
document.getElementById('configText').value = config;
document.getElementById('vpnLinkText').textContent = currentVpnLink;
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(config, `${name}.conf`);
dl.onclick = () => downloadFile(currentConfig, `${name || 'vpn'}.conf`);
const qrContainer = document.getElementById('qrcode');
qrContainer.innerHTML = '';
new QRCode(qrContainer, {
text: 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
});
}
}
async function showConfig(connId, name) {
async function showDetails(connId, name) {
try {
const res = await fetch(`/api/guest/${TOKEN}/config/${connId}`, { method: 'POST' });
const data = await res.json();
if (data.error) throw new Error(data.error);
openConfigModal(name, data.config, data.vpn_link || '');
const data = await fetchGuestConfig(connId);
fillModal(name, data.config, data.vpn_link || '');
openModal('configModal');
} catch (err) {
alert(`${_('error')}: ` + err.message);
}
}
function copyConfig() {
copyToClipboard(currentConfig);
async function copyCurrentKey() {
try {
await copyKeyText(pickKey(currentConfig, currentVpnLink));
} catch (err) {
alert(`${_('error')}: ` + err.message);
}
}
function copyVpnLink() {
copyToClipboard(currentVpnLink);
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(255, 255, 255, 0.1);
border-top: 3px solid var(--accent-color);
border: 3px solid rgba(127, 127, 127, 0.2);
border-top-color: var(--accent);
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
animation: share-spin 0.8s linear infinite;
display: inline-block;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
@keyframes share-spin {
to { transform: rotate(360deg); }
}
</style>
{% endblock %}
templates/user_share.html
+326 -136
View File
@@ -1,91 +1,70 @@
{% extends "base.html" %}
{% from "macros/icons.html" import icon %}
{% block title_extra %} — {{ _('share_title') }}{% endblock %}
{% block content %}
<div class="card" style="max-width: 600px; margin: 2rem auto;">
<div class="card-header"
style="justify-content: center; text-align: center; flex-direction: column; gap: var(--space-xs);">
<h2 class="card-title">{{ _('vpn_access') }}</h2>
<p style="color: var(--text-muted); font-size: 0.9rem;">{{ _('user_label_share') }}: <strong>{{
share_user.username }}</strong>
</p>
</div>
<div class="share-page">
<header class="share-hero">
<h1 class="share-title">{{ _('vpn_access') }}</h1>
<p class="share-user">{{ _('user_label_share') }}: <strong>{{ share_user.username }}</strong></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;">
<div class="logo-icon" style="font-size: 3rem; margin-bottom: var(--space-md);">🔐</div>
<p style="margin-bottom: var(--space-md);">{{ _('share_protected_desc') }}
</p>
<form id="authForm" onsubmit="authShare(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="sharePassword" 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>{{ _('share_protected_desc') }}</p>
<form id="authForm" onsubmit="authShare(event)" class="share-auth-form">
<input type="password" id="sharePassword" 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" style="padding: var(--space-md);">
<div style="text-align: center; padding: 2rem;" id="loadingState">
<div class="spinner" style="width: 40px; height: 40px; margin: 0 auto;"></div>
<p style="margin-top: 1rem; color: var(--text-muted);">{{ _('loading_share_conns') }}</p>
<div id="connectionsList">
<div class="share-loading" id="loadingState">
<div class="spinner share-spinner"></div>
<p>{{ _('loading_share_conns') }}</p>
</div>
<div id="connectionsGrid" class="hidden" style="display: grid; gap: var(--space-md);">
<!-- Connections will be here -->
</div>
<div id="emptyState" class="hidden" style="text-align: center; padding: 2rem;">
<p style="color: var(--text-muted);">{{ _('no_active_conns') }}</p>
<div id="connectionsGrid" class="share-grid hidden"></div>
<div id="emptyState" class="share-empty hidden">
<p>{{ _('no_active_conns') }}</p>
</div>
</div>
{% endif %}
</div>
<!-- Modal for Config -->
<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">&times;</button>
</div>
<div class="config-tabs">
<button class="config-tab active" onclick="switchConfigTab('conf')">{{ _('config_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="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="config-panel active" id="panel-conf">
<div class="config-display">
<textarea class="config-text" id="configText" readonly rows="12"
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>
</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>
</div>
<div class="config-panel" id="panel-qr">
<div class="qr-container">
<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>
@@ -93,6 +72,49 @@
<script>
const TOKEN = "{{ token }}";
let currentConfig = '';
let currentVpnLink = '';
let currentName = '';
function escAttr(s) {
return String(s || '').replace(/\\/g, '\\\\').replace(/'/g, "\\'");
}
function escHtml(s) {
return String(s || '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;');
}
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 fetchShareConfig(connId) {
const res = await fetch(`/api/share/${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 authShare(e) {
e.preventDefault();
@@ -100,11 +122,9 @@
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/share/${TOKEN}/auth`, {
method: 'POST',
@@ -127,12 +147,10 @@
}
async function loadConnections() {
if (document.getElementById('loadingState') === null) return;
if (!document.getElementById('loadingState')) return;
try {
const res = await fetch(`/api/share/${TOKEN}/connections`);
if (res.status === 401) return; // Wait for auth
if (res.status === 401) return;
const data = await res.json();
document.getElementById('loadingState').classList.add('hidden');
@@ -144,106 +162,278 @@
const grid = document.getElementById('connectionsGrid');
grid.classList.remove('hidden');
grid.innerHTML = data.connections.map(c => `
<div class="card" style="padding: var(--space-md); border: 1px solid var(--border-color);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-sm);">
<div style="text-align: initial;">
<div style="font-weight: 600; font-size: 1.1rem;">${c.name}</div>
<div style="font-size: 0.8rem; color: var(--text-muted);">${c.protocol.toUpperCase()} • ${c.server_name}</div>
<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((c.protocol || '').toUpperCase())} · ${escHtml(c.server_name || '')}</div>
</div>
<span class="badge badge-success share-badge">${_('active')}</span>
</div>
<span class="badge badge-success">${_('active')}</span>
</div>
<button class="btn btn-secondary btn-sm w-full" onclick="showConfig('${c.id}', '${c.name}')">
${_('show_settings_btn')}
</button>
</div>
`).join('');
<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);
}
}
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');
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 fetchShareConfig(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');
}
}
let currentConfig = '';
let currentVpnLink = '';
async function showConfig(connId, name) {
try {
const res = await fetch(`/api/share/${TOKEN}/config/${connId}`, { method: 'POST' });
const data = await res.json();
if (data.error) throw new Error(data.error);
currentConfig = data.config;
currentVpnLink = data.vpn_link || '';
document.getElementById('configText').value = data.config;
document.getElementById('vpnLinkText').textContent = currentVpnLink;
document.getElementById('configModalTitle').textContent = name;
const dl = document.getElementById('downloadBtn');
dl.onclick = () => downloadFile(data.config, `${name}.conf`);
const qrContainer = document.getElementById('qrcode');
qrContainer.innerHTML = '';
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: data.config,
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff",
text: qrPayload,
width: 220,
height: 220,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.L
});
}
}
switchConfigTab('conf');
async function showDetails(connId, name) {
try {
const data = await fetchShareConfig(connId);
fillModal(name, data.config, data.vpn_link || '');
openModal('configModal');
} catch (err) {
alert(`${_('error')}: ` + err.message);
}
}
function copyConfig() {
copyToClipboard(currentConfig);
async function copyCurrentKey() {
try {
await copyKeyText(pickKey(currentConfig, currentVpnLink));
} catch (err) {
alert(`${_('error')}: ` + err.message);
}
}
function copyVpnLink() {
copyToClipboard(currentVpnLink);
function toggleConfigText() {
document.getElementById('configText').classList.toggle('hidden');
}
document.addEventListener('DOMContentLoaded', loadConnections);
</script>
<style>
.w-full {
width: 100%;
.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-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(255, 255, 255, 0.1);
border-top: 3px solid var(--accent-color);
border: 3px solid rgba(127, 127, 127, 0.2);
border-top-color: var(--accent);
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
animation: share-spin 0.8s linear infinite;
display: inline-block;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
@keyframes share-spin {
to { transform: rotate(360deg); }
}
</style>
{% endblock %}
translations/en.json
+7
View File
@@ -313,6 +313,13 @@
"loading_share_conns": "Loading connections...",
"no_active_conns": "You have no active connections yet.",
"show_settings_btn": "🔑 Show settings",
"share_copy_hint": "Tap the button — the key copies itself. Then paste it into your VPN app.",
"copy_key_big": "Copy key",
"copying_key": "Copying…",
"key_copied": "Key copied — paste it into the app",
"more_qr_download": "QR code & file",
"download_config_file": "Download config file",
"show_config_text": "Show config text",
"copied": "Copied!",
"active": "Active",
"site_description": "Amnezia Web Panel — management of VPN servers and protocols AmneziaWG",
translations/ru.json
+7
View File
@@ -313,6 +313,13 @@
"loading_share_conns": "Загрузка подключений...",
"no_active_conns": "У вас пока нет активных подключений.",
"show_settings_btn": "🔑 Показать настройки",
"share_copy_hint": "Нажмите кнопку — ключ скопируется сам. Потом вставьте его в приложение VPN.",
"copy_key_big": "Скопировать ключ",
"copying_key": "Копирую…",
"key_copied": "Ключ скопирован — вставьте в приложение",
"more_qr_download": "QR-код и файл",
"download_config_file": "Скачать файл конфига",
"show_config_text": "Показать текст конфига",
"copied": "Скопировано!",
"active": "Активен",
"site_description": "Amnezia Web Panel — управление VPN серверами и протоколами AmneziaWG",