TLS/SSL

client/src/Components/v2/inputs/Switch.tsx

@@ -0,0 +1,37 @@
+import { forwardRef } from "react";
+import Switch from "@mui/material/Switch";
+import type { SwitchProps } from "@mui/material/Switch";
+import { useTheme } from "@mui/material/styles";
+
+export const SwitchComponent = forwardRef<HTMLInputElement, SwitchProps>(
+	function SwitchComponent({ sx, ...props }, ref) {
+		const theme = useTheme();
+		const additionalSx = Array.isArray(sx) ? sx : sx ? [sx] : [];
+
+		return (
+			<Switch
+				{...props}
+				slotProps={{
+					input: {
+						ref: ref,
+					},
+				}}
+				sx={[
+					{
+						"& .MuiSwitch-switchBase": {
+							"&.Mui-checked": {
+								color: "#E0E0E0",
+								"& + .MuiSwitch-track": {
+									backgroundColor: theme.palette.primary.main,
+									opacity: 1,
+									border: 0,
+								},
+							},
+						},
+					},
+					...additionalSx,
+				]}
+			/>
+		);
+	}
+);

client/src/Components/v2/inputs/index.tsx

@@ -10,3 +10,4 @@ export {
 } from "./ToggleButton";
 export { DialogInput as Dialog } from "./Dialog";
 export * from "./Radio";
+export * from "./Switch";

client/src/Pages/CreateMonitor/index.tsx

@@ -21,6 +21,7 @@ import {
 	TextField,
 	Select,
 	Autocomplete,
+	SwitchComponent as Switch,
 } from "@/Components/v2/inputs";
 import { useGet } from "@/Hooks/UseApi";
 import { useMonitorForm } from "@/Hooks/useMonitorForm";
@@ -396,6 +397,35 @@ const CreateMonitorPage = () => {
 				}
 			/>
 
+			{/* TLS/SSL ConfigBox - only for HTTP monitors */}
+			{watchedType === "http" && (
+				<ConfigBox
+					title={t("pages.createMonitor.form.ignoreTls.title")}
+					subtitle={t("pages.createMonitor.form.ignoreTls.description")}
+					rightContent={
+						<Controller
+							name="ignoreTlsErrors"
+							control={control}
+							render={({ field }) => (
+								<Stack
+									direction="row"
+									alignItems="center"
+									spacing={theme.spacing(2)}
+								>
+									<Switch
+										checked={field.value ?? false}
+										onChange={(e) => field.onChange(e.target.checked)}
+									/>
+									<Typography>
+										{t("pages.createMonitor.form.ignoreTls.option.tls.label")}
+									</Typography>
+								</Stack>
+							)}
+						/>
+					}
+				/>
+			)}
+
 			{/* Submit Button */}
 			<Stack
 				direction="row"

client/src/locales/en.json

@@ -278,6 +278,15 @@
 				"notifications": {
 					"title": "Notifications",
 					"description": "Select the notification channels you want to use"
+				},
+				"ignoreTls": {
+					"title": "TLS/SSL settings",
+					"description": "Configure TLS/SSL certificate validation for HTTPS connections.",
+					"option": {
+						"tls": {
+							"label": "Ignore TLS/SSL errors"
+						}
+					}
 				}
 			}
 		},