Mirrored_Repos/nginx-proxy-manager
1
0
Fork 0
mirror of https://github.com/jc21/nginx-proxy-manager.git synced 2024-08-30 18:22:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Basis for create certificate dialog

Browse Source
This commit is contained in:
Jamie Curnow 2023-01-16 16:13:38 +10:00
parent 374447ccc7
commit 1b61176818
1 changed files with 64 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
frontend/src/modals/CertificateCreateModal.tsx
View File

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