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

import React, { useEffect } from 'react';
import { Form, Input, Switch, Button, Space, Upload, Select } 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,
        'oauthProvider',
        false,
        {
            item: RowWithActions<EntityDict, 'oauthProvider'>;
        }
    >
) => {
    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') }]}
                >
                    <Select placeholder={t('typePlaceholder')} value={item.type || ""}
                        onChange={(v) => {
                            update({ type: v as "oak" | "gitea" | "github" | "google" | "facebook" | "twitter" | "linkedin" | "custom" | "gitlab" | "microsoft" | "apple" | "tencent" | "weixin" | "weibo" | "dingtalk" | null | undefined });
                        }}
                    >
                        <Select.Option value="oak">Oak</Select.Option>
                        <Select.Option value="gitea">Gitea</Select.Option>
                        <Select.Option value="github">GitHub</Select.Option>
                        <Select.Option value="google">Google</Select.Option>
                        <Select.Option value="facebook">Facebook</Select.Option>
                        <Select.Option value="twitter">Twitter</Select.Option>
                        <Select.Option value="linkedin">LinkedIn</Select.Option>
                        <Select.Option value="custom">Custom</Select.Option>
                        <Select.Option value="gitlab">GitLab</Select.Option>
                        <Select.Option value="microsoft">Microsoft</Select.Option>
                        <Select.Option value="apple">Apple</Select.Option>
                        <Select.Option value="tencent">Tencent</Select.Option>
                        <Select.Option value="weixin">Weixin</Select.Option>
                        <Select.Option value="weibo">Weibo</Select.Option>
                        <Select.Option value="dingtalk">DingTalk</Select.Option>
                    </Select>
                </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;