@@ -29,6 +29,7 @@ import {
29
29
} from "@/components/IsPublicGroupSelector" ;
30
30
import { useUser } from "@/components/user/UserProvider" ;
31
31
import CardSection from "@/components/admin/CardSection" ;
32
+ import { CredentialFieldsRenderer } from "./CredentialFieldsRenderer" ;
32
33
33
34
const CreateButton = ( {
34
35
onClick,
@@ -92,6 +93,7 @@ export default function CreateCredential({
92
93
refresh ?: ( ) => void ;
93
94
} ) {
94
95
const [ showAdvancedOptions , setShowAdvancedOptions ] = useState ( false ) ;
96
+ const [ authMethod , setAuthMethod ] = useState < string > ( ) ;
95
97
const isPaidEnterpriseFeaturesEnabled = usePaidEnterpriseFeaturesEnabled ( ) ;
96
98
97
99
const { isAdmin } = useUser ( ) ;
@@ -175,118 +177,122 @@ export default function CreateCredential({
175
177
const credentialTemplate : dictionaryType = credentialTemplates [ sourceType ] ;
176
178
const validationSchema = createValidationSchema ( credentialTemplate ) ;
177
179
180
+ // Set initial auth method for templates with multiple auth methods
181
+ const templateWithAuth = credentialTemplate as any ;
182
+ const initialAuthMethod =
183
+ templateWithAuth ?. authMethods ?. [ 0 ] ?. value || undefined ;
184
+
178
185
return (
179
186
< Formik
180
187
initialValues = {
181
188
{
182
189
name : "" ,
183
190
is_public : isAdmin || ! isPaidEnterpriseFeaturesEnabled ,
184
191
groups : [ ] ,
192
+ ...( initialAuthMethod && {
193
+ authentication_method : initialAuthMethod ,
194
+ } ) ,
185
195
} as formType
186
196
}
187
197
validationSchema = { validationSchema }
188
198
onSubmit = { ( ) => { } } // This will be overridden by our custom submit handlers
189
199
>
190
- { ( formikProps ) => (
191
- < Form className = "w-full flex items-stretch" >
192
- { ! hideSource && (
193
- < p className = "text-sm" >
194
- Check our
195
- < a
196
- className = "text-blue-600 hover:underline"
197
- target = "_blank"
198
- href = { getSourceDocLink ( sourceType ) || "" }
199
- >
200
- { " " }
201
- docs{ " " }
202
- </ a >
203
- for information on setting up this connector.
204
- </ p >
205
- ) }
206
- < CardSection className = "w-full items-start dark:bg-neutral-900 mt-4 flex flex-col gap-y-6" >
207
- < TextFormField
208
- name = "name"
209
- placeholder = "(Optional) credential name.."
210
- label = "Name:"
211
- />
212
- { Object . entries ( credentialTemplate ) . map ( ( [ key , val ] ) => {
213
- if ( typeof val === "boolean" ) {
214
- return (
215
- < BooleanFormField
216
- key = { key }
217
- name = { key }
218
- label = { getDisplayNameForCredentialKey ( key ) }
219
- />
220
- ) ;
221
- }
222
- return (
223
- < TextFormField
224
- key = { key }
225
- name = { key }
226
- placeholder = { val }
227
- label = { getDisplayNameForCredentialKey ( key ) }
228
- type = {
229
- key . toLowerCase ( ) . includes ( "token" ) ||
230
- key . toLowerCase ( ) . includes ( "password" )
231
- ? "password"
232
- : "text"
233
- }
234
- />
235
- ) ;
236
- } ) }
237
- { ! swapConnector && (
238
- < div className = "mt-4 flex w-full flex-col sm:flex-row justify-between items-end" >
239
- < div className = "w-full sm:w-3/4 mb-4 sm:mb-0" >
240
- { isPaidEnterpriseFeaturesEnabled && (
241
- < div className = "flex flex-col items-start" >
242
- { isAdmin && (
243
- < AdvancedOptionsToggle
244
- showAdvancedOptions = { showAdvancedOptions }
245
- setShowAdvancedOptions = { setShowAdvancedOptions }
246
- />
247
- ) }
248
- { ( showAdvancedOptions || ! isAdmin ) && (
249
- < IsPublicGroupSelector
250
- formikProps = { formikProps }
251
- objectName = "credential"
252
- publicToWhom = "Curators"
253
- />
254
- ) }
255
- </ div >
256
- ) }
257
- </ div >
258
- < div className = "w-full sm:w-1/4" >
259
- < CreateButton
260
- onClick = { ( ) =>
261
- handleSubmit ( formikProps . values , formikProps , "create" )
262
- }
263
- isSubmitting = { formikProps . isSubmitting }
264
- isAdmin = { isAdmin }
265
- groups = { formikProps . values . groups }
266
- />
200
+ { ( formikProps ) => {
201
+ // Update authentication_method in formik when authMethod changes
202
+ if (
203
+ authMethod &&
204
+ formikProps . values . authentication_method !== authMethod
205
+ ) {
206
+ formikProps . setFieldValue ( "authentication_method" , authMethod ) ;
207
+ }
208
+
209
+ return (
210
+ < Form className = "w-full flex items-stretch" >
211
+ { ! hideSource && (
212
+ < p className = "text-sm" >
213
+ Check our
214
+ < a
215
+ className = "text-blue-600 hover:underline"
216
+ target = "_blank"
217
+ href = { getSourceDocLink ( sourceType ) || "" }
218
+ >
219
+ { " " }
220
+ docs{ " " }
221
+ </ a >
222
+ for information on setting up this connector.
223
+ </ p >
224
+ ) }
225
+ < CardSection className = "w-full items-start dark:bg-neutral-900 mt-4 flex flex-col gap-y-6" >
226
+ < TextFormField
227
+ name = "name"
228
+ placeholder = "(Optional) credential name.."
229
+ label = "Name:"
230
+ />
231
+
232
+ < CredentialFieldsRenderer
233
+ credentialTemplate = { credentialTemplate }
234
+ authMethod = { authMethod || initialAuthMethod }
235
+ setAuthMethod = { setAuthMethod }
236
+ />
237
+
238
+ { ! swapConnector && (
239
+ < div className = "mt-4 flex w-full flex-col sm:flex-row justify-between items-end" >
240
+ < div className = "w-full sm:w-3/4 mb-4 sm:mb-0" >
241
+ { isPaidEnterpriseFeaturesEnabled && (
242
+ < div className = "flex flex-col items-start" >
243
+ { isAdmin && (
244
+ < AdvancedOptionsToggle
245
+ showAdvancedOptions = { showAdvancedOptions }
246
+ setShowAdvancedOptions = { setShowAdvancedOptions }
247
+ />
248
+ ) }
249
+ { ( showAdvancedOptions || ! isAdmin ) && (
250
+ < IsPublicGroupSelector
251
+ formikProps = { formikProps }
252
+ objectName = "credential"
253
+ publicToWhom = "Curators"
254
+ />
255
+ ) }
256
+ </ div >
257
+ ) }
258
+ </ div >
259
+ < div className = "w-full sm:w-1/4" >
260
+ < CreateButton
261
+ onClick = { ( ) =>
262
+ handleSubmit ( formikProps . values , formikProps , "create" )
263
+ }
264
+ isSubmitting = { formikProps . isSubmitting }
265
+ isAdmin = { isAdmin }
266
+ groups = { formikProps . values . groups }
267
+ />
268
+ </ div >
267
269
</ div >
270
+ ) }
271
+ </ CardSection >
272
+ { swapConnector && (
273
+ < div className = "flex gap-x-4 w-full mt-8 justify-end" >
274
+ < Button
275
+ className = "bg-rose-500 hover:bg-rose-400 border-rose-800"
276
+ onClick = { ( ) =>
277
+ handleSubmit (
278
+ formikProps . values ,
279
+ formikProps ,
280
+ "createAndSwap"
281
+ )
282
+ }
283
+ type = "button"
284
+ disabled = { formikProps . isSubmitting }
285
+ >
286
+ < div className = "flex gap-x-2 items-center w-full border-none" >
287
+ < FaAccusoft />
288
+ < p > Create</ p >
289
+ </ div >
290
+ </ Button >
268
291
</ div >
269
292
) }
270
- </ CardSection >
271
- { swapConnector && (
272
- < div className = "flex gap-x-4 w-full mt-8 justify-end" >
273
- < Button
274
- className = "bg-rose-500 hover:bg-rose-400 border-rose-800"
275
- onClick = { ( ) =>
276
- handleSubmit ( formikProps . values , formikProps , "createAndSwap" )
277
- }
278
- type = "button"
279
- disabled = { formikProps . isSubmitting }
280
- >
281
- < div className = "flex gap-x-2 items-center w-full border-none" >
282
- < FaAccusoft />
283
- < p > Create</ p >
284
- </ div >
285
- </ Button >
286
- </ div >
287
- ) }
288
- </ Form >
289
- ) }
293
+ </ Form >
294
+ ) ;
295
+ } }
290
296
</ Formik >
291
297
) ;
292
298
}
0 commit comments