mirror of
https://github.com/NginxProxyManager/nginx-proxy-manager.git
synced 2025-11-01 16:23:33 +00:00
Custom certificate upload
This commit is contained in:
Jamie Curnow
@@ -1,11 +1,14 @@
|
||||
import { IconAlertTriangle } from "@tabler/icons-react";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import EasyModal, { type InnerModalProps } from "ez-modal-react";
|
||||
import { Form, Formik } from "formik";
|
||||
import { Field, Form, Formik } from "formik";
|
||||
import { type ReactNode, useState } from "react";
|
||||
import { Alert } from "react-bootstrap";
|
||||
import Modal from "react-bootstrap/Modal";
|
||||
import { Button, DomainNamesField } from "src/components";
|
||||
import { useSetProxyHost } from "src/hooks";
|
||||
import { type Certificate, createCertificate, uploadCertificate, validateCertificate } from "src/api/backend";
|
||||
import { Button } from "src/components";
|
||||
import { T } from "src/locale";
|
||||
import { validateString } from "src/modules/Validations";
|
||||
import { showObjectSuccess } from "src/notifications";
|
||||
|
||||
const showCustomCertificateModal = () => {
|
||||
@@ -13,7 +16,7 @@ const showCustomCertificateModal = () => {
|
||||
};
|
||||
|
||||
const CustomCertificateModal = EasyModal.create(({ visible, remove }: InnerModalProps) => {
|
||||
const { mutate: setProxyHost } = useSetProxyHost();
|
||||
const queryClient = useQueryClient();
|
||||
const [errorMsg, setErrorMsg] = useState<ReactNode | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
@@ -22,17 +25,35 @@ const CustomCertificateModal = EasyModal.create(({ visible, remove }: InnerModal
|
||||
setIsSubmitting(true);
|
||||
setErrorMsg(null);
|
||||
|
||||
setProxyHost(values, {
|
||||
onError: (err: any) => setErrorMsg(<T id={err.message} />),
|
||||
onSuccess: () => {
|
||||
showObjectSuccess("certificate", "saved");
|
||||
remove();
|
||||
},
|
||||
onSettled: () => {
|
||||
setIsSubmitting(false);
|
||||
setSubmitting(false);
|
||||
},
|
||||
});
|
||||
try {
|
||||
const { niceName, provider, certificate, certificateKey, intermediateCertificate } = values;
|
||||
const formData = new FormData();
|
||||
|
||||
formData.append("certificate", certificate);
|
||||
formData.append("certificate_key", certificateKey);
|
||||
if (intermediateCertificate !== null) {
|
||||
formData.append("intermediate_certificate", intermediateCertificate);
|
||||
}
|
||||
|
||||
// Validate
|
||||
await validateCertificate(formData);
|
||||
|
||||
// Create certificate, as other without anything else
|
||||
const cert = await createCertificate({ niceName, provider } as Certificate);
|
||||
|
||||
// Upload the certificates to the created certificate
|
||||
await uploadCertificate(cert.id, formData);
|
||||
|
||||
// Success
|
||||
showObjectSuccess("certificate", "saved");
|
||||
remove();
|
||||
} catch (err: any) {
|
||||
setErrorMsg(<T id={err.message} />);
|
||||
}
|
||||
|
||||
queryClient.invalidateQueries({ queryKey: ["certificates"] });
|
||||
setIsSubmitting(false);
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -40,7 +61,11 @@ const CustomCertificateModal = EasyModal.create(({ visible, remove }: InnerModal
|
||||
<Formik
|
||||
initialValues={
|
||||
{
|
||||
domainNames: [],
|
||||
niceName: "",
|
||||
provider: "other",
|
||||
certificate: null,
|
||||
certificateKey: null,
|
||||
intermediateCertificate: null,
|
||||
} as any
|
||||
}
|
||||
onSubmit={onSubmit}
|
||||
@@ -49,7 +74,7 @@ const CustomCertificateModal = EasyModal.create(({ visible, remove }: InnerModal
|
||||
<Form>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>
|
||||
<T id="object.add" tData={{ object: "certificate" }} />
|
||||
<T id="object.add" tData={{ object: "lets-encrypt-via-dns" }} />
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body className="p-0">
|
||||
@@ -57,9 +82,128 @@ const CustomCertificateModal = EasyModal.create(({ visible, remove }: InnerModal
|
||||
{errorMsg}
|
||||
</Alert>
|
||||
<div className="card m-0 border-0">
|
||||
<div className="card-header">asd</div>
|
||||
<div className="card-body">
|
||||
<DomainNamesField />
|
||||
<p className="text-warning">
|
||||
<IconAlertTriangle size={16} className="me-1" />
|
||||
<T id="certificates.custom.warning" />
|
||||
</p>
|
||||
<Field name="niceName" validate={validateString(1, 255)}>
|
||||
{({ field, form }: any) => (
|
||||
<div className="mb-3">
|
||||
<label htmlFor="niceName" className="form-label">
|
||||
<T id="column.name" />
|
||||
</label>
|
||||
<input
|
||||
id="niceName"
|
||||
type="text"
|
||||
required
|
||||
autoComplete="off"
|
||||
className="form-control"
|
||||
{...field}
|
||||
/>
|
||||
{form.errors.niceName ? (
|
||||
<div className="invalid-feedback">
|
||||
{form.errors.niceName && form.touched.niceName
|
||||
? form.errors.niceName
|
||||
: null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="certificateKey">
|
||||
{({ field, form }: any) => (
|
||||
<div className="mb-3">
|
||||
<label htmlFor="certificateKey" className="form-label">
|
||||
<T id="certificate.custom-certificate-key" />
|
||||
</label>
|
||||
<input
|
||||
id="certificateKey"
|
||||
type="file"
|
||||
required
|
||||
autoComplete="off"
|
||||
className="form-control"
|
||||
onChange={(event) => {
|
||||
form.setFieldValue(
|
||||
field.name,
|
||||
event.currentTarget.files?.length
|
||||
? event.currentTarget.files[0]
|
||||
: null,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{form.errors.certificateKey ? (
|
||||
<div className="invalid-feedback">
|
||||
{form.errors.certificateKey && form.touched.certificateKey
|
||||
? form.errors.certificateKey
|
||||
: null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="certificate">
|
||||
{({ field, form }: any) => (
|
||||
<div className="mb-3">
|
||||
<label htmlFor="certificate" className="form-label">
|
||||
<T id="certificate.custom-certificate" />
|
||||
</label>
|
||||
<input
|
||||
id="certificate"
|
||||
type="file"
|
||||
required
|
||||
autoComplete="off"
|
||||
className="form-control"
|
||||
onChange={(event) => {
|
||||
form.setFieldValue(
|
||||
field.name,
|
||||
event.currentTarget.files?.length
|
||||
? event.currentTarget.files[0]
|
||||
: null,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{form.errors.certificate ? (
|
||||
<div className="invalid-feedback">
|
||||
{form.errors.certificate && form.touched.certificate
|
||||
? form.errors.certificate
|
||||
: null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="intermediateCertificate">
|
||||
{({ field, form }: any) => (
|
||||
<div className="mb-3">
|
||||
<label htmlFor="intermediateCertificate" className="form-label">
|
||||
<T id="certificate.custom-intermediate" />
|
||||
</label>
|
||||
<input
|
||||
id="intermediateCertificate"
|
||||
type="file"
|
||||
autoComplete="off"
|
||||
className="form-control"
|
||||
onChange={(event) => {
|
||||
form.setFieldValue(
|
||||
field.name,
|
||||
event.currentTarget.files?.length
|
||||
? event.currentTarget.files[0]
|
||||
: null,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{form.errors.intermediateCertificate ? (
|
||||
<div className="invalid-feedback">
|
||||
{form.errors.intermediateCertificate &&
|
||||
form.touched.intermediateCertificate
|
||||
? form.errors.intermediateCertificate
|
||||
: null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
@@ -70,7 +214,7 @@ const CustomCertificateModal = EasyModal.create(({ visible, remove }: InnerModal
|
||||
<Button
|
||||
type="submit"
|
||||
actionType="primary"
|
||||
className="ms-auto bg-lime"
|
||||
className="ms-auto bg-pink"
|
||||
data-bs-dismiss="modal"
|
||||
isLoading={isSubmitting}
|
||||
disabled={isSubmitting}
|
||||
|
||||
Reference in New Issue
Block a user