awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve UI

Browse Source
This commit is contained in:
Fang-Pen Lin
2025-11-03 17:01:08 -08:00
parent ab47ef9e6e
commit f2fa429458
2 changed files with 76 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/ProfileRow.tsx
View File

@@ -164,7 +164,7 @@ export const ProfileRow = ({
}}
icon={<FontAwesomeIcon icon={faEye} />}
>
Reveal ACME EAB Secret
Reveal EAB Secret
</DropdownMenuItem>
)}
{canIssueCertificate && profile.enrollmentType === "api" && (

78
frontend/src/pages/cert-manager/PoliciesPage/components/CertificateProfilesTab/RevealAcmeEabSecretModal.tsx
View File

@@ -1,5 +1,8 @@
import { Modal, ModalContent } from "@app/components/v2";
import { FormLabel, IconButton, Input, Modal, ModalContent } from "@app/components/v2";
import { useToggle } from "@app/hooks";
import { TCertificateProfileWithDetails } from "@app/hooks/api/certificateProfiles";
import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
type Props = {
isOpen: boolean;
@@ -8,6 +11,13 @@ type Props = {
};
export const RevealAcmeEabSecretModal = ({ isOpen, onClose, profile }: Props) => {
const [isAcmeDirectoryUrlCopied, setIsAcmeDirectoryUrlCopied] = useToggle(false);
const [isEabKidCopied, setIsEabKidCopied] = useToggle(false);
const [isEabSecretCopied, setIsEabSecretCopied] = useToggle(false);
const acmeDirectoryUrl = "http://FIXME.com/directory";
const eabKid = profile.id;
const eabSecret = "FIXME";
return (
<Modal
isOpen={isOpen}
@@ -17,8 +27,70 @@ export const RevealAcmeEabSecretModal = ({ isOpen, onClose, profile }: Props) =>
}
}}
>
<ModalContent title="Reveal ACME EAB Secret">
<div>Reveal ACME EAB Secret</div>
<ModalContent
title="Reveal EAB Secret"
subTitle="To issue certificates, your ACME client needs to use the following information."
>
<FormLabel
label="ACME Directory URL"
tooltipText="The ACME directory URL for your ACME client to to issue certificates."
/>
<Input value={acmeDirectoryUrl} disabled />
<div className="flex gap-2">
<IconButton
ariaLabel="copy"
variant="outline_bg"
colorSchema="secondary"
onClick={() => {
navigator.clipboard.writeText(acmeDirectoryUrl);
setIsAcmeDirectoryUrlCopied.on();
}}
className="w-10"
>
<FontAwesomeIcon icon={isAcmeDirectoryUrlCopied ? faCheck : faCopy} />
</IconButton>
</div>
<FormLabel
label="EAB KID"
tooltipText="The EAB Key Identifier (KID) for your ACME client to use for authentication when registering a new account."
/>
<div className="flex gap-2">
<Input value={eabKid} disabled />
<IconButton
ariaLabel="copy"
variant="outline_bg"
colorSchema="secondary"
onClick={() => {
navigator.clipboard.writeText(eabKid);
setIsEabKidCopied.on();
}}
className="w-10"
>
<FontAwesomeIcon icon={isEabKidCopied ? faCheck : faCopy} />
</IconButton>
</div>
<FormLabel
label="EAB Secret"
className="mt-4"
tooltipText="The EAB Secret for your ACME client to use for authentication when registering a new account."
/>
<div className="flex gap-2">
<Input value={eabSecret} isDisabled />
<IconButton
ariaLabel="copy"
variant="outline_bg"
colorSchema="secondary"
onClick={() => {
navigator.clipboard.writeText(eabSecret);
setIsEabSecretCopied.on();
}}
className="w-10"
>
<FontAwesomeIcon icon={isEabSecretCopied ? faCheck : faCopy} />
</IconButton>
</div>
</ModalContent>
</Modal>
);