misc: ui form adjustments

This commit is contained in:
Sheen Capadngan
2024-08-19 21:39:00 +08:00
parent 5b26928751
commit bb27d38a12
3 changed files with 33 additions and 12 deletions

View File

@@ -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}

View File

@@ -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>
)}
/>

View File

@@ -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}