From bb27d38a1264e59cbfee8688ea9b74c21b61427d Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Mon, 19 Aug 2024 21:39:00 +0800
Subject: [PATCH] misc: ui form adjustments

---
 frontend/src/views/Project/CaPage/CaPage.tsx  |  2 --
 .../CertificateTemplateEnrollmentModal.tsx    | 14 ++++++++-
 .../components/CertificateTemplatesTable.tsx  | 29 +++++++++++++------
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/Project/CaPage/CaPage.tsx b/frontend/src/views/Project/CaPage/CaPage.tsx
index fcf56a50e..7721ed260 100644
--- a/frontend/src/views/Project/CaPage/CaPage.tsx
+++ b/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}
diff --git a/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateTemplateEnrollmentModal.tsx b/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateTemplateEnrollmentModal.tsx
index e79fc5451..e2958abbf 100644
--- a/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateTemplateEnrollmentModal.tsx
+++ b/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>
             )}
           />
diff --git a/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateTemplatesTable.tsx b/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateTemplatesTable.tsx
index 0dddeb4e2..e5abf4b0e 100644
--- a/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateTemplatesTable.tsx
+++ b/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateTemplatesTable.tsx
@@ -80,16 +80,27 @@ export const CertificateTemplatesTable = ({ handlePopUpOpen }: Props) => {
                           >
                             Manage Policies
                           </DropdownMenuItem>
-                          <DropdownMenuItem
-                            onClick={() =>
-                              handlePopUpOpen("enrollmentOptions", {
-                                id: certificateTemplate.id
-                              })
-                            }
-                            icon={<FontAwesomeIcon icon={faUserPlus} size="sm" />}
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Edit}
+                            a={ProjectPermissionSub.CertificateTemplates}
                           >
-                            Manage Enrollment
-                          </DropdownMenuItem>
+                            {(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}