Basis for create certificate dialog
This commit is contained in:
parent
374447ccc7
commit
1b61176818
@ -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,35 +96,61 @@ function CertificateCreateModal({
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Stack spacing={4}>
|
||||
<Field name="name" validate={validateString(1, 100)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={form.errors.name && form.touched.name}>
|
||||
<FormLabel htmlFor="name">
|
||||
{intl.formatMessage({
|
||||
id: "name",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="name"
|
||||
placeholder={intl.formatMessage({
|
||||
id: "name",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>{form.errors.name}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
</Stack>
|
||||
{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) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={form.errors.name && form.touched.name}>
|
||||
<FormLabel htmlFor="name">
|
||||
{intl.formatMessage({
|
||||
id: "name",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="name"
|
||||
placeholder={intl.formatMessage({
|
||||
id: "name",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.name}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
</Stack>
|
||||
) : null}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<PrettyButton mr={3} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.save" })}
|
||||
</PrettyButton>
|
||||
<Button onClick={onClose} isLoading={isSubmitting}>
|
||||
{certType !== "" ? (
|
||||
<PrettyButton mr={3} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.save" })}
|
||||
</PrettyButton>
|
||||
) : null}
|
||||
<Button onClick={onModalClose} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.cancel" })}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
|
Loading…
Reference in New Issue
Block a user