146 lines
6.6 KiB
JavaScript
146 lines
6.6 KiB
JavaScript
import React, { useEffect } from 'react';
|
||
import { Form, Input, Switch, Select, Typography, Modal } from 'antd';
|
||
import Styles from './styles.module.less';
|
||
const { Text } = Typography;
|
||
const Upsert = (props) => {
|
||
const { item, open, onCancel, onOk, hideModal, isCreation } = props.data;
|
||
const { t, update, setHideModal } = props.methods;
|
||
const [form] = Form.useForm();
|
||
useEffect(() => {
|
||
if (item) {
|
||
form.setFieldsValue({
|
||
name: item.name,
|
||
type: item.type ? [item.type] : [],
|
||
logo: item.logo,
|
||
authorizationEndpoint: item.authorizationEndpoint,
|
||
tokenEndpoint: item.tokenEndpoint,
|
||
refreshEndpoint: item.refreshEndpoint,
|
||
userInfoEndpoint: item.userInfoEndpoint,
|
||
revokeEndpoint: item.revokeEndpoint,
|
||
clientId: item.clientId,
|
||
clientSecret: item.clientSecret,
|
||
scopes: item.scopes,
|
||
redirectUri: item.redirectUri,
|
||
autoRegister: item.autoRegister,
|
||
ableState: item.ableState === 'enabled',
|
||
});
|
||
}
|
||
}, [item, form]);
|
||
const handleOk = async () => {
|
||
try {
|
||
await form.validateFields();
|
||
setHideModal(true);
|
||
setTimeout(() => {
|
||
onOk();
|
||
}, 300);
|
||
}
|
||
catch (error) {
|
||
console.log('Validation failed:', error);
|
||
}
|
||
};
|
||
const handleCancel = () => {
|
||
setHideModal(true);
|
||
setTimeout(() => {
|
||
onCancel();
|
||
}, 300);
|
||
};
|
||
if (item === undefined) {
|
||
return null;
|
||
}
|
||
return (<Modal open={open && !hideModal} destroyOnClose={true} width={600} onCancel={handleCancel} onOk={handleOk} title={t('oauthProvider')} okText={isCreation ? t('create') : t('update')} cancelText={t('cancel')}>
|
||
<div className={Styles.id}>
|
||
<Form form={form} layout="vertical" autoComplete="off">
|
||
<Form.Item label={t('name')} name="name" required={true} rules={[{ required: true, message: t('nameRequired') }]}>
|
||
<Input placeholder={t('namePlaceholder')} onChange={(v) => {
|
||
update({ name: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('type')} name="type" required={true} 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')} 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')} name="logo">
|
||
<Input placeholder={t('logoPlaceholder')} onChange={(v) => {
|
||
update({ logo: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('authorizationEndpoint')} name="authorizationEndpoint" required={true} rules={[{ required: true, message: t('authorizationEndpointRequired') }]}>
|
||
<Input placeholder={t('authorizationEndpointPlaceholder')} onChange={(v) => {
|
||
update({ authorizationEndpoint: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('tokenEndpoint')} name="tokenEndpoint" required={true} rules={[{ required: true, message: t('tokenEndpointRequired') }]}>
|
||
<Input placeholder={t('tokenEndpointPlaceholder')} onChange={(v) => {
|
||
update({ tokenEndpoint: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('refreshEndpoint')} name="refreshEndpoint">
|
||
<Input placeholder={t('refreshEndpointPlaceholder')} onChange={(v) => {
|
||
update({ refreshEndpoint: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('userInfoEndpoint')} name="userInfoEndpoint">
|
||
<Input placeholder={t('userInfoEndpointPlaceholder')} onChange={(v) => {
|
||
update({ userInfoEndpoint: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('revokeEndpoint')} name="revokeEndpoint">
|
||
<Input placeholder={t('revokeEndpointPlaceholder')} onChange={(v) => {
|
||
update({ revokeEndpoint: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('clientId')} name="clientId" required={true} rules={[{ required: true, message: t('clientIdRequired') }]}>
|
||
<Input placeholder={t('clientIdPlaceholder')} onChange={(v) => {
|
||
update({ clientId: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('clientSecret')} name="clientSecret" required={true} rules={[{ required: true, message: t('clientSecretRequired') }]}>
|
||
<Input.Password placeholder={t('clientSecretPlaceholder')} onChange={(v) => {
|
||
update({ clientSecret: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('scopes')} name="scopes">
|
||
<Select mode="tags" placeholder={t('scopesPlaceholder')} onChange={(v) => {
|
||
update({ scopes: v });
|
||
}} tokenSeparators={[',']} open={false}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('redirectUri')} name="redirectUri" required={true} rules={[{ required: true, message: t('redirectUriRequired') }]}>
|
||
<Input placeholder={t('redirectUriPlaceholder')} onChange={(v) => {
|
||
update({ redirectUri: v.target.value });
|
||
}}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('autoRegister')} name="autoRegister" valuePropName="checked">
|
||
<Switch onChange={(checked) => update({ autoRegister: checked })}/>
|
||
</Form.Item>
|
||
|
||
<Form.Item label={t('ableState')} name="ableState" valuePropName="checked">
|
||
<Switch checked={item.ableState === 'enabled'} onChange={(checked) => update({ ableState: checked ? "enabled" : "disabled" })}/>
|
||
</Form.Item>
|
||
|
||
</Form>
|
||
</div>
|
||
</Modal>);
|
||
};
|
||
export default Upsert;
|