diff --git a/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js b/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js index c3e618edb9..0baa9d39cf 100644 --- a/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js +++ b/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js @@ -7,32 +7,90 @@ import { IconEye, IconEyeOff } from '@tabler/icons'; import { useState } from 'react'; import StyledWrapper from './StyledWrapper'; +import { useRef } from 'react'; +import path from 'path'; +import slash from 'utils/common/slash'; const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => { + const certFilePathInputRef = useRef(); + const keyFilePathInputRef = useRef(); + const pfxFilePathInputRef = useRef(); + const formik = useFormik({ initialValues: { domain: '', + type: 'cert', certFilePath: '', keyFilePath: '', + pfxFilePath: '', passphrase: '' }, validationSchema: Yup.object({ domain: Yup.string().required(), - certFilePath: Yup.string().required(), - keyFilePath: Yup.string().required(), + type: Yup.string().required().oneOf(['cert', 'pfx']), + certFilePath: Yup.string().when('type', { + is: (type) => type == 'cert', + then: Yup.string().min(1, 'certFilePath is a required field').required() + }), + keyFilePath: Yup.string().when('type', { + is: (type) => type == 'cert', + then: Yup.string().min(1, 'keyFilePath is a required field').required() + }), + pfxFilePath: Yup.string().when('type', { + is: (type) => type == 'pfx', + then: Yup.string().min(1, 'pfxFilePath is a required field').required() + }), passphrase: Yup.string() }), onSubmit: (values) => { - onUpdate(values); + let relevantValues = {}; + if (values.type === 'cert') { + relevantValues = { + domain: values.domain, + type: values.type, + certFilePath: values.certFilePath, + keyFilePath: values.keyFilePath, + passphrase: values.passphrase + }; + } else { + relevantValues = { + domain: values.domain, + type: values.type, + pfxFilePath: values.pfxFilePath, + passphrase: values.passphrase + }; + } + onUpdate(relevantValues); + formik.resetForm(); + resetFileInputFields(); } }); const getFile = (e) => { - formik.values[e.name] = e.files[0].path; + e.files?.[0]?.path && formik.setFieldValue(e.name, e.files?.[0]?.path); + }; + + const resetFileInputFields = () => { + certFilePathInputRef.current.value = ''; + keyFilePathInputRef.current.value = ''; + pfxFilePathInputRef.current.value = ''; }; const [passwordVisible, setPasswordVisible] = useState(false); + const handleTypeChange = (e) => { + formik.setFieldValue('type', e.target.value); + if (e.target.value === 'cert') { + formik.setFieldValue('pfxFilePath', ''); + pfxFilePathInputRef.current.value = ''; + } else { + formik.setFieldValue('certFilePath', ''); + certFilePathInputRef.current.value = ''; + formik.setFieldValue('keyFilePath', ''); + keyFilePathInputRef.current.value = ''; + } + }; + return (
Add client certificates to be used for specific domains.
@@ -76,35 +134,163 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => { ) : null}
-
-
- - getFile(e.target)} - /> - {formik.touched.keyFilePath && formik.errors.keyFilePath ? ( -
{formik.errors.keyFilePath}
- ) : null} +
+ + +
+ {formik.values.type === 'cert' ? ( + <> +
+ +
+ getFile(e.target)} + ref={certFilePathInputRef} + /> + {formik.values.certFilePath ? ( +
+
+ {path.basename(slash(formik.values.certFilePath))} +
+ { + formik.setFieldValue('certFilePath', ''); + certFilePathInputRef.current.value = ''; + }} + /> +
+ ) : ( + <> + )} +
+ {formik.touched.certFilePath && formik.errors.certFilePath ? ( +
{formik.errors.certFilePath}
+ ) : null} +
+
+ +
+ getFile(e.target)} + ref={keyFilePathInputRef} + /> + {formik.values.keyFilePath ? ( +
+
+ {path.basename(slash(formik.values.keyFilePath))} +
+ { + formik.setFieldValue('keyFilePath', ''); + keyFilePathInputRef.current.value = ''; + }} + /> +
+ ) : ( + <> + )} +
+ {formik.touched.keyFilePath && formik.errors.keyFilePath ? ( +
{formik.errors.keyFilePath}
+ ) : null} +
+ + ) : ( + <> +
+ +
+ getFile(e.target)} + ref={pfxFilePathInputRef} + /> + {formik.values.pfxFilePath ? ( +
+
+ {path.basename(slash(formik.values.pfxFilePath))} +
+ { + formik.setFieldValue('pfxFilePath', ''); + pfxFilePathInputRef.current.value = ''; + }} + /> +
+ ) : ( + <> + )} +
+ {formik.touched.pfxFilePath && formik.errors.pfxFilePath ? ( +
{formik.errors.pfxFilePath}
+ ) : null} +
+ + )}