116 lines
5.4 KiB
JavaScript
116 lines
5.4 KiB
JavaScript
import React from 'react';
|
||
import { Form, Input, Switch, Select, Typography } from 'antd';
|
||
import Styles from './styles.module.less';
|
||
const { Text } = Typography;
|
||
const Upsert = (props) => {
|
||
const { item } = props.data;
|
||
const { t, update } = props.methods;
|
||
if (item === undefined) {
|
||
return <div>{t('noData')}</div>;
|
||
}
|
||
return (<div className={Styles.id}>
|
||
<Form layout="vertical" autoComplete="off">
|
||
<Form.Item label={t('name')} rules={[{ required: true, message: t('nameRequired') }]}>
|
||
<Input placeholder={t('namePlaceholder')} value={item.name || ""} onChange={(v) => {
|
||
update({ name: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('type')} rules={[{ required: true, message: t('typeRequired') }]} extra={item.type && item.type !== 'oak' && item.type !== 'gitea' ? (<Text type="warning">
|
||
「{item.type}」不是预设类型，请自行注入 handler。
|
||
</Text>) : undefined}>
|
||
<Select mode="tags" placeholder={t('typePlaceholder')} value={item.type ? [item.type] : []} // 保持数组形式
|
||
onChange={(v) => {
|
||
// 只取最后一个输入或选择的值
|
||
const last = v.slice(-1)[0];
|
||
update({ type: last });
|
||
}} tokenSeparators={[',']} maxTagCount={1} // 只显示一个标签
|
||
options={[
|
||
{ value: 'oak', label: 'Oak' },
|
||
{ value: 'gitea', label: 'Gitea' },
|
||
]}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('logo')}>
|
||
<Input placeholder={t('logoPlaceholder')} value={item.logo || ""} onChange={(v) => {
|
||
update({ logo: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('authorizationEndpoint')} rules={[{ required: true, message: t('authorizationEndpointRequired') }]}>
|
||
<Input placeholder={t('authorizationEndpointPlaceholder')} value={item.authorizationEndpoint || ""} onChange={(v) => {
|
||
update({ authorizationEndpoint: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('tokenEndpoint')} rules={[{ required: true, message: t('tokenEndpointRequired') }]}>
|
||
<Input placeholder={t('tokenEndpointPlaceholder')} value={item.tokenEndpoint || ""} onChange={(v) => {
|
||
update({ tokenEndpoint: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('refreshEndpoint')}>
|
||
<Input placeholder={t('refreshEndpointPlaceholder')} value={item.refreshEndpoint || ""} onChange={(v) => {
|
||
update({ refreshEndpoint: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('userInfoEndpoint')}>
|
||
<Input placeholder={t('userInfoEndpointPlaceholder')} value={item.userInfoEndpoint || ""} onChange={(v) => {
|
||
update({ userInfoEndpoint: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('revokeEndpoint')}>
|
||
<Input placeholder={t('revokeEndpointPlaceholder')} value={item.revokeEndpoint || ""} onChange={(v) => {
|
||
update({ revokeEndpoint: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('clientId')} rules={[{ required: true, message: t('clientIdRequired') }]}>
|
||
<Input placeholder={t('clientIdPlaceholder')} value={item.clientId || ""} onChange={(v) => {
|
||
update({ clientId: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('clientSecret')} rules={[{ required: true, message: t('clientSecretRequired') }]}>
|
||
<Input.Password placeholder={t('clientSecretPlaceholder')} value={item.clientSecret || ""} onChange={(v) => {
|
||
update({ clientSecret: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('scopes')}>
|
||
<Select mode="tags" placeholder={t('scopesPlaceholder')} value={item.scopes || []} onChange={(v) => {
|
||
update({ scopes: v });
|
||
}} tokenSeparators={[',']} open={false}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('redirectUri')} rules={[{ required: true, message: t('redirectUriRequired') }]}>
|
||
<Input placeholder={t('redirectUriPlaceholder')} value={item.redirectUri || ""} onChange={(v) => {
|
||
update({ redirectUri: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('autoRegister')} valuePropName="checked">
|
||
<Switch checked={!!item.autoRegister} onChange={(checked) => update({ autoRegister: checked })}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('ableState')} valuePropName="checked">
|
||
<Switch checked={!!item.ableState} onChange={(checked) => update({ ableState: checked ? "enabled" : "disabled" })}/>
|
||
</Form.Item>
|
||
|
||
{/* <Form.Item>
|
||
<Space>
|
||
<Button type="primary" htmlType="submit">
|
||
{t('confirm')}
|
||
</Button>
|
||
<Button onClick={handleCancel}>
|
||
{t('cancel')}
|
||
</Button>
|
||
</Space>
|
||
</Form.Item> */}
|
||
</Form>
|
||
</div>);
|
||
};
|
||
export default Upsert;
|