Basis for create certificate dialog

frontend/src/modals/CertificateCreateModal.tsx

@@ -1,5 +1,8 @@
+import { useState } from "react";
+
 import {
 	Button,
+	ButtonGroup,
 	FormControl,
 	FormErrorMessage,
 	FormLabel,
@@ -29,9 +32,15 @@ function CertificateCreateModal({
 	isOpen,
 	onClose,
 }: CertificateCreateModalProps) {
+	const [certType, setCertType] = useState("");
 	const toast = useToast();
 	const { mutate: setCertificate } = useSetCertificate();
 
+	const onModalClose = () => {
+		onClose();
+		setCertType("");
+	};
+
 	const onSubmit = async (
 		payload: Certificate,
 		{ setErrors, setSubmitting }: any,
@@ -60,13 +69,13 @@ function CertificateCreateModal({
 					showErr(err.message);
 				}
 			},
-			onSuccess: () => onClose(),
+			onSuccess: () => onModalClose(),
 			onSettled: () => setSubmitting(false),
 		});
 	};
 
 	return (
-		<Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
+		<Modal isOpen={isOpen} onClose={onModalClose} closeOnOverlayClick={false}>
 			<ModalOverlay />
 			<ModalContent>
 				<Formik
@@ -87,6 +96,27 @@ function CertificateCreateModal({
 							</ModalHeader>
 							<ModalCloseButton />
 							<ModalBody>
+								{certType === "" ? (
+									<FormControl>
+										<FormLabel htmlFor="type">
+											Select the Certificate Validation method
+										</FormLabel>
+										<ButtonGroup style={{ width: "100%" }}>
+											<Button
+												onClick={() => setCertType("http")}
+												style={{ width: "50%" }}>
+												HTTP
+											</Button>
+											<Button
+												onClick={() => setCertType("dns")}
+												style={{ width: "50%" }}>
+												DNS
+											</Button>
+										</ButtonGroup>
+									</FormControl>
+								) : null}
+
+								{certType !== "" ? (
 									<Stack spacing={4}>
 										<Field name="name" validate={validateString(1, 100)}>
 											{({ field, form }: any) => (
@@ -105,17 +135,22 @@ function CertificateCreateModal({
 															id: "name",
 														})}
 													/>
-												<FormErrorMessage>{form.errors.name}</FormErrorMessage>
+													<FormErrorMessage>
+														{form.errors.name}
+													</FormErrorMessage>
 												</FormControl>
 											)}
 										</Field>
 									</Stack>
+								) : null}
 							</ModalBody>
 							<ModalFooter>
+								{certType !== "" ? (
 									<PrettyButton mr={3} isLoading={isSubmitting}>
 										{intl.formatMessage({ id: "form.save" })}
 									</PrettyButton>
-								<Button onClick={onClose} isLoading={isSubmitting}>
+								) : null}
+								<Button onClick={onModalClose} isLoading={isSubmitting}>
 									{intl.formatMessage({ id: "form.cancel" })}
 								</Button>
 							</ModalFooter>