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 747 additions and 798 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) {
item.value = JSON.stringify(JSON.parse(item.value), null, 2); case 'TopupGroupRatio':
item.value = JSON.stringify(JSON.parse(item.value), null, 2);
break;
case 'EmailDomainWhitelist':
setEmailDomainWhitelist(item.value ? item.value.split(',') : []);
break;
case 'PasswordLoginEnabled':
case 'PasswordRegisterEnabled':
case 'EmailVerificationEnabled':
case 'GitHubOAuthEnabled':
case 'WeChatAuthEnabled':
case 'TelegramOAuthEnabled':
case 'RegisterEnabled':
case 'TurnstileCheckEnabled':
case 'EmailDomainRestrictionEnabled':
case 'EmailAliasRestrictionEnabled':
case 'SMTPSSLEnabled':
case 'LinuxDOOAuthEnabled':
case 'oidc.enabled':
item.value = item.value === 'true';
break;
case 'Price':
case 'MinTopUp':
item.value = parseFloat(item.value);
break;
default:
break;
} }
newInputs[item.key] = item.value; newInputs[item.key] = item.value;
}); });
setInputs({ setInputs(newInputs);
...newInputs,
EmailDomainWhitelist: newInputs.EmailDomainWhitelist.split(','),
});
setOriginInputs(newInputs); setOriginInputs(newInputs);
if (formApiRef.current) {
setEmailDomainWhitelist( formApiRef.current.setValues(newInputs);
newInputs.EmailDomainWhitelist.split(',').map((item) => { }
return { key: item, text: item, value: item }; setIsLoaded(true);
}),
);
} else { } else {
showError(message); showError(message);
} }
setLoading(false);
}; };
useEffect(() => { useEffect(() => {
getOptions().then(); getOptions();
}, []); }, []);
useEffect(() => {}, [inputs.EmailDomainWhitelist]);
const updateOption = async (key, value) => { const updateOptions = async (options) => {
setLoading(true); setLoading(true);
switch (key) { try {
case 'PasswordLoginEnabled': // 分离 checkbox 类型的选项和其他选项
case 'PasswordRegisterEnabled': const checkboxOptions = options.filter(opt =>
case 'EmailVerificationEnabled': opt.key.toLowerCase().endsWith('enabled')
case 'GitHubOAuthEnabled': );
case 'oidc.enabled': const otherOptions = options.filter(opt =>
case 'LinuxDOOAuthEnabled': !opt.key.toLowerCase().endsWith('enabled')
case 'WeChatAuthEnabled': );
case 'TelegramOAuthEnabled':
case 'TurnstileCheckEnabled': // 处理 checkbox 类型的选项
case 'EmailDomainRestrictionEnabled': for (const opt of checkboxOptions) {
case 'EmailAliasRestrictionEnabled': const res = await API.put('/api/option/', {
case 'SMTPSSLEnabled': key: opt.key,
case 'RegisterEnabled': value: opt.value.toString()
value = inputs[key] === 'true' ? 'false' : 'true'; });
break; if (!res.data.success) {
default: showError(res.data.message);
break; return;
} }
const res = await API.put('/api/option/', {
key,
value,
});
const { success, message } = res.data;
if (success) {
if (key === 'EmailDomainWhitelist') {
value = value.split(',');
} }
if (key === 'Price') {
value = parseFloat(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);
});
} }
setInputs((inputs) => ({
...inputs, showSuccess('更新成功');
[key]: value, // 更新本地状态
})); const newInputs = { ...inputs };
} else { options.forEach(opt => {
showError(message); newInputs[opt.key] = opt.value;
});
setInputs(newInputs);
} catch (error) {
showError('更新失败');
} }
setLoading(false); setLoading(false);
}; };
const handleInputChange = async (e, { name, value }) => { const handleFormChange = (values) => {
if (name === 'PasswordLoginEnabled' && inputs[name] === 'true') { setInputs(values);
// block disabling password login
setShowPasswordWarningModal(true);
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);
}
}; };
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 });
} }
await updateOption('Price', '' + inputs.Price); if (originInputs['TopupGroupRatio'] !== inputs.TopupGroupRatio) {
options.push({ key: 'TopupGroupRatio', value: inputs.TopupGroupRatio });
}
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 (originInputs['SMTPPort'] !== inputs.SMTPPort && inputs.SMTPPort !== '') {
options.push({ key: 'SMTPPort', value: inputs.SMTPPort });
} }
if ( if (originInputs['SMTPToken'] !== inputs.SMTPToken && inputs.SMTPToken !== '') {
originInputs['SMTPPort'] !== inputs.SMTPPort && options.push({ key: 'SMTPToken', value: inputs.SMTPToken });
inputs.SMTPPort !== ''
) {
await updateOption('SMTPPort', inputs.SMTPPort);
} }
if (
originInputs['SMTPToken'] !== inputs.SMTPToken && if (options.length > 0) {
inputs.SMTPToken !== '' await updateOptions(options);
) {
await updateOption('SMTPToken', inputs.SMTPToken);
} }
}; };
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,679 +332,599 @@ const SystemSetting = () => { ...@@ -315,679 +332,599 @@ 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);
} }
};
if (options.length > 0) {
const submitNewRestrictedDomain = () => { await updateOptions(options);
const localDomainList = inputs.EmailDomainWhitelist;
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 ( if (originInputs['LinuxDOClientSecret'] !== inputs.LinuxDOClientSecret && inputs.LinuxDOClientSecret !== '') {
originInputs['LinuxDOClientSecret'] !== inputs.LinuxDOClientSecret && options.push({ key: 'LinuxDOClientSecret', value: inputs.LinuxDOClientSecret });
inputs.LinuxDOClientSecret !== '' }
) {
await updateOption('LinuxDOClientSecret', 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 (optionKey === 'LinuxDOOAuthEnabled') {
setLinuxDOOAuthEnabled(value);
}
};
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'> >
<Form.Input {({ formState, values, formApi }) => (
label='服务器地址' <>
placeholder='例如：https://yourdomain.com' <Form.Section text='通用设置'>
value={inputs.ServerAddress} <Form.Input
name='ServerAddress' field='ServerAddress'
onChange={handleInputChange} label='服务器地址'
/> placeholder='例如：https://yourdomain.com'
</Form.Group> style={{ width: '100%' }}
<Form.Button onClick={submitServerAddress}> />
更新服务器地址 <Button onClick={submitServerAddress}>更新服务器地址</Button>
</Form.Button> </Form.Section>
<Header as='h3' inverted={isDark}>
代理设置（支持{' '} <Form.Section text='代理设置'>
<a <Text>
href='https://github.com/Calcium-Ion/new-api-worker' （支持{' '}
target='_blank' <a
rel='noreferrer' href='https://github.com/Calcium-Ion/new-api-worker'
> target='_blank'
new-api-worker rel='noreferrer'
</a>
）
</Header>
<Message info>
注意：代理功能仅对图片请求和 Webhook 请求生效，不会影响其他 API 请求。如需配置 API 请求代理，请参考
<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
label='Worker地址，不填写则不启用代理'
placeholder='例如：https://workername.yourdomain.workers.dev'
value={inputs.WorkerUrl}
name='WorkerUrl'
onChange={handleInputChange}
/>
<Form.Input
label='Worker密钥，根据你部署的 Worker 填写'
placeholder='例如：your_secret_key'
value={inputs.WorkerValidKey}
name='WorkerValidKey'
onChange={handleInputChange}
/>
</Form.Group>
<Form.Button onClick={submitWorker}>更新Worker设置</Form.Button>
<Divider />
<Header as='h3' inverted={isDark}>
支付设置（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）
</Header>
<Form.Group widths='equal'>
<Form.Input
label='支付地址，不填写则不启用在线支付'
placeholder='例如：https://yourdomain.com'
value={inputs.PayAddress}
name='PayAddress'
onChange={handleInputChange}
/>
<Form.Input
label='易支付商户ID'
placeholder='例如：0001'
value={inputs.EpayId}
name='EpayId'
onChange={handleInputChange}
/>
<Form.Input
label='易支付商户密钥'
placeholder='敏感信息不会发送到前端显示'
value={inputs.EpayKey}
name='EpayKey'
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'>
<Form.TextArea
label='充值分组倍率'
name='TopupGroupRatio'
onChange={handleInputChange}
style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
autoComplete='new-password'
value={inputs.TopupGroupRatio}
placeholder='为一个 JSON 文本，键为组名称，值为倍率'
/>
</Form.Group>
<Form.Button onClick={submitPayAddress}>更新支付设置</Form.Button>
<Divider />
<Header as='h3' inverted={isDark}>
配置登录注册
</Header>
<Form.Group inline>
<Form.Checkbox
checked={inputs.PasswordLoginEnabled === 'true'}
label='允许通过密码进行登录'
name='PasswordLoginEnabled'
onChange={handleInputChange}
/>
{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');
}}
> >
确定 new-api-worker
</Button> </a>
</Modal.Actions> ）
</Modal> </Text>
)} <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
<Form.Checkbox <Col xs={24} sm={24} md={12} lg={12} xl={12}>
checked={inputs.PasswordRegisterEnabled === 'true'} <Form.Input
label='允许通过密码进行注册' field='WorkerUrl'
name='PasswordRegisterEnabled' label='Worker地址'
onChange={handleInputChange} placeholder='例如：https://workername.yourdomain.workers.dev'
/> />
<Form.Checkbox </Col>
checked={inputs.EmailVerificationEnabled === 'true'} <Col xs={24} sm={24} md={12} lg={12} xl={12}>
label='通过密码注册时需要进行邮箱验证' <Form.Input
name='EmailVerificationEnabled' field='WorkerValidKey'
onChange={handleInputChange} label='Worker密钥'
/> placeholder='敏感信息不会发送到前端显示'
<Form.Checkbox type='password'
checked={inputs.GitHubOAuthEnabled === 'true'} />
label='允许通过 GitHub 账户登录 & 注册' </Col>
name='GitHubOAuthEnabled' </Row>
onChange={handleInputChange} <Button onClick={submitWorker}>更新Worker设置</Button>
/> </Form.Section>
<Form.Checkbox
checked={inputs['oidc.enabled'] === 'true'} <Form.Section text='支付设置'>
label='允许通过 OIDC 登录 & 注册' <Text>
name='oidc.enabled' （当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）
onChange={handleInputChange} </Text>
/> <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
<Form.Checkbox <Col xs={24} sm={24} md={8} lg={8} xl={8}>
checked={inputs.LinuxDOOAuthEnabled === 'true'} <Form.Input
label='允许通过 LinuxDO 账户登录 & 注册' field='PayAddress'
name='LinuxDOOAuthEnabled' label='支付地址'
onChange={handleInputChange} placeholder='例如：https://yourdomain.com'
/> />
<Form.Checkbox </Col>
checked={inputs.WeChatAuthEnabled === 'true'} <Col xs={24} sm={24} md={8} lg={8} xl={8}>
label='允许通过微信登录 & 注册' <Form.Input
name='WeChatAuthEnabled' field='EpayId'
onChange={handleInputChange} label='易支付商户ID'
/> placeholder='例如：0001'
<Form.Checkbox />
checked={inputs.TelegramOAuthEnabled === 'true'} </Col>
label='允许通过 Telegram 进行登录' <Col xs={24} sm={24} md={8} lg={8} xl={8}>
name='TelegramOAuthEnabled' <Form.Input
onChange={handleInputChange} field='EpayKey'
/> label='易支付商户密钥'
</Form.Group> placeholder='敏感信息不会发送到前端显示'
<Form.Group inline> type='password'
<Form.Checkbox />
checked={inputs.RegisterEnabled === 'true'} </Col>
label='允许新用户注册（此项为否时，新用户将无法以任何方式进行注册）' </Row>
name='RegisterEnabled' <Row
onChange={handleInputChange} gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
/> style={{ marginTop: 16 }}
<Form.Checkbox >
checked={inputs.TurnstileCheckEnabled === 'true'} <Col xs={24} sm={24} md={8} lg={8} xl={8}>
label='启用 Turnstile 用户校验' <Form.Input
name='TurnstileCheckEnabled' field='CustomCallbackAddress'
onChange={handleInputChange} label='回调地址'
/> placeholder='例如：https://yourdomain.com'
</Form.Group> />
<Divider /> </Col>
<Header as='h3' inverted={isDark}> <Col xs={24} sm={24} md={8} lg={8} xl={8}>
配置邮箱域名白名单 <Form.InputNumber
<Header.Subheader> field='Price'
用以防止恶意用户利用临时邮箱批量注册 precision={2}
</Header.Subheader> label='充值价格（x元/美金）'
</Header> placeholder='例如：7，就是7元/美金'
<Form.Group widths={3}> />
<Form.Checkbox </Col>
label='启用邮箱域名白名单' <Col xs={24} sm={24} md={8} lg={8} xl={8}>
name='EmailDomainRestrictionEnabled' <Form.InputNumber
onChange={handleInputChange} field='MinTopUp'
checked={inputs.EmailDomainRestrictionEnabled === 'true'} label='最低充值美元数量'
/> placeholder='例如：2，就是最低充值2$'
</Form.Group> />
<Form.Group widths={3}> </Col>
<Form.Checkbox </Row>
label='启用邮箱别名限制（例如：ab.cd@gmail.com）' <Form.TextArea
name='EmailAliasRestrictionEnabled' field='TopupGroupRatio'
onChange={handleInputChange} label='充值分组倍率'
checked={inputs.EmailAliasRestrictionEnabled === 'true'} placeholder='为一个 JSON 文本，键为组名称，值为倍率'
/> autosize
</Form.Group> />
<Form.Group widths={2}> <Button onClick={submitPayAddress}>更新支付设置</Button>
<Form.Dropdown </Form.Section>
label='允许的邮箱域名'
placeholder='允许的邮箱域名' <Form.Section text='配置登录注册'>
name='EmailDomainWhitelist' <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
required <Col xs={24} sm={24} md={12} lg={12} xl={12}>
fluid <Form.Checkbox
multiple field='PasswordLoginEnabled'
selection noLabel
onChange={handleInputChange} onChange={(e) =>
value={inputs.EmailDomainWhitelist} handleCheckboxChange('PasswordLoginEnabled', e)
autoComplete='new-password' }
options={EmailDomainWhitelist} >
/> 允许通过密码进行登录
<Form.Input </Form.Checkbox>
label='添加新的允许的邮箱域名' <Form.Checkbox
action={ field='PasswordRegisterEnabled'
noLabel
onChange={(e) =>
handleCheckboxChange('PasswordRegisterEnabled', e)
}
>
允许通过密码进行注册
</Form.Checkbox>
<Form.Checkbox
field='EmailVerificationEnabled'
noLabel
onChange={(e) =>
handleCheckboxChange('EmailVerificationEnabled', e)
}
>
通过密码注册时需要进行邮箱验证
</Form.Checkbox>
<Form.Checkbox
field='RegisterEnabled'
noLabel
onChange={(e) => handleCheckboxChange('RegisterEnabled', e)}
>
允许新用户注册
</Form.Checkbox>
<Form.Checkbox
field='TurnstileCheckEnabled'
noLabel
onChange={(e) =>
handleCheckboxChange('TurnstileCheckEnabled', e)
}
>
启用 Turnstile 用户校验
</Form.Checkbox>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Checkbox
field='GitHubOAuthEnabled'
noLabel
onChange={(e) =>
handleCheckboxChange('GitHubOAuthEnabled', e)
}
>
允许通过 GitHub 账户登录 & 注册
</Form.Checkbox>
<Form.Checkbox
field='LinuxDOOAuthEnabled'
noLabel
onChange={(e) =>
handleCheckboxChange('LinuxDOOAuthEnabled', e)
}
>
允许通过 Linux DO 账户登录 & 注册
</Form.Checkbox>
<Form.Checkbox
field='WeChatAuthEnabled'
noLabel
onChange={(e) =>
handleCheckboxChange('WeChatAuthEnabled', e)
}
>
允许通过微信登录 & 注册
</Form.Checkbox>
<Form.Checkbox
field='TelegramOAuthEnabled'
noLabel
onChange={(e) =>
handleCheckboxChange('TelegramOAuthEnabled', e)
}
>
允许通过 Telegram 进行登录
</Form.Checkbox>
<Form.Checkbox
field='oidc.enabled'
noLabel
onChange={(e) => handleCheckboxChange('oidc.enabled', e)}
>
允许通过 OIDC 进行登录
</Form.Checkbox>
</Col>
</Row>
</Form.Section>
<Form.Section text='配置邮箱域名白名单'>
<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.Checkbox
field='EmailDomainRestrictionEnabled'
noLabel
onChange={(e) =>
handleCheckboxChange('EmailDomainRestrictionEnabled', e)
}
>
启用邮箱域名白名单
</Form.Checkbox>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Checkbox
field='EmailAliasRestrictionEnabled'
noLabel
onChange={(e) =>
handleCheckboxChange('EmailAliasRestrictionEnabled', e)
}
>
启用邮箱别名限制
</Form.Checkbox>
</Col>
</Row>
<TagInput
value={emailDomainWhitelist}
onChange={setEmailDomainWhitelist}
placeholder='输入域名后回车'
style={{ width: '100%', marginTop: 16 }}
/>
<Button <Button
type='button' onClick={submitEmailDomainWhitelist}
onClick={() => { style={{ marginTop: 10 }}
submitNewRestrictedDomain();
}}
> >
填入 保存邮箱域名白名单设置
</Button> </Button>
} </Form.Section>
onKeyDown={(e) => {
if (e.key === 'Enter') { <Form.Section text='配置 SMTP'>
submitNewRestrictedDomain(); <Text>用以支持系统的邮件发送</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}>
autoComplete='new-password' <Form.Input field='SMTPServer' label='SMTP 服务器地址' />
placeholder='输入新的允许的邮箱域名' </Col>
value={restrictedDomainInput} <Col xs={24} sm={24} md={8} lg={8} xl={8}>
onChange={(e, { value }) => { <Form.Input field='SMTPPort' label='SMTP 端口' />
setRestrictedDomainInput(value); </Col>
}} <Col xs={24} sm={24} md={8} lg={8} xl={8}>
/> <Form.Input field='SMTPAccount' label='SMTP 账户' />
</Form.Group> </Col>
<Form.Button onClick={submitEmailDomainWhitelist}> </Row>
保存邮箱域名白名单设置 <Row
</Form.Button> gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
<Divider /> style={{ marginTop: 16 }}
<Header as='h3' inverted={isDark}> >
配置 SMTP <Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Header.Subheader>用以支持系统的邮件发送</Header.Subheader> <Form.Input field='SMTPFrom' label='SMTP 发送者邮箱' />
</Header> </Col>
<Form.Group widths={3}> <Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input <Form.Input
label='SMTP 服务器地址' field='SMTPToken'
name='SMTPServer' label='SMTP 访问凭证'
onChange={handleInputChange} type='password'
autoComplete='new-password' placeholder='敏感信息不会发送到前端显示'
value={inputs.SMTPServer} />
placeholder='例如：smtp.qq.com' </Col>
/> <Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input <Form.Checkbox
label='SMTP 端口' field='SMTPSSLEnabled'
name='SMTPPort' noLabel
onChange={handleInputChange} onChange={(e) => handleCheckboxChange('SMTPSSLEnabled', e)}
autoComplete='new-password' >
value={inputs.SMTPPort} 启用SMTP SSL
placeholder='默认: 587' </Form.Checkbox>
/> </Col>
<Form.Input </Row>
label='SMTP 账户' <Button onClick={submitSMTP}>保存 SMTP 设置</Button>
name='SMTPAccount' </Form.Section>
onChange={handleInputChange}
autoComplete='new-password' <Form.Section text='配置 OIDC'>
value={inputs.SMTPAccount} <Text>用以支持通过 OIDC 登录，例如 Okta、Auth0 等兼容 OIDC 协议的 IdP</Text>
placeholder='通常是邮箱地址' <Banner
/> type='info'
</Form.Group> description={`主页链接填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}，重定向 URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}/oauth/oidc`}
<Form.Group widths={3}> style={{ marginBottom: 20, marginTop: 16 }}
<Form.Input />
label='SMTP 发送者邮箱' <Text>若你的 OIDC Provider 支持 Discovery Endpoint，你可以仅填写 OIDC Well-Known URL，系统会自动获取 OIDC 配置</Text>
name='SMTPFrom' <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
onChange={handleInputChange} <Col xs={24} sm={24} md={12} lg={12} xl={12}>
autoComplete='new-password' <Form.Input
value={inputs.SMTPFrom} field='oidc.well_known'
placeholder='通常和邮箱地址保持一致' label='Well-Known URL'
/> placeholder='请输入 OIDC 的 Well-Known URL'
<Form.Input />
label='SMTP 访问凭证' </Col>
name='SMTPToken' <Col xs={24} sm={24} md={12} lg={12} xl={12}>
onChange={handleInputChange} <Form.Input
type='password' field='oidc.client_id'
autoComplete='new-password' label='Client ID'
checked={inputs.RegisterEnabled === 'true'} placeholder='输入 OIDC 的 Client ID'
placeholder='敏感信息不会发送到前端显示' />
/> </Col>
</Form.Group> </Row>
<Form.Group widths={3}> <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
<Form.Checkbox <Col xs={24} sm={24} md={12} lg={12} xl={12}>
label='启用SMTP SSL（465端口强制开启）' <Form.Input
name='SMTPSSLEnabled' field='oidc.client_secret'
onChange={handleInputChange} label='Client Secret'
checked={inputs.SMTPSSLEnabled === 'true'} type='password'
/> placeholder='敏感信息不会发送到前端显示'
</Form.Group> />
<Form.Button onClick={submitSMTP}>保存 SMTP 设置</Form.Button> </Col>
<Divider /> <Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Header as='h3' inverted={isDark}> <Form.Input
配置 GitHub OAuth App field='oidc.authorization_endpoint'
<Header.Subheader> label='Authorization Endpoint'
用以支持通过 GitHub 进行登录注册， placeholder='输入 OIDC 的 Authorization Endpoint'
<a />
href='https://github.com/settings/developers' </Col>
target='_blank' </Row>
rel='noreferrer' <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
</a> field='oidc.token_endpoint'
管理你的 GitHub OAuth App label='Token Endpoint'
</Header.Subheader> placeholder='输入 OIDC 的 Token Endpoint'
</Header> />
<Message> </Col>
Homepage URL 填 <code>{inputs.ServerAddress}</code> <Col xs={24} sm={24} md={12} lg={12} xl={12}>
，Authorization callback URL 填{' '} <Form.Input
<code>{`${inputs.ServerAddress}/oauth/github`}</code> field='oidc.user_info_endpoint'
</Message> label='User Info Endpoint'
<Form.Group widths={3}> placeholder='输入 OIDC 的 Userinfo Endpoint'
<Form.Input />
label='GitHub Client ID' </Col>
name='GitHubClientId' </Row>
onChange={handleInputChange} <Button onClick={submitOIDCSettings}>保存 OIDC 设置</Button>
autoComplete='new-password' </Form.Section>
value={inputs.GitHubClientId}
placeholder='输入你注册的 GitHub OAuth APP 的 ID' <Form.Section text='配置 GitHub OAuth App'>
/> <Text>用以支持通过 GitHub 进行登录注册</Text>
<Form.Input <Banner
label='GitHub Client Secret' type='info'
name='GitHubClientSecret' description={`Homepage URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}，Authorization callback URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}/oauth/github`}
onChange={handleInputChange} style={{ marginBottom: 20, marginTop: 16 }}
type='password' />
autoComplete='new-password' <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
value={inputs.GitHubClientSecret} <Col xs={24} sm={24} md={12} lg={12} xl={12}>
placeholder='敏感信息不会发送到前端显示' <Form.Input field='GitHubClientId' label='GitHub Client ID' />
/> </Col>
</Form.Group> <Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Button onClick={submitGitHubOAuth}> <Form.Input
保存 GitHub OAuth 设置 field='GitHubClientSecret'
</Form.Button> label='GitHub Client Secret'
<Divider /> type='password'
<Header as='h3' inverted={isDark}> placeholder='敏感信息不会发送到前端显示'
配置 WeChat Server />
<Header.Subheader> </Col>
用以支持通过微信进行登录注册， </Row>
<a <Button onClick={submitGitHubOAuth}>
href='https://github.com/songquanpeng/wechat-server' 保存 GitHub OAuth 设置
target='_blank' </Button>
rel='noreferrer' </Form.Section>
> <Form.Section text='配置 Linux DO OAuth'>
点击此处 <Text>
</a> 用以支持通过 Linux DO 进行登录注册
了解 WeChat Server <a
</Header.Subheader> href='https://connect.linux.do/'
</Header> target='_blank'
<Form.Group widths={3}> rel='noreferrer'
<Form.Input style={{ display: 'inline-block', marginLeft: 4, marginRight: 4 }}
label='WeChat Server 服务器地址' >
name='WeChatServerAddress' 点击此处
placeholder='例如：https://yourdomain.com' </a>
onChange={handleInputChange} 管理你的 LinuxDO OAuth App
autoComplete='new-password' </Text>
value={inputs.WeChatServerAddress} <Banner
/> type='info'
<Form.Input description={`回调 URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}/oauth/linuxdo`}
label='WeChat Server 访问凭证' style={{ marginBottom: 20, marginTop: 16 }}
name='WeChatServerToken' />
type='password' <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
onChange={handleInputChange} <Col xs={24} sm={24} md={12} lg={12} xl={12}>
autoComplete='new-password' <Form.Input
value={inputs.WeChatServerToken} field='LinuxDOClientId'
placeholder='敏感信息不会发送到前端显示' label='Linux DO Client ID'
/> placeholder='输入你注册的 LinuxDO OAuth APP 的 ID'
<Form.Input />
label='微信公众号二维码图片链接' </Col>
name='WeChatAccountQRCodeImageURL' <Col xs={24} sm={24} md={12} lg={12} xl={12}>
onChange={handleInputChange} <Form.Input
autoComplete='new-password' field='LinuxDOClientSecret'
value={inputs.WeChatAccountQRCodeImageURL} label='Linux DO Client Secret'
placeholder='输入一个图片链接' type='password'
/> placeholder='敏感信息不会发送到前端显示'
</Form.Group> />
<Form.Button onClick={submitWeChat}> </Col>
保存 WeChat Server 设置 </Row>
</Form.Button> <Button onClick={submitLinuxDOOAuth}>
<Divider /> 保存 Linux DO OAuth 设置
<Header as='h3' inverted={isDark}> </Button>
配置 Telegram 登录 </Form.Section>
</Header> <Form.Section text='配置 WeChat Server'>
<Form.Group inline> <Text>用以支持通过微信进行登录注册</Text>
<Form.Input <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
label='Telegram Bot Token' <Col xs={24} sm={24} md={8} lg={8} xl={8}>
name='TelegramBotToken' <Form.Input
onChange={handleInputChange} field='WeChatServerAddress'
value={inputs.TelegramBotToken} label='WeChat Server 服务器地址'
placeholder='输入你的 Telegram Bot Token' />
/> </Col>
<Form.Input <Col xs={24} sm={24} md={8} lg={8} xl={8}>
label='Telegram Bot 名称' <Form.Input
name='TelegramBotName' field='WeChatServerToken'
onChange={handleInputChange} label='WeChat Server 访问凭证'
value={inputs.TelegramBotName} type='password'
placeholder='输入你的 Telegram Bot 名称' placeholder='敏感信息不会发送到前端显示'
/> />
</Form.Group> </Col>
<Form.Button onClick={submitTelegramSettings}> <Col xs={24} sm={24} md={8} lg={8} xl={8}>
保存 Telegram 登录设置 <Form.Input
</Form.Button> field='WeChatAccountQRCodeImageURL'
<Divider /> label='微信公众号二维码图片链接'
<Header as='h3' inverted={isDark}> />
配置 Turnstile </Col>
<Header.Subheader> </Row>
用以支持用户校验， <Button onClick={submitWeChat}>保存 WeChat Server 设置</Button>
<a </Form.Section>
href='https://dash.cloudflare.com/' <Form.Section text='配置 Telegram 登录'>
target='_blank' <Text>用以支持通过 Telegram 进行登录注册</Text>
rel='noreferrer' <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
</a> field='TelegramBotToken'
管理你的 Turnstile Sites，推荐选择 Invisible Widget Type label='Telegram Bot Token'
</Header.Subheader> placeholder='敏感信息不会发送到前端显示'
</Header> type='password'
<Form.Group widths={3}> />
<Form.Input </Col>
label='Turnstile Site Key' <Col xs={24} sm={24} md={12} lg={12} xl={12}>
name='TurnstileSiteKey' <Form.Input
onChange={handleInputChange} field='TelegramBotName'
autoComplete='new-password' label='Telegram Bot 名称'
value={inputs.TurnstileSiteKey} />
placeholder='输入你注册的 Turnstile Site Key' </Col>
/> </Row>
<Form.Input <Button onClick={submitTelegramSettings}>
label='Turnstile Secret Key' 保存 Telegram 登录设置
name='TurnstileSecretKey' </Button>
onChange={handleInputChange} </Form.Section>
type='password' <Form.Section text='配置 Turnstile'>
autoComplete='new-password' <Text>用以支持用户校验</Text>
value={inputs.TurnstileSecretKey} <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
placeholder='敏感信息不会发送到前端显示' <Col xs={24} sm={24} md={12} lg={12} xl={12}>
/> <Form.Input
</Form.Group> field='TurnstileSiteKey'
<Form.Button onClick={submitTurnstile}> label='Turnstile Site Key'
保存 Turnstile 设置 />
</Form.Button> </Col>
<Divider /> <Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Header as='h3' inverted={isDark}> <Form.Input
配置 LinuxDO OAuth App field='TurnstileSecretKey'
<Header.Subheader> label='Turnstile Secret Key'
用以支持通过 LinuxDO 进行登录注册， type='password'
<a placeholder='敏感信息不会发送到前端显示'
href='https://connect.linux.do/' />
target='_blank' </Col>
rel='noreferrer' </Row>
<Button onClick={submitTurnstile}>保存 Turnstile 设置</Button>
</Form.Section>
<Modal
title="确认取消密码登录"
visible={showPasswordLoginConfirmModal}
onOk={handlePasswordLoginConfirm}
onCancel={() => {
setShowPasswordLoginConfirmModal(false);
formApiRef.current.setValue('PasswordLoginEnabled', true);
}}
okText="确认"
cancelText="取消"
> >
点击此处 <p>您确定要取消密码登录功能吗？这可能会影响用户的登录方式。</p>
</a> </Modal>
管理你的 LinuxDO OAuth App </>
</Header.Subheader> )}
</Header>
<Message>
Homepage URL 填 <code>{inputs.ServerAddress}</code>
，Authorization callback URL 填{' '}
<code>{`${inputs.ServerAddress}/oauth/linuxdo`}</code>
</Message>
<Form.Group widths={3}>
<Form.Input
label='LinuxDO Client ID'
name='LinuxDOClientId'
onChange={handleInputChange}
autoComplete='new-password'
value={inputs.LinuxDOClientId}
placeholder='输入你注册的 LinuxDO OAuth APP 的 ID'
/>
<Form.Input
label='LinuxDO Client Secret'
name='LinuxDOClientSecret'
onChange={handleInputChange}
type='password'
autoComplete='new-password'
value={inputs.LinuxDOClientSecret}
placeholder='敏感信息不会发送到前端显示'
/>
</Form.Group>
<Form.Button onClick={submitLinuxDOOAuth}>
保存 LinuxDO OAuth 设置
</Form.Button>
<Divider />
<Header as='h3' inverted={isDark}>
配置 OIDC
<Header.Subheader>
用以支持通过 OIDC 登录，例如 Okta、Auth0 等兼容 OIDC 协议的 IdP
</Header.Subheader>
</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
label='Client ID'
name='oidc.client_id'
onChange={handleInputChange}
value={inputs['oidc.client_id']}
placeholder='输入 OIDC 的 Client ID'
/>
<Form.Input
label='Client Secret'
name='oidc.client_secret'
onChange={handleInputChange}
type='password'
value={inputs['oidc.client_secret']}
placeholder='敏感信息不会发送到前端显示'
/>
<Form.Input
label='Well-Known URL'
name='oidc.well_known'
onChange={handleInputChange}
value={inputs['oidc.well_known']}
placeholder='请输入 OIDC 的 Well-Known URL'
/>
<Form.Input
label='Authorization Endpoint'
name='oidc.authorization_endpoint'
onChange={handleInputChange}
value={inputs['oidc.authorization_endpoint']}
placeholder='输入 OIDC 的 Authorization Endpoint'
/>
<Form.Input
label='Token Endpoint'
name='oidc.token_endpoint'
onChange={handleInputChange}
value={inputs['oidc.token_endpoint']}
placeholder='输入 OIDC 的 Token Endpoint'
/>
<Form.Input
label='Userinfo Endpoint'
name='oidc.user_info_endpoint'
onChange={handleInputChange}
value={inputs['oidc.user_info_endpoint']}
placeholder='输入 OIDC 的 Userinfo Endpoint'
/>
</Form.Group>
<Form.Button onClick={submitOIDCSettings}>
保存 OIDC 设置
</Form.Button>
</Form> </Form>
</Grid.Column> ) : (
</Grid> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
<Spin size="large" />
</div>
)}
</div>
); );
}; };
export default SystemSetting; export default SystemSetting;
\ No newline at end of file
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