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