misc: ui form adjustments

frontend/src/views/Project/CaPage/CaPage.tsx

@@ -22,7 +22,6 @@ import { usePopUp } from "@app/hooks/usePopUp";
 import { CaModal } from "@app/views/Project/CertificatesPage/components/CaTab/components/CaModal";
 
 import { CaInstallCertModal } from "../CertificatesPage/components/CaTab/components/CaInstallCertModal";
-import { CaEnrollmentModal } from "./components/CaEnrollmentModal";
 import { CaCertificatesSection, CaDetailsSection, CaRenewalModal } from "./components";
 
 export const CaPage = withProjectPermission(
@@ -126,7 +125,6 @@ export const CaPage = withProjectPermission(
         )}
         <CaModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
         <CaRenewalModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-        <CaEnrollmentModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
         <CaInstallCertModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
         <DeleteActionModal
           isOpen={popUp.deleteCa.isOpen}

frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateTemplateEnrollmentModal.tsx

@@ -15,6 +15,7 @@ import {
   Switch,
   TextArea
 } from "@app/components/v2";
+import { useToggle } from "@app/hooks";
 import { useCreateEstConfig, useGetEstConfig, useUpdateEstConfig } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -59,6 +60,7 @@ export const CertificateTemplateEnrollmentModal = ({ popUp, handlePopUpToggle }:
 
   const { mutateAsync: createEstConfig } = useCreateEstConfig();
   const { mutateAsync: updateEstConfig } = useUpdateEstConfig();
+  const [isPassphraseFocused, setIsPassphraseFocused] = useToggle(false);
 
   useEffect(() => {
     if (data) {
@@ -143,6 +145,11 @@ export const CertificateTemplateEnrollmentModal = ({ popUp, handlePopUpToggle }:
               </FormControl>
             )}
           />
+          {data && (
+            <FormControl label="EST Label">
+              <Input value={data.certificateTemplateId} disabled />
+            </FormControl>
+          )}
           <Controller
             control={control}
             name="caChain"
@@ -166,7 +173,12 @@ export const CertificateTemplateEnrollmentModal = ({ popUp, handlePopUpToggle }:
             name="passphrase"
             render={({ field, fieldState: { error } }) => (
               <FormControl label="Passphrase" isError={Boolean(error)} errorText={error?.message}>
-                <Input {...field} type="password" />
+                <Input
+                  {...field}
+                  type={isPassphraseFocused ? "text" : "password"}
+                  onFocus={() => setIsPassphraseFocused.on()}
+                  onBlur={() => setIsPassphraseFocused.off()}
+                />
               </FormControl>
             )}
           />

frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateTemplatesTable.tsx

@@ -80,16 +80,27 @@ export const CertificateTemplatesTable = ({ handlePopUpOpen }: Props) => {
                           >
                             Manage Policies
                           </DropdownMenuItem>
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Edit}
+                            a={ProjectPermissionSub.CertificateTemplates}
+                          >
+                            {(isAllowed) => (
                               <DropdownMenuItem
                                 onClick={() =>
                                   handlePopUpOpen("enrollmentOptions", {
                                     id: certificateTemplate.id
                                   })
                                 }
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                disabled={!isAllowed}
                                 icon={<FontAwesomeIcon icon={faUserPlus} size="sm" />}
                               >
                                 Manage Enrollment
                               </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
                           <ProjectPermissionCan
                             I={ProjectPermissionActions.Delete}
                             a={ProjectPermissionSub.CertificateTemplates}