Skip to content

phsl / new-api

Go to a project
Commit 9f34ea05 by Calcium-Ion Committed by GitHub
Options

Merge pull request #916 from xifan2333/fix/systemSettingsUI 

✨ feat: Update option handling in SystemSetting
parents 638950c2 f5b43162
Showing with 633 additions and 685 deletions
controller/option.go
...@@ -53,11 +53,12 @@ func UpdateOption(c *gin.Context) { ...@@ -53,11 +53,12 @@ func UpdateOption(c *gin.Context) {
return return
} }
case "oidc.enabled": case "oidc.enabled":
if option.Value == "true" && system_setting.GetOIDCSettings().Enabled { if option.Value == "true" && system_setting.GetOIDCSettings().ClientId == "" {
c.JSON(http.StatusOK, gin.H{ c.JSON(http.StatusOK, gin.H{
"success": false, "success": false,
"message": "无法启用 OIDC 登录，请先填入 OIDC Client Id 以及 OIDC Client Secret！", "message": "无法启用 OIDC 登录，请先填入 OIDC Client Id 以及 OIDC Client Secret！",
}) })
return
} }
case "LinuxDOOAuthEnabled": case "LinuxDOOAuthEnabled":
if option.Value == "true" && common.LinuxDOClientId == "" { if option.Value == "true" && common.LinuxDOClientId == "" {
...@@ -89,6 +90,15 @@ func UpdateOption(c *gin.Context) { ...@@ -89,6 +90,15 @@ func UpdateOption(c *gin.Context) {
"success": false, "success": false,
"message": "无法启用 Turnstile 校验，请先填入 Turnstile 校验相关配置信息！", "message": "无法启用 Turnstile 校验，请先填入 Turnstile 校验相关配置信息！",
}) })
return
}
case "TelegramOAuthEnabled":
if option.Value == "true" && common.TelegramBotToken == "" {
c.JSON(http.StatusOK, gin.H{
"success": false,
"message": "无法启用 Telegram OAuth，请先填入 Telegram Bot Token！",
})
return return
} }
case "GroupRatio": case "GroupRatio":
...@@ -100,6 +110,7 @@ func UpdateOption(c *gin.Context) { ...@@ -100,6 +110,7 @@ func UpdateOption(c *gin.Context) {
}) })
return return
} }
} }
err = model.UpdateOption(option.Key, option.Value) err = model.UpdateOption(option.Key, option.Value)
if err != nil { if err != nil {
......
web/src/components/SystemSetting.js
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState, useRef } from 'react';
import { import {
Button, Button,
Divider,
Form, Form,
Grid, Row,
Header, Col,
Message, Typography,
Modal, Modal,
} from 'semantic-ui-react'; Banner,
import { API, removeTrailingSlash, showError, showSuccess, verifyJSON } from '../helpers'; TagInput,
Spin,
import { useTheme } from '../context/Theme'; } from '@douyinfe/semi-ui';
const { Text } = Typography;
import {
removeTrailingSlash,
showError,
showSuccess,
verifyJSON,
} from '../helpers/utils';
import { API } from '../helpers/api';
const SystemSetting = () => { const SystemSetting = () => {
let [inputs, setInputs] = useState({ let [inputs, setInputs] = useState({
...@@ -64,144 +71,138 @@ const SystemSetting = () => { ...@@ -64,144 +71,138 @@ const SystemSetting = () => {
LinuxDOClientId: '', LinuxDOClientId: '',
LinuxDOClientSecret: '', LinuxDOClientSecret: '',
}); });
const [originInputs, setOriginInputs] = useState({});
let [loading, setLoading] = useState(false);
const [EmailDomainWhitelist, setEmailDomainWhitelist] = useState([]);
const [restrictedDomainInput, setRestrictedDomainInput] = useState('');
const [showPasswordWarningModal, setShowPasswordWarningModal] =
useState(false);
const theme = useTheme(); const [originInputs, setOriginInputs] = useState({});
const isDark = theme === 'dark'; const [loading, setLoading] = useState(false);
const [isLoaded, setIsLoaded] = useState(false);
const formApiRef = useRef(null);
const [emailDomainWhitelist, setEmailDomainWhitelist] = useState([]);
const [showPasswordLoginConfirmModal, setShowPasswordLoginConfirmModal] = useState(false);
const [linuxDOOAuthEnabled, setLinuxDOOAuthEnabled] = useState(false);
const getOptions = async () => { const getOptions = async () => {
setLoading(true);
const res = await API.get('/api/option/'); const res = await API.get('/api/option/');
const { success, message, data } = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
let newInputs = {}; let newInputs = {};
data.forEach((item) => { data.forEach((item) => {
if (item.key === 'TopupGroupRatio') { switch (item.key) {
case 'TopupGroupRatio':
item.value = JSON.stringify(JSON.parse(item.value), null, 2); item.value = JSON.stringify(JSON.parse(item.value), null, 2);
} break;
newInputs[item.key] = item.value; case 'EmailDomainWhitelist':
}); setEmailDomainWhitelist(item.value ? item.value.split(',') : []);
setInputs({ break;
...newInputs,
EmailDomainWhitelist: newInputs.EmailDomainWhitelist.split(','),
});
setOriginInputs(newInputs);
setEmailDomainWhitelist(
newInputs.EmailDomainWhitelist.split(',').map((item) => {
return { key: item, text: item, value: item };
}),
);
} else {
showError(message);
}
};
useEffect(() => {
getOptions().then();
}, []);
useEffect(() => {}, [inputs.EmailDomainWhitelist]);
const updateOption = async (key, value) => {
setLoading(true);
switch (key) {
case 'PasswordLoginEnabled': case 'PasswordLoginEnabled':
case 'PasswordRegisterEnabled': case 'PasswordRegisterEnabled':
case 'EmailVerificationEnabled': case 'EmailVerificationEnabled':
case 'GitHubOAuthEnabled': case 'GitHubOAuthEnabled':
case 'oidc.enabled':
case 'LinuxDOOAuthEnabled':
case 'WeChatAuthEnabled': case 'WeChatAuthEnabled':
case 'TelegramOAuthEnabled': case 'TelegramOAuthEnabled':
case 'RegisterEnabled':
case 'TurnstileCheckEnabled': case 'TurnstileCheckEnabled':
case 'EmailDomainRestrictionEnabled': case 'EmailDomainRestrictionEnabled':
case 'EmailAliasRestrictionEnabled': case 'EmailAliasRestrictionEnabled':
case 'SMTPSSLEnabled': case 'SMTPSSLEnabled':
case 'RegisterEnabled': case 'LinuxDOOAuthEnabled':
value = inputs[key] === 'true' ? 'false' : 'true'; case 'oidc.enabled':
item.value = item.value === 'true';
break;
case 'Price':
case 'MinTopUp':
item.value = parseFloat(item.value);
break; break;
default: default:
break; break;
} }
const res = await API.put('/api/option/', { newInputs[item.key] = item.value;
key,
value,
}); });
const { success, message } = res.data; setInputs(newInputs);
if (success) { setOriginInputs(newInputs);
if (key === 'EmailDomainWhitelist') { if (formApiRef.current) {
value = value.split(','); formApiRef.current.setValues(newInputs);
}
if (key === 'Price') {
value = parseFloat(value);
} }
setInputs((inputs) => ({ setIsLoaded(true);
...inputs,
[key]: value,
}));
} else { } else {
showError(message); showError(message);
} }
setLoading(false); setLoading(false);
}; };
const handleInputChange = async (e, { name, value }) => { useEffect(() => {
if (name === 'PasswordLoginEnabled' && inputs[name] === 'true') { getOptions();
// block disabling password login }, []);
setShowPasswordWarningModal(true);
const updateOptions = async (options) => {
setLoading(true);
try {
// 分离 checkbox 类型的选项和其他选项
const checkboxOptions = options.filter(opt =>
opt.key.toLowerCase().endsWith('enabled')
);
const otherOptions = options.filter(opt =>
!opt.key.toLowerCase().endsWith('enabled')
);
// 处理 checkbox 类型的选项
for (const opt of checkboxOptions) {
const res = await API.put('/api/option/', {
key: opt.key,
value: opt.value.toString()
});
if (!res.data.success) {
showError(res.data.message);
return; return;
} }
if (
name === 'Notice' ||
(name.startsWith('SMTP') && name !== 'SMTPSSLEnabled') ||
name === 'ServerAddress' ||
name === 'WorkerUrl' ||
name === 'WorkerValidKey' ||
name === 'EpayId' ||
name === 'EpayKey' ||
name === 'Price' ||
name === 'PayAddress' ||
name === 'GitHubClientId' ||
name === 'GitHubClientSecret' ||
name === 'oidc.well_known' ||
name === 'oidc.client_id' ||
name === 'oidc.client_secret' ||
name === 'oidc.authorization_endpoint' ||
name === 'oidc.token_endpoint' ||
name === 'oidc.user_info_endpoint' ||
name === 'WeChatServerAddress' ||
name === 'WeChatServerToken' ||
name === 'WeChatAccountQRCodeImageURL' ||
name === 'TurnstileSiteKey' ||
name === 'TurnstileSecretKey' ||
name === 'EmailDomainWhitelist' ||
name === 'TopupGroupRatio' ||
name === 'TelegramBotToken' ||
name === 'TelegramBotName' ||
name === 'LinuxDOClientId' ||
name === 'LinuxDOClientSecret'
) {
setInputs((inputs) => ({ ...inputs, [name]: value }));
} else {
await updateOption(name, value);
} }
// 处理其他选项
if (otherOptions.length > 0) {
const requestQueue = otherOptions.map(opt =>
API.put('/api/option/', {
key: opt.key,
value: typeof opt.value === 'boolean' ? opt.value.toString() : opt.value
})
);
const results = await Promise.all(requestQueue);
// 检查所有请求是否成功
const errorResults = results.filter(res => !res.data.success);
errorResults.forEach(res => {
showError(res.data.message);
});
}
showSuccess('更新成功');
// 更新本地状态
const newInputs = { ...inputs };
options.forEach(opt => {
newInputs[opt.key] = opt.value;
});
setInputs(newInputs);
} catch (error) {
showError('更新失败');
}
setLoading(false);
};
const handleFormChange = (values) => {
setInputs(values);
}; };
const submitServerAddress = async () => { const submitServerAddress = async () => {
let ServerAddress = removeTrailingSlash(inputs.ServerAddress); let ServerAddress = removeTrailingSlash(inputs.ServerAddress);
await updateOption('ServerAddress', ServerAddress); await updateOptions([{ key: 'ServerAddress', value: ServerAddress }]);
}; };
const submitWorker = async () => { const submitWorker = async () => {
let WorkerUrl = removeTrailingSlash(inputs.WorkerUrl); let WorkerUrl = removeTrailingSlash(inputs.WorkerUrl);
await updateOption('WorkerUrl', WorkerUrl); await updateOptions([
if (inputs.WorkerValidKey !== '') { { key: 'WorkerUrl', value: WorkerUrl },
await updateOption('WorkerValidKey', inputs.WorkerValidKey); { key: 'WorkerValidKey', value: inputs.WorkerValidKey }
} ]);
}; };
const submitPayAddress = async () => { const submitPayAddress = async () => {
...@@ -214,89 +215,105 @@ const SystemSetting = () => { ...@@ -214,89 +215,105 @@ const SystemSetting = () => {
showError('充值分组倍率不是合法的 JSON 字符串'); showError('充值分组倍率不是合法的 JSON 字符串');
return; return;
} }
await updateOption('TopupGroupRatio', inputs.TopupGroupRatio);
} }
let PayAddress = removeTrailingSlash(inputs.PayAddress);
await updateOption('PayAddress', PayAddress); const options = [
{ key: 'PayAddress', value: removeTrailingSlash(inputs.PayAddress) }
];
if (inputs.EpayId !== '') { if (inputs.EpayId !== '') {
await updateOption('EpayId', inputs.EpayId); options.push({ key: 'EpayId', value: inputs.EpayId });
} }
if (inputs.EpayKey !== undefined && inputs.EpayKey !== '') { if (inputs.EpayKey !== undefined && inputs.EpayKey !== '') {
await updateOption('EpayKey', inputs.EpayKey); options.push({ key: 'EpayKey', value: inputs.EpayKey });
}
if (inputs.Price !== '') {
options.push({ key: 'Price', value: inputs.Price.toString() });
}
if (inputs.MinTopUp !== '') {
options.push({ key: 'MinTopUp', value: inputs.MinTopUp.toString() });
}
if (inputs.CustomCallbackAddress !== '') {
options.push({ key: 'CustomCallbackAddress', value: inputs.CustomCallbackAddress });
}
if (originInputs['TopupGroupRatio'] !== inputs.TopupGroupRatio) {
options.push({ key: 'TopupGroupRatio', value: inputs.TopupGroupRatio });
} }
await updateOption('Price', '' + inputs.Price);
await updateOptions(options);
}; };
const submitSMTP = async () => { const submitSMTP = async () => {
const options = [];
if (originInputs['SMTPServer'] !== inputs.SMTPServer) { if (originInputs['SMTPServer'] !== inputs.SMTPServer) {
await updateOption('SMTPServer', inputs.SMTPServer); options.push({ key: 'SMTPServer', value: inputs.SMTPServer });
} }
if (originInputs['SMTPAccount'] !== inputs.SMTPAccount) { if (originInputs['SMTPAccount'] !== inputs.SMTPAccount) {
await updateOption('SMTPAccount', inputs.SMTPAccount); options.push({ key: 'SMTPAccount', value: inputs.SMTPAccount });
} }
if (originInputs['SMTPFrom'] !== inputs.SMTPFrom) { if (originInputs['SMTPFrom'] !== inputs.SMTPFrom) {
await updateOption('SMTPFrom', inputs.SMTPFrom); options.push({ key: 'SMTPFrom', value: inputs.SMTPFrom });
} }
if ( if (originInputs['SMTPPort'] !== inputs.SMTPPort && inputs.SMTPPort !== '') {
originInputs['SMTPPort'] !== inputs.SMTPPort && options.push({ key: 'SMTPPort', value: inputs.SMTPPort });
inputs.SMTPPort !== ''
) {
await updateOption('SMTPPort', inputs.SMTPPort);
} }
if ( if (originInputs['SMTPToken'] !== inputs.SMTPToken && inputs.SMTPToken !== '') {
originInputs['SMTPToken'] !== inputs.SMTPToken && options.push({ key: 'SMTPToken', value: inputs.SMTPToken });
inputs.SMTPToken !== '' }
) {
await updateOption('SMTPToken', inputs.SMTPToken); if (options.length > 0) {
await updateOptions(options);
} }
}; };
const submitEmailDomainWhitelist = async () => { const submitEmailDomainWhitelist = async () => {
if ( if (Array.isArray(emailDomainWhitelist)) {
originInputs['EmailDomainWhitelist'] !== await updateOptions([{
inputs.EmailDomainWhitelist.join(',') && key: 'EmailDomainWhitelist',
inputs.SMTPToken !== '' value: emailDomainWhitelist.join(',')
) { }]);
await updateOption( } else {
'EmailDomainWhitelist', showError('邮箱域名白名单格式不正确');
inputs.EmailDomainWhitelist.join(','),
);
} }
}; };
const submitWeChat = async () => { const submitWeChat = async () => {
const options = [];
if (originInputs['WeChatServerAddress'] !== inputs.WeChatServerAddress) { if (originInputs['WeChatServerAddress'] !== inputs.WeChatServerAddress) {
await updateOption( options.push({
'WeChatServerAddress', key: 'WeChatServerAddress',
removeTrailingSlash(inputs.WeChatServerAddress), value: removeTrailingSlash(inputs.WeChatServerAddress)
); });
} }
if ( if (originInputs['WeChatAccountQRCodeImageURL'] !== inputs.WeChatAccountQRCodeImageURL) {
originInputs['WeChatAccountQRCodeImageURL'] !== options.push({
inputs.WeChatAccountQRCodeImageURL key: 'WeChatAccountQRCodeImageURL',
) { value: inputs.WeChatAccountQRCodeImageURL
await updateOption( });
'WeChatAccountQRCodeImageURL',
inputs.WeChatAccountQRCodeImageURL,
);
} }
if ( if (originInputs['WeChatServerToken'] !== inputs.WeChatServerToken && inputs.WeChatServerToken !== '') {
originInputs['WeChatServerToken'] !== inputs.WeChatServerToken && options.push({ key: 'WeChatServerToken', value: inputs.WeChatServerToken });
inputs.WeChatServerToken !== '' }
) {
await updateOption('WeChatServerToken', inputs.WeChatServerToken); if (options.length > 0) {
await updateOptions(options);
} }
}; };
const submitGitHubOAuth = async () => { const submitGitHubOAuth = async () => {
const options = [];
if (originInputs['GitHubClientId'] !== inputs.GitHubClientId) { if (originInputs['GitHubClientId'] !== inputs.GitHubClientId) {
await updateOption('GitHubClientId', inputs.GitHubClientId); options.push({ key: 'GitHubClientId', value: inputs.GitHubClientId });
}
if (originInputs['GitHubClientSecret'] !== inputs.GitHubClientSecret && inputs.GitHubClientSecret !== '') {
options.push({ key: 'GitHubClientSecret', value: inputs.GitHubClientSecret });
} }
if (
originInputs['GitHubClientSecret'] !== inputs.GitHubClientSecret && if (options.length > 0) {
inputs.GitHubClientSecret !== '' await updateOptions(options);
) {
await updateOption('GitHubClientSecret', inputs.GitHubClientSecret);
} }
}; };
...@@ -315,102 +332,115 @@ const SystemSetting = () => { ...@@ -315,102 +332,115 @@ const SystemSetting = () => {
} catch (err) { } catch (err) {
console.error(err); console.error(err);
showError("获取 OIDC 配置失败，请检查网络状况和 Well-Known URL 是否正确"); showError("获取 OIDC 配置失败，请检查网络状况和 Well-Known URL 是否正确");
return;
} }
} }
const options = [];
if (originInputs['oidc.well_known'] !== inputs['oidc.well_known']) { if (originInputs['oidc.well_known'] !== inputs['oidc.well_known']) {
await updateOption('oidc.well_known', inputs['oidc.well_known']); options.push({ key: 'oidc.well_known', value: inputs['oidc.well_known'] });
} }
if (originInputs['oidc.client_id'] !== inputs['oidc.client_id']) { if (originInputs['oidc.client_id'] !== inputs['oidc.client_id']) {
await updateOption('oidc.client_id', inputs['oidc.client_id']); options.push({ key: 'oidc.client_id', value: inputs['oidc.client_id'] });
} }
if (originInputs['oidc.client_secret'] !== inputs['oidc.client_secret'] && inputs['oidc.client_secret'] !== '') { if (originInputs['oidc.client_secret'] !== inputs['oidc.client_secret'] && inputs['oidc.client_secret'] !== '') {
await updateOption('oidc.client_secret', inputs['oidc.client_secret']); options.push({ key: 'oidc.client_secret', value: inputs['oidc.client_secret'] });
} }
if (originInputs['oidc.authorization_endpoint'] !== inputs['oidc.authorization_endpoint']) { if (originInputs['oidc.authorization_endpoint'] !== inputs['oidc.authorization_endpoint']) {
await updateOption('oidc.authorization_endpoint', inputs['oidc.authorization_endpoint']); options.push({ key: 'oidc.authorization_endpoint', value: inputs['oidc.authorization_endpoint'] });
} }
if (originInputs['oidc.token_endpoint'] !== inputs['oidc.token_endpoint']) { if (originInputs['oidc.token_endpoint'] !== inputs['oidc.token_endpoint']) {
await updateOption('oidc.token_endpoint', inputs['oidc.token_endpoint']); options.push({ key: 'oidc.token_endpoint', value: inputs['oidc.token_endpoint'] });
} }
if (originInputs['oidc.user_info_endpoint'] !== inputs['oidc.user_info_endpoint']) { if (originInputs['oidc.user_info_endpoint'] !== inputs['oidc.user_info_endpoint']) {
await updateOption('oidc.user_info_endpoint', inputs['oidc.user_info_endpoint']); options.push({ key: 'oidc.user_info_endpoint', value: inputs['oidc.user_info_endpoint'] });
} }
if (options.length > 0) {
await updateOptions(options);
} }
};
const submitTelegramSettings = async () => { const submitTelegramSettings = async () => {
// await updateOption('TelegramOAuthEnabled', inputs.TelegramOAuthEnabled); const options = [
await updateOption('TelegramBotToken', inputs.TelegramBotToken); { key: 'TelegramBotToken', value: inputs.TelegramBotToken },
await updateOption('TelegramBotName', inputs.TelegramBotName); { key: 'TelegramBotName', value: inputs.TelegramBotName }
];
await updateOptions(options);
}; };
const submitTurnstile = async () => { const submitTurnstile = async () => {
const options = [];
if (originInputs['TurnstileSiteKey'] !== inputs.TurnstileSiteKey) { if (originInputs['TurnstileSiteKey'] !== inputs.TurnstileSiteKey) {
await updateOption('TurnstileSiteKey', inputs.TurnstileSiteKey); options.push({ key: 'TurnstileSiteKey', value: inputs.TurnstileSiteKey });
} }
if ( if (originInputs['TurnstileSecretKey'] !== inputs.TurnstileSecretKey && inputs.TurnstileSecretKey !== '') {
originInputs['TurnstileSecretKey'] !== inputs.TurnstileSecretKey && options.push({ key: 'TurnstileSecretKey', value: inputs.TurnstileSecretKey });
inputs.TurnstileSecretKey !== ''
) {
await updateOption('TurnstileSecretKey', inputs.TurnstileSecretKey);
} }
};
const submitNewRestrictedDomain = () => { if (options.length > 0) {
const localDomainList = inputs.EmailDomainWhitelist; await updateOptions(options);
if (
restrictedDomainInput !== '' &&
!localDomainList.includes(restrictedDomainInput)
) {
setRestrictedDomainInput('');
setInputs({
...inputs,
EmailDomainWhitelist: [...localDomainList, restrictedDomainInput],
});
setEmailDomainWhitelist([
...EmailDomainWhitelist,
{
key: restrictedDomainInput,
text: restrictedDomainInput,
value: restrictedDomainInput,
},
]);
} }
}; };
const submitLinuxDOOAuth = async () => { const submitLinuxDOOAuth = async () => {
const options = [];
if (originInputs['LinuxDOClientId'] !== inputs.LinuxDOClientId) { if (originInputs['LinuxDOClientId'] !== inputs.LinuxDOClientId) {
await updateOption('LinuxDOClientId', inputs.LinuxDOClientId); options.push({ key: 'LinuxDOClientId', value: inputs.LinuxDOClientId });
}
if (originInputs['LinuxDOClientSecret'] !== inputs.LinuxDOClientSecret && inputs.LinuxDOClientSecret !== '') {
options.push({ key: 'LinuxDOClientSecret', value: inputs.LinuxDOClientSecret });
}
if (options.length > 0) {
await updateOptions(options);
}
};
const handleCheckboxChange = async (optionKey, event) => {
const value = event.target.checked;
if (optionKey === 'PasswordLoginEnabled' && !value) {
setShowPasswordLoginConfirmModal(true);
} else {
await updateOptions([{ key: optionKey, value }]);
} }
if ( if (optionKey === 'LinuxDOOAuthEnabled') {
originInputs['LinuxDOClientSecret'] !== inputs.LinuxDOClientSecret && setLinuxDOOAuthEnabled(value);
inputs.LinuxDOClientSecret !== ''
) {
await updateOption('LinuxDOClientSecret', inputs.LinuxDOClientSecret);
} }
}; };
const handlePasswordLoginConfirm = async () => {
await updateOptions([{ key: 'PasswordLoginEnabled', value: false }]);
setShowPasswordLoginConfirmModal(false);
};
return ( return (
<Grid columns={1}> <div style={{ padding: '20px' }}>
<Grid.Column> {isLoaded ? (
<Form loading={loading} inverted={isDark}> <Form
<Header as='h3' inverted={isDark}> initValues={inputs}
通用设置 onValueChange={handleFormChange}
</Header> getFormApi={(api) => (formApiRef.current = api)}
<Form.Group widths='equal'> >
{({ formState, values, formApi }) => (
<>
<Form.Section text='通用设置'>
<Form.Input <Form.Input
field='ServerAddress'
label='服务器地址' label='服务器地址'
placeholder='例如：https://yourdomain.com' placeholder='例如：https://yourdomain.com'
value={inputs.ServerAddress} style={{ width: '100%' }}
name='ServerAddress'
onChange={handleInputChange}
/> />
</Form.Group> <Button onClick={submitServerAddress}>更新服务器地址</Button>
<Form.Button onClick={submitServerAddress}> </Form.Section>
更新服务器地址
</Form.Button> <Form.Section text='代理设置'>
<Header as='h3' inverted={isDark}> <Text>
代理设置（支持{' '} （支持{' '}
<a <a
href='https://github.com/Calcium-Ion/new-api-worker' href='https://github.com/Calcium-Ion/new-api-worker'
target='_blank' target='_blank'
...@@ -419,574 +449,481 @@ const SystemSetting = () => { ...@@ -419,574 +449,481 @@ const SystemSetting = () => {
new-api-worker new-api-worker
</a> </a>
） ）
</Header> </Text>
<Message info> <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
注意：代理功能仅对图片请求和 Webhook 请求生效，不会影响其他 API 请求。如需配置 API 请求代理，请参考 <Col xs={24} sm={24} md={12} lg={12} xl={12}>
<a
href='https://github.com/Calcium-Ion/new-api/blob/main/docs/channel/other_setting.md'
target='_blank'
rel='noreferrer'
>
{' '}API 代理设置文档
</a>
。
</Message>
<Form.Group widths='equal'>
<Form.Input <Form.Input
label='Worker地址，不填写则不启用代理' field='WorkerUrl'
label='Worker地址'
placeholder='例如：https://workername.yourdomain.workers.dev' placeholder='例如：https://workername.yourdomain.workers.dev'
value={inputs.WorkerUrl}
name='WorkerUrl'
onChange={handleInputChange}
/> />
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input <Form.Input
label='Worker密钥，根据你部署的 Worker 填写' field='WorkerValidKey'
placeholder='例如：your_secret_key' label='Worker密钥'
value={inputs.WorkerValidKey} placeholder='敏感信息不会发送到前端显示'
name='WorkerValidKey' type='password'
onChange={handleInputChange}
/> />
</Form.Group> </Col>
<Form.Button onClick={submitWorker}>更新Worker设置</Form.Button> </Row>
<Divider /> <Button onClick={submitWorker}>更新Worker设置</Button>
<Header as='h3' inverted={isDark}> </Form.Section>
支付设置（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）
</Header> <Form.Section text='支付设置'>
<Form.Group widths='equal'> <Text>
<Form.Input （当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）
label='支付地址，不填写则不启用在线支付' </Text>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input
field='PayAddress'
label='支付地址'
placeholder='例如：https://yourdomain.com' placeholder='例如：https://yourdomain.com'
value={inputs.PayAddress}
name='PayAddress'
onChange={handleInputChange}
/> />
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input <Form.Input
field='EpayId'
label='易支付商户ID' label='易支付商户ID'
placeholder='例如：0001' placeholder='例如：0001'
value={inputs.EpayId}
name='EpayId'
onChange={handleInputChange}
/> />
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input <Form.Input
field='EpayKey'
label='易支付商户密钥' label='易支付商户密钥'
placeholder='敏感信息不会发送到前端显示' placeholder='敏感信息不会发送到前端显示'
value={inputs.EpayKey} type='password'
name='EpayKey'
onChange={handleInputChange}
/> />
</Form.Group> </Col>
<Form.Group widths='equal'> </Row>
<Row
gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
style={{ marginTop: 16 }}
>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input <Form.Input
label='回调地址，不填写则使用上方服务器地址作为回调地址' field='CustomCallbackAddress'
label='回调地址'
placeholder='例如：https://yourdomain.com' placeholder='例如：https://yourdomain.com'
value={inputs.CustomCallbackAddress}
name='CustomCallbackAddress'
onChange={handleInputChange}
/> />
<Form.Input </Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.InputNumber
field='Price'
precision={2}
label='充值价格（x元/美金）' label='充值价格（x元/美金）'
placeholder='例如：7，就是7元/美金' placeholder='例如：7，就是7元/美金'
value={inputs.Price}
name='Price'
min={0}
onChange={handleInputChange}
/> />
<Form.Input </Col>
label='最低充值美元数量（以美金为单位，如果使用额度请自行换算！）' <Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.InputNumber
field='MinTopUp'
label='最低充值美元数量'
placeholder='例如：2，就是最低充值2$' placeholder='例如：2，就是最低充值2$'
value={inputs.MinTopUp}
name='MinTopUp'
min={1}
onChange={handleInputChange}
/> />
</Form.Group> </Col>
<Form.Group widths='equal'> </Row>
<Form.TextArea <Form.TextArea
field='TopupGroupRatio'
label='充值分组倍率' label='充值分组倍率'
name='TopupGroupRatio'
onChange={handleInputChange}
style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
autoComplete='new-password'
value={inputs.TopupGroupRatio}
placeholder='为一个 JSON 文本，键为组名称，值为倍率' placeholder='为一个 JSON 文本，键为组名称，值为倍率'
autosize
/> />
</Form.Group> <Button onClick={submitPayAddress}>更新支付设置</Button>
<Form.Button onClick={submitPayAddress}>更新支付设置</Form.Button> </Form.Section>
<Divider />
<Header as='h3' inverted={isDark}> <Form.Section text='配置登录注册'>
配置登录注册 <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
</Header> <Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Group inline>
<Form.Checkbox <Form.Checkbox
checked={inputs.PasswordLoginEnabled === 'true'} field='PasswordLoginEnabled'
label='允许通过密码进行登录' noLabel
name='PasswordLoginEnabled' onChange={(e) =>
onChange={handleInputChange} handleCheckboxChange('PasswordLoginEnabled', e)
/> }
{showPasswordWarningModal && (
<Modal
open={showPasswordWarningModal}
onClose={() => setShowPasswordWarningModal(false)}
size={'tiny'}
style={{ maxWidth: '450px' }}
>
<Modal.Header>警告</Modal.Header>
<Modal.Content>
<p>
取消密码登录将导致所有未绑定其他登录方式的用户（包括管理员）无法通过密码登录，确认取消？
</p>
</Modal.Content>
<Modal.Actions>
<Button onClick={() => setShowPasswordWarningModal(false)}>
取消
</Button>
<Button
color='yellow'
onClick={async () => {
setShowPasswordWarningModal(false);
await updateOption('PasswordLoginEnabled', 'false');
}}
> >
确定 允许通过密码进行登录
</Button> </Form.Checkbox>
</Modal.Actions>
</Modal>
)}
<Form.Checkbox <Form.Checkbox
checked={inputs.PasswordRegisterEnabled === 'true'} field='PasswordRegisterEnabled'
label='允许通过密码进行注册' noLabel
name='PasswordRegisterEnabled' onChange={(e) =>
onChange={handleInputChange} handleCheckboxChange('PasswordRegisterEnabled', e)
/> }
>
允许通过密码进行注册
</Form.Checkbox>
<Form.Checkbox <Form.Checkbox
checked={inputs.EmailVerificationEnabled === 'true'} field='EmailVerificationEnabled'
label='通过密码注册时需要进行邮箱验证' noLabel
name='EmailVerificationEnabled' onChange={(e) =>
onChange={handleInputChange} handleCheckboxChange('EmailVerificationEnabled', e)
/> }
>
通过密码注册时需要进行邮箱验证
</Form.Checkbox>
<Form.Checkbox <Form.Checkbox
checked={inputs.GitHubOAuthEnabled === 'true'} field='RegisterEnabled'
label='允许通过 GitHub 账户登录 & 注册' noLabel
name='GitHubOAuthEnabled' onChange={(e) => handleCheckboxChange('RegisterEnabled', e)}
onChange={handleInputChange} >
/> 允许新用户注册
</Form.Checkbox>
<Form.Checkbox <Form.Checkbox
checked={inputs['oidc.enabled'] === 'true'} field='TurnstileCheckEnabled'
label='允许通过 OIDC 登录 & 注册' noLabel
name='oidc.enabled' onChange={(e) =>
onChange={handleInputChange} handleCheckboxChange('TurnstileCheckEnabled', e)
/> }
>
启用 Turnstile 用户校验
</Form.Checkbox>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Checkbox <Form.Checkbox
checked={inputs.LinuxDOOAuthEnabled === 'true'} field='GitHubOAuthEnabled'
label='允许通过 LinuxDO 账户登录 & 注册' noLabel
name='LinuxDOOAuthEnabled' onChange={(e) =>
onChange={handleInputChange} handleCheckboxChange('GitHubOAuthEnabled', e)
/> }
>
允许通过 GitHub 账户登录 & 注册
</Form.Checkbox>
<Form.Checkbox <Form.Checkbox
checked={inputs.WeChatAuthEnabled === 'true'} field='LinuxDOOAuthEnabled'
label='允许通过微信登录 & 注册' noLabel
name='WeChatAuthEnabled' onChange={(e) =>
onChange={handleInputChange} handleCheckboxChange('LinuxDOOAuthEnabled', e)
/> }
>
允许通过 Linux DO 账户登录 & 注册
</Form.Checkbox>
<Form.Checkbox <Form.Checkbox
checked={inputs.TelegramOAuthEnabled === 'true'} field='WeChatAuthEnabled'
label='允许通过 Telegram 进行登录' noLabel
name='TelegramOAuthEnabled' onChange={(e) =>
onChange={handleInputChange} handleCheckboxChange('WeChatAuthEnabled', e)
/> }
</Form.Group> >
<Form.Group inline> 允许通过微信登录 & 注册
</Form.Checkbox>
<Form.Checkbox <Form.Checkbox
checked={inputs.RegisterEnabled === 'true'} field='TelegramOAuthEnabled'
label='允许新用户注册（此项为否时，新用户将无法以任何方式进行注册）' noLabel
name='RegisterEnabled' onChange={(e) =>
onChange={handleInputChange} handleCheckboxChange('TelegramOAuthEnabled', e)
/> }
>
允许通过 Telegram 进行登录
</Form.Checkbox>
<Form.Checkbox <Form.Checkbox
checked={inputs.TurnstileCheckEnabled === 'true'} field='oidc.enabled'
label='启用 Turnstile 用户校验' noLabel
name='TurnstileCheckEnabled' onChange={(e) => handleCheckboxChange('oidc.enabled', e)}
onChange={handleInputChange} >
/> 允许通过 OIDC 进行登录
</Form.Group> </Form.Checkbox>
<Divider /> </Col>
<Header as='h3' inverted={isDark}> </Row>
配置邮箱域名白名单 </Form.Section>
<Header.Subheader>
用以防止恶意用户利用临时邮箱批量注册 <Form.Section text='配置邮箱域名白名单'>
</Header.Subheader> <Text>用以防止恶意用户利用临时邮箱批量注册</Text>
</Header> <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
<Form.Group widths={3}> <Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Checkbox <Form.Checkbox
label='启用邮箱域名白名单' field='EmailDomainRestrictionEnabled'
name='EmailDomainRestrictionEnabled' noLabel
onChange={handleInputChange} onChange={(e) =>
checked={inputs.EmailDomainRestrictionEnabled === 'true'} handleCheckboxChange('EmailDomainRestrictionEnabled', e)
/> }
</Form.Group> >
<Form.Group widths={3}> 启用邮箱域名白名单
</Form.Checkbox>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Checkbox <Form.Checkbox
label='启用邮箱别名限制（例如：ab.cd@gmail.com）' field='EmailAliasRestrictionEnabled'
name='EmailAliasRestrictionEnabled' noLabel
onChange={handleInputChange} onChange={(e) =>
checked={inputs.EmailAliasRestrictionEnabled === 'true'} handleCheckboxChange('EmailAliasRestrictionEnabled', e)
/> }
</Form.Group> >
<Form.Group widths={2}> 启用邮箱别名限制
<Form.Dropdown </Form.Checkbox>
label='允许的邮箱域名' </Col>
placeholder='允许的邮箱域名' </Row>
name='EmailDomainWhitelist' <TagInput
required value={emailDomainWhitelist}
fluid onChange={setEmailDomainWhitelist}
multiple placeholder='输入域名后回车'
selection style={{ width: '100%', marginTop: 16 }}
onChange={handleInputChange}
value={inputs.EmailDomainWhitelist}
autoComplete='new-password'
options={EmailDomainWhitelist}
/> />
<Form.Input
label='添加新的允许的邮箱域名'
action={
<Button <Button
type='button' onClick={submitEmailDomainWhitelist}
onClick={() => { style={{ marginTop: 10 }}
submitNewRestrictedDomain();
}}
> >
填入
</Button>
}
onKeyDown={(e) => {
if (e.key === 'Enter') {
submitNewRestrictedDomain();
}
}}
autoComplete='new-password'
placeholder='输入新的允许的邮箱域名'
value={restrictedDomainInput}
onChange={(e, { value }) => {
setRestrictedDomainInput(value);
}}
/>
</Form.Group>
<Form.Button onClick={submitEmailDomainWhitelist}>
保存邮箱域名白名单设置 保存邮箱域名白名单设置
</Form.Button> </Button>
<Divider /> </Form.Section>
<Header as='h3' inverted={isDark}>
配置 SMTP <Form.Section text='配置 SMTP'>
<Header.Subheader>用以支持系统的邮件发送</Header.Subheader> <Text>用以支持系统的邮件发送</Text>
</Header> <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
<Form.Group widths={3}> <Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input <Form.Input field='SMTPServer' label='SMTP 服务器地址' />
label='SMTP 服务器地址' </Col>
name='SMTPServer' <Col xs={24} sm={24} md={8} lg={8} xl={8}>
onChange={handleInputChange} <Form.Input field='SMTPPort' label='SMTP 端口' />
autoComplete='new-password' </Col>
value={inputs.SMTPServer} <Col xs={24} sm={24} md={8} lg={8} xl={8}>
placeholder='例如：smtp.qq.com' <Form.Input field='SMTPAccount' label='SMTP 账户' />
/> </Col>
<Form.Input </Row>
label='SMTP 端口' <Row
name='SMTPPort' gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
onChange={handleInputChange} style={{ marginTop: 16 }}
autoComplete='new-password' >
value={inputs.SMTPPort} <Col xs={24} sm={24} md={8} lg={8} xl={8}>
placeholder='默认: 587' <Form.Input field='SMTPFrom' label='SMTP 发送者邮箱' />
/> </Col>
<Form.Input <Col xs={24} sm={24} md={8} lg={8} xl={8}>
label='SMTP 账户'
name='SMTPAccount'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.SMTPAccount}
placeholder='通常是邮箱地址'
/>
</Form.Group>
<Form.Group widths={3}>
<Form.Input
label='SMTP 发送者邮箱'
name='SMTPFrom'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.SMTPFrom}
placeholder='通常和邮箱地址保持一致'
/>
<Form.Input <Form.Input
field='SMTPToken'
label='SMTP 访问凭证' label='SMTP 访问凭证'
name='SMTPToken'
onChange={handleInputChange}
type='password' type='password'
autoComplete='new-password'
checked={inputs.RegisterEnabled === 'true'}
placeholder='敏感信息不会发送到前端显示' placeholder='敏感信息不会发送到前端显示'
/> />
</Form.Group> </Col>
<Form.Group widths={3}> <Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Checkbox <Form.Checkbox
label='启用SMTP SSL（465端口强制开启）' field='SMTPSSLEnabled'
name='SMTPSSLEnabled' noLabel
onChange={handleInputChange} onChange={(e) => handleCheckboxChange('SMTPSSLEnabled', e)}
checked={inputs.SMTPSSLEnabled === 'true'}
/>
</Form.Group>
<Form.Button onClick={submitSMTP}>保存 SMTP 设置</Form.Button>
<Divider />
<Header as='h3' inverted={isDark}>
配置 GitHub OAuth App
<Header.Subheader>
用以支持通过 GitHub 进行登录注册，
<a
href='https://github.com/settings/developers'
target='_blank'
rel='noreferrer'
> >
点击此处 启用SMTP SSL
</a> </Form.Checkbox>
管理你的 GitHub OAuth App </Col>
</Header.Subheader> </Row>
</Header> <Button onClick={submitSMTP}>保存 SMTP 设置</Button>
<Message> </Form.Section>
Homepage URL 填 <code>{inputs.ServerAddress}</code>
，Authorization callback URL 填{' '} <Form.Section text='配置 OIDC'>
<code>{`${inputs.ServerAddress}/oauth/github`}</code> <Text>用以支持通过 OIDC 登录，例如 Okta、Auth0 等兼容 OIDC 协议的 IdP</Text>
</Message> <Banner
<Form.Group widths={3}> type='info'
<Form.Input description={`主页链接填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}，重定向 URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}/oauth/oidc`}
label='GitHub Client ID' style={{ marginBottom: 20, marginTop: 16 }}
name='GitHubClientId' />
onChange={handleInputChange} <Text>若你的 OIDC Provider 支持 Discovery Endpoint，你可以仅填写 OIDC Well-Known URL，系统会自动获取 OIDC 配置</Text>
autoComplete='new-password' <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
value={inputs.GitHubClientId} <Col xs={24} sm={24} md={12} lg={12} xl={12}>
placeholder='输入你注册的 GitHub OAuth APP 的 ID' <Form.Input
/> field='oidc.well_known'
<Form.Input label='Well-Known URL'
label='GitHub Client Secret' placeholder='请输入 OIDC 的 Well-Known URL'
name='GitHubClientSecret'
onChange={handleInputChange}
type='password'
autoComplete='new-password'
value={inputs.GitHubClientSecret}
placeholder='敏感信息不会发送到前端显示'
/> />
</Form.Group> </Col>
<Form.Button onClick={submitGitHubOAuth}> <Col xs={24} sm={24} md={12} lg={12} xl={12}>
保存 GitHub OAuth 设置
</Form.Button>
<Divider />
<Header as='h3' inverted={isDark}>
配置 WeChat Server
<Header.Subheader>
用以支持通过微信进行登录注册，
<a
href='https://github.com/songquanpeng/wechat-server'
target='_blank'
rel='noreferrer'
>
点击此处
</a>
了解 WeChat Server
</Header.Subheader>
</Header>
<Form.Group widths={3}>
<Form.Input <Form.Input
label='WeChat Server 服务器地址' field='oidc.client_id'
name='WeChatServerAddress' label='Client ID'
placeholder='例如：https://yourdomain.com' placeholder='输入 OIDC 的 Client ID'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.WeChatServerAddress}
/> />
</Col>
</Row>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input <Form.Input
label='WeChat Server 访问凭证' field='oidc.client_secret'
name='WeChatServerToken' label='Client Secret'
type='password' type='password'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.WeChatServerToken}
placeholder='敏感信息不会发送到前端显示' placeholder='敏感信息不会发送到前端显示'
/> />
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input <Form.Input
label='微信公众号二维码图片链接' field='oidc.authorization_endpoint'
name='WeChatAccountQRCodeImageURL' label='Authorization Endpoint'
onChange={handleInputChange} placeholder='输入 OIDC 的 Authorization Endpoint'
autoComplete='new-password'
value={inputs.WeChatAccountQRCodeImageURL}
placeholder='输入一个图片链接'
/> />
</Form.Group> </Col>
<Form.Button onClick={submitWeChat}> </Row>
保存 WeChat Server 设置 <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
</Form.Button> <Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Divider />
<Header as='h3' inverted={isDark}>
配置 Telegram 登录
</Header>
<Form.Group inline>
<Form.Input <Form.Input
label='Telegram Bot Token' field='oidc.token_endpoint'
name='TelegramBotToken' label='Token Endpoint'
onChange={handleInputChange} placeholder='输入 OIDC 的 Token Endpoint'
value={inputs.TelegramBotToken}
placeholder='输入你的 Telegram Bot Token'
/> />
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input <Form.Input
label='Telegram Bot 名称' field='oidc.user_info_endpoint'
name='TelegramBotName' label='User Info Endpoint'
onChange={handleInputChange} placeholder='输入 OIDC 的 Userinfo Endpoint'
value={inputs.TelegramBotName}
placeholder='输入你的 Telegram Bot 名称'
/>
</Form.Group>
<Form.Button onClick={submitTelegramSettings}>
保存 Telegram 登录设置
</Form.Button>
<Divider />
<Header as='h3' inverted={isDark}>
配置 Turnstile
<Header.Subheader>
用以支持用户校验，
<a
href='https://dash.cloudflare.com/'
target='_blank'
rel='noreferrer'
>
点击此处
</a>
管理你的 Turnstile Sites，推荐选择 Invisible Widget Type
</Header.Subheader>
</Header>
<Form.Group widths={3}>
<Form.Input
label='Turnstile Site Key'
name='TurnstileSiteKey'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.TurnstileSiteKey}
placeholder='输入你注册的 Turnstile Site Key'
/> />
<Form.Input </Col>
label='Turnstile Secret Key' </Row>
name='TurnstileSecretKey' <Button onClick={submitOIDCSettings}>保存 OIDC 设置</Button>
onChange={handleInputChange} </Form.Section>
<Form.Section text='配置 GitHub OAuth App'>
<Text>用以支持通过 GitHub 进行登录注册</Text>
<Banner
type='info'
description={`Homepage URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}，Authorization callback URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}/oauth/github`}
style={{ marginBottom: 20, marginTop: 16 }}
/>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input field='GitHubClientId' label='GitHub Client ID' />
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='GitHubClientSecret'
label='GitHub Client Secret'
type='password' type='password'
autoComplete='new-password'
value={inputs.TurnstileSecretKey}
placeholder='敏感信息不会发送到前端显示' placeholder='敏感信息不会发送到前端显示'
/> />
</Form.Group> </Col>
<Form.Button onClick={submitTurnstile}> </Row>
保存 Turnstile 设置 <Button onClick={submitGitHubOAuth}>
</Form.Button> 保存 GitHub OAuth 设置
<Divider /> </Button>
<Header as='h3' inverted={isDark}> </Form.Section>
配置 LinuxDO OAuth App <Form.Section text='配置 Linux DO OAuth'>
<Header.Subheader> <Text>
用以支持通过 LinuxDO 进行登录注册， 用以支持通过 Linux DO 进行登录注册
<a <a
href='https://connect.linux.do/' href='https://connect.linux.do/'
target='_blank' target='_blank'
rel='noreferrer' rel='noreferrer'
style={{ display: 'inline-block', marginLeft: 4, marginRight: 4 }}
> >
点击此处 点击此处
</a> </a>
管理你的 LinuxDO OAuth App 管理你的 LinuxDO OAuth App
</Header.Subheader> </Text>
</Header> <Banner
<Message> type='info'
Homepage URL 填 <code>{inputs.ServerAddress}</code> description={`回调 URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}/oauth/linuxdo`}
，Authorization callback URL 填{' '} style={{ marginBottom: 20, marginTop: 16 }}
<code>{`${inputs.ServerAddress}/oauth/linuxdo`}</code> />
</Message> <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
<Form.Group widths={3}> <Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input <Form.Input
label='LinuxDO Client ID' field='LinuxDOClientId'
name='LinuxDOClientId' label='Linux DO Client ID'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.LinuxDOClientId}
placeholder='输入你注册的 LinuxDO OAuth APP 的 ID' placeholder='输入你注册的 LinuxDO OAuth APP 的 ID'
/> />
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input <Form.Input
label='LinuxDO Client Secret' field='LinuxDOClientSecret'
name='LinuxDOClientSecret' label='Linux DO Client Secret'
onChange={handleInputChange}
type='password' type='password'
autoComplete='new-password'
value={inputs.LinuxDOClientSecret}
placeholder='敏感信息不会发送到前端显示' placeholder='敏感信息不会发送到前端显示'
/> />
</Form.Group> </Col>
<Form.Button onClick={submitLinuxDOOAuth}> </Row>
保存 LinuxDO OAuth 设置 <Button onClick={submitLinuxDOOAuth}>
</Form.Button> 保存 Linux DO OAuth 设置
<Divider /> </Button>
<Header as='h3' inverted={isDark}> </Form.Section>
配置 OIDC <Form.Section text='配置 WeChat Server'>
<Header.Subheader> <Text>用以支持通过微信进行登录注册</Text>
用以支持通过 OIDC 登录，例如 Okta、Auth0 等兼容 OIDC 协议的 IdP <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
</Header.Subheader> <Col xs={24} sm={24} md={8} lg={8} xl={8}>
</Header>
<Message>
主页链接填 <code>{ inputs.ServerAddress }</code>，
重定向 URL 填 <code>{ `${ inputs.ServerAddress }/oauth/oidc` }</code>
</Message>
<Message>
若你的 OIDC Provider 支持 Discovery Endpoint，你可以仅填写 OIDC Well-Known URL，系统会自动获取 OIDC 配置
</Message>
<Form.Group widths={3}>
<Form.Input <Form.Input
label='Client ID' field='WeChatServerAddress'
name='oidc.client_id' label='WeChat Server 服务器地址'
onChange={handleInputChange}
value={inputs['oidc.client_id']}
placeholder='输入 OIDC 的 Client ID'
/> />
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input <Form.Input
label='Client Secret' field='WeChatServerToken'
name='oidc.client_secret' label='WeChat Server 访问凭证'
onChange={handleInputChange}
type='password' type='password'
value={inputs['oidc.client_secret']}
placeholder='敏感信息不会发送到前端显示' placeholder='敏感信息不会发送到前端显示'
/> />
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input <Form.Input
label='Well-Known URL' field='WeChatAccountQRCodeImageURL'
name='oidc.well_known' label='微信公众号二维码图片链接'
onChange={handleInputChange}
value={inputs['oidc.well_known']}
placeholder='请输入 OIDC 的 Well-Known URL'
/> />
</Col>
</Row>
<Button onClick={submitWeChat}>保存 WeChat Server 设置</Button>
</Form.Section>
<Form.Section text='配置 Telegram 登录'>
<Text>用以支持通过 Telegram 进行登录注册</Text>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input <Form.Input
label='Authorization Endpoint' field='TelegramBotToken'
name='oidc.authorization_endpoint' label='Telegram Bot Token'
onChange={handleInputChange} placeholder='敏感信息不会发送到前端显示'
value={inputs['oidc.authorization_endpoint']} type='password'
placeholder='输入 OIDC 的 Authorization Endpoint'
/> />
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input <Form.Input
label='Token Endpoint' field='TelegramBotName'
name='oidc.token_endpoint' label='Telegram Bot 名称'
onChange={handleInputChange}
value={inputs['oidc.token_endpoint']}
placeholder='输入 OIDC 的 Token Endpoint'
/> />
</Col>
</Row>
<Button onClick={submitTelegramSettings}>
保存 Telegram 登录设置
</Button>
</Form.Section>
<Form.Section text='配置 Turnstile'>
<Text>用以支持用户校验</Text>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input <Form.Input
label='Userinfo Endpoint' field='TurnstileSiteKey'
name='oidc.user_info_endpoint' label='Turnstile Site Key'
onChange={handleInputChange} />
value={inputs['oidc.user_info_endpoint']} </Col>
placeholder='输入 OIDC 的 Userinfo Endpoint' <Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='TurnstileSecretKey'
label='Turnstile Secret Key'
type='password'
placeholder='敏感信息不会发送到前端显示'
/> />
</Form.Group> </Col>
<Form.Button onClick={submitOIDCSettings}> </Row>
保存 OIDC 设置 <Button onClick={submitTurnstile}>保存 Turnstile 设置</Button>
</Form.Button> </Form.Section>
<Modal
title="确认取消密码登录"
visible={showPasswordLoginConfirmModal}
onOk={handlePasswordLoginConfirm}
onCancel={() => {
setShowPasswordLoginConfirmModal(false);
formApiRef.current.setValue('PasswordLoginEnabled', true);
}}
okText="确认"
cancelText="取消"
>
<p>您确定要取消密码登录功能吗？这可能会影响用户的登录方式。</p>
</Modal>
</>
)}
</Form> </Form>
</Grid.Column> ) : (
</Grid> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
<Spin size="large" />
</div>
)}
</div>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment