awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-15 06:35:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: initial simpleenroll setup (mvp)

Browse Source
This commit is contained in:
Sheen Capadngan
2024-08-13 23:22:47 +08:00
parent f4244c6d4d
commit f2a49a79f0
17 changed files with 715 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Project/CaPage/CaPage.tsx
+4 -2
View File
@@ -22,7 +22,7 @@ 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 { TabSections } from "../Types";
import { CaEnrollmentModal } from "./components/CaEnrollmentModal";
import { CaCertificatesSection, CaDetailsSection, CaRenewalModal } from "./components";
export const CaPage = withProjectPermission(
@@ -40,7 +40,8 @@ export const CaPage = withProjectPermission(
"ca",
"deleteCa",
"installCaCert",
"renewCa"
"renewCa",
"enrollmentOptions"
] as const);
const onRemoveCaSubmit = async (caIdToDelete: string) => {
@@ -125,6 +126,7 @@ 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/CaPage/components/CaDetailsSection.tsx
+27 -14
View File
@@ -14,7 +14,7 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
type Props = {
caId: string;
handlePopUpOpen: (
popUpName: keyof UsePopUpState<["ca", "renewCa", "installCaCert"]>,
popUpName: keyof UsePopUpState<["ca", "renewCa", "installCaCert", "enrollmentOptions"]>,
data?: {}
) => void;
};
@@ -118,19 +118,32 @@ export const CaDetailsSection = ({ caId, handlePopUpOpen }: Props) => {
>
{(isAllowed) => {
return (
<Button
isDisabled={!isAllowed}
className="mt-4 w-full"
colorSchema="primary"
type="submit"
onClick={() => {
handlePopUpOpen("renewCa", {
caId
});
}}
>
Renew CA
</Button>
<>
<Button
isDisabled={!isAllowed}
className="mt-4 w-full"
colorSchema="secondary"
type="submit"
onClick={() => {
handlePopUpOpen("enrollmentOptions");
}}
>
Enrollment Options
</Button>
<Button
isDisabled={!isAllowed}
className="mt-4 w-full"
colorSchema="primary"
type="submit"
onClick={() => {
handlePopUpOpen("renewCa", {
caId
});
}}
>
Renew CA
</Button>
</>
);
}}
</ProjectPermissionCan>
frontend/src/views/Project/CaPage/components/CaEnrollmentModal.tsx
+173
View File
@@ -0,0 +1,173 @@
import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import z from "zod";
import { createNotification } from "@app/components/notifications";
import {
Button,
FormControl,
Input,
Modal,
ModalContent,
Select,
SelectItem,
Switch,
TextArea
} from "@app/components/v2";
import { UsePopUpState } from "@app/hooks/usePopUp";
enum EnrollmentMethod {
EST = "est"
}
type Props = {
popUp: UsePopUpState<["enrollmentOptions"]>;
handlePopUpToggle: (
popUpName: keyof UsePopUpState<["enrollmentOptions"]>,
state?: boolean
) => void;
};
const schema = z
.object({
method: z.nativeEnum(EnrollmentMethod),
caChain: z.string(),
passphrase: z.string(),
isEnabled: z.boolean()
})
.required();
export type FormData = z.infer<typeof schema>;
export const CaEnrollmentModal = ({ popUp, handlePopUpToggle }: Props) => {
const {
control,
handleSubmit,
reset,
formState: { isSubmitting }
} = useForm<FormData>({
resolver: zodResolver(schema),
defaultValues: {
isEnabled: false
}
});
const onFormSubmit = async ({ caChain, passphrase, isEnabled }: FormData) => {
try {
handlePopUpToggle("enrollmentOptions", false);
createNotification({
text: "Successfully saved changes",
type: "success"
});
reset();
} catch (err) {
console.error(err);
}
};
return (
<Modal
isOpen={popUp?.enrollmentOptions?.isOpen}
onOpenChange={(isOpen) => {
handlePopUpToggle("enrollmentOptions", isOpen);
reset();
}}
>
<ModalContent title="Manage Enrollment Options">
<form onSubmit={handleSubmit(onFormSubmit)}>
<Controller
control={control}
name="method"
defaultValue={EnrollmentMethod.EST}
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
label="Client Enrollment Method"
errorText={error?.message}
isError={Boolean(error)}
>
<Select
defaultValue={field.value}
{...field}
onValueChange={(e) => onChange(e)}
className="w-full"
>
<SelectItem value={EnrollmentMethod.EST} key={EnrollmentMethod.EST}>
EST
</SelectItem>
</Select>
</FormControl>
)}
/>
<Controller
control={control}
defaultValue=""
name="caChain"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Certificate Authority Chain"
isError={Boolean(error)}
errorText={error?.message}
isRequired
>
<TextArea {...field} />
</FormControl>
)}
/>
<Controller
control={control}
defaultValue=""
name="passphrase"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Passphrase"
isError={Boolean(error)}
errorText={error?.message}
isRequired
>
<Input {...field} type="password" />
</FormControl>
)}
/>
<Controller
control={control}
name="isEnabled"
render={({ field, fieldState: { error } }) => {
return (
<FormControl isError={Boolean(error)} errorText={error?.message}>
<Switch
id="is-active"
onCheckedChange={(value) => field.onChange(value)}
isChecked={field.value}
>
<p className="ml-1 w-full">Enabled</p>
</Switch>
</FormControl>
);
}}
/>
<div className="mt-8 flex items-center">
<Button
className="mr-4"
size="sm"
type="submit"
isLoading={isSubmitting}
isDisabled={isSubmitting}
>
Save
</Button>
<Button
colorSchema="secondary"
variant="plain"
onClick={() => handlePopUpToggle("enrollmentOptions", false)}
>
Cancel
</Button>
</div>
</form>
</ModalContent>
</Modal>
);
};