You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
import {
|
|
memo,
|
|
useCallback,
|
|
useRef,
|
|
} from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Modal from '@/app/components/base/modal/modal'
|
|
import {
|
|
useInvalidPluginCredentialInfoHook,
|
|
useSetPluginOAuthCustomClientHook,
|
|
} from '../hooks/use-credential'
|
|
import type { PluginPayload } from '../types'
|
|
import AuthForm from '@/app/components/base/form/form-scenarios/auth'
|
|
import type {
|
|
FormRefObject,
|
|
FormSchema,
|
|
} from '@/app/components/base/form/types'
|
|
import { useToastContext } from '@/app/components/base/toast'
|
|
|
|
type OAuthClientSettingsProps = {
|
|
pluginPayload: PluginPayload
|
|
onClose?: () => void
|
|
editValues?: Record<string, any>
|
|
disabled?: boolean
|
|
schemas: FormSchema[]
|
|
onAuth?: () => Promise<void>
|
|
}
|
|
const OAuthClientSettings = ({
|
|
pluginPayload,
|
|
onClose,
|
|
editValues,
|
|
disabled,
|
|
schemas,
|
|
onAuth,
|
|
}: OAuthClientSettingsProps) => {
|
|
const { t } = useTranslation()
|
|
const { notify } = useToastContext()
|
|
const defaultValues = schemas.reduce((acc, schema) => {
|
|
if (schema.default)
|
|
acc[schema.name] = schema.default
|
|
return acc
|
|
}, {} as Record<string, any>)
|
|
const { mutateAsync: setPluginOAuthCustomClient } = useSetPluginOAuthCustomClientHook(pluginPayload)
|
|
const invalidatePluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
|
|
const formRef = useRef<FormRefObject>(null)
|
|
const handleConfirm = useCallback(async () => {
|
|
const {
|
|
isCheckValidated,
|
|
values,
|
|
} = formRef.current?.getFormValues({
|
|
needCheckValidatedValues: true,
|
|
needTransformWhenSecretFieldIsPristine: true,
|
|
}) || { isCheckValidated: false, values: {} }
|
|
if (!isCheckValidated)
|
|
return
|
|
const {
|
|
__oauth_client__,
|
|
...restValues
|
|
} = values
|
|
|
|
await setPluginOAuthCustomClient({
|
|
client_params: restValues,
|
|
enable_oauth_custom_client: __oauth_client__ === 'custom',
|
|
})
|
|
notify({
|
|
type: 'success',
|
|
message: t('common.api.actionSuccess'),
|
|
})
|
|
|
|
onClose?.()
|
|
invalidatePluginCredentialInfo()
|
|
}, [onClose, invalidatePluginCredentialInfo, setPluginOAuthCustomClient, notify, t])
|
|
|
|
const handleConfirmAndAuthorize = useCallback(async () => {
|
|
await handleConfirm()
|
|
if (onAuth)
|
|
await onAuth()
|
|
}, [handleConfirm, onAuth])
|
|
return (
|
|
<Modal
|
|
title={t('plugin.auth.oauthClientSettings')}
|
|
confirmButtonText={t('plugin.auth.saveAndAuth')}
|
|
cancelButtonText={t('plugin.auth.saveOnly')}
|
|
extraButtonText={t('common.operation.cancel')}
|
|
showExtraButton
|
|
extraButtonVariant='secondary'
|
|
onExtraButtonClick={onClose}
|
|
onClose={onClose}
|
|
onCancel={handleConfirm}
|
|
onConfirm={handleConfirmAndAuthorize}
|
|
>
|
|
<AuthForm
|
|
ref={formRef}
|
|
formSchemas={schemas}
|
|
defaultValues={editValues || defaultValues}
|
|
disabled={disabled}
|
|
/>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default memo(OAuthClientSettings)
|