From f3e222ac3a0aaa069851c807729be061a480a3df Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 27 Jun 2024 17:26:00 -0400 Subject: [PATCH] Added some basic validation --- Client/src/Pages/CreateNewMonitor/index.jsx | 135 +++++++++++++++----- Client/src/Validation/validation.js | 7 + 2 files changed, 109 insertions(+), 33 deletions(-) diff --git a/Client/src/Pages/CreateNewMonitor/index.jsx b/Client/src/Pages/CreateNewMonitor/index.jsx index 2ca0f0392..8f59f5225 100644 --- a/Client/src/Pages/CreateNewMonitor/index.jsx +++ b/Client/src/Pages/CreateNewMonitor/index.jsx @@ -5,34 +5,42 @@ import React, { useState } from "react"; import RadioButton from "../../Components/RadioButton"; import CustomizableCheckBox from "../../Components/Checkbox/CustomizableCheckbox"; import Button from "../../Components/Button"; -import { MenuItem, Select } from "@mui/material"; +import { MenuItem, Select, Typography } from "@mui/material"; +import { useSelector } from "react-redux"; +import { createMonitorValidation } from "../../Validation/validation"; const CreateNewMonitor = () => { + const { user } = useSelector((state) => state.auth); + const [errors, setErrors] = useState({}); + //General Settings Form const [generalSettings, setGeneralSettings] = useState({ url: "", name: "" }); //Checks Form - const [checks, setChecks] = useState({ type: "", port: "" }); - //Incidents Form - const [notifications, setNotifications] = useState({ - viaSms: false, - viaEmail: false, - viaOther: false, - email: "", + const [checks, setChecks] = useState({ + type: "", + // port: "" }); + //Incidents Form + // const [notifications, setNotifications] = useState({ + // viaSms: false, + // viaEmail: false, + // viaOther: false, + // email: "", + // }); //Advanced Settings Form const [advancedSettings, setAdvancedSettings] = useState({ frequency: "", - retries: "", - codes: "", - redirects: "", + // retries: "", + // codes: "", + // redirects: "", }); //Proxy Settings Form - const [proxy, setProxy] = useState({ - enabled: false, - protocol: "", - address: "", - proxy_port: "", - }); + // const [proxy, setProxy] = useState({ + // enabled: false, + // protocol: "", + // address: "", + // proxy_port: "", + // }); const handleChange = (event, id, setState, checkbox) => { const { value } = event.target; @@ -40,19 +48,59 @@ const CreateNewMonitor = () => { ...prev, [id]: checkbox ? true : value, })); + + const validation = createMonitorValidation.validate( + { [id]: value }, + { abortEarly: false } + ); + + setErrors((prev) => { + const updatedErrors = { ...prev }; + + if (validation.error) { + updatedErrors[id] = validation.error.details[0].message; + } else { + delete updatedErrors[id]; + } + return updatedErrors; + }); }; - const handleCheck = (id, setState) => { - setState((prev) => ({ - ...prev, - [id]: !prev[id], - })); + // const handleCheck = (id, setState) => { + // setState((prev) => ({ + // ...prev, + // [id]: !prev[id], + // })); + // }; + + const handleCreateNewMonitor = (event) => { + event.preventDefault(); + //obj to submit + const monitor = { + ...generalSettings, + ...advancedSettings, + userId: user._id, + ...checks, + }; + + const { error } = createMonitorValidation.validate(monitor, { + abortEarly: false, + }); + + if (error) { + const newErrors = {}; + error.details.forEach((err) => { + newErrors[err.path[0]] = err.message; + }); + setErrors(newErrors); + } else { + //TODO - submit logic + } }; - const handleCreateNewMonitor = () => { + console.log(errors); - } - - const ports = ["Port 1", "Port 2", "Port 3"]; + //select values + // const ports = ["Port 1", "Port 2", "Port 3"]; const frequencies = [1, 2, 3, 4, 5]; return ( @@ -81,6 +129,13 @@ const CreateNewMonitor = () => { handleChange(event, "url", setGeneralSettings) } /> + {errors["url"] ? ( + + {errors["url"]} + + ) : ( + "" + )}
{ handleChange(event, "name", setGeneralSettings) } /> + {errors["name"] ? ( + + {errors["name"]} + + ) : ( + "" + )} } /> @@ -113,8 +175,8 @@ const CreateNewMonitor = () => { title="HTTP/website monitoring" desc="Use HTTP(s) to monitor your website or API endpoint." value="http" - checked={checks.monitor === "http"} - onChange={(event) => handleChange(event, "monitor", setChecks)} + checked={checks.type === "http"} + onChange={(event) => handleChange(event, "type", setChecks)} />
{ title="Ping monitoring" desc="Check whether your server is available or not." value="ping" - checked={checks.monitor === "ping"} - onChange={(event) => handleChange(event, "monitor", setChecks)} + checked={checks.type === "ping"} + onChange={(event) => handleChange(event, "type", setChecks)} />
{/* TODO */} @@ -132,8 +194,8 @@ const CreateNewMonitor = () => { title="Port monitoring" desc="Monitor a specific service on your server." value="port" - checked={checks.monitor === "port"} - onChange={(event) => handleChange(event, "monitor", setChecks)} + checked={checks.type === "port"} + onChange={(event) => handleChange(event, "type", setChecks)} />
@@ -153,6 +215,13 @@ const CreateNewMonitor = () => { ))}
*/} + {errors["type"] ? ( + + {errors["type"]} + + ) : ( + "" + )} } /> @@ -320,7 +389,7 @@ const CreateNewMonitor = () => { level="primary" label="Create new monitor" sx={{ width: "210px", fontSize: "var(--env-var-font-size-medium)" }} - onClick={() => handleCreateNewMonitor()} + onClick={handleCreateNewMonitor} /> diff --git a/Client/src/Validation/validation.js b/Client/src/Validation/validation.js index d8bfd8ed1..802965870 100644 --- a/Client/src/Validation/validation.js +++ b/Client/src/Validation/validation.js @@ -132,7 +132,14 @@ const editPasswordValidation = joi.object({ }), }); +const createMonitorValidation = joi.object({ + url: joi.string().trim().messages({ "string.empty": "*Url is required." }), + name: joi.string().trim().messages({ "string.empty": "*Name is required." }), + type: joi.string().trim().messages({ "string.empty": "*Type is required." }), +}); + export { + createMonitorValidation, registerValidation, loginValidation, recoveryValidation,