xinyin025/new-api
1
0
Fork 0
mirror of https://github.com/linux-do/new-api.git synced 2025-11-13 17:43:40 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into fix-display-home-content

Browse Source
This commit is contained in:
Calcium-Ion
2024-03-05 23:16:35 +08:00
committed by GitHub
parent 5cb933a278 d5c5c30312
commit 415d296171
28 changed files with 729 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
web/src/components/LoginForm.js
View File

@@ -1,14 +1,15 @@
import React, {useContext, useEffect, useState} from 'react';
import {Link, useNavigate, useSearchParams} from 'react-router-dom';
import {UserContext} from '../context/User';
import {API, getLogo, isMobile, showError, showInfo, showSuccess, showWarning} from '../helpers';
import {onGitHubOAuthClicked} from './utils';
import React, { useContext, useEffect, useState } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import { UserContext } from '../context/User';
import { API, getLogo, isMobile, showError, showInfo, showSuccess, showWarning } from '../helpers';
import { onGitHubOAuthClicked } from './utils';
import Turnstile from "react-turnstile";
import {Layout, Card, Image, Form, Button, Divider, Modal} from "@douyinfe/semi-ui";
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';
import { IconGithubLogo } from '@douyinfe/semi-icons';
const LoginForm = () => {
const [inputs, setInputs] = useState({
@@ -18,7 +19,7 @@ const LoginForm = () => {
});
const [searchParams, setSearchParams] = useSearchParams();
const [submitted, setSubmitted] = useState(false);
const {username, password} = inputs;
const { username, password } = inputs;
const [userState, userDispatch] = useContext(UserContext);
const [turnstileEnabled, setTurnstileEnabled] = useState(false);
const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
@@ -56,9 +57,9 @@ const LoginForm = () => {
const res = await API.get(
`/api/oauth/wechat?code=${inputs.wechat_verification_code}`
);
const {success, message, data} = res.data;
const { success, message, data } = res.data;
if (success) {
userDispatch({type: 'login', payload: data});
userDispatch({ type: 'login', payload: data });
localStorage.setItem('user', JSON.stringify(data));
navigate('/');
showSuccess('登录成功！');
@@ -69,7 +70,7 @@ const LoginForm = () => {
};
function handleChange(name, value) {
setInputs((inputs) => ({...inputs, [name]: value}));
setInputs((inputs) => ({ ...inputs, [name]: value }));
}
async function handleSubmit(e) {
@@ -83,13 +84,13 @@ const LoginForm = () => {
username,
password
});
const {success, message, data} = res.data;
const { success, message, data } = res.data;
if (success) {
userDispatch({type: 'login', payload: data});
userDispatch({ type: 'login', payload: data });
localStorage.setItem('user', JSON.stringify(data));
showSuccess('登录成功！');
if (username === 'root' && password === '123456') {
Modal.error({title: '您正在使用默认密码！', content: '请立刻修改默认密码！', centered: true});
Modal.error({ title: '您正在使用默认密码！', content: '请立刻修改默认密码！', centered: true });
}
navigate('/token');
} else {
@@ -100,16 +101,37 @@ const LoginForm = () => {
}
}
// 添加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 (
<div>
<Layout>
<Layout.Header>
</Layout.Header>
<Layout.Content>
<div style={{justifyContent: 'center', display: "flex", marginTop: 120}}>
<div style={{width: 500}}>
<div style={{ justifyContent: 'center', display: "flex", marginTop: 120 }}>
<div style={{ width: 500 }}>
<Card>
<Title heading={2} style={{textAlign: 'center'}}>
<Title heading={2} style={{ textAlign: 'center' }}>
用户登录
</Title>
<Form>
@@ -129,12 +151,12 @@ const LoginForm = () => {
onChange={(value) => handleChange('password', value)}
/>
<Button theme='solid' style={{width: '100%'}} type={'primary'} size='large'
htmlType={'submit'} onClick={handleSubmit}>
<Button theme='solid' style={{ width: '100%' }} type={'primary'} size='large'
htmlType={'submit'} onClick={handleSubmit}>
登录
</Button>
</Form>
<div style={{display: 'flex', justifyContent: 'space-between', marginTop: 20}}>
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}>
<Text>
没有账号请先 <Link to='/register'>注册账号</Link>
</Text>
@@ -142,16 +164,16 @@ const LoginForm = () => {
忘记密码 <Link to='/reset'>点击重置</Link>
</Text>
</div>
{status.github_oauth || status.wechat_login ? (
{status.github_oauth || status.wechat_login || status.telegram_oauth ? (
<>
<Divider margin='12px' align='center'>
第三方登录
</Divider>
<div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}>
<div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
{status.github_oauth ? (
<Button
type='primary'
icon={<IconGithubLogo/>}
icon={<IconGithubLogo />}
onClick={() => onGitHubOAuthClicked(status.github_client_id)}
/>
) : (
@@ -167,6 +189,12 @@ const LoginForm = () => {
{/*) : (*/}
{/* <></>*/}
{/*)}*/}
{status.telegram_oauth ? (
<TelegramLoginButton dataOnauth={onTelegramLoginClicked} botName={status.telegram_bot_name} />
) : (
<></>
)}
</div>
</>
) : (
@@ -208,7 +236,7 @@ const LoginForm = () => {
{/*</Modal>*/}
</Card>
{turnstileEnabled ? (
<div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}>
<div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
<Turnstile
sitekey={turnstileSiteKey}
onVerify={(token) => {

20
web/src/components/PersonalSetting.js
View File

@@ -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);
@@ -443,6 +444,25 @@ const PersonalSetting = () => {
</div>
</div>
<div style={{marginTop: 10}}>
<Typography.Text strong>Telegram</Typography.Text>
<div style={{display: 'flex', justifyContent: 'space-between'}}>
<div>
<Input
value={userState.user && userState.user.telegram_id !== ''?userState.user.telegram_id:'未绑定'}
readonly={true}
></Input>
</div>
<div>
{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>
<div style={{marginTop: 10}}>
<Space>
<Button onClick={generateAccessToken}>生成系统访问令牌</Button>

113
web/src/components/SystemSetting.js
View File

@@ -1,6 +1,6 @@
import React, {useEffect, useState} from 'react';
import {Button, Divider, Form, Grid, Header, Modal, Message} from 'semantic-ui-react';
import {API, removeTrailingSlash, showError, verifyJSON} from '../helpers';
import React, { useEffect, useState } from 'react';
import { Button, Divider, Form, Grid, Header, Modal, Message } from 'semantic-ui-react';
import { API, removeTrailingSlash, showError, verifyJSON } from '../helpers';
const SystemSetting = () => {
let [inputs, setInputs] = useState({
@@ -20,8 +20,10 @@ const SystemSetting = () => {
EpayId: '',
EpayKey: '',
Price: 7.3,
MinTopUp: 1,
TopupGroupRatio: '',
PayAddress: '',
CustomCallbackAddress: '',
Footer: '',
WeChatAuthEnabled: '',
WeChatServerAddress: '',
@@ -32,7 +34,11 @@ const SystemSetting = () => {
TurnstileSecretKey: '',
RegisterEnabled: '',
EmailDomainRestrictionEnabled: '',
EmailDomainWhitelist: ''
EmailDomainWhitelist: '',
// telegram login
TelegramOAuthEnabled: '',
TelegramBotToken: '',
TelegramBotName: '',
});
const [originInputs, setOriginInputs] = useState({});
let [loading, setLoading] = useState(false);
@@ -42,7 +48,7 @@ const SystemSetting = () => {
const getOptions = async () => {
const res = await API.get('/api/option/');
const {success, message, data} = res.data;
const { success, message, data } = res.data;
if (success) {
let newInputs = {};
data.forEach((item) => {
@@ -58,7 +64,7 @@ const SystemSetting = () => {
setOriginInputs(newInputs);
setEmailDomainWhitelist(newInputs.EmailDomainWhitelist.split(',').map((item) => {
return {key: item, text: item, value: item};
return { key: item, text: item, value: item };
}));
} else {
showError(message);
@@ -77,6 +83,7 @@ const SystemSetting = () => {
case 'EmailVerificationEnabled':
case 'GitHubOAuthEnabled':
case 'WeChatAuthEnabled':
case 'TelegramOAuthEnabled':
case 'TurnstileCheckEnabled':
case 'EmailDomainRestrictionEnabled':
case 'RegisterEnabled':
@@ -89,7 +96,7 @@ const SystemSetting = () => {
key,
value
});
const {success, message} = res.data;
const { success, message } = res.data;
if (success) {
if (key === 'EmailDomainWhitelist') {
value = value.split(',');
@@ -106,7 +113,7 @@ const SystemSetting = () => {
setLoading(false);
};
const handleInputChange = async (e, {name, value}) => {
const handleInputChange = async (e, { name, value }) => {
if (name === 'PasswordLoginEnabled' && inputs[name] === 'true') {
// block disabling password login
setShowPasswordWarningModal(true);
@@ -128,9 +135,11 @@ const SystemSetting = () => {
name === 'TurnstileSiteKey' ||
name === 'TurnstileSecretKey' ||
name === 'EmailDomainWhitelist' ||
name === 'TopupGroupRatio'
name === 'TopupGroupRatio' ||
name === 'TelegramBotToken' ||
name === 'TelegramBotName'
) {
setInputs((inputs) => ({...inputs, [name]: value}));
setInputs((inputs) => ({ ...inputs, [name]: value }));
} else {
await updateOption(name, value);
}
@@ -234,6 +243,12 @@ const SystemSetting = () => {
}
};
const submitTelegramSettings = async () => {
// await updateOption('TelegramOAuthEnabled', inputs.TelegramOAuthEnabled);
await updateOption('TelegramBotToken', inputs.TelegramBotToken);
await updateOption('TelegramBotName', inputs.TelegramBotName);
};
const submitTurnstile = async () => {
if (originInputs['TurnstileSiteKey'] !== inputs.TurnstileSiteKey) {
await updateOption('TurnstileSiteKey', inputs.TurnstileSiteKey);
@@ -280,7 +295,7 @@ const SystemSetting = () => {
更新服务器地址
</Form.Button>
<Divider/>
<Header as='h3'>支付设置（当前仅支持易支付接口，使用上方服务器地址作为回调地址！）</Header>
<Header as='h3'>支付设置（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）</Header>
<Form.Group widths='equal'>
<Form.Input
label='支付地址，不填写则不启用在线支付'
@@ -303,14 +318,31 @@ const SystemSetting = () => {
name='EpayKey'
onChange={handleInputChange}
/>
<Form.Input
label='充值价格（x元/美金）'
placeholder='例如：7，就是7元/美金'
value={inputs.Price}
name='Price'
min={0}
onChange={handleInputChange}
</Form.Group>
<Form.Group widths='equal'>
<Form.Input
label='回调地址，不填写则使用上方服务器地址作为回调地址'
placeholder='例如：https://yourdomain.com'
value={inputs.CustomCallbackAddress}
name='CustomCallbackAddress'
onChange={handleInputChange}
/>
<Form.Input
label='充值价格（x元/美金）'
placeholder='例如：7，就是7元/美金'
value={inputs.Price}
name='Price'
min={0}
onChange={handleInputChange}
/>
<Form.Input
label='最低充值数量'
placeholder='例如：2，就是最低充值2$'
value={inputs.MinTopUp}
name='MinTopUp'
min={1}
onChange={handleInputChange}
/>
</Form.Group>
<Form.Group widths='equal'>
@@ -318,7 +350,7 @@ const SystemSetting = () => {
label='充值分组倍率'
name='TopupGroupRatio'
onChange={handleInputChange}
style={{minHeight: 250, fontFamily: 'JetBrains Mono, Consolas'}}
style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
autoComplete='new-password'
value={inputs.TopupGroupRatio}
placeholder='为一个 JSON 文本，键为组名称，值为倍率'
@@ -327,7 +359,7 @@ const SystemSetting = () => {
<Form.Button onClick={submitPayAddress}>
更新支付设置
</Form.Button>
<Divider/>
<Divider />
<Header as='h3'>配置登录注册</Header>
<Form.Group inline>
<Form.Checkbox
@@ -342,7 +374,7 @@ const SystemSetting = () => {
open={showPasswordWarningModal}
onClose={() => setShowPasswordWarningModal(false)}
size={'tiny'}
style={{maxWidth: '450px'}}
style={{ maxWidth: '450px' }}
>
<Modal.Header>警告</Modal.Header>
<Modal.Content>
@@ -386,6 +418,12 @@ const SystemSetting = () => {
name='WeChatAuthEnabled'
onChange={handleInputChange}
/>
<Form.Checkbox
checked={inputs.TelegramOAuthEnabled === 'true'}
label='允许通过 Telegram 进行登录'
name='TelegramOAuthEnabled'
onChange={handleInputChange}
/>
</Form.Group>
<Form.Group inline>
<Form.Checkbox
@@ -401,7 +439,7 @@ const SystemSetting = () => {
onChange={handleInputChange}
/>
</Form.Group>
<Divider/>
<Divider />
<Header as='h3'>
配置邮箱域名白名单
<Header.Subheader>用以防止恶意用户利用临时邮箱批量注册</Header.Subheader>
@@ -443,13 +481,13 @@ const SystemSetting = () => {
autoComplete='new-password'
placeholder='输入新的允许的邮箱域名'
value={restrictedDomainInput}
onChange={(e, {value}) => {
onChange={(e, { value }) => {
setRestrictedDomainInput(value);
}}
/>
</Form.Group>
<Form.Button onClick={submitEmailDomainWhitelist}>保存邮箱域名白名单设置</Form.Button>
<Divider/>
<Divider />
<Header as='h3'>
配置 SMTP
<Header.Subheader>用以支持系统的邮件发送</Header.Subheader>
@@ -500,7 +538,7 @@ const SystemSetting = () => {
/>
</Form.Group>
<Form.Button onClick={submitSMTP}>保存 SMTP 设置</Form.Button>
<Divider/>
<Divider />
<Header as='h3'>
配置 GitHub OAuth App
<Header.Subheader>
@@ -538,7 +576,7 @@ const SystemSetting = () => {
<Form.Button onClick={submitGitHubOAuth}>
保存 GitHub OAuth 设置
</Form.Button>
<Divider/>
<Divider />
<Header as='h3'>
配置 WeChat Server
<Header.Subheader>
@@ -582,7 +620,28 @@ const SystemSetting = () => {
<Form.Button onClick={submitWeChat}>
保存 WeChat Server 设置
</Form.Button>
<Divider/>
<Divider />
<Header as='h3'>配置 Telegram 登录</Header>
<Form.Group inline>
<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 名称'
/>
</Form.Group>
<Form.Button onClick={submitTelegramSettings}>
保存 Telegram 登录设置
</Form.Button>
<Divider />
<Header as='h3'>
配置 Turnstile
<Header.Subheader>