Certificates section react work

frontend/src/modals/CustomCertificateModal.tsx

@@ -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 };