835 lines
44 KiB
HTML
835 lines
44 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ t.configs_portal_heading }} | {{ t.site_name }}{% endblock title %}
|
|
|
|
{% block head_extra %}
|
|
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
[x-cloak] { display: none !important; }
|
|
body { margin: 0; min-height: 100vh; background: #edf3ef; color: #18232d; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
|
|
button, input { font: inherit; }
|
|
button { min-height: 40px; border: 1px solid #18342f; border-radius: 8px; padding: .55rem .85rem; background: #18342f; color: #fff; cursor: pointer; font-weight: 750; }
|
|
button.secondary { background: #fff; color: #18342f; border-color: #c7d4ce; }
|
|
button.ghost { background: transparent; color: #42515d; border-color: transparent; }
|
|
button.danger { background: #a8312d; border-color: #a8312d; color: #fff; }
|
|
button:disabled { opacity: .48; cursor: default; }
|
|
input { width: 100%; min-height: 42px; border: 1px solid #c7d4ce; border-radius: 8px; padding: .55rem .7rem; color: #18232d; background: #fff; }
|
|
code { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 6px; background: #f1f4f2; color: #26313a; padding: .18rem .4rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
|
|
.portal { min-height: 100vh; display: flex; flex-direction: column; }
|
|
.topbar { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.94); border-bottom: 1px solid #d6dfda; backdrop-filter: blur(12px); }
|
|
.topbar-inner { width: min(1040px, 100%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .85rem; padding: .75rem 1rem; }
|
|
.brand { display: flex; align-items: center; gap: .65rem; min-width: 0; color: inherit; text-decoration: none; }
|
|
.brand-mark { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: #18342f; color: #cce8da; font-weight: 900; }
|
|
.brand-text { display: grid; gap: .05rem; min-width: 0; }
|
|
.brand-title { font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.brand-version { color: #7a858d; font-size: .75rem; }
|
|
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; flex-wrap: wrap; }
|
|
.user-pill { color: #53616c; font-size: .86rem; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.lang-switch { display: inline-flex; align-items: center; border: 1px solid #d6dfda; border-radius: 8px; background: #f7faf8; overflow: hidden; }
|
|
.lang-switch a { min-width: 38px; padding: .38rem .5rem; color: #53616c; text-align: center; text-decoration: none; font-size: .82rem; font-weight: 800; }
|
|
.lang-switch a.active { background: #18342f; color: #fff; }
|
|
.logout-link { color: #53616c; text-decoration: none; font-size: .88rem; font-weight: 750; padding: .45rem .55rem; border-radius: 8px; }
|
|
.logout-link:hover { background: #e4ebe7; color: #18232d; }
|
|
.page { width: min(1040px, 100%); margin: 0 auto; padding: 1rem; display: grid; gap: 1rem; }
|
|
.panel { border: 1px solid #d6dfda; border-radius: 8px; background: #fff; box-shadow: 0 10px 30px rgba(24, 52, 47, .08); }
|
|
.intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; padding: 1rem; }
|
|
.eyebrow { margin: 0 0 .3rem; color: #5b6b64; font-size: .78rem; font-weight: 850; letter-spacing: 0; text-transform: uppercase; }
|
|
h1 { margin: 0; font-size: 2rem; line-height: 1.08; letter-spacing: 0; }
|
|
.counters { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
|
|
.counter { min-width: 92px; border: 1px solid #dce5e0; border-radius: 8px; padding: .55rem .65rem; background: #f7faf8; display: grid; gap: .1rem; }
|
|
.counter strong { font-size: 1.25rem; line-height: 1; }
|
|
.counter span { color: #69777f; font-size: .78rem; font-weight: 750; }
|
|
.portal-server-status { display: grid; gap: .45rem; padding: 0 1rem 1rem; }
|
|
.portal-server-head { display: flex; align-items: center; justify-content: space-between; gap: .65rem; color: #34424b; font-size: .83rem; font-weight: 850; }
|
|
.mini-button { min-height: 28px; border-radius: 7px; padding: .2rem .5rem; background: #fff; color: #18342f; border-color: #c7d4ce; font-size: .76rem; }
|
|
.server-status-grid { max-height: 138px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); gap: .4rem; padding-right: .12rem; }
|
|
.server-status-chip { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .42rem .5rem; align-items: center; border: 1px solid #dce5e0; border-radius: 8px; background: #f7faf8; padding: .45rem .52rem; }
|
|
.server-status-dot { width: .58rem; height: .58rem; border-radius: 999px; background: #8a969e; }
|
|
.server-status-chip.tone-online .server-status-dot { background: #2f8f4e; }
|
|
.server-status-chip.tone-warning .server-status-dot { background: #d39a00; }
|
|
.server-status-chip.tone-error .server-status-dot { background: #a8312d; }
|
|
.server-status-chip.tone-offline .server-status-dot { background: #69777f; }
|
|
.server-status-text { min-width: 0; display: grid; gap: .08rem; }
|
|
.server-status-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #18232d; font-size: .86rem; font-weight: 850; }
|
|
.server-status-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #69777f; font-size: .74rem; font-weight: 750; }
|
|
.server-status-muted { color: #69777f; font-size: .82rem; }
|
|
.create { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; padding: 0 1rem 1rem; align-items: end; }
|
|
.field { display: grid; gap: .32rem; min-width: 0; }
|
|
.field label { color: #34424b; font-size: .83rem; font-weight: 800; }
|
|
.notice { border: 1px solid #d6dfda; border-left-width: 4px; border-radius: 8px; background: #fff; padding: .75rem .85rem; display: grid; gap: .25rem; box-shadow: 0 8px 24px rgba(24, 52, 47, .06); }
|
|
.notice strong { color: #18232d; }
|
|
.notice span { color: #53616c; font-size: .9rem; }
|
|
.notice details { color: #69777f; font-size: .82rem; }
|
|
.notice summary { cursor: pointer; font-weight: 750; }
|
|
.notice.tone-success { border-left-color: #2f8f4e; }
|
|
.notice.tone-warning { border-left-color: #d39a00; }
|
|
.notice.tone-error { border-left-color: #a8312d; }
|
|
.empty { padding: 1rem; color: #53616c; }
|
|
.empty strong { display: block; margin-bottom: .25rem; color: #18232d; }
|
|
.key-list { display: grid; gap: .75rem; }
|
|
.key-card { border: 1px solid #d6dfda; border-radius: 8px; background: #fff; padding: .85rem; display: grid; gap: .75rem; }
|
|
.key-card.is-disabled { background: #fafafa; }
|
|
.key-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; min-width: 0; }
|
|
.key-title { min-width: 0; display: grid; gap: .32rem; }
|
|
.key-name { margin: 0; color: #18232d; font-size: 1.08rem; line-height: 1.2; overflow-wrap: anywhere; }
|
|
.status-chip { width: max-content; max-width: 100%; display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; padding: .15rem .5rem; font-size: .78rem; font-weight: 850; }
|
|
.status-chip.enabled { color: #155d36; background: #dcefe4; }
|
|
.status-chip.disabled { color: #69777f; background: #e8eeeb; }
|
|
.meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
|
|
.meta-item { min-width: 0; display: grid; gap: .24rem; }
|
|
.meta-label { color: #69777f; font-size: .77rem; font-weight: 800; }
|
|
.key-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; }
|
|
.key-actions .server-button { justify-self: stretch; }
|
|
.key-updated { color: #69777f; font-size: .82rem; overflow-wrap: anywhere; }
|
|
.backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1rem; background: rgba(16, 28, 36, .42); }
|
|
.sheet { width: min(720px, 100%); max-height: min(760px, calc(100vh - 2rem)); border: 1px solid #d6dfda; border-radius: 8px; background: #fff; box-shadow: 0 20px 60px rgba(16, 28, 36, .25); padding: 1rem; display: flex; flex-direction: column; gap: .8rem; }
|
|
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
|
|
.sheet-title { min-width: 0; display: grid; gap: .2rem; }
|
|
.sheet-title h2 { margin: 0; font-size: 1.18rem; line-height: 1.2; }
|
|
.sheet-title span { color: #69777f; font-size: .86rem; overflow-wrap: anywhere; }
|
|
.server-list { border: 1px solid #d6dfda; border-radius: 8px; overflow: auto; }
|
|
.server-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .62rem .7rem; border-bottom: 1px solid #e7eee9; background: #fff; }
|
|
.server-row:last-child { border-bottom: 0; }
|
|
.server-row:hover { background: #f7faf8; }
|
|
.server-main { min-width: 0; display: grid; gap: .28rem; }
|
|
.server-main strong { overflow-wrap: anywhere; }
|
|
.server-actions { display: flex; align-items: center; gap: .32rem; }
|
|
.icon-button { position: relative; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; display: grid; place-items: center; border-radius: 8px; }
|
|
.icon-button svg { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
|
.icon-button .qr-mark { font-size: .72rem; line-height: 1; font-weight: 900; letter-spacing: 0; }
|
|
.icon-button::after { content: attr(data-tip); position: absolute; right: calc(100% + .35rem); top: 50%; z-index: 4; width: max-content; max-width: 180px; padding: .38rem .5rem; border-radius: 6px; background: #18232d; color: #fff; font-size: .76rem; line-height: 1.2; font-weight: 750; opacity: 0; transform: translateY(-50%); pointer-events: none; transition: opacity .12s ease; }
|
|
.icon-button:hover::after, .icon-button:focus-visible::after { opacity: 1; }
|
|
.qr-modal { width: min(380px, 100%); border: 1px solid #d6dfda; border-radius: 8px; background: #fff; padding: 1rem; box-shadow: 0 20px 60px rgba(16, 28, 36, .25); display: grid; gap: .8rem; }
|
|
.qr-modal h2 { margin: 0; font-size: 1.08rem; overflow-wrap: anywhere; }
|
|
.qr-box { display: grid; place-items: center; padding: .75rem; border: 1px solid #d6dfda; border-radius: 8px; background: #fff; }
|
|
.qr-box svg { width: min(280px, 100%); height: auto; display: block; }
|
|
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
|
|
.telegram-sheet { width: min(480px, 100%); }
|
|
.telegram-copy { color: #53616c; line-height: 1.45; margin: 0; }
|
|
.guide-list { margin: 0; padding-left: 1.2rem; color: #34424b; display: grid; gap: .45rem; line-height: 1.4; }
|
|
.guide-list a { color: #18342f; font-weight: 850; }
|
|
.guide-list a.disabled { color: #69777f; pointer-events: none; text-decoration: none; }
|
|
@media (max-width: 720px) {
|
|
.topbar-inner { align-items: flex-start; flex-direction: column; }
|
|
.top-actions { width: 100%; justify-content: space-between; }
|
|
.user-pill { max-width: 100%; }
|
|
.intro { grid-template-columns: 1fr; align-items: start; }
|
|
h1 { font-size: 1.55rem; }
|
|
.counters { justify-content: stretch; }
|
|
.counter { flex: 1 1 120px; }
|
|
.server-status-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); max-height: 156px; }
|
|
.create { grid-template-columns: 1fr; }
|
|
.create button { width: 100%; }
|
|
.meta-grid { grid-template-columns: 1fr; }
|
|
.key-head { flex-direction: column; }
|
|
.key-actions { grid-template-columns: 1fr 1fr; }
|
|
.key-actions .server-button { grid-column: 1 / -1; }
|
|
.key-actions button { width: 100%; }
|
|
.backdrop { align-items: end; padding: 0; }
|
|
.sheet { max-height: 92vh; border-radius: 8px 8px 0 0; }
|
|
.server-row { grid-template-columns: minmax(0, 1fr) auto; padding: .58rem .62rem; }
|
|
.server-actions { gap: .25rem; }
|
|
.icon-button { width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
|
|
.qr-modal { width: 100%; border-radius: 8px 8px 0 0; }
|
|
}
|
|
</style>
|
|
{% endblock head_extra %}
|
|
|
|
{% block body %}
|
|
<div class="portal" x-data="clientPortal()" x-init="init()">
|
|
<header class="topbar">
|
|
<div class="topbar-inner">
|
|
<a class="brand" href="/configs">
|
|
<span class="brand-mark">A</span>
|
|
<span class="brand-text">
|
|
<span class="brand-title">{{ t.site_name }}</span>
|
|
<span class="brand-version">v{{ app_version }}</span>
|
|
</span>
|
|
</a>
|
|
<div class="top-actions">
|
|
<span class="user-pill">{{ user_name }} ({{ user_role }})</span>
|
|
<div class="lang-switch">
|
|
<a href="#"{% if t.lang.code() == "en" %} class="active"{% endif %} onclick="location.href='/set-lang?lang=en&next='+encodeURIComponent(location.pathname);return false">EN</a>
|
|
<a href="#"{% if t.lang.code() == "ru" %} class="active"{% endif %} onclick="location.href='/set-lang?lang=ru&next='+encodeURIComponent(location.pathname);return false">RU</a>
|
|
</div>
|
|
<a class="logout-link" href="/logout">{{ t.nav_logout }}</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="page">
|
|
<section class="panel">
|
|
<div class="intro">
|
|
<div>
|
|
<p class="eyebrow">{{ t.configs_portal_kicker }}</p>
|
|
<h1>{{ t.configs_portal_heading }}</h1>
|
|
</div>
|
|
<div class="counters" aria-label="{{ t.configs_key_status }}">
|
|
<div class="counter">
|
|
<strong x-text="activeClients()"></strong>
|
|
<span>{{ t.configs_active_keys }}</span>
|
|
</div>
|
|
<div class="counter">
|
|
<strong x-text="clients.length"></strong>
|
|
<span>{{ t.configs_total_keys }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portal-server-status">
|
|
<div class="portal-server-head">
|
|
<span>{{ t.configs_server_status }}</span>
|
|
<button type="button" class="mini-button" @click="loadServerStatus()" :disabled="serverStatusBusy">{{ t.configs_refresh }}</button>
|
|
</div>
|
|
<template x-if="serverStatusBusy && serverPods().length === 0">
|
|
<div class="server-status-muted">{{ t.configs_loading_status }}</div>
|
|
</template>
|
|
<template x-if="serverStatusError && serverPods().length === 0 && !serverStatusBusy">
|
|
<div class="server-status-muted">{{ t.configs_status_unavailable }}</div>
|
|
</template>
|
|
<template x-if="serverStatus && serverPods().length === 0 && !serverStatusBusy && !serverStatusError">
|
|
<div class="server-status-muted">{{ t.configs_no_servers }}</div>
|
|
</template>
|
|
<template x-if="serverPods().length > 0">
|
|
<div class="server-status-grid">
|
|
<template x-for="pod in serverPods()" :key="pod.name">
|
|
<div class="server-status-chip" :class="`tone-${serverTone(pod)}`" :title="serverTooltip(pod)">
|
|
<span class="server-status-dot"></span>
|
|
<span class="server-status-text">
|
|
<span class="server-status-name" x-text="serverName(pod)"></span>
|
|
<span class="server-status-label" x-text="serverStatusLabel(pod)"></span>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="create">
|
|
<div class="field">
|
|
<label for="client-name">{{ t.configs_new_key }}</label>
|
|
<input id="client-name" x-model="newName" @keydown.enter.prevent="createClient()" placeholder="{{ t.configs_name_placeholder }}">
|
|
</div>
|
|
<button type="button" @click="createClient()" :disabled="busy">{{ t.configs_create }}</button>
|
|
</div>
|
|
</section>
|
|
|
|
<template x-if="notice">
|
|
<section class="notice" :class="`tone-${notice.kind}`">
|
|
<strong x-text="notice.title"></strong>
|
|
<span x-text="notice.message"></span>
|
|
<details x-show="notice.detail">
|
|
<summary>{{ t.notice_detail }}</summary>
|
|
<span x-text="notice.detail"></span>
|
|
</details>
|
|
</section>
|
|
</template>
|
|
|
|
<template x-if="!busy && clients.length === 0">
|
|
<section class="panel empty">
|
|
<strong>{{ t.configs_empty_title }}</strong>
|
|
<span>{{ t.configs_empty_hint }}</span>
|
|
</section>
|
|
</template>
|
|
|
|
<template x-if="clients.length > 0">
|
|
<section class="key-list">
|
|
<template x-for="client in sortedClients()" :key="client.id">
|
|
<article class="key-card" :class="{ 'is-disabled': !client.enabled }">
|
|
<div class="key-head">
|
|
<div class="key-title">
|
|
<h2 class="key-name" x-text="client.name"></h2>
|
|
<span class="status-chip" :class="client.enabled ? 'enabled' : 'disabled'" x-text="client.enabled ? '{{ t.configs_enabled_state }}' : '{{ t.configs_disabled_state }}'"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="meta-grid">
|
|
<div class="meta-item">
|
|
<span class="meta-label">{{ t.configs_address }}</span>
|
|
<code x-text="client.address + '/32'"></code>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">{{ t.configs_public_key }}</span>
|
|
<code x-text="shortKey(client.public_key)"></code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="key-actions">
|
|
<button type="button" class="server-button" @click="openServers(client)" :disabled="busy || !client.enabled">{{ t.configs_choose_server }}</button>
|
|
<button type="button" class="secondary" @click="setEnabled(client, !client.enabled)" :disabled="busy" x-text="client.enabled ? '{{ t.configs_disable }}' : '{{ t.configs_enable }}'"></button>
|
|
<button type="button" class="danger" @click="deleteClient(client)" :disabled="busy">{{ t.users_delete }}</button>
|
|
</div>
|
|
|
|
<span class="key-updated" x-text="client.updated_at ? '{{ t.configs_updated }}: ' + formatDate(client.updated_at) : '{{ t.configs_key_ready }}'"></span>
|
|
</article>
|
|
</template>
|
|
</section>
|
|
</template>
|
|
</main>
|
|
|
|
<template x-if="serverModal">
|
|
<div class="backdrop" x-cloak @click.self="closeServers()">
|
|
<section class="sheet">
|
|
<div class="sheet-head">
|
|
<div class="sheet-title">
|
|
<h2>{{ t.configs_choose_server }}</h2>
|
|
<span x-text="serverModal.client.name"></span>
|
|
</div>
|
|
<button type="button" class="ghost" @click="closeServers()">{{ t.admin_close }}</button>
|
|
</div>
|
|
<input x-model="serverModal.filter" placeholder="{{ t.configs_server_search }}">
|
|
<template x-if="serverModal.loading">
|
|
<div class="empty">{{ t.configs_loading_servers }}</div>
|
|
</template>
|
|
<template x-if="!serverModal.loading && filteredServers().length === 0">
|
|
<div class="empty">{{ t.configs_no_servers }}</div>
|
|
</template>
|
|
<template x-if="!serverModal.loading && filteredServers().length > 0">
|
|
<div class="server-list">
|
|
<template x-for="server in filteredServers()" :key="server.endpoint_id || server.endpoint_name">
|
|
<article class="server-row">
|
|
<div class="server-main">
|
|
<strong x-text="server.endpoint_name"></strong>
|
|
<code x-text="server.endpoint"></code>
|
|
</div>
|
|
<div class="server-actions">
|
|
<button type="button" class="icon-button" @click="copyVpnUrl(serverModal.client, server)" :disabled="busy" data-tip="{{ t.configs_copy_link }}" title="{{ t.configs_copy_link }}" aria-label="{{ t.configs_copy_link }}">
|
|
<svg aria-hidden="true" viewBox="0 0 24 24">
|
|
<path d="M10 13a5 5 0 0 1 0-7l1-1a5 5 0 0 1 7 7l-1 1"></path>
|
|
<path d="M14 11a5 5 0 0 1 0 7l-1 1a5 5 0 0 1-7-7l1-1"></path>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="secondary icon-button" @click="openQr(serverModal.client, server)" :disabled="busy" data-tip="{{ t.configs_qr_code }}" title="{{ t.configs_qr_code }}" aria-label="{{ t.configs_qr_code }}">
|
|
<span class="qr-mark" aria-hidden="true">QR</span>
|
|
</button>
|
|
<button type="button" class="secondary icon-button" @click="downloadConfig(serverModal.client, server)" :disabled="busy" data-tip="{{ t.configs_download }}" title="{{ t.configs_download }}" aria-label="{{ t.configs_download }}">
|
|
<svg aria-hidden="true" viewBox="0 0 24 24">
|
|
<path d="M12 3v12"></path>
|
|
<path d="m7 10 5 5 5-5"></path>
|
|
<path d="M5 21h14"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="qrModal">
|
|
<div class="backdrop" x-cloak @click.self="closeQr()">
|
|
<section class="qr-modal">
|
|
<h2 x-text="qrModal.title"></h2>
|
|
<div class="qr-box" x-html="qrModal.svg"></div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="secondary" @click="copyText(qrModal.url)">{{ t.configs_copy_link }}</button>
|
|
<button type="button" @click="closeQr()">{{ t.admin_close }}</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="telegramModal">
|
|
<div class="backdrop" x-cloak>
|
|
<section class="sheet telegram-sheet">
|
|
<div class="sheet-head">
|
|
<div class="sheet-title">
|
|
<h2>{{ t.telegram_link_title }}</h2>
|
|
<span x-text="telegramBotLabel()"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<template x-if="telegramModal === 'webapp'">
|
|
<div>
|
|
<p class="telegram-copy">{{ t.telegram_webapp_message }}</p>
|
|
<div class="modal-actions">
|
|
<button type="button" class="secondary" @click="declineTelegramLink()" :disabled="telegramBusy">{{ t.telegram_skip }}</button>
|
|
<button type="button" @click="linkTelegramWebApp()" :disabled="telegramBusy">{{ t.telegram_save }}</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="telegramModal === 'manualPrompt'">
|
|
<div>
|
|
<p class="telegram-copy">{{ t.telegram_manual_message }}</p>
|
|
<div class="modal-actions">
|
|
<button type="button" class="secondary" @click="declineTelegramLink()" :disabled="telegramBusy">{{ t.telegram_skip }}</button>
|
|
<button type="button" @click="telegramModal = 'manualGuide'">{{ t.telegram_connect }}</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="telegramModal === 'manualGuide'">
|
|
<div class="field">
|
|
<p class="eyebrow">{{ t.telegram_guide_title }}</p>
|
|
<ol class="guide-list">
|
|
<li>{{ t.telegram_guide_start }} <a :href="telegramBotUrl()" target="_blank" rel="noreferrer" :class="{ disabled: !telegram.bot_url }">{{ t.telegram_open_bot }}</a></li>
|
|
<li>{{ t.telegram_guide_get_id }}</li>
|
|
<li>{{ t.telegram_guide_paste }}</li>
|
|
</ol>
|
|
<label for="telegram-id">{{ t.telegram_id_label }}</label>
|
|
<input id="telegram-id" x-model="telegramManualId" inputmode="numeric" pattern="[0-9]*" placeholder="{{ t.telegram_id_placeholder }}" @keydown.enter.prevent="saveTelegramManual()">
|
|
<div class="modal-actions">
|
|
<button type="button" class="secondary" @click="declineTelegramLink()" :disabled="telegramBusy">{{ t.telegram_skip }}</button>
|
|
<button type="button" @click="saveTelegramManual()" :disabled="telegramBusy || !telegramManualId.trim()">{{ t.telegram_save }}</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<script>
|
|
function clientPortal() {
|
|
return {
|
|
clients: [],
|
|
newName: '',
|
|
busy: false,
|
|
status: '',
|
|
error: '',
|
|
notice: null,
|
|
serverStatus: null,
|
|
serverStatusBusy: false,
|
|
serverStatusError: '',
|
|
serverStatusTimer: null,
|
|
serverConfigs: {},
|
|
serverModal: null,
|
|
qrModal: null,
|
|
telegram: {
|
|
enabled: false,
|
|
bot_username: '',
|
|
bot_url: '',
|
|
linked: false,
|
|
declined: false,
|
|
telegram_id: null,
|
|
isWebApp: false,
|
|
initData: '',
|
|
},
|
|
telegramModal: null,
|
|
telegramManualId: '',
|
|
telegramBusy: false,
|
|
telegramPromptChecked: false,
|
|
init() {
|
|
this.initTelegramWebApp();
|
|
this.load();
|
|
this.loadServerStatus();
|
|
this.loadTelegramStatus();
|
|
this.serverStatusTimer = setInterval(() => this.loadServerStatus(true), 30000);
|
|
},
|
|
async request(url, options = {}) {
|
|
const response = await fetch(url, {
|
|
headers: { 'content-type': 'application/json' },
|
|
...options,
|
|
});
|
|
const data = await response.json().catch(() => ({}));
|
|
if (!response.ok) {
|
|
const error = new Error(data.error || this.httpStatusMessage(response.status));
|
|
error.title = data.title || this.httpStatusTitle(response.status);
|
|
error.detail = data.detail || '';
|
|
error.code = data.code || '';
|
|
error.status = response.status;
|
|
throw error;
|
|
}
|
|
return data;
|
|
},
|
|
async load() {
|
|
this.error = '';
|
|
this.busy = true;
|
|
try {
|
|
const data = await this.request('/api/vpn-clients');
|
|
this.clients = data.clients || [];
|
|
} catch (e) {
|
|
this.showError(e);
|
|
} finally {
|
|
this.busy = false;
|
|
}
|
|
},
|
|
async loadServerStatus(silent = false) {
|
|
this.serverStatusError = '';
|
|
if (!silent) this.serverStatusBusy = true;
|
|
try {
|
|
this.serverStatus = await this.request('/api/vpn-status');
|
|
} catch (e) {
|
|
this.serverStatusError = e.message;
|
|
} finally {
|
|
this.serverStatusBusy = false;
|
|
}
|
|
},
|
|
initTelegramWebApp() {
|
|
const webApp = window.Telegram && window.Telegram.WebApp;
|
|
if (!webApp) return;
|
|
try {
|
|
webApp.ready();
|
|
webApp.expand();
|
|
} catch (_) {}
|
|
this.telegram.isWebApp = Boolean(webApp.initData);
|
|
this.telegram.initData = webApp.initData || '';
|
|
},
|
|
async loadTelegramStatus() {
|
|
try {
|
|
const status = await this.request('/api/telegram-link/status');
|
|
this.applyTelegramStatus(status);
|
|
this.maybePromptTelegram();
|
|
} catch (e) {
|
|
console.warn('telegram status failed', e);
|
|
}
|
|
},
|
|
applyTelegramStatus(status) {
|
|
this.telegram = {
|
|
...this.telegram,
|
|
enabled: Boolean(status.enabled),
|
|
bot_username: status.bot_username || '',
|
|
bot_url: status.bot_url || '',
|
|
linked: Boolean(status.linked),
|
|
declined: Boolean(status.declined),
|
|
telegram_id: status.telegram_id || null,
|
|
};
|
|
},
|
|
maybePromptTelegram() {
|
|
if (this.telegramPromptChecked) return;
|
|
this.telegramPromptChecked = true;
|
|
if (!this.telegram.enabled || this.telegram.linked || this.telegram.declined) return;
|
|
this.telegramModal = (this.telegram.isWebApp && this.telegram.initData) ? 'webapp' : 'manualPrompt';
|
|
},
|
|
async linkTelegramWebApp() {
|
|
this.telegramBusy = true;
|
|
this.clearNotice();
|
|
try {
|
|
const data = await this.request('/api/telegram-link/webapp', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ init_data: this.telegram.initData }),
|
|
});
|
|
this.applyTelegramStatus(data.status || {});
|
|
this.telegramModal = null;
|
|
this.setNotice('success', '{{ t.notice_success_title }}', '{{ t.telegram_saved }}');
|
|
} catch (e) {
|
|
this.showError(e);
|
|
} finally {
|
|
this.telegramBusy = false;
|
|
}
|
|
},
|
|
async saveTelegramManual() {
|
|
this.telegramBusy = true;
|
|
this.clearNotice();
|
|
try {
|
|
const data = await this.request('/api/telegram-link/manual', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ telegram_id: this.telegramManualId }),
|
|
});
|
|
this.applyTelegramStatus(data.status || {});
|
|
this.telegramManualId = '';
|
|
this.telegramModal = null;
|
|
this.setNotice('success', '{{ t.notice_success_title }}', '{{ t.telegram_saved }}');
|
|
} catch (e) {
|
|
this.showError(e);
|
|
} finally {
|
|
this.telegramBusy = false;
|
|
}
|
|
},
|
|
async declineTelegramLink() {
|
|
this.telegramBusy = true;
|
|
this.clearNotice();
|
|
try {
|
|
const data = await this.request('/api/telegram-link/decline', { method: 'POST' });
|
|
this.applyTelegramStatus(data.status || {});
|
|
this.telegramModal = null;
|
|
this.setNotice('success', '{{ t.notice_success_title }}', '{{ t.telegram_declined }}');
|
|
} catch (e) {
|
|
this.showError(e);
|
|
} finally {
|
|
this.telegramBusy = false;
|
|
}
|
|
},
|
|
telegramBotUrl() {
|
|
return this.telegram.bot_url || '#';
|
|
},
|
|
telegramBotLabel() {
|
|
return this.telegram.bot_username ? `@${this.telegram.bot_username}` : '{{ t.telegram_bot_unconfigured }}';
|
|
},
|
|
async createClient() {
|
|
this.clearNotice();
|
|
this.busy = true;
|
|
try {
|
|
const data = await this.request('/api/vpn-clients', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ name: this.newName }),
|
|
});
|
|
this.clients.push(data.client);
|
|
delete this.serverConfigs[data.client.id];
|
|
this.newName = '';
|
|
this.applyResponseNotice(data, '{{ t.notice_create_success }}');
|
|
} catch (e) {
|
|
this.showError(e);
|
|
} finally {
|
|
this.busy = false;
|
|
}
|
|
},
|
|
async setEnabled(client, enabled) {
|
|
this.clearNotice();
|
|
this.busy = true;
|
|
try {
|
|
const data = await this.request(`/api/vpn-clients/${client.id}/enabled`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({ enabled }),
|
|
});
|
|
const index = this.clients.findIndex((item) => item.id === client.id);
|
|
if (index !== -1) this.clients[index] = data.client;
|
|
delete this.serverConfigs[client.id];
|
|
this.applyResponseNotice(data, '{{ t.notice_update_success }}');
|
|
} catch (e) {
|
|
this.showError(e);
|
|
} finally {
|
|
this.busy = false;
|
|
}
|
|
},
|
|
async deleteClient(client) {
|
|
if (!confirm('{{ t.users_delete_confirm }}')) return;
|
|
this.clearNotice();
|
|
this.busy = true;
|
|
try {
|
|
const data = await this.request(`/api/vpn-clients/${client.id}`, { method: 'DELETE' });
|
|
this.clients = this.clients.filter((item) => item.id !== client.id);
|
|
delete this.serverConfigs[client.id];
|
|
this.applyResponseNotice(data, '{{ t.notice_delete_success }}');
|
|
} catch (e) {
|
|
this.showError(e);
|
|
} finally {
|
|
this.busy = false;
|
|
}
|
|
},
|
|
async openServers(client) {
|
|
this.clearNotice();
|
|
const cached = this.serverConfigs[client.id];
|
|
this.serverModal = {
|
|
client,
|
|
filter: '',
|
|
loading: !cached || cached.loading,
|
|
servers: cached ? cached.servers : [],
|
|
};
|
|
try {
|
|
const servers = await this.loadClientServers(client);
|
|
if (this.serverModal && this.serverModal.client.id === client.id) {
|
|
this.serverModal.loading = false;
|
|
this.serverModal.servers = servers;
|
|
}
|
|
} catch (e) {
|
|
if (this.serverModal && this.serverModal.client.id === client.id) {
|
|
this.serverModal.loading = false;
|
|
this.serverModal.servers = [];
|
|
}
|
|
this.showError(e, {
|
|
title: '{{ t.notice_server_list_error_title }}',
|
|
message: '{{ t.notice_server_list_error_message }}',
|
|
});
|
|
}
|
|
},
|
|
async loadClientServers(client) {
|
|
const cached = this.serverConfigs[client.id];
|
|
if (cached && !cached.loading) return cached.servers || [];
|
|
|
|
this.serverConfigs[client.id] = { loading: true, servers: [] };
|
|
try {
|
|
const data = await this.request(`/api/vpn-clients/${client.id}/config`);
|
|
const servers = data.servers || [];
|
|
this.serverConfigs[client.id] = { loading: false, servers };
|
|
return servers;
|
|
} catch (e) {
|
|
this.serverConfigs[client.id] = { loading: false, servers: [] };
|
|
throw e;
|
|
}
|
|
},
|
|
closeServers() {
|
|
this.serverModal = null;
|
|
},
|
|
filteredServers() {
|
|
if (!this.serverModal) return [];
|
|
const query = this.serverModal.filter.trim().toLowerCase();
|
|
if (!query) return this.serverModal.servers;
|
|
return this.serverModal.servers.filter((server) => {
|
|
return [server.endpoint_name, server.endpoint, server.endpoint_id]
|
|
.filter(Boolean)
|
|
.some((value) => value.toLowerCase().includes(query));
|
|
});
|
|
},
|
|
async copyVpnUrl(client, server) {
|
|
this.clearNotice();
|
|
this.busy = true;
|
|
try {
|
|
await this.copyText(server.vpn_url);
|
|
this.setNotice('success', '{{ t.notice_success_title }}', `${server.endpoint_name}: {{ t.configs_vpn_url_copied }}`);
|
|
} catch (e) {
|
|
this.showError(e);
|
|
} finally {
|
|
this.busy = false;
|
|
}
|
|
},
|
|
async downloadConfig(client, server) {
|
|
this.clearNotice();
|
|
this.busy = true;
|
|
try {
|
|
const blob = new Blob([server.config], { type: 'text/plain' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `${this.fileSlug(client.name || 'amnezia-client')}-${this.fileSlug(server.endpoint_name)}.conf`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.remove();
|
|
URL.revokeObjectURL(url);
|
|
this.setNotice('success', '{{ t.notice_success_title }}', `${server.endpoint_name}: ${server.endpoint}`);
|
|
} catch (e) {
|
|
this.showError(e);
|
|
} finally {
|
|
this.busy = false;
|
|
}
|
|
},
|
|
openQr(client, server) {
|
|
this.qrModal = {
|
|
title: `${client.name || 'amnezia-client'} - ${server.endpoint_name}`,
|
|
svg: server.qr_svg,
|
|
url: server.vpn_url,
|
|
};
|
|
},
|
|
closeQr() {
|
|
this.qrModal = null;
|
|
},
|
|
async copyText(text) {
|
|
if (navigator.clipboard && window.isSecureContext) {
|
|
await navigator.clipboard.writeText(text);
|
|
return;
|
|
}
|
|
|
|
const textarea = document.createElement('textarea');
|
|
textarea.value = text;
|
|
textarea.setAttribute('readonly', '');
|
|
textarea.style.position = 'fixed';
|
|
textarea.style.left = '-9999px';
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
const copied = document.execCommand('copy');
|
|
textarea.remove();
|
|
if (!copied) {
|
|
throw new Error('copy failed');
|
|
}
|
|
},
|
|
sortedClients() {
|
|
return [...this.clients].sort((left, right) => {
|
|
if (left.enabled !== right.enabled) return left.enabled ? -1 : 1;
|
|
return String(left.name || '').localeCompare(String(right.name || ''));
|
|
});
|
|
},
|
|
activeClients() {
|
|
return this.clients.filter((client) => client.enabled).length;
|
|
},
|
|
serverPods() {
|
|
return (this.serverStatus && this.serverStatus.pods) || [];
|
|
},
|
|
serverName(pod) {
|
|
return pod.endpoint_name || pod.node_name || pod.name || '{{ t.configs_status_unknown }}';
|
|
},
|
|
serverTone(pod) {
|
|
if (!pod.ready) return 'offline';
|
|
if (pod.rollout_status === 'applied') return 'online';
|
|
if (pod.rollout_status === 'error') return 'error';
|
|
if (pod.rollout_status === 'pending_apply' || pod.rollout_status === 'pending_restart' || pod.rollout_status === 'starting') return 'warning';
|
|
return 'offline';
|
|
},
|
|
serverStatusLabel(pod) {
|
|
if (!pod.ready) return '{{ t.configs_status_offline }}';
|
|
const labels = {
|
|
applied: '{{ t.configs_status_online }}',
|
|
starting: '{{ t.configs_status_starting }}',
|
|
pending_apply: '{{ t.configs_status_pending_apply }}',
|
|
pending_restart: '{{ t.configs_status_pending_apply }}',
|
|
error: '{{ t.configs_status_error }}',
|
|
unknown: '{{ t.configs_status_unknown }}',
|
|
};
|
|
return labels[pod.rollout_status] || pod.rollout_status || '{{ t.configs_status_unknown }}';
|
|
},
|
|
serverTooltip(pod) {
|
|
return [
|
|
this.serverName(pod),
|
|
pod.endpoint || null,
|
|
pod.ready ? '{{ t.configs_ready }}' : '{{ t.configs_not_ready }}',
|
|
this.serverStatusLabel(pod),
|
|
].filter(Boolean).join(' - ');
|
|
},
|
|
shortKey(key) {
|
|
if (!key || key.length <= 16) return key || '';
|
|
return `${key.slice(0, 8)}...${key.slice(-8)}`;
|
|
},
|
|
fileSlug(value) {
|
|
return String(value || 'amnezia').trim().replace(/[^A-Za-z0-9._-]+/g, '-').replace(/^-+|-+$/g, '') || 'amnezia';
|
|
},
|
|
clearNotice() {
|
|
this.error = '';
|
|
this.status = '';
|
|
this.notice = null;
|
|
},
|
|
setNotice(kind, title, message, detail = '') {
|
|
this.notice = { kind, title, message, detail };
|
|
this.error = kind === 'error' ? message : '';
|
|
this.status = kind === 'error' ? '' : message;
|
|
},
|
|
applyResponseNotice(data, fallbackMessage) {
|
|
if (data.notice) {
|
|
const notice = this.normalizeNotice(data.notice);
|
|
this.setNotice(notice.kind, notice.title, notice.message, notice.detail || '');
|
|
return;
|
|
}
|
|
this.setNotice('success', '{{ t.notice_success_title }}', (data.sync && data.sync.message) || fallbackMessage);
|
|
},
|
|
normalizeNotice(notice) {
|
|
if (notice.code === 'secret_sync_failed') {
|
|
return {
|
|
kind: 'warning',
|
|
title: '{{ t.notice_sync_warning_title }}',
|
|
message: '{{ t.notice_sync_warning_message }}',
|
|
detail: notice.detail || '',
|
|
};
|
|
}
|
|
return {
|
|
kind: notice.kind || 'warning',
|
|
title: notice.title || '{{ t.notice_warning_title }}',
|
|
message: notice.message || '',
|
|
detail: notice.detail || '',
|
|
};
|
|
},
|
|
showError(error, fallback = {}) {
|
|
this.setNotice(
|
|
'error',
|
|
fallback.title || error.title || '{{ t.notice_error_title }}',
|
|
fallback.message || error.message || '{{ t.notice_error_title }}',
|
|
error.detail || ''
|
|
);
|
|
},
|
|
httpStatusTitle(status) {
|
|
if (status === 401) return '{{ t.login_heading }}';
|
|
if (status === 403) return '{{ t.notice_error_title }}';
|
|
if (status === 404) return '{{ t.configs_empty }}';
|
|
if (status === 409) return '{{ t.notice_warning_title }}';
|
|
if (status === 503) return '{{ t.notice_server_list_error_title }}';
|
|
return '{{ t.notice_error_title }}';
|
|
},
|
|
httpStatusMessage(status) {
|
|
if (status === 401) return 'not authenticated';
|
|
if (status === 403) return 'access denied';
|
|
if (status === 404) return 'not found';
|
|
if (status === 409) return '{{ t.configs_no_servers }}';
|
|
if (status === 503) return '{{ t.notice_server_list_error_message }}';
|
|
return '{{ t.notice_error_title }}';
|
|
},
|
|
formatDate(value) {
|
|
if (!value) return '{{ t.configs_never }}';
|
|
const parsed = Date.parse(value);
|
|
if (Number.isNaN(parsed)) return value;
|
|
return new Date(parsed).toLocaleDateString();
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
{% endblock body %}
|