feat: telegram login and bind

web/src/components/LoginForm.js

@@ -7,6 +7,7 @@ import Turnstile from "react-turnstile";
 import { Layout, Card, Image, Form, Button, Divider, Modal } from "@douyinfe/semi-ui";
 import Title from "@douyinfe/semi-ui/lib/es/typography/title";
 import Text from "@douyinfe/semi-ui/lib/es/typography/text";
+import TelegramLoginButton from 'react-telegram-login';
 
 import { IconGithubLogo } from '@douyinfe/semi-icons';
 
@@ -101,10 +102,24 @@ const LoginForm = () => {
     }
 
     // 添加Telegram登录处理函数
-    const onTelegramLoginClicked = async () => {
-        // 这里调用后端API进行Telegram登录
-        // 例如: const res = await API.get(`/api/oauth/telegram`);
-        // 根据响应处理登录逻辑
+    const onTelegramLoginClicked = async (response) => {
+        const fields = ["id", "first_name", "last_name", "username", "photo_url", "auth_date", "hash", "lang"];
+        const params = {};
+        fields.forEach((field) => {
+            if (response[field]) {
+                params[field] = response[field];
+            }
+        });
+        const res = await API.get(`/api/oauth/telegram/login`, { params });
+        const { success, message, data } = res.data;
+        if (success) {
+            userDispatch({ type: 'login', payload: data });
+            localStorage.setItem('user', JSON.stringify(data));
+            showSuccess('登录成功！');
+            navigate('/');
+        } else {
+            showError(message);
+        }
     };
 
     return (
@@ -176,13 +191,7 @@ const LoginForm = () => {
                                             {/*)}*/}
 
                                             {status.telegram_oauth ? (
-                                                <Button
-                                                    type='primary'
-                                                    // icon={<IconTelegram/>} // 假设您有Telegram的图标
-                                                    onClick={onTelegramLoginClicked}
-                                                >
-                                                    Telegram登录
-                                                </Button>
+                                                <TelegramLoginButton dataOnauth={onTelegramLoginClicked} botName={status.telegram_bot_name} />
                                             ) : (
                                                 <></>
                                             )}

web/src/components/PersonalSetting.js

@@ -21,6 +21,7 @@ import {getQuotaPerUnit, renderQuota, renderQuotaWithPrompt, stringToColor} from
 import EditToken from "../pages/Token/EditToken";
 import EditUser from "../pages/User/EditUser";
 import passwordResetConfirm from "./PasswordResetConfirm";
+import TelegramLoginButton from 'react-telegram-login';
 
 const PersonalSetting = () => {
     const [userState, userDispatch] = useContext(UserContext);
@@ -453,13 +454,11 @@ const PersonalSetting = () => {
                                         ></Input>
                                     </div>
                                     <div>
-                                        <Button
-                                            disabled={(userState.user && userState.user.telegram_id !== '') || !status.telegram_oauth}
-                                        >
-                                            {
-                                                status.github_oauth?'绑定':'未启用'
-                                            }
-                                        </Button>
+                                        {status.telegram_oauth ?
+                                            userState.user.telegram_id !== '' ? <Button disabled={true}>已绑定</Button>
+                                            : <TelegramLoginButton dataAuthUrl="/api/oauth/telegram/bind" botName={status.telegram_bot_name} />
+                                        : <Button disabled={true}>未启用</Button>
+                                        }
                                     </div>
                                 </div>
                             </div>

web/src/components/SystemSetting.js

@@ -133,7 +133,9 @@ const SystemSetting = () => {
             name === 'TurnstileSiteKey' ||
             name === 'TurnstileSecretKey' ||
             name === 'EmailDomainWhitelist' ||
-            name === 'TopupGroupRatio'
+            name === 'TopupGroupRatio' ||
+            name === 'TelegramBotToken' ||
+            name === 'TelegramBotName'
         ) {
             setInputs((inputs) => ({ ...inputs, [name]: value }));
         } else {
@@ -605,12 +607,14 @@ const SystemSetting = () => {
                         <Form.Input
                             label='Telegram Bot Token'
                             name='TelegramBotToken'
+                            onChange={handleInputChange}
                             value={inputs.TelegramBotToken}
                             placeholder='输入你的 Telegram Bot Token'
                         />
                         <Form.Input
                             label='Telegram Bot 名称'
                             name='TelegramBotName'
+                            onChange={handleInputChange}
                             value={inputs.TelegramBotName}
                             placeholder='输入你的 Telegram Bot 名称'
                         />