diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css index c55e184c2..e2e5d4d56 100644 --- a/Client/src/Pages/Auth/index.css +++ b/Client/src/Pages/Auth/index.css @@ -101,7 +101,9 @@ /* ///// */ /* LOGIN */ /* ///// */ -.login-page span:not(.MuiTypography-root):not(.MuiButtonBase-root) { +.login-page + .MuiStack-root:not(:has(> .MuiButtonBase-root)) + span:not(.MuiTypography-root) { color: var(--env-var-color-3); cursor: pointer; font-weight: 600; diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.css b/Client/src/Pages/Monitors/CreateMonitor/index.css index d379bb602..1eb542a44 100644 --- a/Client/src/Pages/Monitors/CreateMonitor/index.css +++ b/Client/src/Pages/Monitors/CreateMonitor/index.css @@ -18,7 +18,8 @@ .create-monitor p.MuiTypography-root { color: var(--env-var-color-2); } -.create-monitor h6.MuiTypography-root { +.create-monitor h6.MuiTypography-root, +.create-monitor .MuiBox-root .field + p.MuiTypography-root { font-size: var(--env-var-font-size-small-plus); opacity: 0.8; } diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx index c63599d7f..773d427e9 100644 --- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx +++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx @@ -12,6 +12,7 @@ import WestRoundedIcon from "@mui/icons-material/WestRounded"; import Field from "../../../Components/Inputs/Field"; import Select from "../../../Components/Inputs/Select"; import Checkbox from "../../../Components/Inputs/Checkbox"; +import { createToast } from "../../../Utils/toastUtils"; const CreateMonitor = () => { const MS_PER_MINUTE = 60000; @@ -20,86 +21,61 @@ const CreateMonitor = () => { const navigate = useNavigate(); const theme = useTheme(); + const idMap = { + "monitor-url": "url", + "monitor-name": "name", + "monitor-checks-http": "type", + "monitor-checks-ping": "type", + "notify-sms": "sms", + "notify-email-default": "email", + }; + + const [monitor, setMonitor] = useState({ + url: "", + name: "", + type: "", + notifications: [], + interval: 1, + }); + const [https, setHttps] = useState(false); 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: "", - // }); - //Advanced Settings Form - const [advancedSettings, setAdvancedSettings] = useState({ - interval: 1, - // retries: "", - // codes: "", - // redirects: "", - }); - //Proxy Settings Form - // const [proxy, setProxy] = useState({ - // enabled: false, - // protocol: "", - // address: "", - // proxy_port: "", - // }); - - const handleChange = (event, id, setState, checkbox) => { - const { value } = event.target; - setState((prev) => ({ + const handleChange = (event, name) => { + const { value, id } = event.target; + if (!name) name = idMap[id]; + setMonitor((prev) => ({ ...prev, - [id]: checkbox ? true : value, + [name]: value, })); - const validation = monitorValidation.validate( - { [id]: value }, + const { error } = monitorValidation.validate( + { [name]: value }, { abortEarly: false } ); setErrors((prev) => { const updatedErrors = { ...prev }; - - if (validation.error) { - updatedErrors[id] = validation.error.details[0].message; - } else { - delete updatedErrors[id]; - } + if (error) updatedErrors[name] = error.details[0].message; + else delete updatedErrors[name]; return updatedErrors; }); }; - // const handleCheck = (id, setState) => { - // setState((prev) => ({ - // ...prev, - // [id]: !prev[id], - // })); - // }; const handleCreateMonitor = async (event) => { event.preventDefault(); //obj to submit - let monitor = { + let form = { url: //preprending protocol for url - checks.type === "http" || checks.type === "https" - ? `${checks.type}://` + generalSettings.url - : generalSettings.url, - name: - generalSettings.name === "" - ? generalSettings.url - : generalSettings.name, - //there is no separate monitor type for https since the operations for the two protocols are identical - //however the URL does need the correct prepend hence https is still being tracked but overwritten when prepping the monitor obj - type: checks.type === "https" ? "http" : checks.type, + monitor.type === "http" + ? `http${https ? "s" : ""}://` + monitor.url + : monitor.url, + name: monitor.name === "" ? monitor.url : monitor.name, + type: monitor.type, + interval: monitor.interval * MS_PER_MINUTE, }; - const { error } = monitorValidation.validate(monitor, { + const { error } = monitorValidation.validate(form, { abortEarly: false, }); @@ -109,29 +85,26 @@ const CreateMonitor = () => { newErrors[err.path[0]] = err.message; }); setErrors(newErrors); + createToast({ body: "Error validation data." }); } else { - monitor = { - ...monitor, - description: monitor.name, + form = { + ...form, + description: form.name, userId: user._id, - // ...advancedSettings - interval: advancedSettings.interval * MS_PER_MINUTE, }; - try { - const action = await dispatch( - createUptimeMonitor({ authToken, monitor }) - ); - if (action.meta.requestStatus === "fulfilled") { - navigate("/monitors"); - } - } catch (error) { - alert(error); + const action = await dispatch( + createUptimeMonitor({ authToken, monitor: form }) + ); + if (action.meta.requestStatus === "fulfilled") { + createToast({ body: "Monitor created successfully!" }); + navigate("/monitors"); + } else { + createToast({ body: "Failed to delete monitor." }); } } }; //select values - // const ports = ["Port 1", "Port 2", "Port 3"]; const frequencies = [ { _id: 1, name: "1 minute" }, { _id: 2, name: "2 minutes" }, @@ -175,19 +148,13 @@ const CreateMonitor = () => { - handleChange(event, "url", setGeneralSettings) - } + value={monitor.url} + onChange={handleChange} error={errors["url"]} /> { label="Friendly name" isOptional={true} placeholder="Google" - value={generalSettings.name} - onChange={(event) => - handleChange(event, "name", setGeneralSettings) - } + value={monitor.name} + onChange={handleChange} error={errors["name"]} /> @@ -219,33 +184,27 @@ const CreateMonitor = () => { desc="Use HTTP(s) to monitor your website or API endpoint." size="small" value="http" - checked={checks.type === "http" || checks.type === "https"} - onChange={(event) => handleChange(event, "type", setChecks)} + checked={monitor.type === "http"} + onChange={(event) => handleChange(event)} /> - {checks.type === "http" || checks.type === "https" ? ( + {monitor.type === "http" ? (