Fixed TG login

templates/client_portal.html

@@ -461,12 +461,15 @@ function clientPortal() {
         telegramModal: null,
         telegramBusy: false,
         telegramPromptChecked: false,
+        telegramStatusTimer: null,
+        telegramStatusPolling: false,
         init() {
             this.initTelegramWebApp();
             this.load();
             this.loadServerStatus();
             this.loadTelegramStatus();
             this.serverStatusTimer = setInterval(() => this.loadServerStatus(true), 30000);
+            this.telegramStatusTimer = setInterval(() => this.pollTelegramStatus(), 2500);
         },
         async request(url, options = {}) {
             const response = await fetch(url, {
@@ -517,11 +520,11 @@ function clientPortal() {
             this.telegram.isWebApp = Boolean(webApp.initData);
             this.telegram.initData = webApp.initData || '';
         },
-        async loadTelegramStatus() {
+        async loadTelegramStatus(options = {}) {
             try {
                 const status = await this.request('/api/telegram-link/status');
                 this.applyTelegramStatus(status);
-                this.maybePromptTelegram();
+                if (options.prompt !== false) this.maybePromptTelegram();
             } catch (e) {
                 console.warn('telegram status failed', e);
             }
@@ -596,6 +599,25 @@ function clientPortal() {
                 this.telegramBusy = false;
             }
         },
+        async pollTelegramStatus() {
+            if (this.telegramStatusPolling || this.telegramBusy) return;
+            if (!this.telegram.enabled || !this.telegram.pending) return;
+            if (this.telegramModal !== 'manualGuide' && this.telegramModal !== 'manage') return;
+
+            this.telegramStatusPolling = true;
+            const wasPending = this.telegram.pending;
+            try {
+                await this.loadTelegramStatus({ prompt: false });
+                if (wasPending && this.telegram.linked) {
+                    this.telegramModal = 'manage';
+                    this.setNotice('success', '{{ t.notice_success_title }}', '{{ t.telegram_saved }}');
+                } else if (wasPending && !this.telegram.pending) {
+                    this.telegramModal = 'manage';
+                }
+            } finally {
+                this.telegramStatusPolling = false;
+            }
+        },
         async copyTelegramSecret() {
             if (!this.telegram.pending_secret) return;
             this.clearNotice();

templates/configs.html

@@ -480,6 +480,8 @@ function configsPage() {
         telegramModal: null,
         telegramBusy: false,
         telegramPromptChecked: false,
+        telegramStatusTimer: null,
+        telegramStatusPolling: false,
         isAdmin: {% if is_admin %}true{% else %}false{% endif %},
         init() {
             this.initTelegramWebApp();
@@ -489,6 +491,7 @@ function configsPage() {
                 this.loadRolloutStatus();
                 this.rolloutTimer = setInterval(() => this.loadRolloutStatus(), 10000);
             }
+            this.telegramStatusTimer = setInterval(() => this.pollTelegramStatus(), 2500);
         },
         async request(url, options = {}) {
             const response = await fetch(url, {
@@ -516,11 +519,11 @@ function configsPage() {
             this.telegram.isWebApp = Boolean(webApp.initData);
             this.telegram.initData = webApp.initData || '';
         },
-        async loadTelegramStatus() {
+        async loadTelegramStatus(options = {}) {
             try {
                 const status = await this.request('/api/telegram-link/status');
                 this.applyTelegramStatus(status);
-                this.maybePromptTelegram();
+                if (options.prompt !== false) this.maybePromptTelegram();
             } catch (e) {
                 console.warn('telegram status failed', e);
             }
@@ -595,6 +598,25 @@ function configsPage() {
                 this.telegramBusy = false;
             }
         },
+        async pollTelegramStatus() {
+            if (this.telegramStatusPolling || this.telegramBusy) return;
+            if (!this.telegram.enabled || !this.telegram.pending) return;
+            if (this.telegramModal !== 'manualGuide' && this.telegramModal !== 'manage') return;
+
+            this.telegramStatusPolling = true;
+            const wasPending = this.telegram.pending;
+            try {
+                await this.loadTelegramStatus({ prompt: false });
+                if (wasPending && this.telegram.linked) {
+                    this.telegramModal = 'manage';
+                    this.setNotice('success', '{{ t.notice_success_title }}', '{{ t.telegram_saved }}');
+                } else if (wasPending && !this.telegram.pending) {
+                    this.telegramModal = 'manage';
+                }
+            } finally {
+                this.telegramStatusPolling = false;
+            }
+        },
         async copyTelegramSecret() {
             if (!this.telegram.pending_secret) return;
             this.clearNotice();

templates/login.html

@@ -3,6 +3,7 @@
 {% block title %}{{ t.login_heading }} | {{ t.site_name }}{% endblock title %}
 
 {% block head_extra %}
+<script src="https://telegram.org/js/telegram-web-app.js"></script>
 <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; color: #333; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
@@ -30,6 +31,7 @@
     {% if !message.is_empty() %}
     <div class="flash">{{ message }}</div>
     {% endif %}
+    <div id="telegram-login-flash" class="flash" style="display: none;"></div>
 
     {% if !auth_password_enabled && !auth_sso_enabled %}
     <p class="message">{{ t.login_disabled }}</p>
@@ -53,4 +55,37 @@
     <a class="sso-btn" href="/auth/oidc/start">{{ oidc_button_text }}</a>
     {% endif %}
 </div>
+
+<script>
+(async () => {
+    const webApp = window.Telegram && window.Telegram.WebApp;
+    if (!webApp || !webApp.initData) return;
+
+    try {
+        webApp.ready();
+        webApp.expand();
+    } catch (_) {}
+
+    try {
+        const response = await fetch('/api/telegram-login/webapp', {
+            method: 'POST',
+            credentials: 'same-origin',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ init_data: webApp.initData }),
+        });
+        const data = await response.json().catch(() => ({}));
+        if (response.ok) {
+            window.location.replace(data.redirect_to || '/configs');
+            return;
+        }
+        const flash = document.getElementById('telegram-login-flash');
+        flash.textContent = data.error || data.detail || '{{ t.login_telegram_failed }}';
+        flash.style.display = 'block';
+    } catch (_) {
+        const flash = document.getElementById('telegram-login-flash');
+        flash.textContent = '{{ t.login_telegram_failed }}';
+        flash.style.display = 'block';
+    }
+})();
+</script>
 {% endblock body %}

templates/telegram_login.html

@@ -0,0 +1,62 @@
+{% extends "base.html" %}
+
+{% block title %}{{ t.login_heading }} | {{ t.site_name }}{% endblock title %}
+
+{% block head_extra %}
+<script src="https://telegram.org/js/telegram-web-app.js"></script>
+<style>
+    * { box-sizing: border-box; }
+    body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: #f5f5f5; color: #333; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+    .telegram-login-card { width: min(380px, 100%); border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); padding: 2rem; text-align: center; display: grid; gap: .8rem; }
+    .telegram-login-card h1 { margin: 0; font-size: 1.35rem; }
+    .telegram-login-card p { margin: 0; color: #666; line-height: 1.45; }
+    .telegram-login-card a { color: #1a1a2e; font-weight: 700; }
+</style>
+{% endblock head_extra %}
+
+{% block body %}
+<div class="telegram-login-card">
+    <h1>{{ t.login_heading }}</h1>
+    <p id="telegram-login-status">{{ t.login_telegram_wait }}</p>
+    <a href="/login">{{ t.login_telegram_fallback }}</a>
+</div>
+
+<script>
+(async () => {
+    const status = document.getElementById('telegram-login-status');
+    const fallback = () => window.location.replace('/login');
+    const webApp = window.Telegram && window.Telegram.WebApp;
+
+    try {
+        if (webApp) {
+            webApp.ready();
+            webApp.expand();
+        }
+    } catch (_) {}
+
+    if (!webApp || !webApp.initData) {
+        fallback();
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/telegram-login/webapp', {
+            method: 'POST',
+            credentials: 'same-origin',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ init_data: webApp.initData }),
+        });
+        const data = await response.json().catch(() => ({}));
+        if (!response.ok) {
+            status.textContent = data.error || data.detail || '{{ t.login_telegram_failed }}';
+            setTimeout(fallback, 1800);
+            return;
+        }
+        window.location.replace(data.redirect_to || '/configs');
+    } catch (_) {
+        status.textContent = '{{ t.login_telegram_failed }}';
+        setTimeout(fallback, 1800);
+    }
+})();
+</script>
+{% endblock body %}