-
Notifications
You must be signed in to change notification settings - Fork 4.4k
/
index.tsx
149 lines (139 loc) · 5.34 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
'use client'
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import React, { useCallback } from 'react'
import produce from 'immer'
import type { Authorization as AuthorizationPayloadType } from '../../types'
import { APIType, AuthorizationType } from '../../types'
import RadioGroup from './radio-group'
import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button'
const i18nPrefix = 'workflow.nodes.http.authorization'
type Props = {
payload: AuthorizationPayloadType
onChange: (payload: AuthorizationPayloadType) => void
isShow: boolean
onHide: () => void
}
const Field = ({ title, isRequired, children }: { title: string; isRequired?: boolean; children: JSX.Element }) => {
return (
<div>
<div className='leading-8 text-[13px] font-medium text-gray-700'>
{title}
{isRequired && <span className='ml-0.5 text-[#D92D20]'>*</span>}
</div>
<div>{children}</div>
</div>
)
}
const Authorization: FC<Props> = ({
payload,
onChange,
isShow,
onHide,
}) => {
const { t } = useTranslation()
const [tempPayload, setTempPayload] = React.useState<AuthorizationPayloadType>(payload)
const handleAuthTypeChange = useCallback((type: string) => {
const newPayload = produce(tempPayload, (draft: AuthorizationPayloadType) => {
draft.type = type as AuthorizationType
if (draft.type === AuthorizationType.apiKey && !draft.config) {
draft.config = {
type: APIType.basic,
api_key: '',
}
}
})
setTempPayload(newPayload)
}, [tempPayload, setTempPayload])
const handleAuthAPITypeChange = useCallback((type: string) => {
const newPayload = produce(tempPayload, (draft: AuthorizationPayloadType) => {
if (!draft.config) {
draft.config = {
type: APIType.basic,
api_key: '',
}
}
draft.config.type = type as APIType
})
setTempPayload(newPayload)
}, [tempPayload, setTempPayload])
const handleAPIKeyOrHeaderChange = useCallback((type: 'api_key' | 'header') => {
return (e: React.ChangeEvent<HTMLInputElement>) => {
const newPayload = produce(tempPayload, (draft: AuthorizationPayloadType) => {
if (!draft.config) {
draft.config = {
type: APIType.basic,
api_key: '',
}
}
draft.config[type] = e.target.value
})
setTempPayload(newPayload)
}
}, [tempPayload, setTempPayload])
const handleConfirm = useCallback(() => {
onChange(tempPayload)
onHide()
}, [tempPayload, onChange, onHide])
return (
<Modal
title={t(`${i18nPrefix}.authorization`)}
isShow={isShow}
onClose={onHide}
>
<div>
<div className='space-y-2'>
<Field title={t(`${i18nPrefix}.authorizationType`)}>
<RadioGroup
options={[
{ value: AuthorizationType.none, label: t(`${i18nPrefix}.no-auth`) },
{ value: AuthorizationType.apiKey, label: t(`${i18nPrefix}.api-key`) },
]}
value={tempPayload.type}
onChange={handleAuthTypeChange}
/>
</Field>
{tempPayload.type === AuthorizationType.apiKey && (
<>
<Field title={t(`${i18nPrefix}.auth-type`)}>
<RadioGroup
options={[
{ value: APIType.basic, label: t(`${i18nPrefix}.basic`) },
{ value: APIType.bearer, label: t(`${i18nPrefix}.bearer`) },
{ value: APIType.custom, label: t(`${i18nPrefix}.custom`) },
]}
value={tempPayload.config?.type || APIType.basic}
onChange={handleAuthAPITypeChange}
/>
</Field>
{tempPayload.config?.type === APIType.custom && (
<Field title={t(`${i18nPrefix}.header`)} isRequired>
<input
type='text'
className='w-full h-8 leading-8 px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px] placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
value={tempPayload.config?.header || ''}
onChange={handleAPIKeyOrHeaderChange('header')}
/>
</Field>
)}
<Field title={t(`${i18nPrefix}.api-key-title`)} isRequired>
<input
type='text'
className='w-full h-8 leading-8 px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px] placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
value={tempPayload.config?.api_key || ''}
onChange={handleAPIKeyOrHeaderChange('api_key')}
/>
</Field>
</>
)}
</div>
<div className='mt-6 flex justify-end space-x-2'>
<Button onClick={onHide} className='flex items-center !h-8 leading-[18px] !text-[13px] !font-medium'>{t('common.operation.cancel')}</Button>
<Button type='primary' onClick={handleConfirm} className='flex items-center !h-8 leading-[18px] !text-[13px] !font-medium'>{t('common.operation.save')}</Button>
</div>
</div>
</Modal>
)
}
export default React.memo(Authorization)