110 lines
4.8 KiB
JavaScript
110 lines
4.8 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import { Form, Input, Switch, Button, Space, Select, Modal } from 'antd';
|
|
import Styles from './styles.module.less';
|
|
const Upsert = (props) => {
|
|
const { item, clientSecret, isCreation, open, onCancel, onOk, hideModal } = props.data;
|
|
const { t, update, reGenerateClientSecret, setHideModal } = props.methods;
|
|
const [form] = Form.useForm();
|
|
useEffect(() => {
|
|
if (item) {
|
|
form.setFieldsValue({
|
|
name: item.name,
|
|
description: item.description,
|
|
logo: item.logo,
|
|
redirectUris: Array.isArray(item.redirectUris) ? item.redirectUris.join('\n') : '',
|
|
scopes: item.scopes,
|
|
isConfidential: item.isConfidential,
|
|
ableState: item.ableState === 'enabled',
|
|
requirePKCE: item.requirePKCE,
|
|
});
|
|
}
|
|
}, [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('oauthApplication')} 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" rules={[{ required: true, message: t('nameRequired') }]}>
|
|
<Input placeholder={t('namePlaceholder')} onChange={(v) => {
|
|
update({ name: v.target.value });
|
|
}}/>
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('description')} name="description">
|
|
<Input.TextArea placeholder={t('descriptionPlaceholder')} rows={4} onChange={(v) => {
|
|
update({ description: v.target.value });
|
|
}}/>
|
|
</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('redirectUris')} name="redirectUris" rules={[{ required: true, message: t('redirectUrisRequired') }]}>
|
|
<Input.TextArea placeholder={t('redirectUrisPlaceholder')} rows={3} onChange={(v) => {
|
|
const uris = v.target.value.split('\n').filter(uri => uri.trim() !== '');
|
|
update({ redirectUris: uris });
|
|
}}/>
|
|
</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('clientId')}>
|
|
<Space.Compact style={{ width: '100%' }}>
|
|
<Input placeholder={t('clientIdPlaceholder')} value={item.id || "已隐藏"} disabled/>
|
|
</Space.Compact>
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('clientSecret')} tooltip={t('clientSecretTooltip')}>
|
|
<Space.Compact style={{ width: '100%' }}>
|
|
<Input placeholder={t('clientSecretPlaceholder')} value={clientSecret || "已隐藏"} disabled/>
|
|
<Button type="primary" onClick={reGenerateClientSecret} disabled={isCreation} // 只能在更新时重新生成
|
|
>
|
|
{t('regenerate')}
|
|
</Button>
|
|
</Space.Compact>
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('isConfidential')} name="isConfidential" valuePropName="checked">
|
|
<Switch onChange={(checked) => update({ isConfidential: checked })}/>
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('ableState')} name="ableState" valuePropName="checked">
|
|
<Switch onChange={(checked) => update({ ableState: checked ? "enabled" : "disabled" })}/>
|
|
</Form.Item>
|
|
|
|
{/* requirePKCE */}
|
|
<Form.Item label={t('requirePKCE')} name="requirePKCE" valuePropName="checked" tooltip={t('requirePKCETooltip')}>
|
|
<Switch onChange={(checked) => update({ requirePKCE: checked })}/>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
</Modal>);
|
|
};
|
|
export default Upsert;
|