mirror of
https://github.com/usebruno/bruno.git
synced 2024-11-24 17:03:47 +01:00
feat: Store client certificate paths in collection settings as relative to collection and display them the UI. (#2421)
#2420
This commit is contained in:
parent
82985d1b43
commit
a38d09a117
@ -10,8 +10,9 @@ import StyledWrapper from './StyledWrapper';
|
|||||||
import { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import slash from 'utils/common/slash';
|
import slash from 'utils/common/slash';
|
||||||
|
import { isWindowsOS } from 'utils/common/platform';
|
||||||
|
|
||||||
const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
|
const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
|
||||||
const certFilePathInputRef = useRef();
|
const certFilePathInputRef = useRef();
|
||||||
const keyFilePathInputRef = useRef();
|
const keyFilePathInputRef = useRef();
|
||||||
const pfxFilePathInputRef = useRef();
|
const pfxFilePathInputRef = useRef();
|
||||||
@ -67,7 +68,15 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const getFile = (e) => {
|
const getFile = (e) => {
|
||||||
e.files?.[0]?.path && formik.setFieldValue(e.name, e.files?.[0]?.path);
|
if (e.files?.[0]?.path) {
|
||||||
|
let relativePath;
|
||||||
|
if (isWindowsOS()) {
|
||||||
|
relativePath = slash(path.win32.relative(root, e.files[0].path));
|
||||||
|
} else {
|
||||||
|
relativePath = path.posix.relative(root, e.files[0].path);
|
||||||
|
}
|
||||||
|
formik.setFieldValue(e.name, relativePath);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const resetFileInputFields = () => {
|
const resetFileInputFields = () => {
|
||||||
@ -102,10 +111,14 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
|
|||||||
: clientCertConfig.map((clientCert) => (
|
: clientCertConfig.map((clientCert) => (
|
||||||
<li key={uuid()} className="flex items-center available-certificates p-2 rounded-lg mb-2">
|
<li key={uuid()} className="flex items-center available-certificates p-2 rounded-lg mb-2">
|
||||||
<div className="flex items-center w-full justify-between">
|
<div className="flex items-center w-full justify-between">
|
||||||
<div className="flex items-center">
|
<div className="flex w-full items-center">
|
||||||
<IconWorld className="mr-2" size={18} strokeWidth={1.5} />
|
<IconWorld className="mr-2" size={18} strokeWidth={1.5} />
|
||||||
{clientCert.domain}
|
{clientCert.domain}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex w-full items-center">
|
||||||
|
<IconCertificate className="mr-2 flex-shrink-0" size={18} strokeWidth={1.5} />
|
||||||
|
{clientCert.type === 'cert' ? clientCert.certFilePath : clientCert.pfxFilePath}
|
||||||
|
</div>
|
||||||
<button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2">
|
<button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2">
|
||||||
<IconTrash size={18} strokeWidth={1.5} />
|
<IconTrash size={18} strokeWidth={1.5} />
|
||||||
</button>
|
</button>
|
||||||
|
@ -95,6 +95,7 @@ const CollectionSettings = ({ collection }) => {
|
|||||||
case 'clientCert': {
|
case 'clientCert': {
|
||||||
return (
|
return (
|
||||||
<ClientCertSettings
|
<ClientCertSettings
|
||||||
|
root={collection.pathname}
|
||||||
clientCertConfig={clientCertConfig}
|
clientCertConfig={clientCertConfig}
|
||||||
onUpdate={onClientCertSettingsUpdate}
|
onUpdate={onClientCertSettingsUpdate}
|
||||||
onRemove={onClientCertSettingsRemove}
|
onRemove={onClientCertSettingsRemove}
|
||||||
|
Loading…
Reference in New Issue
Block a user