- Update logo handling and validation

- Update card initialization

Client/src/Components/TabPanels/Status/ContentPanel.jsx

@@ -38,13 +38,15 @@ const ContentPanel = () => {
 				}
 				const fullMonitors = response.data.data.monitors ;
 				setMonitors(fullMonitors);
-				if (form.monitors.length > 0)
-					setCards(
-						form.monitors.map((mid, idx) => ({
-							id: "" + idx,
-							val: fullMonitors.filter((fM) => fM._id == mid)[0],
-						}))
-					);
+				if (form.monitors.length > 0) {
+					const initiCards = form.monitors.map((mid, idx) => ({
+						id: "" + idx,
+						val: fullMonitors.filter((fM) =>
+							mid._id ? fM._id == mid._id : fM._id == mid
+						)[0],
+					}));
+					setCards(initiCards);
+				}
 			} catch (error) {
 				createToast({ body: "Failed to fetch monitors data" });
 				logger.error("Failed to fetch monitors", error);
@@ -92,7 +94,7 @@ const ContentPanel = () => {
 	};
 	const handleAddNew = () => {
 		if (cards.length === monitors.length) return;
-		const newCards = [...cards, { id: "" + Math.random() }];
+		const newCards = [...cards, { id: "" + Math.random(),val:{} }];
 		setCards(newCards);
 	};
 	const removeCard = (id) => {

Client/src/Components/TabPanels/Status/GeneralSettingsPanel.jsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useContext } from "react";
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography } from "@mui/material";
 import ConfigBox  from "../../../Components/ConfigBox";
 import { useTheme } from "@emotion/react";
 import TabPanel from "@mui/lab/TabPanel";
@@ -24,8 +24,9 @@ import { StatusFormContext } from "../../../Pages/Status/CreateStatusContext";
  */
 const GeneralSettingsPanel = () => {
 	const theme = useTheme();	
-	const [logo, setLogo] = useState();
 	const { form, setForm, errors, setErrors  } = useContext(StatusFormContext);
+	const [logo, setLogo] = useState(form.logo);
+
 	const [progress, setProgress] = useState({ value: 0, isLoading: false });
 	const intervalRef = useRef(null);
 
@@ -95,6 +96,12 @@ const GeneralSettingsPanel = () => {
 			type: pic.type,
 			size: pic.size,
 		});
+		setForm({...form, logo: {
+			src: URL.createObjectURL(pic),
+			name: pic.name,
+			type: pic.type,
+			size: pic.size,
+		}})
 		intervalRef.current = setInterval(() => {
 			const buffer = 12;
 			setProgress((prev) => {
@@ -169,7 +176,12 @@ const GeneralSettingsPanel = () => {
 							type="url"
 							label="SubURL"
 							value={form.url}
-							startAdornment={<HttpAdornment prefix = {"http://uptimegenie.com/"} https={false} />}
+							startAdornment={
+								<HttpAdornment
+									prefix={"http://uptimegenie.com/"}
+									https={false}
+								/>
+							}
 							onChange={handleChange}
 							onBlur={handleBlur}
 							helperText={errors["url"]}
@@ -212,6 +224,19 @@ const GeneralSettingsPanel = () => {
 								onClick={removeLogo}
 								error={errors["logo"]}
 							/>
+						) : logo && logo.type ? (
+							<Button
+								variant="contained"
+								color="secondary"
+								onClick={removeLogo}
+								sx={{
+									width: "100%",
+									maxWidth:"200px",
+									alignSelf: "center"
+								}}
+							>
+								Remove Logo
+							</Button>
 						) : (
 							""
 						)}

Client/src/Pages/Status/CreateStatus/index.jsx

@@ -67,8 +67,6 @@ import { networkService } from "../../../main";
 
 	const handleSubmit = async (e) => {
 		e.preventDefault();
-		//validate rest of the form
-		delete form.logo;
 		let localData = {
 			...form,
 			monitors:
@@ -76,17 +74,13 @@ import { networkService } from "../../../main";
 					? form.monitors.map((m) => m._id)
 					: form.monitors,
 			theme: mode,
+			logo: { type: form.logo?.type ?? "", size: form.logo?.size ?? "" },
 		};
+		//delete localData.logo
 		if (hasValidationErrors(localData, publicPageGeneralSettingsValidation, setErrors)) {
 			setActiveTabOnErrors();
 			return;
 		}
-		// //validate image field, double check if it is required
-		// let error = validateField(
-		// 	{ type: logo?.type ?? null, size: logo?.size ?? null },
-		// 	logoImageValidation
-		// );
-		//		if (error) return;
 
 		//form.logo = { ...logo, size: formatBytes(logo?.size) };
 		let config = { authToken: authToken, url: "status-page", data: localData };

Client/src/Validation/validation.js

@@ -159,7 +159,6 @@ const publicPageGeneralSettingsValidation = joi.object({
 	url: joi.string().trim().messages({ "string.empty": "URL is required." }),
 	timezone: joi.string().trim().messages({ "string.empty": "Timezone is required." }),
 	color: joi.string().trim().messages({ "string.empty": "Color is required." }),
-
 	theme: joi.string(),
 	monitors: joi.array().min(1).items(joi.string().required()).messages({
 		"string.pattern.base": "Must be a valid monitor ID",
@@ -167,6 +166,7 @@ const publicPageGeneralSettingsValidation = joi.object({
 		"array.empty": "At least one monitor is required",
 		"any.required": "Monitors are required",
 	}),
+	logo: logoImageValidation
 });
 const settingsValidation = joi.object({
 	ttl: joi.number().required().messages({