v2.5.0: add QR import and backup scheduling

admin-web/static/app.js

@@ -64,6 +64,7 @@ const i18n = {
     addKey: "Add key",
     copyLink: "Copy link",
     copySecret: "Copy secret",
+    showQr: "QR",
     delete: "Delete",
     enabled: "Enabled",
     disabled: "Disabled",
@@ -73,6 +74,20 @@ const i18n = {
     enableKey: "Enable key",
     main: "main",
     createBackup: "Create backup",
+    restoreBackup: "Restore",
+    backupScheduleTitle: "Automatic backups",
+    backupScheduleLoading: "Loading schedule...",
+    backupIncludesTitle: "Backup contents",
+    backupIncludesText: "telemt config, goTelegram settings, keys, disabled keys, site, templates, SSL certificates, bot, admin panel and traffic history.",
+    scheduleOff: "Off",
+    scheduleDaily: "Daily",
+    scheduleWeekly: "Weekly",
+    scheduleMonthly: "Monthly",
+    scheduleSaved: "Schedule saved",
+    scheduleNext: "Next run: {value}",
+    scheduleDisabled: "Automatic backups are disabled",
+    backupRestoreStarted: "Restore started",
+    confirmRestoreBackup: "Restore backup",
     loadLogs: "Load",
     panelLanguage: "Panel language",
     theme: "Theme",
@@ -122,6 +137,7 @@ const i18n = {
     keyCreated: "Key created",
     keyDeleted: "Key deleted",
     backupCreated: "Backup created",
+    qrUnavailable: "QR code is unavailable",
     serviceRestarted: "Service restarted",
     statsRepaired: "Collector restarted",
     statsCollected: "Statistics collected",
@@ -189,6 +205,8 @@ const i18n = {
     promoHosting1: "Hosting #1",
     promoHosting2: "Hosting #2",
     promoTips: "Tips",
+    qrEyebrow: "QR import",
+    qrTitle: "Scan Telegram proxy",
     pageDashboardTitle: "Dashboard",
     pageDashboardKicker: "Local Admin",
     pageTrafficTitle: "Traffic",
@@ -264,6 +282,7 @@ const i18n = {
     addKey: "Добавить ключ",
     copyLink: "Копировать ссылку",
     copySecret: "Копировать секрет",
+    showQr: "QR",
     delete: "Удалить",
     enabled: "Включён",
     disabled: "Отключён",
@@ -273,6 +292,20 @@ const i18n = {
     enableKey: "Включить ключ",
     main: "основной",
     createBackup: "Создать бекап",
+    restoreBackup: "Восстановить",
+    backupScheduleTitle: "Автобекапы",
+    backupScheduleLoading: "Загрузка расписания...",
+    backupIncludesTitle: "Что входит в бекап",
+    backupIncludesText: "конфиг telemt, настройки goTelegram, ключи, отключённые ключи, сайт, шаблоны, SSL-сертификаты, бот, админка и история трафика.",
+    scheduleOff: "Выкл",
+    scheduleDaily: "Каждый день",
+    scheduleWeekly: "Каждую неделю",
+    scheduleMonthly: "Каждый месяц",
+    scheduleSaved: "Расписание сохранено",
+    scheduleNext: "Следующий запуск: {value}",
+    scheduleDisabled: "Автобекапы отключены",
+    backupRestoreStarted: "Восстановление запущено",
+    confirmRestoreBackup: "Восстановить бекап",
     loadLogs: "Загрузить",
     panelLanguage: "Язык панели",
     theme: "Тема",
@@ -322,6 +355,7 @@ const i18n = {
     keyCreated: "Ключ создан",
     keyDeleted: "Ключ удалён",
     backupCreated: "Бекап создан",
+    qrUnavailable: "QR-код недоступен",
     serviceRestarted: "Сервис перезапущен",
     statsRepaired: "Сборщик перезапущен",
     statsCollected: "Статистика собрана",
@@ -389,6 +423,8 @@ const i18n = {
     promoHosting1: "Хостинг #1",
     promoHosting2: "Хостинг #2",
     promoTips: "Чаевые",
+    qrEyebrow: "QR-импорт",
+    qrTitle: "Сканирование прокси Telegram",
     pageDashboardTitle: "Обзор",
     pageDashboardKicker: "Локальная админка",
     pageTrafficTitle: "Трафик",
@@ -420,6 +456,8 @@ const state = {
   userTrafficView: "chart",
   userTraffic: null,
   userTrafficLoading: false,
+  backupSchedule: null,
+  qrLink: "",
   pendingUsers: new Set(),
 };
 
@@ -514,6 +552,7 @@ function applyI18n() {
   $("#visualText").textContent = t("visualText");
   updateTrafficControls();
   updateUserTrafficControls();
+  renderBackupSchedule();
   updatePageTitle();
 }
 
@@ -1091,7 +1130,12 @@ function renderUsers() {
         </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)}" ${user.enabled ? "" : "disabled"}>${escapeHtml(t("copyLink"))}</button></td>
+      <td data-label="${escapeAttr(t("tableLink"))}">
+        <div class="mini-actions">
+          <button class="soft" data-copy="${escapeAttr(user.link)}" ${user.enabled ? "" : "disabled"}>${escapeHtml(t("copyLink"))}</button>
+          <button class="soft" data-user-qr="${escapeAttr(user.name)}">${escapeHtml(t("showQr"))}</button>
+        </div>
+      </td>
       <td data-label="${escapeAttr(t("tableTraffic"))}">
         <div class="traffic-cell">
           <strong>${escapeHtml(trafficTotal)}</strong>
@@ -1109,6 +1153,7 @@ function renderUsers() {
 
 function renderBackups(backups) {
   const box = $("#backupsList");
+  renderBackupSchedule();
   if (!backups.length) {
     box.innerHTML = `<div class="empty">${escapeHtml(t("noBackups"))}</div>`;
     return;
@@ -1119,11 +1164,26 @@ function renderBackups(backups) {
         <strong>${escapeHtml(item.name)}</strong>
         <span>${escapeHtml(item.path)} · ${escapeHtml(fmtDate(item.mtime))}</span>
       </div>
-      <div>${escapeHtml(fmtBytes(item.size))}${item.encrypted ? ` · ${escapeHtml(t("encrypted"))}` : ""}</div>
+      <div class="backup-actions">
+        <span>${escapeHtml(fmtBytes(item.size))}${item.encrypted ? ` · ${escapeHtml(t("encrypted"))}` : ""}</span>
+        <button class="soft" data-restore-backup="${escapeAttr(item.name)}">${escapeHtml(t("restoreBackup"))}</button>
+      </div>
     </div>
   `).join("");
 }
 
+function renderBackupSchedule() {
+  const schedule = state.backupSchedule || state.overview?.backup_schedule || { frequency: "off" };
+  const frequency = schedule.frequency || "off";
+  $$("[data-backup-schedule]").forEach((btn) => {
+    btn.classList.toggle("active", btn.dataset.backupSchedule === frequency);
+  });
+  const next = schedule.next && schedule.next !== "n/a" ? schedule.next : "";
+  $("#backupScheduleMeta").textContent = frequency === "off"
+    ? t("scheduleDisabled")
+    : t("scheduleNext").replace("{value}", next || (schedule.calendar || "--"));
+}
+
 function renderEvents() {
   const box = $("#events");
   if (!state.events.length) {
@@ -1162,6 +1222,7 @@ async function refreshAll() {
   btn.disabled = true;
   try {
     state.overview = await api("/api/overview");
+    state.backupSchedule = state.overview.backup_schedule || state.backupSchedule;
     updateLanguageFromOverview(state.overview);
     state.users = await api("/api/users");
     if (!state.stats) {
@@ -1324,6 +1385,53 @@ async function createBackup() {
   }
 }
 
+async function setBackupSchedule(frequency) {
+  $$("[data-backup-schedule]").forEach((btn) => { btn.disabled = true; });
+  try {
+    const data = await api("/api/backups/schedule", {
+      method: "POST",
+      body: JSON.stringify({ frequency }),
+    });
+    state.backupSchedule = data.schedule || data;
+    renderBackupSchedule();
+    addEvent(t("scheduleSaved"), frequency);
+    toast(t("scheduleSaved"));
+  } catch (err) {
+    toast(err.message);
+  } finally {
+    $$("[data-backup-schedule]").forEach((btn) => { btn.disabled = false; });
+  }
+}
+
+async function restoreBackup(name) {
+  const data = await api("/api/backups/restore", {
+    method: "POST",
+    body: JSON.stringify({ name }),
+  });
+  addEvent(t("backupRestoreStarted"), data.name || name);
+  toast(t("backupRestoreStarted"));
+  setTimeout(() => refreshAll().catch((err) => toast(err.message)), 4000);
+}
+
+function showUserQr(name) {
+  const user = state.users.find((item) => item.name === name);
+  if (!user) {
+    toast(t("qrUnavailable"));
+    return;
+  }
+  state.qrLink = user.link || "";
+  $("#qrTitle").textContent = `${t("qrTitle")} · ${user.name}`;
+  $("#qrMeta").textContent = user.link || "";
+  const img = $("#qrImage");
+  img.alt = `${user.name} Telegram proxy QR`;
+  img.onerror = () => {
+    img.removeAttribute("src");
+    toast(t("qrUnavailable"));
+  };
+  img.src = `/api/users/${encodeURIComponent(user.name)}/qr?ts=${Date.now()}`;
+  $("#qrModal").hidden = false;
+}
+
 async function loadLogs() {
   const service = $("#logService").value;
   const btn = $("#loadLogsBtn");
@@ -1436,11 +1544,18 @@ document.addEventListener("click", async (eventObj) => {
   } else if (button.dataset.userTraffic) {
     state.userTrafficUser = button.dataset.userTraffic;
     refreshUserTraffic({ showLoading: true }).catch((err) => toast(err.message));
+  } else if (button.dataset.userQr) {
+    showUserQr(button.dataset.userQr);
   } else if (button.dataset.userTrafficRange) {
     changeUserTrafficRange(button.dataset.userTrafficRange);
   } else if (button.dataset.userTrafficView) {
     state.userTrafficView = button.dataset.userTrafficView === "table" ? "table" : "chart";
     renderUserTraffic();
+  } else if (button.dataset.backupSchedule) {
+    setBackupSchedule(button.dataset.backupSchedule);
+  } else if (button.dataset.restoreBackup) {
+    const name = button.dataset.restoreBackup;
+    if (confirm(`${t("confirmRestoreBackup")} ${name}?`)) restoreBackup(name).catch((err) => toast(err.message));
   } else if (button.dataset.copy) {
     await copyText(button.dataset.copy);
   } else if (button.dataset.delete) {
@@ -1480,6 +1595,12 @@ $("#languageSelect").addEventListener("change", (eventObj) => setLanguage(eventO
 $("#promoClose").addEventListener("click", () => {
   $("#promoModal").hidden = true;
 });
+$("#qrClose").addEventListener("click", () => {
+  $("#qrModal").hidden = true;
+});
+$("#qrCopyBtn").addEventListener("click", () => {
+  if (state.qrLink) copyText(state.qrLink);
+});
 $("#createBackupBtn").addEventListener("click", createBackup);
 $("#loadLogsBtn").addEventListener("click", loadLogs);
 $("#repairStatsBtn").addEventListener("click", repairStats);

admin-web/static/index.html

@@ -272,6 +272,22 @@
                 </div>
                 <button id="createBackupBtn" type="button" data-i18n="createBackup">Create backup</button>
               </div>
+              <div class="backup-schedule">
+                <div>
+                  <strong data-i18n="backupScheduleTitle">Automatic backups</strong>
+                  <span id="backupScheduleMeta" data-i18n="backupScheduleLoading">Loading schedule...</span>
+                </div>
+                <div class="segmented compact" role="group" aria-label="Backup schedule">
+                  <button type="button" data-backup-schedule="off" data-i18n="scheduleOff">Off</button>
+                  <button type="button" data-backup-schedule="daily" data-i18n="scheduleDaily">Daily</button>
+                  <button type="button" data-backup-schedule="weekly" data-i18n="scheduleWeekly">Weekly</button>
+                  <button type="button" data-backup-schedule="monthly" data-i18n="scheduleMonthly">Monthly</button>
+                </div>
+              </div>
+              <div class="backup-includes">
+                <strong data-i18n="backupIncludesTitle">Backup contents</strong>
+                <span data-i18n="backupIncludesText">telemt config, goTelegram settings, keys, disabled keys, site, templates, SSL certificates, bot, admin panel and traffic history.</span>
+              </div>
               <div id="backupsList" class="backup-list"></div>
             </section>
 
@@ -351,6 +367,18 @@
   </div>
 
   <div id="toast" class="toast"></div>
+  <div id="qrModal" class="promo-modal" hidden>
+    <div class="promo-card qr-card" role="dialog" aria-modal="true" aria-labelledby="qrTitle">
+      <button id="qrClose" class="icon-btn ghost" type="button" aria-label="Close" data-i18n-aria-label="ariaClose">×</button>
+      <p class="eyebrow" data-i18n="qrEyebrow">QR import</p>
+      <h2 id="qrTitle" data-i18n="qrTitle">Scan Telegram proxy</h2>
+      <div class="qr-frame">
+        <img id="qrImage" alt="Telegram proxy QR">
+      </div>
+      <p id="qrMeta" class="modal-note"></p>
+      <button id="qrCopyBtn" type="button" class="soft" data-i18n="copyLink">Copy link</button>
+    </div>
+  </div>
   <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" data-i18n-aria-label="ariaClose">×</button>
@@ -372,6 +400,6 @@
       </div>
     </div>
   </div>
-  <script src="/app.js?v=2.5.0-admin8" type="module"></script>
+  <script src="/app.js?v=2.5.0-admin9" type="module"></script>
 </body>
 </html>

admin-web/static/styles.css

@@ -923,6 +923,39 @@ td small {
   gap: 10px;
 }
 
+.mini-actions,
+.backup-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.backup-schedule,
+.backup-includes {
+  display: grid;
+  gap: 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel-soft);
+  padding: 12px;
+  margin-bottom: 12px;
+}
+
+.backup-schedule {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+}
+
+.backup-schedule span,
+.backup-includes span {
+  display: block;
+  color: var(--muted);
+  font-size: 12px;
+  margin-top: 2px;
+}
+
 .backup-item,
 .event,
 .settings-list > div {
@@ -965,6 +998,36 @@ td small {
   word-break: break-word;
 }
 
+.qr-card {
+  width: min(440px, calc(100vw - 32px));
+}
+
+.qr-frame {
+  display: grid;
+  place-items: center;
+  margin: 12px 0;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fff;
+}
+
+.qr-frame img {
+  display: block;
+  width: min(280px, 70vw);
+  aspect-ratio: 1;
+  object-fit: contain;
+}
+
+.modal-note {
+  max-height: 92px;
+  overflow: auto;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
 .toast {
   position: fixed;
   right: 22px;
@@ -1215,12 +1278,23 @@ td small {
   }
 
   .backup-item,
+  .backup-schedule,
   .event,
   .settings-list > div,
   .port-listener,
   .port-empty {
     grid-template-columns: 1fr;
   }
+
+  .mini-actions,
+  .backup-actions {
+    justify-content: stretch;
+  }
+
+  .mini-actions button,
+  .backup-actions button {
+    flex: 1 1 130px;
+  }
 }
 
 @media (max-width: 460px) {