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

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();