v2.5.0: add key disable switches and pro UI polish

2026-05-19 12:16:01 +00:00 · 2026-04-25 09:44:53 +03:00
parent 6b89c3ea81
commit e54778c08c
17 changed files with 683 additions and 136 deletions
--- a/admin-web/static/app.js
+++ b/admin-web/static/app.js
@@ -43,6 +43,7 @@ const i18n = {
    collectStats: "Collect",
    repairStats: "Repair stats",
    tableTime: "Time",
+    tableStatus: "Status",
    tableProxyDelta: "Proxy delta",
    tableSiteDelta: "Site delta",
    tableProxyTotal: "Proxy total",
@@ -56,6 +57,10 @@ const i18n = {
    copyLink: "Copy link",
    copySecret: "Copy secret",
    delete: "Delete",
+    enabled: "Enabled",
+    disabled: "Disabled",
+    disableKey: "Disable key",
+    enableKey: "Enable key",
    main: "main",
    createBackup: "Create backup",
    loadLogs: "Load",
@@ -121,6 +126,15 @@ const i18n = {
    logsLines: "lines",
    logsNoData: "No log lines",
    languageSaved: "Language saved",
+    keyEnabled: "Key enabled",
+    keyDisabled: "Key disabled",
+    visualTitle: "443 shared edge",
+    visualText: "Website, MTProxy and local admin status in one operational view.",
+    promoEyebrow: "Promo",
+    promoTitle: "Support goTelegram Pro",
+    promoHosting1: "Hosting #1",
+    promoHosting2: "Hosting #2",
+    promoTips: "Tips",
    pageDashboardTitle: "Dashboard",
    pageDashboardKicker: "Local Admin",
    pageTrafficTitle: "Traffic",
@@ -175,6 +189,7 @@ const i18n = {
    collectStats: "Собрать",
    repairStats: "Починить статистику",
    tableTime: "Время",
+    tableStatus: "Статус",
    tableProxyDelta: "Proxy delta",
    tableSiteDelta: "Site delta",
    tableProxyTotal: "Proxy всего",
@@ -188,6 +203,10 @@ const i18n = {
    copyLink: "Копировать ссылку",
    copySecret: "Копировать secret",
    delete: "Удалить",
+    enabled: "Включён",
+    disabled: "Отключён",
+    disableKey: "Отключить ключ",
+    enableKey: "Включить ключ",
    main: "основной",
    createBackup: "Создать бекап",
    loadLogs: "Загрузить",
@@ -253,6 +272,15 @@ const i18n = {
    logsLines: "строк",
    logsNoData: "Строк логов нет",
    languageSaved: "Язык сохранён",
+    keyEnabled: "Ключ включён",
+    keyDisabled: "Ключ отключён",
+    visualTitle: "Единый 443 edge",
+    visualText: "Сайт, MTProxy и локальная админка в одном рабочем обзоре.",
+    promoEyebrow: "Промо",
+    promoTitle: "Поддержать goTelegram Pro",
+    promoHosting1: "Хостинг #1",
+    promoHosting2: "Хостинг #2",
+    promoTips: "Чаевые",
    pageDashboardTitle: "Обзор",
    pageDashboardKicker: "Локальная админка",
    pageTrafficTitle: "Трафик",
@@ -356,6 +384,8 @@ function applyI18n() {
  $("#languageSelect").value = state.lang;
  $("#settingsLanguage").textContent = state.lang === "ru" ? "Русский" : "English";
  $("#settingsTheme").textContent = state.theme === "dark" ? t("darkTheme") : t("lightTheme");
+  $("#visualTitle").textContent = t("visualTitle");
+  $("#visualText").textContent = t("visualText");
  updatePageTitle();
 }

@@ -607,16 +637,25 @@ function renderHistoryTable(rows) {
 function renderUsers() {
  const tbody = $("#usersTable");
  if (!state.users.length) {
-    tbody.innerHTML = `<tr><td colspan="4" class="empty-cell">${escapeHtml(t("noKeys"))}</td></tr>`;
+    tbody.innerHTML = `<tr><td colspan="5" class="empty-cell">${escapeHtml(t("noKeys"))}</td></tr>`;
    return;
  }
  tbody.innerHTML = state.users.map((user) => `
-    <tr>
+    <tr class="${user.enabled ? "" : "disabled-row"}">
      <td data-label="${escapeAttr(t("tableUser"))}">
        <strong>${escapeHtml(user.name)}</strong>${user.main ? ` <small>${escapeHtml(t("main"))}</small>` : ""}
      </td>
+      <td data-label="${escapeAttr(t("tableStatus"))}">
+        <div class="status-control">
+          <label class="switch" title="${escapeAttr(user.main ? t("main") : (user.enabled ? t("disableKey") : t("enableKey")))}">
+            <input type="checkbox" data-toggle-user="${escapeAttr(user.name)}" ${user.enabled ? "checked" : ""} ${user.main ? "disabled" : ""}>
+            <span></span>
+          </label>
+          <strong class="${user.enabled ? "state-on" : "state-off"}">${escapeHtml(user.enabled ? t("enabled") : t("disabled"))}</strong>
+        </div>
+      </td>
      <td data-label="${escapeAttr(t("tableSecret"))}"><code title="${escapeAttr(user.secret)}">${escapeHtml(user.secret)}</code></td>
-      <td data-label="${escapeAttr(t("tableLink"))}"><button class="soft" data-copy="${escapeAttr(user.link)}">${escapeHtml(t("copyLink"))}</button></td>
+      <td data-label="${escapeAttr(t("tableLink"))}"><button class="soft" data-copy="${escapeAttr(user.link)}" ${user.enabled ? "" : "disabled"}>${escapeHtml(t("copyLink"))}</button></td>
      <td data-label="${escapeAttr(t("tableActions"))}" class="actions">
        <button class="soft" data-copy="${escapeAttr(user.secret)}">${escapeHtml(t("copySecret"))}</button>
        <button class="danger" data-delete="${escapeAttr(user.name)}" ${user.main ? "disabled" : ""}>${escapeHtml(t("delete"))}</button>
@@ -708,6 +747,17 @@ async function deleteUser(name) {
  await refreshAll();
 }

+async function setUserEnabled(name, enabled) {
+  const data = await api(`/api/users/${encodeURIComponent(name)}/enabled`, {
+    method: "POST",
+    body: JSON.stringify({ enabled }),
+  });
+  const message = data.enabled ? t("keyEnabled") : t("keyDisabled");
+  addEvent(message, name);
+  toast(message);
+  await refreshAll();
+}
+
 async function createBackup() {
  const btn = $("#createBackupBtn");
  btn.disabled = true;
@@ -802,6 +852,15 @@ async function copyText(value) {
  }
 }

+function maybeShowPromo() {
+  const key = "gotelegram-promo-last";
+  const now = Math.floor(Date.now() / 1000);
+  const last = Number(localStorage.getItem(key) || 0);
+  if (now - last < 86400) return;
+  localStorage.setItem(key, String(now));
+  $("#promoModal").hidden = false;
+}
+
 document.addEventListener("click", async (eventObj) => {
  const nav = eventObj.target.closest("[data-nav]");
  if (nav) {
@@ -827,6 +886,17 @@ document.addEventListener("click", async (eventObj) => {
  }
 });

+document.addEventListener("change", (eventObj) => {
+  const input = eventObj.target.closest("[data-toggle-user]");
+  if (!input) return;
+  input.disabled = true;
+  setUserEnabled(input.dataset.toggleUser, input.checked).catch((err) => {
+    input.checked = !input.checked;
+    input.disabled = false;
+    toast(err.message);
+  });
+});
+
 $("#addUserForm").addEventListener("submit", (eventObj) => {
  eventObj.preventDefault();
  const input = $("#userName");
@@ -841,6 +911,9 @@ $("#addUserForm").addEventListener("submit", (eventObj) => {

 $("#refreshBtn").addEventListener("click", refreshAll);
 $("#languageSelect").addEventListener("change", (eventObj) => setLanguage(eventObj.target.value));
+$("#promoClose").addEventListener("click", () => {
+  $("#promoModal").hidden = true;
+});
 $("#createBackupBtn").addEventListener("click", createBackup);
 $("#loadLogsBtn").addEventListener("click", loadLogs);
 $("#repairStatsBtn").addEventListener("click", repairStats);
@@ -852,3 +925,4 @@ setTheme(state.theme);
 renderEvents();
 refreshAll();
 loadLogs();
+maybeShowPromo();
--- a/admin-web/static/index.html
+++ b/admin-web/static/index.html
@@ -3,7 +3,7 @@
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>GoTelegram Admin</title>
+  <title>goTelegram Pro Admin</title>
  <script>
    (function () {
      var stored = localStorage.getItem("gotelegram-theme");
@@ -11,7 +11,7 @@
      document.documentElement.dataset.theme = theme;
    }());
  </script>
-  <link rel="stylesheet" href="/styles.css?v=2.5.0-admin4">
+  <link rel="stylesheet" href="/styles.css?v=2.5.0-admin5">
 </head>
 <body>
  <div class="app-shell">
@@ -19,18 +19,18 @@
      <div class="brand">
        <div class="brand-mark">GT</div>
        <div>
-          <strong>GoTelegram</strong>
+          <strong>goTelegram Pro</strong>
          <span data-i18n="brandSubtitle">Local Admin</span>
        </div>
      </div>

      <nav class="nav-tabs" aria-label="Admin sections">
-        <button type="button" class="nav-item active" data-nav="dashboard" data-i18n="navDashboard">Dashboard</button>
-        <button type="button" class="nav-item" data-nav="traffic" data-i18n="navTraffic">Traffic</button>
-        <button type="button" class="nav-item" data-nav="keys" data-i18n="navKeys">Keys</button>
-        <button type="button" class="nav-item" data-nav="backups" data-i18n="navBackups">Backups</button>
-        <button type="button" class="nav-item" data-nav="logs" data-i18n="navLogs">Logs</button>
-        <button type="button" class="nav-item" data-nav="settings" data-i18n="navSettings">Settings</button>
+        <button type="button" class="nav-item active" data-nav="dashboard"><span class="nav-icon">⌁</span><span data-i18n="navDashboard">Dashboard</span></button>
+        <button type="button" class="nav-item" data-nav="traffic"><span class="nav-icon">⇅</span><span data-i18n="navTraffic">Traffic</span></button>
+        <button type="button" class="nav-item" data-nav="keys"><span class="nav-icon">⚿</span><span data-i18n="navKeys">Keys</span></button>
+        <button type="button" class="nav-item" data-nav="backups"><span class="nav-icon">▣</span><span data-i18n="navBackups">Backups</span></button>
+        <button type="button" class="nav-item" data-nav="logs"><span class="nav-icon">☰</span><span data-i18n="navLogs">Logs</span></button>
+        <button type="button" class="nav-item" data-nav="settings"><span class="nav-icon">⚙</span><span data-i18n="navSettings">Settings</span></button>
      </nav>

      <div class="sidebar-foot">
@@ -59,6 +59,19 @@

      <main class="content">
        <section class="page-panel active" data-page="dashboard">
+          <section class="visual-overview">
+            <div>
+              <p class="eyebrow">goTelegram Pro</p>
+              <h2 id="visualTitle">443 shared edge</h2>
+              <p id="visualText">Website, MTProxy and local admin status in one operational view.</p>
+            </div>
+            <div class="signal-map" aria-hidden="true">
+              <span class="node node-site">HTTPS</span>
+              <span class="node node-proxy">MTProto</span>
+              <span class="node node-admin">Admin</span>
+            </div>
+          </section>
+
          <div class="metric-grid">
            <article class="metric-card accent-blue">
              <span data-i18n="metricMode">Mode</span>
@@ -169,6 +182,7 @@
                <thead>
                  <tr>
                    <th data-i18n="tableUser">User</th>
+                    <th data-i18n="tableStatus">Status</th>
                    <th data-i18n="tableSecret">Secret</th>
                    <th data-i18n="tableLink">Link</th>
                    <th data-i18n="tableActions">Actions</th>
@@ -269,6 +283,27 @@
  </div>

  <div id="toast" class="toast"></div>
-  <script src="/app.js?v=2.5.0-admin4" type="module"></script>
+  <div id="promoModal" class="promo-modal" hidden>
+    <div class="promo-card" role="dialog" aria-modal="true" aria-labelledby="promoTitle">
+      <button id="promoClose" class="icon-btn ghost" type="button" aria-label="Close">×</button>
+      <p class="eyebrow" data-i18n="promoEyebrow">Promo</p>
+      <h2 id="promoTitle" data-i18n="promoTitle">Support goTelegram Pro</h2>
+      <div class="promo-grid">
+        <a href="https://vk.cc/ct29NQ" target="_blank" rel="noreferrer">
+          <strong data-i18n="promoHosting1">Hosting #1</strong>
+          <span>OFF60 · antenka20 · antenka6</span>
+        </a>
+        <a href="https://vk.cc/cUxAhj" target="_blank" rel="noreferrer">
+          <strong data-i18n="promoHosting2">Hosting #2</strong>
+          <span>OFF60</span>
+        </a>
+        <a href="https://pay.cloudtips.ru/p/7410814f" target="_blank" rel="noreferrer">
+          <strong data-i18n="promoTips">Tips</strong>
+          <span>CloudTips</span>
+        </a>
+      </div>
+    </div>
+  </div>
+  <script src="/app.js?v=2.5.0-admin5" type="module"></script>
 </body>
 </html>
--- a/admin-web/static/styles.css
+++ b/admin-web/static/styles.css
@@ -140,6 +140,10 @@ h2 {
  font-weight: 800;
 }

+.brand strong {
+  letter-spacing: 0;
+}
+
 .brand span {
  display: block;
  color: var(--sidebar-muted);
@@ -153,6 +157,9 @@ h2 {

 .nav-item {
  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
  justify-content: flex-start;
  text-align: left;
  background: transparent;
@@ -160,6 +167,18 @@ h2 {
  box-shadow: none;
 }

+.nav-icon {
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 28px;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, .07);
+  color: var(--sidebar-text);
+  font-weight: 800;
+}
+
 .nav-item:hover,
 .nav-item.active {
  background: rgba(255, 255, 255, .08);
@@ -251,6 +270,79 @@ h2 {
  gap: 18px;
 }

+.visual-overview {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
+  gap: 20px;
+  min-height: 170px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--green) 14%, transparent), transparent 42%),
+    linear-gradient(120deg, var(--panel), var(--panel-soft));
+  box-shadow: var(--shadow);
+  padding: 22px;
+}
+
+.visual-overview h2 {
+  margin-top: 4px;
+  font-size: clamp(24px, 3vw, 34px);
+}
+
+.visual-overview p:not(.eyebrow) {
+  max-width: 620px;
+  margin-top: 8px;
+  color: var(--muted);
+}
+
+.signal-map {
+  position: relative;
+  min-height: 128px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px),
+    linear-gradient(0deg, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px);
+  background-size: 28px 28px;
+}
+
+.signal-map::before,
+.signal-map::after {
+  content: "";
+  position: absolute;
+  inset: 50% 38px auto 38px;
+  height: 2px;
+  background: linear-gradient(90deg, var(--green), var(--blue), var(--violet));
+}
+
+.signal-map::after {
+  inset: 30px auto 30px 50%;
+  width: 2px;
+  height: auto;
+}
+
+.node {
+  position: absolute;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  min-width: 82px;
+  min-height: 38px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 900;
+  box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
+}
+
+.node-site { left: 24px; top: 18px; }
+.node-proxy { right: 24px; top: 50%; transform: translateY(-50%); }
+.node-admin { left: 50%; bottom: 18px; transform: translateX(-50%); }
+
 .eyebrow {
  color: var(--muted);
  font-size: 12px;
@@ -549,6 +641,10 @@ tr:last-child td {
  border-bottom: 0;
 }

+.disabled-row {
+  opacity: .72;
+}
+
 td code {
  display: inline-block;
  max-width: 320px;
@@ -567,6 +663,65 @@ td small {
  gap: 8px;
 }

+.status-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.state-on { color: var(--green); }
+.state-off { color: var(--amber); }
+
+.switch {
+  position: relative;
+  display: inline-flex;
+  width: 46px;
+  height: 26px;
+}
+
+.switch input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+}
+
+.switch span {
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--panel-strong);
+  transition: background .16s ease, border-color .16s ease;
+}
+
+.switch span::before {
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  left: 2px;
+  top: 2px;
+  border-radius: 50%;
+  background: var(--panel);
+  box-shadow: 0 3px 9px rgba(15, 23, 42, .22);
+  transition: transform .16s ease;
+}
+
+.switch input:checked + span {
+  border-color: color-mix(in srgb, var(--green) 70%, var(--line));
+  background: color-mix(in srgb, var(--green) 64%, var(--panel));
+}
+
+.switch input:checked + span::before {
+  transform: translateX(20px);
+}
+
+.switch input:disabled + span {
+  opacity: .55;
+  cursor: not-allowed;
+}
+
 .empty-cell {
  color: var(--muted);
  text-align: center;
@@ -643,6 +798,64 @@ td small {
  transform: translateY(0);
 }

+.promo-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  display: grid;
+  place-items: center;
+  padding: 18px;
+  background: rgba(5, 8, 16, .48);
+}
+
+.promo-modal[hidden] {
+  display: none;
+}
+
+.promo-card {
+  position: relative;
+  width: min(620px, 100%);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  box-shadow: 0 22px 70px rgba(0, 0, 0, .28);
+  padding: 22px;
+}
+
+.promo-card .icon-btn {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+}
+
+.promo-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.promo-grid a {
+  display: grid;
+  gap: 6px;
+  min-height: 98px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel-soft);
+  color: var(--text);
+  padding: 14px;
+  text-decoration: none;
+}
+
+.promo-grid a:hover {
+  border-color: var(--green);
+}
+
+.promo-grid span {
+  color: var(--muted);
+  font-size: 12px;
+}
+
@media (max-width: 1280px) {
  .service-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
@@ -681,6 +894,11 @@ td small {
 }

@media (max-width: 720px) {
+  .visual-overview,
+  .promo-grid {
+    grid-template-columns: 1fr;
+  }
+
  .topbar {
    align-items: flex-start;
    padding: 16px;