feat(panel): auto tg link host + theme switcher

mtproto status now derives advertised host from request when MTPRO_PUBLIC_HOST/CLIENT_CONFIG_ENDPOINT are unset, so tg:// always works with the host:port the admin uses. Adds copy button. Adds theme selector (auto/light/dark) persisted in localStorage with prefers-color-scheme fallback. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-20 14:41:59 +00:00 · 2026-05-15 04:03:00 +03:00
parent bb007ad644
commit 9d751922fb
5 changed files with 288 additions and 28 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "amnezia-admin",
-  "version": "1.2.20",
+  "version": "1.2.21",
  "private": true,
  "description": "amnezia_web — базовая панель AmneziaWG (FREE: просмотр и удаление клиентов; полная версия — PRO).",
  "license": "MIT",
--- a/public/app.js
+++ b/public/app.js
@@ -29,6 +29,11 @@ const mtprotoBanner = document.querySelector("#mtproto-banner");
 const mtprotoHostPortInput = document.querySelector("#mtproto-host-port");
 const mtprotoSecretInput = document.querySelector("#mtproto-secret-opt");
 const mtprotoCalloutEl = document.querySelector("#mtproto-callout");
+const mtprotoLinkCardEl = document.querySelector("#mtproto-link-card");
+const mtprotoLinkAnchorEl = document.querySelector("#mtproto-link-anchor");
+const mtprotoLinkCopyBtn = document.querySelector("#mtproto-link-copy");
+const mtprotoLinkCopyState = document.querySelector("#mtproto-link-copy-state");
+const themeSelect = document.querySelector("#theme-select");

 const cascadePanel = document.querySelector("#cascade-panel");
 const usersPanel = document.querySelector("#users-panel");
@@ -469,18 +474,19 @@ async function refreshMtprotoPanel() {
      mtprotoActionsEl.appendChild(imgHint);
    }

-    if (snap.tgLink) {
-      const link = document.createElement("div");
-      link.className = "mtproto-deep-link muted warp-muted";
-      const lab = document.createElement("strong");
-      lab.textContent = "Ссылка в Telegram: ";
-      const a = document.createElement("a");
-      a.href = snap.tgLink;
-      a.textContent = snap.tgLink;
-      a.target = "_blank";
-      a.rel = "noopener noreferrer";
-      link.append(lab, a);
-      mtprotoActionsEl.appendChild(link);
+    if (mtprotoLinkCardEl) {
+      if (snap.tgLink) {
+        mtprotoLinkCardEl.classList.remove("hidden");
+        mtprotoLinkCardEl.dataset.tgLink = snap.tgLink;
+        if (mtprotoLinkAnchorEl) {
+          mtprotoLinkAnchorEl.href = snap.tgLink;
+          mtprotoLinkAnchorEl.textContent = snap.tgLink;
+        }
+        if (mtprotoLinkCopyState) mtprotoLinkCopyState.textContent = "";
+      } else {
+        mtprotoLinkCardEl.classList.add("hidden");
+        delete mtprotoLinkCardEl.dataset.tgLink;
+      }
    }

    const row = document.createElement("div");
@@ -563,6 +569,10 @@ async function refreshMtprotoPanel() {
      mtprotoCalloutEl.textContent = "";
      mtprotoCalloutEl.classList.add("hidden");
    }
+    if (mtprotoLinkCardEl) {
+      mtprotoLinkCardEl.classList.add("hidden");
+      delete mtprotoLinkCardEl.dataset.tgLink;
+    }
    if (mtprotoLogsTailEl) mtprotoLogsTailEl.textContent = "";
    const err = document.createElement("p");
    err.className = "muted warp-muted err";
@@ -1659,5 +1669,83 @@ async function boot() {
  }
 }

+function applyThemePref(pref) {
+  const root = document.documentElement;
+  const p = pref === "light" || pref === "dark" ? pref : "auto";
+  const resolved =
+    p === "auto"
+      ? window.matchMedia?.("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light"
+      : p;
+  root.setAttribute("data-theme-pref", p);
+  root.setAttribute("data-theme", resolved);
+  try {
+    localStorage.setItem("amnezia.theme", p);
+  } catch {
+    /* приватный режим — не критично */
+  }
+}
+
+function initThemeSwitch() {
+  let saved = "auto";
+  try {
+    const v = localStorage.getItem("amnezia.theme");
+    if (v === "light" || v === "dark" || v === "auto") saved = v;
+  } catch {
+    /* приватный режим — не критично */
+  }
+  applyThemePref(saved);
+  if (themeSelect) {
+    themeSelect.value = saved;
+    themeSelect.addEventListener("change", () => applyThemePref(themeSelect.value));
+  }
+  const mql = window.matchMedia?.("(prefers-color-scheme: dark)");
+  if (mql) {
+    const handler = () => {
+      const pref = document.documentElement.getAttribute("data-theme-pref") || "auto";
+      if (pref === "auto") applyThemePref("auto");
+    };
+    if (typeof mql.addEventListener === "function") mql.addEventListener("change", handler);
+    else if (typeof mql.addListener === "function") mql.addListener(handler);
+  }
+}
+
+function initMtprotoLinkCopy() {
+  if (!mtprotoLinkCopyBtn) return;
+  mtprotoLinkCopyBtn.addEventListener("click", async () => {
+    const link =
+      mtprotoLinkCardEl?.dataset?.tgLink ||
+      mtprotoLinkAnchorEl?.href ||
+      "";
+    if (!link) return;
+    try {
+      if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(link);
+      else {
+        const ta = document.createElement("textarea");
+        ta.value = link;
+        ta.style.position = "fixed";
+        ta.style.opacity = "0";
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand("copy");
+        ta.remove();
+      }
+      if (mtprotoLinkCopyState) {
+        mtprotoLinkCopyState.textContent = "Скопировано";
+        setTimeout(() => {
+          if (mtprotoLinkCopyState) mtprotoLinkCopyState.textContent = "";
+        }, 2000);
+      }
+    } catch (e) {
+      if (mtprotoLinkCopyState) {
+        mtprotoLinkCopyState.textContent = "Не удалось скопировать — выделите вручную.";
+      }
+    }
+  });
+}
+
+initThemeSwitch();
+initMtprotoLinkCopy();
 void hydratePanelPromoFooter();
 boot();
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,20 @@
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="/styles.css?v=1.2.20">
+  <link rel="stylesheet" href="/styles.css?v=1.2.21">
+  <script>
+    (function () {
+      try {
+        var saved = localStorage.getItem("amnezia.theme");
+        var t = saved === "light" || saved === "dark" ? saved : "auto";
+        var resolved = t === "auto"
+          ? (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
+          : t;
+        document.documentElement.setAttribute("data-theme-pref", t);
+        document.documentElement.setAttribute("data-theme", resolved);
+      } catch (e) {}
+    })();
+  </script>
 </head>
 <body class="page">
  <aside id="panel-promo-strip" class="panel-promo-strip hidden" role="complementary" aria-label="Поддержка проекта">
@@ -43,6 +56,14 @@
        <p class="sub">Базовая открытая панель: просмотр клиентов AmneziaWG и (после входа) установка Telegram MTProto‑прокси в Docker без PRO. Полное управление peer, экспорт .conf, каскад, Cloudflare WARP и синхронизация времени хоста — в версии PRO.</p>
      </div>
      <div class="token-box">
+        <div class="theme-switch" role="group" aria-label="Тема оформления">
+          <label for="theme-select" class="theme-switch-label muted">Тема</label>
+          <select id="theme-select" class="theme-select" aria-label="Тема оформления">
+            <option value="auto">Системная</option>
+            <option value="light">Светлая</option>
+            <option value="dark">Тёмная</option>
+          </select>
+        </div>
        <div class="session-actions">
          <button type="button" id="logout" class="btn ghost full">Выйти</button>
        </div>
@@ -143,6 +164,16 @@
          Сохраните <strong>секрет</strong>, который показывается один раз после установки — в интерфейсе он маскируется.
        </p>
        <p id="mtproto-callout" class="mtproto-callout hidden" role="note"></p>
+        <div id="mtproto-link-card" class="mtproto-link-card hidden" role="region" aria-label="Ссылка для Telegram">
+          <div class="mtproto-link-row">
+            <strong class="mtproto-link-label">Ссылка в Telegram</strong>
+            <a id="mtproto-link-anchor" class="mtproto-link-anchor" target="_blank" rel="noopener noreferrer"></a>
+          </div>
+          <div class="mtproto-link-row mtproto-link-actions">
+            <button type="button" id="mtproto-link-copy" class="btn small ghost">Скопировать</button>
+            <span id="mtproto-link-copy-state" class="muted warp-muted"></span>
+          </div>
+        </div>
        <div class="mtproto-fields">
          <label for="mtproto-host-port">Порт хоста (необязательно — по умолчанию см. MTPRO_PUBLISH_PORT, обычно 8443)</label>
          <input id="mtproto-host-port" type="number" min="512" max="65535" autocomplete="off" placeholder="8443 или другой свободный порт">
@@ -277,6 +308,6 @@
    </div>
  </dialog>

-  <script src="/app.js?v=1.2.20" type="module"></script>
+  <script src="/app.js?v=1.2.21" type="module"></script>
 </body>
 </html>
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,4 +1,5 @@
-:root {
+:root,
+:root[data-theme="light"] {
  --bg: #eef2f7;
  --card: #ffffff;
  --raised: #f8fafc;
@@ -19,6 +20,26 @@
  font-family: "DM Sans", system-ui, sans-serif;
 }

+:root[data-theme="dark"] {
+  --bg: #0b1018;
+  --card: #161d2b;
+  --raised: #1f2738;
+  --line: rgba(148, 163, 184, 0.22);
+  --text: #e6edf6;
+  --muted: #9aa5b5;
+  --accent: #7dd3fc;
+  --accent-light: #38bdf8;
+  --danger: #f87171;
+  --ok: #4ade80;
+  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
+  --input-bg: #0f1623;
+  --pre-bg: #0c1320;
+  --pre-text: #cbd5f5;
+  --code-bg: rgba(255, 255, 255, 0.07);
+  --footer-bg: #0e1622;
+  --surface-soft: rgba(14, 165, 233, 0.14);
+}
+
 code.inline {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.82em;
@@ -101,6 +122,106 @@ body.page {
  white-space: nowrap;
 }

+.theme-switch {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-bottom: 0.6rem;
+}
+
+.theme-switch-label {
+  font-size: 0.78rem;
+}
+
+.theme-select {
+  width: 100%;
+  padding: 0.45rem 0.55rem;
+  border-radius: 10px;
+  border: 1px solid var(--line);
+  background: var(--input-bg);
+  color: var(--text);
+  font: inherit;
+  font-size: 0.85rem;
+}
+
+.mtproto-link-card {
+  margin: 0.65rem 0 0.85rem;
+  padding: 0.75rem 0.9rem;
+  border-radius: 12px;
+  border: 1px solid rgba(14, 165, 233, 0.45);
+  background: var(--surface-soft);
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+}
+
+.mtproto-link-card.hidden {
+  display: none;
+}
+
+.mtproto-link-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem 0.75rem;
+}
+
+.mtproto-link-label {
+  color: var(--text);
+  font-weight: 700;
+}
+
+.mtproto-link-anchor {
+  flex: 1 1 auto;
+  word-break: break-all;
+  color: var(--accent);
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 0.84rem;
+}
+
+:root[data-theme="dark"] .panel-promo-strip {
+  border-bottom-color: rgba(125, 211, 252, 0.28);
+  background: linear-gradient(90deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.92));
+}
+
+:root[data-theme="dark"] .panel-promo-a {
+  color: #fde68a;
+}
+
+:root[data-theme="dark"] .badge.on {
+  border-color: rgba(74, 222, 128, 0.4);
+  color: #bbf7d0;
+  background: rgba(34, 197, 94, 0.16);
+}
+
+:root[data-theme="dark"] .badge.off {
+  border-color: rgba(148, 163, 184, 0.35);
+  color: #cbd5f5;
+  background: rgba(148, 163, 184, 0.16);
+}
+
+:root[data-theme="dark"] .btn.warn {
+  border-color: rgba(248, 113, 113, 0.45);
+  background: rgba(248, 113, 113, 0.16);
+  color: #fecdd3;
+}
+
+:root[data-theme="dark"] .status.err {
+  color: #fecaca;
+}
+
+:root[data-theme="dark"] .status.ok {
+  color: #bbf7d0;
+}
+
+:root[data-theme="dark"] .ip {
+  color: #bae6fd;
+}
+
+:root[data-theme="dark"] .clock-zone-diff--accent {
+  color: #bae6fd;
+}
+
 .shell {
  flex: 1 0 auto;
  max-width: min(1120px, 100%);
--- a/server.js
+++ b/server.js
@@ -1714,6 +1714,15 @@ function mtprotoAdvertisedHost() {
  return a || "";
 }

+/** Хост из заголовка запроса (без :порт) — фоллбек, когда env не заданы и пользователь открыл панель по IP/DNS. */
+function hostFromRequest(req) {
+  const raw = String(req?.headers?.host || "").trim();
+  if (!raw) return "";
+  const bare = raw.replace(/^\[/, "").replace(/\]:\d+$/, "]").replace(/:\d+$/, "");
+  if (!bare || /^(localhost|127\.|0\.0\.0\.0|::1?$)/i.test(bare)) return "";
+  return bare;
+}
+
 function mtprotoMaskedSecret(secret) {
  const s = String(secret || "").trim();
  if (s.length < 10) return "········";
@@ -1738,8 +1747,13 @@ function mtprotoNormalizeSecret(hex) {
  return "";
 }

-function mtprotoSnapshot() {
+function mtprotoSnapshot(fallbackHost = "") {
  const ins = mtprotoParsedInspect();
+  const advEnv = mtprotoAdvertisedHost();
+  const advFallback = String(fallbackHost || "").trim();
+  const advEffective = advEnv || advFallback;
+  const advSource = advEnv ? "env" : advFallback ? "request" : "";
+
  if (!ins) {
    return {
      exists: false,
@@ -1747,7 +1761,8 @@ function mtprotoSnapshot() {
      container: MTPRO_CONTAINER,
      image: MTPRO_IMAGE,
      hostPort: null,
-      advertisedHost: mtprotoAdvertisedHost(),
+      advertisedHost: advEffective,
+      advertisedHostSource: advSource,
      secretMasked: "",
      tgLink: "",
      hint: "Контейнер не найден — нажмите «Установить».",
@@ -1759,20 +1774,22 @@ function mtprotoSnapshot() {
  const envMap = envArrayToMap(cfg?.Env);
  const secret = envMap.SECRET || "";
  const hostPort = mtprotoHostPort(ins);
-  const adv = mtprotoAdvertisedHost();
  return {
    exists: true,
    running,
    container: MTPRO_CONTAINER,
    image: String(cfg?.Image || MTPRO_IMAGE),
    hostPort,
-    advertisedHost: adv,
+    advertisedHost: advEffective,
+    advertisedHostSource: advSource,
    secretMasked: secret ? mtprotoMaskedSecret(secret) : "",
-    tgLink: mtprotoTelegramDeepLink(adv, Number(hostPort || 0), secret),
+    tgLink: mtprotoTelegramDeepLink(advEffective, Number(hostPort || 0), secret),
    restartCount: Number(ins?.RestartCount || 0) || 0,
-    hint: adv
+    hint: advEnv
      ? ""
-      : "Задайте MTPRO_PUBLIC_HOST или CLIENT_CONFIG_ENDPOINT на IP/DNS VPS — тогда появится прямая ссылка tg:// для клиентов.",
+      : advFallback
+        ? `Хост ${advFallback} взят из адреса, по которому открыта эта панель. Чтобы зафиксировать публичный IP/DNS, задайте MTPRO_PUBLIC_HOST или CLIENT_CONFIG_ENDPOINT в контейнере панели.`
+        : "Задайте MTPRO_PUBLIC_HOST или CLIENT_CONFIG_ENDPOINT на IP/DNS VPS — тогда появится прямая ссылка tg:// для клиентов.",
  };
 }

@@ -2218,7 +2235,7 @@ app.get("/api/mtproto/status", requireAuth, (req, res) => {
  if (effectiveUiHidden().mtproto) {
    return res.status(403).json({ error: MSG_UI_MTProto_OFF });
  }
-  const snap = mtprotoSnapshot();
+  const snap = mtprotoSnapshot(hostFromRequest(req));
  let logsTail = "";
  if (snap.exists && snap.running) {
    const l = dockerSpawnSync(["logs", "--tail", "100", MTPRO_CONTAINER], 12_000);
@@ -2303,16 +2320,19 @@ app.post("/api/mtproto/install", requireAuth, (req, res) => {
      });
    }

-    const adv = mtprotoAdvertisedHost();
-    const snap = mtprotoSnapshot();
-    const tgLink = mtprotoTelegramDeepLink(adv, hostPort, secretFinal);
+    const fallback = hostFromRequest(req);
+    const advEnv = mtprotoAdvertisedHost();
+    const advEffective = advEnv || fallback;
+    const snap = mtprotoSnapshot(fallback);
+    const tgLink = mtprotoTelegramDeepLink(advEffective, hostPort, secretFinal);

    res.json({
      ok: true,
      secretHex: secretFinal,
      hostPort,
      tgLink,
-      advertisedHost: adv,
+      advertisedHost: advEffective,
+      advertisedHostSource: advEnv ? "env" : fallback ? "request" : "",
      snapshot: snap,
    });
  } finally {