mirror of
https://github.com/NginxProxyManager/nginx-proxy-manager.git
synced 2025-11-01 08:13:34 +00:00
Certificates section react work
This commit is contained in:
Jamie Curnow
88
frontend/src/modals/CustomCertificateModal.tsx
Normal file
88
frontend/src/modals/CustomCertificateModal.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import EasyModal, { type InnerModalProps } from "ez-modal-react";
|
||||
import { 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 { T } from "src/locale";
|
||||
import { showObjectSuccess } from "src/notifications";
|
||||
|
||||
const showCustomCertificateModal = () => {
|
||||
EasyModal.show(CustomCertificateModal);
|
||||
};
|
||||
|
||||
const CustomCertificateModal = EasyModal.create(({ visible, remove }: InnerModalProps) => {
|
||||
const { mutate: setProxyHost } = useSetProxyHost();
|
||||
const [errorMsg, setErrorMsg] = useState<ReactNode | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const onSubmit = async (values: any, { setSubmitting }: any) => {
|
||||
if (isSubmitting) return;
|
||||
setIsSubmitting(true);
|
||||
setErrorMsg(null);
|
||||
|
||||
setProxyHost(values, {
|
||||
onError: (err: any) => setErrorMsg(<T id={err.message} />),
|
||||
onSuccess: () => {
|
||||
showObjectSuccess("certificate", "saved");
|
||||
remove();
|
||||
},
|
||||
onSettled: () => {
|
||||
setIsSubmitting(false);
|
||||
setSubmitting(false);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal show={visible} onHide={remove}>
|
||||
<Formik
|
||||
initialValues={
|
||||
{
|
||||
domainNames: [],
|
||||
} as any
|
||||
}
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
{() => (
|
||||
<Form>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>
|
||||
<T id="object.add" tData={{ object: "certificate" }} />
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body className="p-0">
|
||||
<Alert variant="danger" show={!!errorMsg} onClose={() => setErrorMsg(null)} dismissible>
|
||||
{errorMsg}
|
||||
</Alert>
|
||||
<div className="card m-0 border-0">
|
||||
<div className="card-header">asd</div>
|
||||
<div className="card-body">
|
||||
<DomainNamesField />
|
||||
</div>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button data-bs-dismiss="modal" onClick={remove} disabled={isSubmitting}>
|
||||
<T id="cancel" />
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
actionType="primary"
|
||||
className="ms-auto bg-lime"
|
||||
data-bs-dismiss="modal"
|
||||
isLoading={isSubmitting}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
<T id="save" />
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
export { showCustomCertificateModal };
|
||||
89
frontend/src/modals/DNSCertificateModal.tsx
Normal file
89
frontend/src/modals/DNSCertificateModal.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import EasyModal, { type InnerModalProps } from "ez-modal-react";
|
||||
import { Form, Formik } from "formik";
|
||||
import { type ReactNode, useState } from "react";
|
||||
import { Alert } from "react-bootstrap";
|
||||
import Modal from "react-bootstrap/Modal";
|
||||
import { createCertificate } from "src/api/backend";
|
||||
import { Button, DNSProviderFields, DomainNamesField } from "src/components";
|
||||
import { T } from "src/locale";
|
||||
import { showObjectSuccess } from "src/notifications";
|
||||
|
||||
const showDNSCertificateModal = () => {
|
||||
EasyModal.show(DNSCertificateModal);
|
||||
};
|
||||
|
||||
const DNSCertificateModal = EasyModal.create(({ visible, remove }: InnerModalProps) => {
|
||||
const queryClient = useQueryClient();
|
||||
const [errorMsg, setErrorMsg] = useState<ReactNode | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const onSubmit = async (values: any, { setSubmitting }: any) => {
|
||||
if (isSubmitting) return;
|
||||
setIsSubmitting(true);
|
||||
setErrorMsg(null);
|
||||
|
||||
try {
|
||||
await createCertificate(values);
|
||||
showObjectSuccess("certificate", "saved");
|
||||
remove();
|
||||
} catch (err: any) {
|
||||
setErrorMsg(<T id={err.message} />);
|
||||
}
|
||||
queryClient.invalidateQueries({ queryKey: ["certificates"] });
|
||||
setIsSubmitting(false);
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal show={visible} onHide={remove}>
|
||||
<Formik
|
||||
initialValues={
|
||||
{
|
||||
domainNames: [],
|
||||
provider: "letsencrypt",
|
||||
} as any
|
||||
}
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
{() => (
|
||||
<Form>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>
|
||||
<T id="object.add" tData={{ object: "lets-encrypt-via-dns" }} />
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body className="p-0">
|
||||
<Alert variant="danger" show={!!errorMsg} onClose={() => setErrorMsg(null)} dismissible>
|
||||
{errorMsg}
|
||||
</Alert>
|
||||
<div className="card m-0 border-0">
|
||||
<div className="card-body">
|
||||
<DomainNamesField isWildcardPermitted dnsProviderWildcardSupported />
|
||||
<DNSProviderFields />
|
||||
</div>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button data-bs-dismiss="modal" onClick={remove} disabled={isSubmitting}>
|
||||
<T id="cancel" />
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
actionType="primary"
|
||||
className="ms-auto bg-pink"
|
||||
data-bs-dismiss="modal"
|
||||
isLoading={isSubmitting}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
<T id="save" />
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
export { showDNSCertificateModal };
|
||||
@@ -131,7 +131,7 @@ const DeadHostModal = EasyModal.create(({ id, visible, remove }: Props) => {
|
||||
<div className="card-body">
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane active show" id="tab-details" role="tabpanel">
|
||||
<DomainNamesField isWildcardPermitted />
|
||||
<DomainNamesField isWildcardPermitted dnsProviderWildcardSupported />
|
||||
</div>
|
||||
<div className="tab-pane" id="tab-ssl" role="tabpanel">
|
||||
<SSLCertificateField
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import CodeEditor from "@uiw/react-textarea-code-editor";
|
||||
import EasyModal, { type InnerModalProps } from "ez-modal-react";
|
||||
import { Alert } from "react-bootstrap";
|
||||
import Modal from "react-bootstrap/Modal";
|
||||
@@ -39,9 +40,22 @@ const EventDetailsModal = EasyModal.create(({ id, visible, remove }: Props) => {
|
||||
<EventFormatter row={data} />
|
||||
</div>
|
||||
<hr className="mt-4 mb-3" />
|
||||
<pre>
|
||||
<code>{JSON.stringify(data.meta, null, 2)}</code>
|
||||
</pre>
|
||||
<CodeEditor
|
||||
language="json"
|
||||
padding={15}
|
||||
data-color-mode="dark"
|
||||
minHeight={200}
|
||||
indentWidth={2}
|
||||
style={{
|
||||
fontFamily:
|
||||
"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
|
||||
borderRadius: "0.3rem",
|
||||
minHeight: "200px",
|
||||
backgroundColor: "var(--tblr-bg-surface-dark)",
|
||||
}}
|
||||
readOnly
|
||||
value={JSON.stringify(data.meta, null, 2)}
|
||||
/>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
|
||||
188
frontend/src/modals/HTTPCertificateModal.tsx
Normal file
188
frontend/src/modals/HTTPCertificateModal.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
import { IconAlertTriangle } from "@tabler/icons-react";
|
||||
import EasyModal, { type InnerModalProps } from "ez-modal-react";
|
||||
import { Form, Formik } from "formik";
|
||||
import { type ReactNode, useState } from "react";
|
||||
import { Alert } from "react-bootstrap";
|
||||
import Modal from "react-bootstrap/Modal";
|
||||
import { createCertificate, testHttpCertificate } from "src/api/backend";
|
||||
import { Button, DomainNamesField } from "src/components";
|
||||
import { T } from "src/locale";
|
||||
import { showObjectSuccess } from "src/notifications";
|
||||
|
||||
const showHTTPCertificateModal = () => {
|
||||
EasyModal.show(HTTPCertificateModal);
|
||||
};
|
||||
|
||||
const HTTPCertificateModal = EasyModal.create(({ visible, remove }: InnerModalProps) => {
|
||||
const [errorMsg, setErrorMsg] = useState<ReactNode | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [domains, setDomains] = useState([] as string[]);
|
||||
const [isTesting, setIsTesting] = useState(false);
|
||||
const [testResults, setTestResults] = useState(null as Record<string, string> | null);
|
||||
|
||||
const onSubmit = async (values: any, { setSubmitting }: any) => {
|
||||
if (isSubmitting) return;
|
||||
setIsSubmitting(true);
|
||||
setErrorMsg(null);
|
||||
|
||||
try {
|
||||
await createCertificate(values);
|
||||
showObjectSuccess("certificate", "saved");
|
||||
remove();
|
||||
} catch (err: any) {
|
||||
setErrorMsg(<T id={err.message} />);
|
||||
}
|
||||
setIsSubmitting(false);
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
const handleTest = async () => {
|
||||
setIsTesting(true);
|
||||
setErrorMsg(null);
|
||||
setTestResults(null);
|
||||
try {
|
||||
const result = await testHttpCertificate(domains);
|
||||
setTestResults(result);
|
||||
} catch (err: any) {
|
||||
setErrorMsg(<T id={err.message} />);
|
||||
}
|
||||
setIsTesting(false);
|
||||
};
|
||||
|
||||
const parseTestResults = () => {
|
||||
const elms = [];
|
||||
for (const domain in testResults) {
|
||||
const status = testResults[domain];
|
||||
if (status === "ok") {
|
||||
elms.push(
|
||||
<p>
|
||||
<strong>{domain}:</strong> <T id="certificates.http.reachability-ok" />
|
||||
</p>,
|
||||
);
|
||||
} else {
|
||||
if (status === "no-host") {
|
||||
elms.push(
|
||||
<p>
|
||||
<strong>{domain}:</strong> <T id="certificates.http.reachability-not-resolved" />
|
||||
</p>,
|
||||
);
|
||||
} else if (status === "failed") {
|
||||
elms.push(
|
||||
<p>
|
||||
<strong>{domain}:</strong> <T id="certificates.http.reachability-failed-to-check" />
|
||||
</p>,
|
||||
);
|
||||
} else if (status === "404") {
|
||||
elms.push(
|
||||
<p>
|
||||
<strong>{domain}:</strong> <T id="certificates.http.reachability-404" />
|
||||
</p>,
|
||||
);
|
||||
} else if (status === "wrong-data") {
|
||||
elms.push(
|
||||
<p>
|
||||
<strong>{domain}:</strong> <T id="certificates.http.reachability-wrong-data" />
|
||||
</p>,
|
||||
);
|
||||
} else if (status.startsWith("other:")) {
|
||||
const code = status.substring(6);
|
||||
elms.push(
|
||||
<p>
|
||||
<strong>{domain}:</strong> <T id="certificates.http.reachability-other" data={{ code }} />
|
||||
</p>,
|
||||
);
|
||||
} else {
|
||||
// This should never happen
|
||||
elms.push(
|
||||
<p>
|
||||
<strong>{domain}:</strong> ?
|
||||
</p>,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return <>{elms}</>;
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal show={visible} onHide={remove}>
|
||||
<Formik
|
||||
initialValues={
|
||||
{
|
||||
domainNames: [],
|
||||
provider: "letsencrypt",
|
||||
} as any
|
||||
}
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
{() => (
|
||||
<Form>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>
|
||||
<T id="object.add" tData={{ object: "lets-encrypt-via-http" }} />
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body className="p-0">
|
||||
<Alert variant="danger" show={!!errorMsg} onClose={() => setErrorMsg(null)} dismissible>
|
||||
{errorMsg}
|
||||
</Alert>
|
||||
<div className="card m-0 border-0">
|
||||
<div className="card-body">
|
||||
<p className="text-warning">
|
||||
<IconAlertTriangle size={16} className="me-1" />
|
||||
<T id="certificates.http.warning" />
|
||||
</p>
|
||||
<DomainNamesField
|
||||
onChange={(doms) => {
|
||||
setDomains(doms);
|
||||
setTestResults(null);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{testResults ? (
|
||||
<div className="card-footer">
|
||||
<h5>
|
||||
<T id="certificates.http.test-results" />
|
||||
</h5>
|
||||
{parseTestResults()}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button data-bs-dismiss="modal" onClick={remove} disabled={isSubmitting || isTesting}>
|
||||
<T id="cancel" />
|
||||
</Button>
|
||||
<div className="ms-auto">
|
||||
<Button
|
||||
type="button"
|
||||
actionType="secondary"
|
||||
className="me-3"
|
||||
data-bs-dismiss="modal"
|
||||
isLoading={isTesting}
|
||||
disabled={isSubmitting || domains.length === 0}
|
||||
onClick={handleTest}
|
||||
>
|
||||
<T id="test" />
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
actionType="primary"
|
||||
className="bg-pink"
|
||||
data-bs-dismiss="modal"
|
||||
isLoading={isSubmitting}
|
||||
disabled={isSubmitting || isTesting}
|
||||
>
|
||||
<T id="save" />
|
||||
</Button>
|
||||
</div>
|
||||
</Modal.Footer>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
export { showHTTPCertificateModal };
|
||||
@@ -159,7 +159,7 @@ const ProxyHostModal = EasyModal.create(({ id, visible, remove }: Props) => {
|
||||
<div className="card-body">
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane active show" id="tab-details" role="tabpanel">
|
||||
<DomainNamesField isWildcardPermitted />
|
||||
<DomainNamesField isWildcardPermitted dnsProviderWildcardSupported />
|
||||
<div className="row">
|
||||
<div className="col-md-3">
|
||||
<Field name="forwardScheme">
|
||||
|
||||
@@ -144,7 +144,7 @@ const RedirectionHostModal = EasyModal.create(({ id, visible, remove }: Props) =
|
||||
<div className="card-body">
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane active show" id="tab-details" role="tabpanel">
|
||||
<DomainNamesField isWildcardPermitted />
|
||||
<DomainNamesField isWildcardPermitted dnsProviderWildcardSupported />
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<Field name="forwardScheme">
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
export * from "./AccessListModal";
|
||||
export * from "./ChangePasswordModal";
|
||||
export * from "./CustomCertificateModal";
|
||||
export * from "./DeadHostModal";
|
||||
export * from "./DeleteConfirmModal";
|
||||
export * from "./DNSCertificateModal";
|
||||
export * from "./EventDetailsModal";
|
||||
export * from "./HTTPCertificateModal";
|
||||
export * from "./PermissionsModal";
|
||||
export * from "./ProxyHostModal";
|
||||
export * from "./RedirectionHostModal";
|
||||
|
||||
Reference in New Issue
Block a user