Basis for Certificate modal

frontend/src/locale/src/de.json

@@ -347,6 +347,30 @@
 	"theme.to-light": {
 		"defaultMessage": "Wechseln Sie zum Lichtdesign"
 	},
+	"type.custom": {
+		"defaultMessage": "Custom"
+	},
+	"type.dead": {
+		"defaultMessage": "404 Host"
+	},
+	"type.dns": {
+		"defaultMessage": "DNS"
+	},
+	"type.http": {
+		"defaultMessage": "HTTP"
+	},
+	"type.proxy": {
+		"defaultMessage": "Proxy Host"
+	},
+	"type.redirect": {
+		"defaultMessage": "Redirection"
+	},
+	"type.stream": {
+		"defaultMessage": "Stream"
+	},
+	"type.upstream": {
+		"defaultMessage": "Upstream"
+	},
 	"unhealthy.body": {
 		"defaultMessage": "Wir werden weiterhin den Zustand überprüfen und hoffen, bald wieder einsatzbereit zu sein!"
 	},

frontend/src/locale/src/en.json

@@ -626,6 +626,9 @@
 	"theme.to-light": {
 		"defaultMessage": "Switch to light theme"
 	},
+	"type.custom": {
+		"defaultMessage": "Custom"
+	},
 	"type.dead": {
 		"defaultMessage": "404 Host"
 	},

frontend/src/locale/src/fa.json

@@ -350,6 +350,30 @@
 	"theme.to-light": {
 		"defaultMessage": "به طرح زمینه روشن تغییر دهید"
 	},
+	"type.custom": {
+		"defaultMessage": "Custom"
+	},
+	"type.dead": {
+		"defaultMessage": "404 Host"
+	},
+	"type.dns": {
+		"defaultMessage": "DNS"
+	},
+	"type.http": {
+		"defaultMessage": "HTTP"
+	},
+	"type.proxy": {
+		"defaultMessage": "Proxy Host"
+	},
+	"type.redirect": {
+		"defaultMessage": "Redirection"
+	},
+	"type.stream": {
+		"defaultMessage": "Stream"
+	},
+	"type.upstream": {
+		"defaultMessage": "Upstream"
+	},
 	"unhealthy.body": {
 		"defaultMessage": "ما همچنان به بررسی وضعیت سلامتی خود ادامه خواهیم داد و امیدواریم به زودی دوباره راه اندازی شده و کار کنیم!"
 	},

frontend/src/modals/CertificateCreateModal/CertificateCreateModal.tsx

@@ -24,6 +24,8 @@ import { useSetCertificate } from "hooks";
 import { intl } from "locale";
 import { validateString } from "modules/Validations";
 
+import HTTPForm from "./HTTPForm";
+
 interface CertificateCreateModalProps {
 	isOpen: boolean;
 	onClose: () => void;
@@ -104,13 +106,18 @@ function CertificateCreateModal({
 										<ButtonGroup style={{ width: "100%" }}>
 											<Button
 												onClick={() => setCertType("http")}
-												style={{ width: "50%" }}>
-												HTTP
+												style={{ width: "33%" }}>
+												{intl.formatMessage({ id: "type.http" })}
 											</Button>
 											<Button
 												onClick={() => setCertType("dns")}
-												style={{ width: "50%" }}>
-												DNS
+												style={{ width: "34%" }}>
+												{intl.formatMessage({ id: "type.dns" })}
+											</Button>
+											<Button
+												onClick={() => setCertType("custom")}
+												style={{ width: "33%" }}>
+												{intl.formatMessage({ id: "type.custom" })}
 											</Button>
 										</ButtonGroup>
 									</FormControl>
@@ -143,6 +150,8 @@ function CertificateCreateModal({
 										</Field>
 									</Stack>
 								) : null}
+
+								{certType === "http" ? <HTTPForm /> : null}
 							</ModalBody>
 							<ModalFooter>
 								{certType !== "" ? (

frontend/src/modals/CertificateCreateModal/CustomForm.tsx

@@ -0,0 +1,5 @@
+function CustomForm() {
+	return <p>Custom form</p>;
+}
+
+export default CustomForm;

frontend/src/modals/CertificateCreateModal/DNSForm.tsx

@@ -0,0 +1,5 @@
+function DNSForm() {
+	return <p>DNS form</p>;
+}
+
+export default DNSForm;

frontend/src/modals/CertificateCreateModal/HTTPForm.tsx

@@ -0,0 +1,5 @@
+function HTTPForm() {
+	return <p>Http form</p>;
+}
+
+export default HTTPForm;

frontend/src/modals/CertificateCreateModal/index.ts

@@ -0,0 +1 @@
+export * from "./CertificateCreateModal";