Add test button to Telegram settings to verify bot configuration

Author: JPS-747

backend/app/main.py

@@ -157,3 +157,34 @@ def check_telegram_settings(
     return MessageResponse(
         message=f"Telegram configured: {is_configured}"
     )
+
+
+@app.post("/auth/telegram/test", response_model=MessageResponse)
+async def send_test_telegram_message(
+    current_user: User = Depends(get_current_user),
+) -> MessageResponse:
+    """Send a test message to user's Telegram bot"""
+    if not current_user.telegram_bot_token or not current_user.telegram_chat_id:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Telegram bot not configured. Please set it up first.",
+        )
+
+    telegram = TelegramService(
+        bot_token=current_user.telegram_bot_token,
+        chat_id=current_user.telegram_chat_id,
+    )
+
+    try:
+        await telegram.send_message(
+            f"✅ <b>Test Message Successful!</b>\n\n"
+            f"Your Telegram bot is correctly configured.\n"
+            f"<b>User:</b> {current_user.full_name}\n"
+            f"<b>Email:</b> {current_user.email}"
+        )
+        return MessageResponse(message="Test message sent successfully to your Telegram bot!")
+    except Exception as e:
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail=f"Failed to send test message: {str(e)}",
+        )

frontend/src/api.ts

@@ -110,4 +110,15 @@ export async function checkTelegramSettings(token: string): Promise<{ message: s
     return parseResponse<{ message: string }>(response);
 }
 
+export async function sendTestTelegramMessage(token: string): Promise<{ message: string }> {
+    const response = await fetch(`${API_BASE_URL}/auth/telegram/test`, {
+        method: 'POST',
+        headers: {
+            Authorization: `Bearer ${token}`,
+        },
+    });
+
+    return parseResponse<{ message: string }>(response);
+}
+
 export type { AuthResponse, UserResponse, RegisterPayload, LoginPayload, TelegramSettingsPayload };

frontend/src/pages/TelegramSettingsPage.css

@@ -266,6 +266,52 @@
   cursor: not-allowed;
 }
 
+.test-section {
+  margin-top: 2rem;
+  padding: 1.5rem;
+  background: var(--code-bg, #f5f5f5);
+  border-radius: 8px;
+  border: 1px solid var(--border-color, #ddd);
+}
+
+.test-section h3 {
+  color: var(--text-primary, #000);
+  margin: 0 0 0.5rem 0;
+  font-size: 1rem;
+}
+
+.test-section p {
+  color: var(--text-secondary, #666);
+  margin: 0.5rem 0 1rem 0;
+  font-size: 0.95rem;
+}
+
+.test-button {
+  padding: 0.75rem 1.5rem;
+  background: linear-gradient(
+    135deg,
+    var(--primary, #4f8cff),
+    var(--secondary, #7c4dff)
+  );
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.test-button:hover:not(:disabled) {
+  box-shadow: 0 4px 12px rgba(79, 140, 255, 0.4);
+  transform: translateY(-2px);
+}
+
+.test-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .info-section {
   margin-top: 2rem;
   padding-top: 2rem;

frontend/src/pages/TelegramSettingsPage.tsx

@@ -1,6 +1,6 @@
 import { FC, useState, useEffect } from 'react';
 import { useAuth } from '../auth/AuthContext';
-import { checkTelegramSettings, setTelegramSettings } from '../api';
+import { checkTelegramSettings, setTelegramSettings, sendTestTelegramMessage } from '../api';
 import './TelegramSettingsPage.css';
 
 export const TelegramSettingsPage: FC = () => {
@@ -14,6 +14,8 @@ export const TelegramSettingsPage: FC = () => {
     const [success, setSuccess] = useState(false);
     const [isConfigured, setIsConfigured] = useState(false);
     const [checkingStatus, setCheckingStatus] = useState(true);
+    const [testLoading, setTestLoading] = useState(false);
+    const [testMessage, setTestMessage] = useState('');
 
     useEffect(() => {
         checkConfigurationStatus();
@@ -45,6 +47,7 @@ export const TelegramSettingsPage: FC = () => {
         e.preventDefault();
         setError('');
         setSuccess(false);
+        setTestMessage('');
 
         if (!formData.telegram_bot_token.trim()) {
             setError('Bot token is required');
@@ -78,6 +81,32 @@ export const TelegramSettingsPage: FC = () => {
         }
     };
 
+    const handleTestMessage = async () => {
+        setError('');
+        setTestMessage('');
+
+        if (!isConfigured) {
+            setError('Please save your settings first');
+            return;
+        }
+
+        if (!token) {
+            setError('Not authenticated');
+            return;
+        }
+
+        setTestLoading(true);
+        try {
+            const result = await sendTestTelegramMessage(token);
+            setTestMessage(result.message);
+            setTimeout(() => setTestMessage(''), 5000);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to send test message');
+        } finally {
+            setTestLoading(false);
+        }
+    };
+
     return (
         <div className="telegram-settings-container">
             <div className="telegram-settings-header">
@@ -116,10 +145,10 @@ export const TelegramSettingsPage: FC = () => {
                 <div className="settings-form-container">
                     <div
                         className={`status-indicator ${checkingStatus
-                                ? 'checking'
-                                : isConfigured
-                                    ? 'configured'
-                                    : 'not-configured'
+                            ? 'checking'
+                            : isConfigured
+                                ? 'configured'
+                                : 'not-configured'
                             }`}
                     >
                         <span className="status-dot"></span>
@@ -144,6 +173,12 @@ export const TelegramSettingsPage: FC = () => {
                         </div>
                     )}
 
+                    {testMessage && (
+                        <div className="banner banner-success">
+                            <span>✓ {testMessage}</span>
+                        </div>
+                    )}
+
                     <form onSubmit={handleSubmit} className="settings-form">
                         <div className="form-group">
                             <label htmlFor="telegram_bot_token">
@@ -191,6 +226,21 @@ export const TelegramSettingsPage: FC = () => {
                         </button>
                     </form>
 
+                    {isConfigured && (
+                        <div className="test-section">
+                            <h3>Test Your Configuration</h3>
+                            <p>Send a test message to verify your bot is working correctly:</p>
+                            <button
+                                type="button"
+                                onClick={handleTestMessage}
+                                disabled={testLoading}
+                                className="test-button"
+                            >
+                                {testLoading ? 'Sending test message...' : 'Send Test Message'}
+                            </button>
+                        </div>
+                    )}
+
                     <div className="info-section">
                         <h3>Why do I need this?</h3>
                         <p>