Merge pull request #2220 from Br0wnHammer/feat/fe/uptime-ignore-tsl-error

Feat: Ignore TLS/SSL Error Option

Author: ajhollid

client/src/Pages/Uptime/Create/index.jsx

@@ -13,6 +13,8 @@ import { getUptimeMonitorById } from "../../../Features/UptimeMonitors/uptimeMon
 import { createUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 // MUI
 import { Box, Stack, Typography, Button, ButtonGroup } from "@mui/material";
+import Switch from "@mui/material/Switch";
+import FormControlLabel from "@mui/material/FormControlLabel";
 
 //Components
 import Breadcrumbs from "../../../Components/Breadcrumbs";
@@ -92,6 +94,7 @@ const CreateMonitor = () => {
 		url: "",
 		name: "",
 		type: "http",
+		ignoreTlsErrors: false,
 		notifications: [],
 		interval: 1,
 	});
@@ -107,6 +110,7 @@ const CreateMonitor = () => {
 			port: monitor.type === "port" ? monitor.port : undefined,
 			name: monitor.name || monitor.url.substring(0, 50),
 			type: monitor.type,
+			ignoreTlsErrors: monitor.ignoreTlsErrors,
 			interval: monitor.interval * MS_PER_MINUTE,
 		};
 
@@ -130,19 +134,6 @@ const CreateMonitor = () => {
 			return;
 		}
 
-		if (monitor.type === "http") {
-			// const checkEndpointAction = await dispatch(
-			// 	checkEndpointResolution({ monitorURL: form.url })
-			// );
-			// if (checkEndpointAction.meta.requestStatus === "rejected") {
-			// 	createToast({
-			// 		body: "The endpoint you entered doesn't resolve. Check the URL again.",
-			// 	});
-			// 	setErrors({ url: "The entered URL is not reachable." });
-			// 	return;
-			// }
-		}
-
 		form = {
 			...form,
 			description: monitor.name || monitor.url,
@@ -160,19 +151,21 @@ const CreateMonitor = () => {
 	};
 
 	const handleChange = (event, formName) => {
-		const { value } = event.target;
+		const { type, checked, value } = event.target;
+
+		const newVal = type === "checkbox" ? checked : value;
 
 		const newMonitor = {
 			...monitor,
-			[formName]: value,
+			[formName]: newVal,
 		};
 		if (formName === "type") {
 			newMonitor.url = "";
 		}
 		setMonitor(newMonitor);
 
 		const { error } = monitorValidation.validate(
-			{ type: monitor.type, [formName]: value },
+			{ type: monitor.type, [formName]: newVal },
 			{ abortEarly: false }
 		);
 		setErrors((prev) => ({
@@ -422,6 +415,25 @@ const CreateMonitor = () => {
 						</Box>
 					</Stack>
 				</ConfigBox>
+				<ConfigBox>
+					<Box>
+						<Typography component="h2">{t("ignoreTLSError")}</Typography>
+						<Typography component="p">{t("ignoreTLSErrorDescription")}</Typography>
+					</Box>
+					<Stack>
+						<FormControlLabel
+							control={
+								<Switch
+									name="ignore-error"
+									checked={monitor.ignoreTlsErrors}
+									onChange={(event) => handleChange(event, "ignoreTlsErrors")}
+									sx={{ mr: theme.spacing(2) }}
+								/>
+							}
+							label={t("tlsErrorIgnored")}
+						/>
+					</Stack>
+				</ConfigBox>
 				<ConfigBox>
 					<Box>
 						<Typography component="h2">

client/src/Utils/Theme/globalTheme.js

@@ -463,8 +463,32 @@ const baseTheme = (palette) => ({
 		MuiSwitch: {
 			styleOverrides: {
 				root: ({ theme }) => ({
+					width: 42,
+					height: 26,
+					padding: 0,
+					"& .MuiSwitch-switchBase": {
+						padding: 0,
+						margin: 2,
+						transitionDuration: "300ms",
+						"&.Mui-checked": {
+							transform: "translateX(16px)",
+							color: "#fff",
+							"& + .MuiSwitch-track": {
+								backgroundColor: theme.palette.accent.main,
+								opacity: 1,
+								border: 0,
+							},
+						},
+					},
+					"& .MuiSwitch-thumb": {
+						boxSizing: "border-box",
+						width: 22,
+						height: 22,
+					},
 					"& .MuiSwitch-track": {
-						backgroundColor: theme.palette.primary.contrastText,
+						borderRadius: 13,
+						backgroundColor: theme.palette.secondary.light,
+						opacity: 1,
 					},
 				}),
 			},

client/src/Validation/validation.js

@@ -170,6 +170,7 @@ const monitorValidation = joi.object({
 		"string.max": "This field should not exceed the 50 characters limit.",
 	}),
 	type: joi.string().trim().messages({ "string.empty": "This field is required." }),
+	ignoreTlsErrors: joi.boolean(),
 	interval: joi.number().messages({
 		"number.base": "Frequency must be a number.",
 		"any.required": "Frequency is required.",

client/src/locales/gb.json

@@ -403,9 +403,12 @@
   "DragandDrop": "drag and drop",
   "MaxSize": "Maximum Size",
   "SupportedFormats": "Supported formats",
-  "FirstName": "Name",
-  "LastName": "Surname",
-  "EmailDescriptionText": "Your current email—it cannot be changed.",
+  "FirstName": "First name",
+  "LastName": "Last name",
+  "EmailDescriptionText": "This is your current email address — it cannot be changed.",
+  "ignoreTLSError": "Ignore TLS/SSL error",
+  "tlsErrorIgnored": "TLS/SSL errors ignored",
+  "ignoreTLSErrorDescription": "Ignore TLS/SSL errors and continue checking the website's availability",
   "YourPhoto": "Profile photo",
   "PhotoDescriptionText": "This photo will be displayed in your profile page.",
   "save": "Save",