Skip to content

phsl / new-api

Go to a project
Commit 48fe64eb by QuentinHsu
Options

refactor(web): systemSetting component to enhance UI structure and add new configuration options 

- Wrapped form sections in Card components for better visual separation
- Added new configuration options for payment settings, email domain whitelist, SMTP, OIDC, GitHub OAuth, Linux DO OAuth, WeChat, and Telegram
- Improved layout with responsive design using Row and Col components
- Updated button actions for saving settings in new sections
parent 775b1c45
Showing with 680 additions and 622 deletions
web/src/components/OtherSetting.js
......@@ -7,6 +7,7 @@ import {
Row,
Modal,
Space,
Card,
} from '@douyinfe/semi-ui';
import { API, showError, showSuccess, timestamp2string } from '../helpers';
import { marked } from 'marked';
......@@ -244,134 +245,149 @@ const OtherSetting = () => {
return (
<Row>
<Col span={24}>
<Col
span={24}
style={{
marginTop: '10px',
display: 'flex',
flexDirection: 'column',
gap: '10px',
}}
>
{/* 版本信息 */}
<Form style={{ marginBottom: 15 }}>
<Form.Section text={t('系统信息')}>
<Row>
<Col span={16}>
<Space>
<Form>
<Card>
<Form.Section text={t('系统信息')}>
<Row>
<Col span={16}>
<Space>
<Text>
{t('当前版本')}：
{statusState?.status?.version || t('未知')}
</Text>
<Button
type='primary'
onClick={checkUpdate}
loading={loadingInput['CheckUpdate']}
>
{t('检查更新')}
</Button>
</Space>
</Col>
</Row>
<Row>
<Col span={16}>
<Text>
{t('当前版本')}：{statusState?.status?.version || t('未知')}
{t('启动时间')}：{getStartTimeString()}
</Text>
<Button
type='primary'
onClick={checkUpdate}
loading={loadingInput['CheckUpdate']}
>
{t('检查更新')}
</Button>
</Space>
</Col>
</Row>
<Row>
<Col span={16}>
<Text>
{t('启动时间')}：{getStartTimeString()}
</Text>
</Col>
</Row>
</Form.Section>
</Col>
</Row>
</Form.Section>
</Card>
</Form>
{/* 通用设置 */}
<Form
values={inputs}
getFormApi={(formAPI) => (formAPISettingGeneral.current = formAPI)}
style={{ marginBottom: 15 }}
>
<Form.Section text={t('通用设置')}>
<Form.TextArea
label={t('公告')}
placeholder={t('在此输入新的公告内容，支持 Markdown & HTML 代码')}
field={'Notice'}
onChange={handleInputChange}
style={{ fontFamily: 'JetBrains Mono, Consolas' }}
autosize={{ minRows: 6, maxRows: 12 }}
/>
<Button onClick={submitNotice} loading={loadingInput['Notice']}>
{t('设置公告')}
</Button>
</Form.Section>
<Card>
<Form.Section text={t('通用设置')}>
<Form.TextArea
label={t('公告')}
placeholder={t(
'在此输入新的公告内容，支持 Markdown & HTML 代码',
)}
field={'Notice'}
onChange={handleInputChange}
style={{ fontFamily: 'JetBrains Mono, Consolas' }}
autosize={{ minRows: 6, maxRows: 12 }}
/>
<Button onClick={submitNotice} loading={loadingInput['Notice']}>
{t('设置公告')}
</Button>
</Form.Section>
</Card>
</Form>
{/* 个性化设置 */}
<Form
values={inputs}
getFormApi={(formAPI) => (formAPIPersonalization.current = formAPI)}
style={{ marginBottom: 15 }}
>
<Form.Section text={t('个性化设置')}>
<Form.Input
label={t('系统名称')}
placeholder={t('在此输入系统名称')}
field={'SystemName'}
onChange={handleInputChange}
/>
<Button
onClick={submitSystemName}
loading={loadingInput['SystemName']}
>
{t('设置系统名称')}
</Button>
<Form.Input
label={t('Logo 图片地址')}
placeholder={t('在此输入 Logo 图片地址')}
field={'Logo'}
onChange={handleInputChange}
/>
<Button onClick={submitLogo} loading={loadingInput['Logo']}>
{t('设置 Logo')}
</Button>
<Form.TextArea
label={t('首页内容')}
placeholder={t(
'在此输入首页内容，支持 Markdown & HTML 代码，设置后首页的状态信息将不再显示。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为首页',
)}
field={'HomePageContent'}
onChange={handleInputChange}
style={{ fontFamily: 'JetBrains Mono, Consolas' }}
autosize={{ minRows: 6, maxRows: 12 }}
/>
<Button
onClick={() => submitOption('HomePageContent')}
loading={loadingInput['HomePageContent']}
>
{t('设置首页内容')}
</Button>
<Form.TextArea
label={t('关于')}
placeholder={t(
'在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面',
)}
field={'About'}
onChange={handleInputChange}
style={{ fontFamily: 'JetBrains Mono, Consolas' }}
autosize={{ minRows: 6, maxRows: 12 }}
/>
<Button onClick={submitAbout} loading={loadingInput['About']}>
{t('设置关于')}
</Button>
{/* */}
<Banner
fullMode={false}
type='info'
description={t(
'移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目',
)}
closeIcon={null}
style={{ marginTop: 15 }}
/>
<Form.Input
label={t('页脚')}
placeholder={t(
'在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码',
)}
field={'Footer'}
onChange={handleInputChange}
/>
<Button onClick={submitFooter} loading={loadingInput['Footer']}>
{t('设置页脚')}
</Button>
</Form.Section>
<Card>
<Form.Section text={t('个性化设置')}>
<Form.Input
label={t('系统名称')}
placeholder={t('在此输入系统名称')}
field={'SystemName'}
onChange={handleInputChange}
/>
<Button
onClick={submitSystemName}
loading={loadingInput['SystemName']}
>
{t('设置系统名称')}
</Button>
<Form.Input
label={t('Logo 图片地址')}
placeholder={t('在此输入 Logo 图片地址')}
field={'Logo'}
onChange={handleInputChange}
/>
<Button onClick={submitLogo} loading={loadingInput['Logo']}>
{t('设置 Logo')}
</Button>
<Form.TextArea
label={t('首页内容')}
placeholder={t(
'在此输入首页内容，支持 Markdown & HTML 代码，设置后首页的状态信息将不再显示。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为首页',
)}
field={'HomePageContent'}
onChange={handleInputChange}
style={{ fontFamily: 'JetBrains Mono, Consolas' }}
autosize={{ minRows: 6, maxRows: 12 }}
/>
<Button
onClick={() => submitOption('HomePageContent')}
loading={loadingInput['HomePageContent']}
>
{t('设置首页内容')}
</Button>
<Form.TextArea
label={t('关于')}
placeholder={t(
'在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面',
)}
field={'About'}
onChange={handleInputChange}
style={{ fontFamily: 'JetBrains Mono, Consolas' }}
autosize={{ minRows: 6, maxRows: 12 }}
/>
<Button onClick={submitAbout} loading={loadingInput['About']}>
{t('设置关于')}
</Button>
{/* */}
<Banner
fullMode={false}
type='info'
description={t(
'移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目',
)}
closeIcon={null}
style={{ marginTop: 15 }}
/>
<Form.Input
label={t('页脚')}
placeholder={t(
'在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码',
)}
field={'Footer'}
onChange={handleInputChange}
/>
<Button onClick={submitFooter} loading={loadingInput['Footer']}>
{t('设置页脚')}
</Button>
</Form.Section>
</Card>
</Form>
</Col>
<Modal
......
web/src/components/SystemSetting.js
......@@ -9,6 +9,7 @@ import {
Banner,
TagInput,
Spin,
Card,
} from '@douyinfe/semi-ui';
const { Text } = Typography;
import {
......@@ -489,7 +490,7 @@ const SystemSetting = () => {
};
return (
<div style={{ padding: '20px' }}>
<div>
{isLoaded ? (
<Form
initValues={inputs}
......@@ -497,523 +498,564 @@ const SystemSetting = () => {
getFormApi={(api) => (formApiRef.current = api)}
>
{({ formState, values, formApi }) => (
<>
<Form.Section text='通用设置'>
<Form.Input
field='ServerAddress'
label='服务器地址'
placeholder='例如：https://yourdomain.com'
style={{ width: '100%' }}
/>
<Button onClick={submitServerAddress}>更新服务器地址</Button>
</Form.Section>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '10px',
marginTop: '10px',
}}
>
<Card>
<Form.Section text='通用设置'>
<Form.Input
field='ServerAddress'
label='服务器地址'
placeholder='例如：https://yourdomain.com'
style={{ width: '100%' }}
/>
<Button onClick={submitServerAddress}>更新服务器地址</Button>
</Form.Section>
</Card>
<Card>
<Form.Section text='代理设置'>
<Text>
（支持{' '}
<a
href='https://github.com/Calcium-Ion/new-api-worker'
target='_blank'
rel='noreferrer'
>
new-api-worker
</a>
）
</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
field='WorkerUrl'
label='Worker地址'
placeholder='例如：https://workername.yourdomain.workers.dev'
/>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='WorkerValidKey'
label='Worker密钥'
placeholder='敏感信息不会发送到前端显示'
type='password'
/>
</Col>
</Row>
<Button onClick={submitWorker}>更新Worker设置</Button>
</Form.Section>
</Card>
<Form.Section text='代理设置'>
<Text>
（支持{' '}
<a
href='https://github.com/Calcium-Ion/new-api-worker'
target='_blank'
rel='noreferrer'
<Card>
<Form.Section text='支付设置'>
<Text>
（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）
</Text>
<Row
gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
>
new-api-worker
</a>
）
</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
field='WorkerUrl'
label='Worker地址'
placeholder='例如：https://workername.yourdomain.workers.dev'
/>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='WorkerValidKey'
label='Worker密钥'
placeholder='敏感信息不会发送到前端显示'
type='password'
/>
</Col>
</Row>
<Button onClick={submitWorker}>更新Worker设置</Button>
</Form.Section>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input
field='PayAddress'
label='支付地址'
placeholder='例如：https://yourdomain.com'
/>
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input
field='EpayId'
label='易支付商户ID'
placeholder='例如：0001'
/>
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input
field='EpayKey'
label='易支付商户密钥'
placeholder='敏感信息不会发送到前端显示'
type='password'
/>
</Col>
</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
field='CustomCallbackAddress'
label='回调地址'
placeholder='例如：https://yourdomain.com'
/>
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.InputNumber
field='Price'
precision={2}
label='充值价格（x元/美金）'
placeholder='例如：7，就是7元/美金'
/>
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.InputNumber
field='MinTopUp'
label='最低充值美元数量'
placeholder='例如：2，就是最低充值2$'
/>
</Col>
</Row>
<Form.TextArea
field='TopupGroupRatio'
label='充值分组倍率'
placeholder='为一个 JSON 文本，键为组名称，值为倍率'
autosize
/>
<Button onClick={submitPayAddress}>更新支付设置</Button>
</Form.Section>
</Card>
<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={8} lg={8} xl={8}>
<Form.Input
field='PayAddress'
label='支付地址'
placeholder='例如：https://yourdomain.com'
/>
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input
field='EpayId'
label='易支付商户ID'
placeholder='例如：0001'
/>
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input
field='EpayKey'
label='易支付商户密钥'
placeholder='敏感信息不会发送到前端显示'
type='password'
/>
</Col>
</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
field='CustomCallbackAddress'
label='回调地址'
placeholder='例如：https://yourdomain.com'
/>
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.InputNumber
field='Price'
precision={2}
label='充值价格（x元/美金）'
placeholder='例如：7，就是7元/美金'
/>
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.InputNumber
field='MinTopUp'
label='最低充值美元数量'
placeholder='例如：2，就是最低充值2$'
/>
</Col>
</Row>
<Form.TextArea
field='TopupGroupRatio'
label='充值分组倍率'
placeholder='为一个 JSON 文本，键为组名称，值为倍率'
autosize
/>
<Button onClick={submitPayAddress}>更新支付设置</Button>
</Form.Section>
<Card>
<Form.Section 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='PasswordLoginEnabled'
noLabel
onChange={(e) =>
handleCheckboxChange('PasswordLoginEnabled', e)
}
>
允许通过密码进行登录
</Form.Checkbox>
<Form.Checkbox
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>
</Card>
<Form.Section 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='PasswordLoginEnabled'
noLabel
onChange={(e) =>
handleCheckboxChange('PasswordLoginEnabled', e)
}
>
允许通过密码进行登录
</Form.Checkbox>
<Form.Checkbox
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>
<Card>
<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
onClick={submitEmailDomainWhitelist}
style={{ marginTop: 10 }}
>
保存邮箱域名白名单设置
</Button>
</Form.Section>
</Card>
<Card>
<Form.Section text='配置 SMTP'>
<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}>
<Form.Input field='SMTPServer' label='SMTP 服务器地址' />
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input field='SMTPPort' label='SMTP 端口' />
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input field='SMTPAccount' label='SMTP 账户' />
</Col>
</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 field='SMTPFrom' label='SMTP 发送者邮箱' />
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input
field='SMTPToken'
label='SMTP 访问凭证'
type='password'
placeholder='敏感信息不会发送到前端显示'
/>
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Checkbox
field='SMTPSSLEnabled'
noLabel
onChange={(e) =>
handleCheckboxChange('SMTPSSLEnabled', e)
}
>
启用SMTP SSL
</Form.Checkbox>
</Col>
</Row>
<Button onClick={submitSMTP}>保存 SMTP 设置</Button>
</Form.Section>
</Card>
<Card>
<Form.Section text='配置 OIDC'>
<Text>
用以支持通过 OIDC 登录，例如 Okta、Auth0 等兼容 OIDC 协议的
IdP
</Text>
<Banner
type='info'
description={`主页链接填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}，重定向 URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}/oauth/oidc`}
style={{ marginBottom: 20, marginTop: 16 }}
/>
<Text>
若你的 OIDC Provider 支持 Discovery Endpoint，你可以仅填写
OIDC Well-Known URL，系统会自动获取 OIDC 配置
</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
field='oidc.well_known'
label='Well-Known URL'
placeholder='请输入 OIDC 的 Well-Known URL'
/>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='oidc.client_id'
label='Client ID'
placeholder='输入 OIDC 的 Client ID'
/>
</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
field='oidc.client_secret'
label='Client Secret'
type='password'
placeholder='敏感信息不会发送到前端显示'
/>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='oidc.authorization_endpoint'
label='Authorization Endpoint'
placeholder='输入 OIDC 的 Authorization Endpoint'
/>
</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
field='oidc.token_endpoint'
label='Token Endpoint'
placeholder='输入 OIDC 的 Token Endpoint'
/>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='oidc.user_info_endpoint'
label='User Info Endpoint'
placeholder='输入 OIDC 的 Userinfo Endpoint'
/>
</Col>
</Row>
<Button onClick={submitOIDCSettings}>保存 OIDC 设置</Button>
</Form.Section>
</Card>
<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)
}
<Card>
<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'
placeholder='敏感信息不会发送到前端显示'
/>
</Col>
</Row>
<Button onClick={submitGitHubOAuth}>
保存 GitHub OAuth 设置
</Button>
</Form.Section>
</Card>
<Card>
<Form.Section text='配置 Linux DO OAuth'>
<Text>
用以支持通过 Linux DO 进行登录注册
<a
href='https://connect.linux.do/'
target='_blank'
rel='noreferrer'
style={{
display: 'inline-block',
marginLeft: 4,
marginRight: 4,
}}
>
启用邮箱别名限制
</Form.Checkbox>
</Col>
</Row>
<TagInput
value={emailDomainWhitelist}
onChange={setEmailDomainWhitelist}
placeholder='输入域名后回车'
style={{ width: '100%', marginTop: 16 }}
/>
<Button
onClick={submitEmailDomainWhitelist}
style={{ marginTop: 10 }}
>
保存邮箱域名白名单设置
</Button>
</Form.Section>
点击此处
</a>
管理你的 LinuxDO OAuth App
</Text>
<Banner
type='info'
description={`回调 URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}/oauth/linuxdo`}
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='LinuxDOClientId'
label='Linux DO Client ID'
placeholder='输入你注册的 LinuxDO OAuth APP 的 ID'
/>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='LinuxDOClientSecret'
label='Linux DO Client Secret'
type='password'
placeholder='敏感信息不会发送到前端显示'
/>
</Col>
</Row>
<Button onClick={submitLinuxDOOAuth}>
保存 Linux DO OAuth 设置
</Button>
</Form.Section>
</Card>
<Form.Section text='配置 SMTP'>
<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}>
<Form.Input field='SMTPServer' label='SMTP 服务器地址' />
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input field='SMTPPort' label='SMTP 端口' />
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input field='SMTPAccount' label='SMTP 账户' />
</Col>
</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 field='SMTPFrom' label='SMTP 发送者邮箱' />
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input
field='SMTPToken'
label='SMTP 访问凭证'
type='password'
placeholder='敏感信息不会发送到前端显示'
/>
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Checkbox
field='SMTPSSLEnabled'
noLabel
onChange={(e) =>
handleCheckboxChange('SMTPSSLEnabled', e)
}
>
启用SMTP SSL
</Form.Checkbox>
</Col>
</Row>
<Button onClick={submitSMTP}>保存 SMTP 设置</Button>
</Form.Section>
<Card>
<Form.Section text='配置 WeChat Server'>
<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}>
<Form.Input
field='WeChatServerAddress'
label='WeChat Server 服务器地址'
/>
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input
field='WeChatServerToken'
label='WeChat Server 访问凭证'
type='password'
placeholder='敏感信息不会发送到前端显示'
/>
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input
field='WeChatAccountQRCodeImageURL'
label='微信公众号二维码图片链接'
/>
</Col>
</Row>
<Button onClick={submitWeChat}>
保存 WeChat Server 设置
</Button>
</Form.Section>
</Card>
<Form.Section text='配置 OIDC'>
<Text>
用以支持通过 OIDC 登录，例如 Okta、Auth0 等兼容 OIDC 协议的
IdP
</Text>
<Banner
type='info'
description={`主页链接填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}，重定向 URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}/oauth/oidc`}
style={{ marginBottom: 20, marginTop: 16 }}
/>
<Text>
若你的 OIDC Provider 支持 Discovery Endpoint，你可以仅填写
OIDC Well-Known URL，系统会自动获取 OIDC 配置
</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
field='oidc.well_known'
label='Well-Known URL'
placeholder='请输入 OIDC 的 Well-Known URL'
/>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='oidc.client_id'
label='Client ID'
placeholder='输入 OIDC 的 Client ID'
/>
</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
field='oidc.client_secret'
label='Client Secret'
type='password'
placeholder='敏感信息不会发送到前端显示'
/>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='oidc.authorization_endpoint'
label='Authorization Endpoint'
placeholder='输入 OIDC 的 Authorization Endpoint'
/>
</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
field='oidc.token_endpoint'
label='Token Endpoint'
placeholder='输入 OIDC 的 Token Endpoint'
/>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='oidc.user_info_endpoint'
label='User Info Endpoint'
placeholder='输入 OIDC 的 Userinfo Endpoint'
/>
</Col>
</Row>
<Button onClick={submitOIDCSettings}>保存 OIDC 设置</Button>
</Form.Section>
<Card>
<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
field='TelegramBotToken'
label='Telegram Bot Token'
placeholder='敏感信息不会发送到前端显示'
type='password'
/>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='TelegramBotName'
label='Telegram Bot 名称'
/>
</Col>
</Row>
<Button onClick={submitTelegramSettings}>
保存 Telegram 登录设置
</Button>
</Form.Section>
</Card>
<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'
placeholder='敏感信息不会发送到前端显示'
/>
</Col>
</Row>
<Button onClick={submitGitHubOAuth}>
保存 GitHub OAuth 设置
</Button>
</Form.Section>
<Form.Section text='配置 Linux DO OAuth'>
<Text>
用以支持通过 Linux DO 进行登录注册
<a
href='https://connect.linux.do/'
target='_blank'
rel='noreferrer'
style={{
display: 'inline-block',
marginLeft: 4,
marginRight: 4,
}}
<Card>
<Form.Section text='配置 Turnstile'>
<Text>用以支持用户校验</Text>
<Row
gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
>
点击此处
</a>
管理你的 LinuxDO OAuth App
</Text>
<Banner
type='info'
description={`回调 URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}/oauth/linuxdo`}
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='LinuxDOClientId'
label='Linux DO Client ID'
placeholder='输入你注册的 LinuxDO OAuth APP 的 ID'
/>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='LinuxDOClientSecret'
label='Linux DO Client Secret'
type='password'
placeholder='敏感信息不会发送到前端显示'
/>
</Col>
</Row>
<Button onClick={submitLinuxDOOAuth}>
保存 Linux DO OAuth 设置
</Button>
</Form.Section>
<Form.Section text='配置 WeChat Server'>
<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}>
<Form.Input
field='WeChatServerAddress'
label='WeChat Server 服务器地址'
/>
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input
field='WeChatServerToken'
label='WeChat Server 访问凭证'
type='password'
placeholder='敏感信息不会发送到前端显示'
/>
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Input
field='WeChatAccountQRCodeImageURL'
label='微信公众号二维码图片链接'
/>
</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
field='TelegramBotToken'
label='Telegram Bot Token'
placeholder='敏感信息不会发送到前端显示'
type='password'
/>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='TelegramBotName'
label='Telegram Bot 名称'
/>
</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
field='TurnstileSiteKey'
label='Turnstile Site Key'
/>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='TurnstileSecretKey'
label='Turnstile Secret Key'
type='password'
placeholder='敏感信息不会发送到前端显示'
/>
</Col>
</Row>
<Button onClick={submitTurnstile}>保存 Turnstile 设置</Button>
</Form.Section>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='TurnstileSiteKey'
label='Turnstile Site Key'
/>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<Form.Input
field='TurnstileSecretKey'
label='Turnstile Secret Key'
type='password'
placeholder='敏感信息不会发送到前端显示'
/>
</Col>
</Row>
<Button onClick={submitTurnstile}>保存 Turnstile 设置</Button>
</Form.Section>
</Card>
<Modal
title='确认取消密码登录'
......@@ -1028,7 +1070,7 @@ const SystemSetting = () => {
>
<p>您确定要取消密码登录功能吗？这可能会影响用户的登录方式。</p>
</Modal>
</>
</div>
)}
</Form>
) : (
......
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