oak-general-business/src/components/oauth/management/oauthApps/upsert/web.pc.tsx

import React, { useEffect } from 'react';
import { Form, Input, Switch, Button, Space, Upload, Select, Modal } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { RowWithActions, WebComponentProps } from 'oak-frontend-base';
import Styles from './styles.module.less';
import { EntityDict } from '../../../../../oak-app-domain';

const Upsert = (
    props: WebComponentProps<
        EntityDict,
        'oauthApplication',
        false,
        {
            item: RowWithActions<EntityDict, 'oauthApplication'>;
            clientSecret: string;
            isCreation: boolean;
            open: boolean;
            onCancel: () => void;
            onOk: () => void;
            hideModal: boolean;
        },
        {
            reGenerateClientSecret: () => void;
            setHideModal: (hide: boolean) => void;
        }
    >
) => {
    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;