From 7e8c81c18afb820546afbfb1dbec71c944a45e87 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 11:27:15 -0700
Subject: [PATCH 01/32] Updated coderabbit.yaml

---
 .coderabbit.yaml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.coderabbit.yaml b/.coderabbit.yaml
index 873db5cfe..fa3f25484 100644
--- a/.coderabbit.yaml
+++ b/.coderabbit.yaml
@@ -2,11 +2,11 @@ language: "en-CA"
 tone_instructions: "His palms are sweaty, knees weak, arms are heavy There’s vomit on his sweater already, mom’s spaghetti"
 early_access: false
 reviews:
-  profile: "assertive"
+  profile: "chill"
   request_changes_workflow: false
   high_level_summary: false
   poem: false
-  review_status: true
+  review_status: false
   auto_review:
     enabled: true
     drafts: false

From dd834fc2c55df1ea0c95e1d81155f707b1d3bf1a Mon Sep 17 00:00:00 2001
From: Daniel C <122758391+danielcj2@users.noreply.github.com>
Date: Tue, 30 Jul 2024 16:09:46 -0400
Subject: [PATCH 02/32] Removed box shadow and fixed button width (#491)

---
 Client/src/Components/Button/index.jsx        | 5 +++++
 Client/src/Components/ButtonSpinner/index.jsx | 5 +++++
 Client/src/Pages/Monitors/Configure/index.jsx | 9 ++++++++-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx
index c53ece09e..5b4953f5e 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/index.jsx
@@ -60,10 +60,15 @@ const Button = ({ id, type, level, label, disabled, img, onClick, sx }) => {
       onClick={onClick}
       disableRipple
       sx={{
+        boxShadow: "none",
         textTransform: "none",
         "&:focus": {
           outline: "none",
         },
+        "&:hover": {
+          boxShadow: "none",
+          transition: "none"
+        },
         ...sx,
       }}
     >
diff --git a/Client/src/Components/ButtonSpinner/index.jsx b/Client/src/Components/ButtonSpinner/index.jsx
index 2d940c539..62cfae477 100644
--- a/Client/src/Components/ButtonSpinner/index.jsx
+++ b/Client/src/Components/ButtonSpinner/index.jsx
@@ -72,10 +72,15 @@ const ButtonSpinner = ({
       loading={isLoading}
       disableRipple
       sx={{
+        boxShadow: "none",
         textTransform: "none",
         "&:focus": {
           outline: "none",
         },
+        "&:hover": {
+          boxShadow: "none",
+          transition: "none"
+        },
         ...sx,
       }}
     >
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 2f694c07c..ebdb61ab2 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -268,7 +268,14 @@ const Configure = () => {
           </Stack>
         </Stack>
         <Stack direction="row" justifyContent="flex-end">
-          <Button level="primary" label="Save" sx={{ px: theme.gap.ml }} />
+          <Button
+            type="submit"
+            level="primary"
+            label="Save"
+            sx={{
+              minWidth: "80px",
+            }}
+          />
         </Stack>
       </form>
     </Box>

From a7c93aee3935e7971bd6f54d52fdffbd65b37312 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 13:19:37 -0700
Subject: [PATCH 03/32] Add DB operations for notifications

---
 Server/db/mongo/modules/notificationModule.js | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 Server/db/mongo/modules/notificationModule.js

diff --git a/Server/db/mongo/modules/notificationModule.js b/Server/db/mongo/modules/notificationModule.js
new file mode 100644
index 000000000..7ed2d2064
--- /dev/null
+++ b/Server/db/mongo/modules/notificationModule.js
@@ -0,0 +1,41 @@
+const Notification = require("../../../models/Notification");
+const Notification = require("../../../models/Notification");
+
+/**
+ * Creates a new notification.
+ * @param {Object} notificationData - The data for the new notification.
+ * @param {mongoose.Types.ObjectId} notificationData.monitorId - The ID of the monitor.
+ * @param {string} notificationData.type - The type of the notification (e.g., "email", "sms").
+ * @param {string} [notificationData.address] - The address for the notification (if applicable).
+ * @param {string} [notificationData.phone] - The phone number for the notification (if applicable).
+ * @returns {Promise<Object>} The created notification.
+ * @throws Will throw an error if the notification cannot be created.
+ */
+const createNotification = async (notificationData) => {
+  try {
+    const notification = await new Notification({ ...notificationData }).save();
+    return notification;
+  } catch (error) {
+    throw error;
+  }
+};
+
+/**
+ * Retrieves notifications by monitor ID.
+ * @param {mongoose.Types.ObjectId} monitorId - The ID of the monitor.
+ * @returns {Promise<Array<Object>>} An array of notifications.
+ * @throws Will throw an error if the notifications cannot be retrieved.
+ */
+const getNotificationsByMonitorId = async (monitorId) => {
+  try {
+    const notifications = await Notification.find({ monitorId });
+    return notifications;
+  } catch (error) {
+    throw error;
+  }
+};
+
+module.exports = {
+  createNotification,
+  getNotificationsByMonitorId,
+};

From 03ee67cfca51a680fcc7ff741872d59729d7ffc4 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 13:23:14 -0700
Subject: [PATCH 04/32] Add methods to MongoDB

---
 Server/controllers/monitorController.js | 1 +
 Server/db/mongo/MongoDB.js              | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
index 5e3899005..c22bf50c3 100644
--- a/Server/controllers/monitorController.js
+++ b/Server/controllers/monitorController.js
@@ -158,6 +158,7 @@ const deleteMonitor = async (req, res, next) => {
     await req.jobQueue.deleteJob(monitor);
     await req.db.deleteChecks(monitor._id);
     await req.db.deleteAlertByMonitorId(monitor._id);
+    await req.db.deleteNotificationByMonitorId(monitor._id);
     /**
      * TODO
      * We should remove all checks and alerts associated with this monitor
diff --git a/Server/db/mongo/MongoDB.js b/Server/db/mongo/MongoDB.js
index de2b3466e..c03e2db1a 100644
--- a/Server/db/mongo/MongoDB.js
+++ b/Server/db/mongo/MongoDB.js
@@ -120,6 +120,11 @@ const {
   deleteMaintenanceWindowByUserId,
 } = require("./modules/maintenaceWindowModule");
 
+const {
+  createNotification,
+  getNotificationsByMonitorId,
+} = require("./modules/notificationModule");
+
 module.exports = {
   connect,
   insertUser,
@@ -162,4 +167,6 @@ module.exports = {
   deleteMaintenaceWindowById,
   deleteMaintenanceWindowByMonitorId,
   deleteMaintenanceWindowByUserId,
+  createNotification,
+  getNotificationsByMonitorId,
 };

From 1664bc09eaa9e99b6c5a889a348bdccf05505f6b Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 13:25:56 -0700
Subject: [PATCH 05/32] Add delete method

---
 Server/db/mongo/MongoDB.js                    |  6 ++----
 Server/db/mongo/modules/notificationModule.js | 11 ++++++++++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/Server/db/mongo/MongoDB.js b/Server/db/mongo/MongoDB.js
index c03e2db1a..2813a3c00 100644
--- a/Server/db/mongo/MongoDB.js
+++ b/Server/db/mongo/MongoDB.js
@@ -65,8 +65,6 @@ const {
   getAllMonitors,
   getMonitorById,
   getMonitorsByUserId,
-  getMonitorByIdForIncidents,
-  getMonitorsByUserIdForIncidents,
   createMonitor,
   deleteMonitor,
   deleteAllMonitors,
@@ -123,6 +121,7 @@ const {
 const {
   createNotification,
   getNotificationsByMonitorId,
+  deleteNotificationsByMonitorId,
 } = require("./modules/notificationModule");
 
 module.exports = {
@@ -141,8 +140,6 @@ module.exports = {
   getAllMonitors,
   getMonitorById,
   getMonitorsByUserId,
-  getMonitorByIdForIncidents,
-  getMonitorsByUserIdForIncidents,
   createMonitor,
   deleteMonitor,
   deleteAllMonitors,
@@ -169,4 +166,5 @@ module.exports = {
   deleteMaintenanceWindowByUserId,
   createNotification,
   getNotificationsByMonitorId,
+  deleteNotificationsByMonitorId,
 };
diff --git a/Server/db/mongo/modules/notificationModule.js b/Server/db/mongo/modules/notificationModule.js
index 7ed2d2064..f5c8708f4 100644
--- a/Server/db/mongo/modules/notificationModule.js
+++ b/Server/db/mongo/modules/notificationModule.js
@@ -1,5 +1,4 @@
 const Notification = require("../../../models/Notification");
-const Notification = require("../../../models/Notification");
 
 /**
  * Creates a new notification.
@@ -35,7 +34,17 @@ const getNotificationsByMonitorId = async (monitorId) => {
   }
 };
 
+const deleteNotificationsByMonitorId = async (monitorId) => {
+  try {
+    const result = await Notification.deleteMany({ monitorId });
+    return result.deletedCount;
+  } catch (error) {
+    throw error;
+  }
+};
+
 module.exports = {
   createNotification,
   getNotificationsByMonitorId,
+  deleteNotificationsByMonitorId,
 };

From 8220fdce948b06de5696f9408ed717bce12a496c Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 13:36:53 -0700
Subject: [PATCH 06/32] Add better error handling

---
 Server/controllers/monitorController.js | 33 ++++++++++++++++++-------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
index c22bf50c3..0b5523c8a 100644
--- a/Server/controllers/monitorController.js
+++ b/Server/controllers/monitorController.js
@@ -9,7 +9,6 @@ const {
 
 const SERVICE_NAME = "monitorController";
 const { errorMessages, successMessages } = require("../utils/messages");
-const { error } = require("winston");
 
 /**
  * Returns all monitors
@@ -47,7 +46,8 @@ const getMonitorById = async (req, res, next) => {
     await getMonitorByIdQueryValidation.validateAsync(req.query);
   } catch (error) {
     error.status = 422;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
     return;
   }
@@ -83,6 +83,16 @@ const getMonitorsByUserId = async (req, res, next) => {
   try {
     await getMonitorsByUserIdValidation.validateAsync(req.params);
     await getMonitorsByUserIdQueryValidation.validateAsync(req.query);
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
+
+  try {
     const userId = req.params.userId;
     const monitors = await req.db.getMonitorsByUserId(req, res);
 
@@ -112,7 +122,9 @@ const createMonitor = async (req, res, next) => {
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+
     next(error);
     return;
   }
@@ -143,22 +155,24 @@ const createMonitor = async (req, res, next) => {
 
 const deleteMonitor = async (req, res, next) => {
   try {
-    await getMonitorByIdValidation.validateAsync(req.params);
+    await getMonitorByIdParamValidation.validateAsync(req.params);
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
     return;
   }
 
   try {
     const monitor = await req.db.deleteMonitor(req, res, next);
-    // Delete associated checks and alerts
+    // Delete associated checks,alerts,and notifications
     await req.jobQueue.deleteJob(monitor);
     await req.db.deleteChecks(monitor._id);
     await req.db.deleteAlertByMonitorId(monitor._id);
-    await req.db.deleteNotificationByMonitorId(monitor._id);
+    await req.db.deleteNotificationsByMonitorId(monitor._id);
+
     /**
      * TODO
      * We should remove all checks and alerts associated with this monitor
@@ -196,12 +210,13 @@ const deleteAllMonitors = async (req, res) => {
  */
 const editMonitor = async (req, res, next) => {
   try {
-    await getMonitorByIdValidation.validateAsync(req.params);
+    await getMonitorByIdParamValidation.validateAsync(req.params);
     await editMonitorBodyValidation.validateAsync(req.body);
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
     return;
   }

From 5a1aaf5132b20d857a9f5d4ca5307fb847850090 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 13:54:30 -0700
Subject: [PATCH 07/32] AuthController error handling, cleanup

---
 Server/controllers/alertController.js |  18 +++--
 Server/controllers/authController.js  | 112 ++++++++++++++++++++------
 2 files changed, 98 insertions(+), 32 deletions(-)

diff --git a/Server/controllers/alertController.js b/Server/controllers/alertController.js
index cd2fa01ac..93d165469 100644
--- a/Server/controllers/alertController.js
+++ b/Server/controllers/alertController.js
@@ -27,7 +27,8 @@ const createAlert = async (req, res, next) => {
     await createAlertBodyValidation.validateAsync(req.body);
   } catch (error) {
     error.status = 422;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     error.service = SERVICE_NAME;
     next(error);
     return;
@@ -58,7 +59,8 @@ const getAlertsByUserId = async (req, res, next) => {
     await getAlertsByUserIdParamValidation.validateAsync(req.params);
   } catch (error) {
     error.status = 422;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     error.service = SERVICE_NAME;
     next(error);
     return;
@@ -82,7 +84,8 @@ const getAlertsByMonitorId = async (req, res, next) => {
     await getAlertsByMonitorIdParamValidation.validateAsync(req.params);
   } catch (error) {
     error.status = 422;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     error.service = SERVICE_NAME;
     next(error);
     return;
@@ -106,7 +109,8 @@ const getAlertById = async (req, res, next) => {
     await getAlertByIdParamValidation.validateAsync(req.params);
   } catch (error) {
     error.status = 422;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     error.service = SERVICE_NAME;
     next(error);
     return;
@@ -132,7 +136,8 @@ const editAlert = async (req, res, next) => {
   } catch (error) {
     console.log(error);
     error.status = 422;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     error.service = SERVICE_NAME;
     next(error);
     return;
@@ -156,7 +161,8 @@ const deleteAlert = async (req, res, next) => {
     await deleteAlertParamValidation.validateAsync(req.params);
   } catch (error) {
     error.status = 422;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     error.service = SERVICE_NAME;
     next(error);
     return;
diff --git a/Server/controllers/authController.js b/Server/controllers/authController.js
index 88a7c7f71..6d3e757a5 100644
--- a/Server/controllers/authController.js
+++ b/Server/controllers/authController.js
@@ -54,7 +54,8 @@ const registerController = async (req, res, next) => {
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
     return;
   }
@@ -115,14 +116,20 @@ const registerController = async (req, res, next) => {
  */
 const loginController = async (req, res, next) => {
   try {
-    // Validate input
     await loginValidation.validateAsync(req.body);
-
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
+  try {
     // Check if user exists
     const user = await req.db.getUserByEmail(req, res);
 
     // Compare password
-
     const match = await user.comparePassword(req.body.password);
     if (match !== true) {
       throw new Error(errorMessages.AUTH_INCORRECT_PASSWORD);
@@ -157,7 +164,8 @@ const userEditController = async (req, res, next) => {
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
     return;
   }
@@ -216,8 +224,18 @@ const inviteController = async (req, res, next) => {
     // Only admins can invite
     const token = getTokenFromHeaders(req.headers);
     const { role, firstname } = jwt.decode(token);
-    await inviteRoleValidation.validateAsync({ roles: role });
-    await inviteBodyValidation.validateAsync(req.body);
+    try {
+      await inviteRoleValidation.validateAsync({ roles: role });
+      await inviteBodyValidation.validateAsync(req.body);
+    } catch (error) {
+      error.status = 422;
+      error.service = SERVICE_NAME;
+      error.message =
+        error.details?.[0]?.message || error.message || "Validation Error";
+      next(error);
+      return;
+    }
+
     const inviteToken = await req.db.requestInviteToken(req, res);
     req.emailService.buildAndSendEmail(
       "employeeActivationTemplate",
@@ -242,6 +260,16 @@ const inviteController = async (req, res, next) => {
 const inviteVerifyController = async (req, res, next) => {
   try {
     await inviteVerifciationBodyValidation.validateAsync(req.body);
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
+
+  try {
     const invite = await req.db.getInviteToken(req, res);
 
     res
@@ -289,6 +317,16 @@ const checkAdminController = async (req, res) => {
 const recoveryRequestController = async (req, res, next) => {
   try {
     await recoveryValidation.validateAsync(req.body);
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
+
+  try {
     const user = await req.db.getUserByEmail(req, res);
     if (user) {
       const recoveryToken = await req.db.requestRecoveryToken(req, res);
@@ -328,6 +366,16 @@ const recoveryRequestController = async (req, res, next) => {
 const validateRecoveryTokenController = async (req, res, next) => {
   try {
     await recoveryTokenValidation.validateAsync(req.body);
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
+
+  try {
     await req.db.validateRecoveryToken(req, res);
     // TODO Redirect user to reset password after validating token
     return res.status(200).json({
@@ -354,6 +402,15 @@ const validateRecoveryTokenController = async (req, res, next) => {
 const resetPasswordController = async (req, res, next) => {
   try {
     await newPasswordValidation.validateAsync(req.body);
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
+  try {
     const user = await req.db.resetPassword(req, res);
     const token = issueToken(user._doc);
     res.status(200).json({
@@ -392,9 +449,18 @@ const deleteUserController = async (req, res, next) => {
     };
 
     // Validate user
-    await deleteUserParamValidation.validateAsync(
-      decodedTokenCastedAsRequest.body
-    );
+    try {
+      await deleteUserParamValidation.validateAsync(
+        decodedTokenCastedAsRequest.body
+      );
+    } catch (error) {
+      error.status = 422;
+      error.service = SERVICE_NAME;
+      error.message =
+        error.details?.[0]?.message || error.message || "Validation Error";
+      next(error);
+      return;
+    }
 
     // Check if the user exists
     const user = await req.db.getUserByEmail(decodedTokenCastedAsRequest);
@@ -408,25 +474,19 @@ const deleteUserController = async (req, res, next) => {
     );
 
     if (monitors) {
-      // 2. Delete jobs associated with each monitor
-      for (const monitor of monitors) {
-        await req.jobQueue.deleteJob(monitor);
-      }
+      //2.  Remove all jobs, delete checks and alerts
+      await Promise.all(
+        monitors.map(async (monitor) => {
+          await req.jobQueue.deleteJob(monitor);
+          await req.db.deleteChecks(monitor._id);
+          await req.db.deleteAlertByMonitorId(monitor._id);
+        })
+      );
 
-      // 3. Delete all checks associated with each monitor
-      for (const monitor of monitors) {
-        await req.db.deleteChecks(monitor._id);
-      }
-
-      // 4. Delete all alerts associated with each monitor
-      for (const monitor of monitors) {
-        await req.db.deleteAlertByMonitorId(monitor._id);
-      }
-
-      // 5. Delete each monitor
+      // 3. Delete each monitor
       await req.db.deleteMonitorsByUserId(user._id);
 
-      // 6. Delete the user by id
+      // 4. Delete the user by id
       await req.db.deleteUser(decodedTokenCastedAsRequest);
 
       return res.status(200).json({

From abf0b5856b7c11f5fdc1ef467f0a3c60bb3957f8 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 13:55:22 -0700
Subject: [PATCH 08/32] CheckController error handling

---
 Server/controllers/checkController.js | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/Server/controllers/checkController.js b/Server/controllers/checkController.js
index 391ae2700..3379f5d17 100644
--- a/Server/controllers/checkController.js
+++ b/Server/controllers/checkController.js
@@ -14,9 +14,9 @@ const createCheck = async (req, res, next) => {
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
-    return;
   }
 
   try {
@@ -37,9 +37,9 @@ const getChecks = async (req, res, next) => {
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
-    return;
   }
 
   try {
@@ -59,20 +59,18 @@ const deleteChecks = async (req, res, next) => {
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
-    return;
   }
 
   try {
     const deletedCount = await req.db.deleteChecks(req.params.monitorId);
-    return res
-      .status(200)
-      .json({
-        success: true,
-        msg: successMessages.CHECK_DELETE,
-        data: { deletedCount },
-      });
+    return res.status(200).json({
+      success: true,
+      msg: successMessages.CHECK_DELETE,
+      data: { deletedCount },
+    });
   } catch (error) {
     error.service = SERVICE_NAME;
     next(error);

From c478298631083bf5c1f8cea96dbd7ec42a7dd0a8 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 13:56:38 -0700
Subject: [PATCH 09/32] MaintenanceWindowController error handling

---
 .../maintenanceWindowController.js            | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/Server/controllers/maintenanceWindowController.js b/Server/controllers/maintenanceWindowController.js
index d94746fe3..41b160fe2 100644
--- a/Server/controllers/maintenanceWindowController.js
+++ b/Server/controllers/maintenanceWindowController.js
@@ -15,9 +15,9 @@ const createMaintenanceWindow = async (req, res, next) => {
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
-    error.message = error.details[0].message;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
-    return;
   }
 
   try {
@@ -48,7 +48,14 @@ const getMaintenanceWindowsByUserId = async (req, res, next) => {
     await getMaintenanceWindowsByUserIdParamValidation.validateAsync(
       req.params
     );
-
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+  }
+  try {
     const maintenanceWindows = await req.db.getMaintenanceWindowsByUserId(
       req.params.userId
     );
@@ -69,7 +76,15 @@ const getMaintenanceWindowsByMonitorId = async (req, res, next) => {
     await getMaintenanceWindowsByMonitorIdParamValidation.validateAsync(
       req.params
     );
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+  }
 
+  try {
     const maintenanceWindows = await req.db.getMaintenanceWindowsByMonitorId(
       req.params.monitorId
     );

From aaa63a81cdb492f3f4600cb3ada55726c242eda3 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 30 Jul 2024 14:00:19 -0700
Subject: [PATCH 10/32] MaintenanceWindowController error handling

---
 Server/controllers/checkController.js         |  3 ++
 .../maintenanceWindowController.js            |  3 ++
 .../controllers/pageSpeedCheckController.js   | 42 ++++++++++++-------
 3 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/Server/controllers/checkController.js b/Server/controllers/checkController.js
index 3379f5d17..f3c85352f 100644
--- a/Server/controllers/checkController.js
+++ b/Server/controllers/checkController.js
@@ -17,6 +17,7 @@ const createCheck = async (req, res, next) => {
     error.message =
       error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
+    return;
   }
 
   try {
@@ -40,6 +41,7 @@ const getChecks = async (req, res, next) => {
     error.message =
       error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
+    return;
   }
 
   try {
@@ -62,6 +64,7 @@ const deleteChecks = async (req, res, next) => {
     error.message =
       error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
+    return;
   }
 
   try {
diff --git a/Server/controllers/maintenanceWindowController.js b/Server/controllers/maintenanceWindowController.js
index 41b160fe2..5fe8ab7db 100644
--- a/Server/controllers/maintenanceWindowController.js
+++ b/Server/controllers/maintenanceWindowController.js
@@ -18,6 +18,7 @@ const createMaintenanceWindow = async (req, res, next) => {
     error.message =
       error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
+    return;
   }
 
   try {
@@ -54,6 +55,7 @@ const getMaintenanceWindowsByUserId = async (req, res, next) => {
     error.message =
       error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
+    return;
   }
   try {
     const maintenanceWindows = await req.db.getMaintenanceWindowsByUserId(
@@ -82,6 +84,7 @@ const getMaintenanceWindowsByMonitorId = async (req, res, next) => {
     error.message =
       error.details?.[0]?.message || error.message || "Validation Error";
     next(error);
+    return;
   }
 
   try {
diff --git a/Server/controllers/pageSpeedCheckController.js b/Server/controllers/pageSpeedCheckController.js
index 7cc8696fc..eb290ad6e 100644
--- a/Server/controllers/pageSpeedCheckController.js
+++ b/Server/controllers/pageSpeedCheckController.js
@@ -1,4 +1,3 @@
-const PageSpeedCheck = require("../models/PageSpeedCheck");
 const PageSpeedService = require("../service/pageSpeedService");
 const { successMessages } = require("../utils/messages");
 const pageSpeedService = new PageSpeedService();
@@ -22,12 +21,19 @@ const getPageSpeedChecks = async (req, res, next) => {
   try {
     // Validate monitorId parameter
     await getPageSpeedCheckParamValidation.validateAsync(req.params);
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
 
+  try {
     return res.status(200).json({ msg: "Hit getPageSpeedChecks" });
   } catch (error) {
-    if (error.isJoi) {
-      return res.status(400).json({ error: error.details[0].message });
-    }
+    error.service = SERVICE_NAME;
     next(error);
   }
 };
@@ -42,12 +48,18 @@ const getPageSpeedChecks = async (req, res, next) => {
  */
 const createPageSpeedCheck = async (req, res, next) => {
   try {
-    // Validate monitorId parameter
     await createPageSpeedCheckParamValidation.validateAsync(req.params);
-
-    // Validate request body
     await createPageSpeedCheckBodyValidation.validateAsync(req.body);
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
 
+  try {
     const { monitorId } = req.params;
     const { url } = req.body;
 
@@ -74,9 +86,6 @@ const createPageSpeedCheck = async (req, res, next) => {
       data: newPageSpeedCheck,
     });
   } catch (error) {
-    if (error.isJoi) {
-      return res.status(400).json({ error: error.details[0].message });
-    }
     error.service = SERVICE_NAME;
     next(error);
   }
@@ -94,12 +103,17 @@ const deletePageSpeedCheck = async (req, res, next) => {
   try {
     // Validate monitorId parameter
     await deletePageSpeedCheckParamValidation.validateAsync(req.params);
-
+  } catch (error) {
+    error.status = 422;
+    error.service = SERVICE_NAME;
+    error.message =
+      error.details?.[0]?.message || error.message || "Validation Error";
+    next(error);
+    return;
+  }
+  try {
     return res.status(200).json({ msg: "Hit deletePageSpeedCheck" });
   } catch (error) {
-    if (error.isJoi) {
-      return res.status(400).json({ error: error.details[0].message });
-    }
     error.service = SERVICE_NAME;
     next(error);
   }

From a0f54c191e58f3db6b1dae0c47813b8e5272eab3 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 30 Jul 2024 19:36:37 -0400
Subject: [PATCH 11/32] Added some basic button svg animations

---
 Client/src/Components/Button/index.css        | 33 +++++++++++++++++++
 Client/src/Components/Button/index.jsx        | 18 ++++++++--
 Client/src/Pages/Monitors/Configure/index.css |  3 +-
 Client/src/Pages/Monitors/Configure/index.jsx |  7 ++--
 .../Pages/Monitors/CreateMonitor/index.css    |  1 +
 .../Pages/Monitors/CreateMonitor/index.jsx    |  4 ++-
 Client/src/Pages/Monitors/Details/index.css   |  9 +++--
 Client/src/Pages/Monitors/Details/index.jsx   | 24 ++++++++++----
 8 files changed, 84 insertions(+), 15 deletions(-)

diff --git a/Client/src/Components/Button/index.css b/Client/src/Components/Button/index.css
index e69de29bb..63791d46b 100644
--- a/Client/src/Components/Button/index.css
+++ b/Client/src/Components/Button/index.css
@@ -0,0 +1,33 @@
+.MuiButtonBase-root.button-rotate90 svg {
+  transition: transform 500ms ease;
+}
+.MuiButtonBase-root.button-rotate90:hover svg {
+  transform: rotate(90deg);
+  transform-origin: center;
+}
+
+.MuiButtonBase-root.button-rotate180 svg {
+  transition: transform 700ms ease;
+}
+.MuiButtonBase-root.button-rotate180:hover svg {
+  transform: rotate(180deg);
+  transform-origin: center;
+}
+
+.MuiButtonBase-root.button-slideLeft {
+  padding-left: 45px;
+}
+.MuiButtonBase-root.button-slideLeft svg {
+  position: absolute;
+  left: 15px;
+  transition: left 250ms cubic-bezier(0.65, 0, 0.076, 1);
+}
+.MuiButtonBase-root.button-slideLeft:hover svg {
+  left: 11px;
+}
+
+.MuiButtonBase-root.button-slideLeft:hover,
+.MuiButtonBase-root.button-rotate180:hover,
+.MuiButtonBase-root.button-rotate90:hover {
+  background-color: rgba(71, 84, 103, 0.08);
+}
diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx
index 5b4953f5e..9078e2497 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/index.jsx
@@ -1,5 +1,6 @@
 import { Button as MuiButton } from "@mui/material";
 import PropTypes from "prop-types";
+import "./index.css";
 
 const levelConfig = {
   primary: {
@@ -48,11 +49,22 @@ const levelConfig = {
  * <Button type="submit" level="error" label="Error" disabled sx={{marginTop: "1rem"}}/>
  */
 
-const Button = ({ id, type, level, label, disabled, img, onClick, sx }) => {
+const Button = ({
+  id,
+  animate,
+  type,
+  level,
+  label,
+  disabled,
+  img,
+  onClick,
+  sx,
+}) => {
   const { variant, color } = levelConfig[level];
   return (
     <MuiButton
       id={id}
+      className={`button-${animate}`}
       type={type}
       variant={variant}
       color={color}
@@ -60,6 +72,7 @@ const Button = ({ id, type, level, label, disabled, img, onClick, sx }) => {
       onClick={onClick}
       disableRipple
       sx={{
+        lineHeight: 1,
         boxShadow: "none",
         textTransform: "none",
         "&:focus": {
@@ -67,13 +80,12 @@ const Button = ({ id, type, level, label, disabled, img, onClick, sx }) => {
         },
         "&:hover": {
           boxShadow: "none",
-          transition: "none"
         },
         ...sx,
       }}
     >
       {img && img}
-      {label}
+      <span>{label}</span>
     </MuiButton>
   );
 };
diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css
index 3d3ed04f2..005c97188 100644
--- a/Client/src/Pages/Monitors/Configure/index.css
+++ b/Client/src/Pages/Monitors/Configure/index.css
@@ -38,6 +38,7 @@
   padding-bottom: 60px;
   border: 1px solid var(--env-var-color-16);
   border-radius: var(--env-var-radius-1);
+  background-color: var(--env-var-color-8);
 }
 .configure-monitor .config-box .MuiBox-root,
 .configure-monitor .config-box .MuiStack-root {
@@ -74,4 +75,4 @@
 body:has(.configure-monitor) .select-dropdown .MuiMenuItem-root,
 .configure-monitor .select-wrapper .select-component > .MuiSelect-select {
   text-transform: lowercase;
-}
\ No newline at end of file
+}
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index ebdb61ab2..b50942e89 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -106,6 +106,7 @@ const Configure = () => {
       <Button
         level="tertiary"
         label="Back"
+        animate="slideLeft"
         img={<WestRoundedIcon />}
         onClick={() => navigate(-1)}
         sx={{
@@ -113,7 +114,8 @@ const Configure = () => {
           mb: theme.gap.medium,
           px: theme.gap.ml,
           "& svg.MuiSvgIcon-root": {
-            pr: theme.gap.small,
+            mr: theme.gap.small,
+            fill: theme.palette.otherColors.slateGray,
           },
         }}
       />
@@ -151,13 +153,14 @@ const Configure = () => {
             <Button
               level="tertiary"
               label="Pause"
+              animate="rotate180"
               img={<PauseCircleOutlineIcon />}
               sx={{
                 backgroundColor: "#f4f4f4",
                 pl: theme.gap.small,
                 pr: theme.gap.medium,
                 "& svg": {
-                  pr: theme.gap.xs,
+                  mr: theme.gap.xs,
                 },
               }}
             />
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.css b/Client/src/Pages/Monitors/CreateMonitor/index.css
index fbf4c4f14..d379bb602 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.css
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.css
@@ -48,6 +48,7 @@
   border-radius: var(--env-var-radius-1);
   flex-direction: row;
   gap: var(--env-var-spacing-4);
+  background-color: var(--env-var-color-8);
 }
 .create-monitor .config-box .MuiBox-root,
 .create-monitor .config-box .MuiStack-root {
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index de370971a..c63599d7f 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -145,6 +145,7 @@ const CreateMonitor = () => {
       <Button
         level="tertiary"
         label="Back"
+        animate="slideLeft"
         img={<WestRoundedIcon />}
         onClick={() => navigate("/monitors")}
         sx={{
@@ -152,7 +153,8 @@ const CreateMonitor = () => {
           mb: theme.gap.medium,
           px: theme.gap.ml,
           "& svg.MuiSvgIcon-root": {
-            pr: theme.gap.small,
+            mr: theme.gap.small,
+            fill: theme.palette.otherColors.slateGray,
           },
         }}
       />
diff --git a/Client/src/Pages/Monitors/Details/index.css b/Client/src/Pages/Monitors/Details/index.css
index 1abd12ef9..f58ff7088 100644
--- a/Client/src/Pages/Monitors/Details/index.css
+++ b/Client/src/Pages/Monitors/Details/index.css
@@ -37,13 +37,18 @@
 .monitor-details .stat-box {
   flex: 1;
   min-width: 100px;
-  border: solid 1px var(--env-var-color-4);
+  border: solid 1px;
   border-radius: var(--env-var-radius-1);
   padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2);
+  background-color: var(--env-var-color-8);
 }
 .monitor-details .stat-box:not(:first-of-type) {
   margin-left: var(--env-var-spacing-2);
 }
 .monitor-details .stat-box h6.MuiTypography-root {
   margin-bottom: var(--env-var-spacing-1);
-}
\ No newline at end of file
+}
+.monitor-details button.MuiButtonBase-root,
+.monitor-details .stat-box {
+  border-color: var(--env-var-color-16);
+}
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 1ee258cd4..d5d8cb0c1 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -147,6 +147,7 @@ const DetailsPage = () => {
       <Button
         level="tertiary"
         label="Back to Monitors"
+        animate="slideLeft"
         img={<WestRoundedIcon />}
         onClick={() => navigate("/monitors")}
         sx={{
@@ -154,7 +155,8 @@ const DetailsPage = () => {
           mb: theme.gap.medium,
           px: theme.gap.ml,
           "& svg.MuiSvgIcon-root": {
-            pr: theme.gap.small,
+            mr: theme.gap.small,
+            fill: theme.palette.otherColors.slateGray,
           },
         }}
       />
@@ -184,15 +186,16 @@ const DetailsPage = () => {
           <Button
             level="tertiary"
             label="Configure"
+            animate="rotate90"
             img={<SettingsIcon />}
             onClick={() => navigate(`/monitors/configure/${monitorId}`)}
             sx={{
               ml: "auto",
               alignSelf: "flex-end",
               backgroundColor: "#f4f4f4",
-              px: theme.gap.ml,
+              px: theme.gap.medium,
               "& svg": {
-                pr: theme.gap.xs,
+                mr: "6px",
               },
             }}
           />
@@ -222,19 +225,28 @@ const DetailsPage = () => {
                 level="secondary"
                 label="Day"
                 onClick={() => setFilter("day")}
-                sx={{ backgroundColor: filter === "day" && "#f4f4f4" }}
+                sx={{
+                  backgroundColor:
+                    filter === "day" && theme.palette.otherColors.fillGray,
+                }}
               />
               <Button
                 level="secondary"
                 label="Week"
                 onClick={() => setFilter("week")}
-                sx={{ backgroundColor: filter === "week" && "#f4f4f4" }}
+                sx={{
+                  backgroundColor:
+                    filter === "week" && theme.palette.otherColors.fillGray,
+                }}
               />
               <Button
                 level="secondary"
                 label="Month"
                 onClick={() => setFilter("month")}
-                sx={{ backgroundColor: filter === "month" && "#f4f4f4" }}
+                sx={{
+                  backgroundColor:
+                    filter === "month" && theme.palette.otherColors.fillGray,
+                }}
               />
             </ButtonGroup>
           </Stack>

From cc3b70dd6bbd99e1fa530a26e7ab25525cc4c902 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 31 Jul 2024 11:00:45 -0700
Subject: [PATCH 12/32] Initial refactor

---
 Client/src/Components/Inputs/Field/index.jsx  |   2 +-
 .../UptimeMonitors/uptimeMonitorsSlice.js     |  44 ++++++
 Client/src/Pages/Monitors/Configure/index.jsx | 125 ++++++++----------
 3 files changed, 97 insertions(+), 74 deletions(-)

diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx
index 1d9034c66..6fb8ea612 100644
--- a/Client/src/Components/Inputs/Field/index.jsx
+++ b/Client/src/Components/Inputs/Field/index.jsx
@@ -177,7 +177,7 @@ Field.propTypes = {
   autoComplete: PropTypes.string,
   placeholder: PropTypes.string,
   value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
+  onChange: PropTypes.func,
   error: PropTypes.string,
   disabled: PropTypes.bool,
 };
diff --git a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
index 8302aa1e5..4ffa31054 100644
--- a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
+++ b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
@@ -68,6 +68,31 @@ export const getUptimeMonitorsByUserId = createAsyncThunk(
   }
 );
 
+export const updateUptimeMonitor = createAsyncThunk(
+  "monitors/updateMonitor",
+  async (data, thunkApi) => {
+    try {
+      const { authToken, monitor } = data;
+      const res = await axiosInstance.post(
+        `/monitors/edit/${monitor._id}`,
+        monitor,
+        {
+          headers: {
+            Authorization: `Bearer ${authToken}`,
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      return res.data;
+    } catch (error) {
+      if (error.response && error.response.data) {
+        return thunkApi.rejectWithValue(error.response.data);
+      }
+      return thunkApi.rejectWithValue(error.message);
+    }
+  }
+);
+
 const uptimeMonitorsSlice = createSlice({
   name: "uptimeMonitors",
   initialState,
@@ -137,6 +162,25 @@ const uptimeMonitorsSlice = createSlice({
         state.msg = action.payload
           ? action.payload.msg
           : "Failed to create uptime monitor";
+      })
+
+      // *****************************************************
+      // update Monitor
+      // *****************************************************
+      .addCase(updateUptimeMonitor.pending, (state) => {
+        state.isLoading = true;
+      })
+      .addCase(updateUptimeMonitor.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.success = action.payload.success;
+        state.msg = action.payload.msg;
+      })
+      .addCase(updateUptimeMonitor.rejected, (state, action) => {
+        state.isLoading = false;
+        state.success = false;
+        state.msg = action.payload
+          ? action.payload.msg
+          : "Failed to update uptime monitor";
       });
   },
 });
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 2f694c07c..0aed07500 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -4,8 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useState } from "react";
 import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
-import RadioButton from "../../../Components/RadioButton";
-import { Box, MenuItem, Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
@@ -15,6 +14,20 @@ import "./index.css";
 import { monitorValidation } from "../../../Validation/validation";
 import Select from "../../../Components/Inputs/Select";
 import { formatDurationRounded } from "../../../Utils/timeUtils";
+import { updateUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
+/**
+ * Parses a URL string and returns a URL object.
+ *
+ * @param {string} url - The URL string to parse.
+ * @returns {URL} - The parsed URL object if valid, otherwise an empty string.
+ */
+const parseUrl = (url) => {
+  try {
+    return new URL(url);
+  } catch (error) {
+    return null;
+  }
+};
 
 /**
  * Helper function to get duration since last check
@@ -39,6 +52,9 @@ const Configure = () => {
   const dispatch = useDispatch();
   const { authToken } = useSelector((state) => state.auth);
   const { monitors } = useSelector((state) => state.uptimeMonitors);
+  const [monitor, setMonitor] = useState();
+  const [duration, setDuration] = useState(0);
+  const [errors, setErrors] = useState({});
   const { monitorId } = useParams();
 
   const idMap = {
@@ -48,26 +64,20 @@ const Configure = () => {
     "monitor-checks-ping": "type",
   };
 
-  const [config, setConfig] = useState();
-  const [monitor, setMonitor] = useState();
-  const [errors, setErrors] = useState({});
   useEffect(() => {
-    const fetchMonitor = () => {
-      const data = monitors.find((monitor) => monitor._id === monitorId);
-      setConfig(data);
-      setMonitor({
-        name: data.name,
-        url: data.url.replace(/^https?:\/\//, ""),
-        type: data.type,
-        interval: data.interval / MS_PER_MINUTE,
-      });
-    };
-    fetchMonitor();
-  }, [monitorId, authToken]);
+    const data = monitors.find((monitor) => monitor._id === monitorId);
+    setMonitor({
+      ...data,
+    });
+    setDuration(formatDurationRounded(data?.interval));
+  }, [monitorId, authToken, monitors]);
 
   const handleChange = (event, name) => {
-    const { value, id } = event.target;
+    let { value, id } = event.target;
     if (!name) name = idMap[id];
+    if (name === "interval") {
+      value = value * MS_PER_MINUTE;
+    }
     setMonitor((prev) => ({
       ...prev,
       [name]: value,
@@ -90,7 +100,9 @@ const Configure = () => {
 
   const handleSubmit = (event) => {
     event.preventDefault();
-    // TODO
+    const updatedMonitor = { ...monitor };
+    delete updatedMonitor.checks;
+    dispatch(updateUptimeMonitor({ authToken, monitor: updatedMonitor }));
   };
 
   const frequencies = [
@@ -101,6 +113,10 @@ const Configure = () => {
     { _id: 5, name: "5 minutes" },
   ];
 
+  // Parse the URL
+  const parsedUrl = parseUrl(monitor?.url);
+  const protocol = parsedUrl?.protocol?.replace(":", "") || "";
+
   return (
     <Box className="configure-monitor">
       <Button
@@ -119,25 +135,24 @@ const Configure = () => {
       />
       <form className="configure-monitor-form" noValidate spellCheck="false">
         <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
-          {config?.status ? <GreenCheck /> : <RedCheck />}
+          {monitor?.status ? <GreenCheck /> : <RedCheck />}
           <Box>
             <Typography component="h1" sx={{ lineHeight: 1 }}>
-              {config?.url.replace(/^https?:\/\//, "") || "..."}
+              {parsedUrl?.host || "..."}
             </Typography>
             <Typography mt={theme.gap.small}>
               <Typography
                 component="span"
                 sx={{
-                  color: config?.status
+                  color: monitor?.status
                     ? "var(--env-var-color-17)"
                     : "var(--env-var-color-24)",
                 }}
               >
-                Your site is {config?.status ? "up" : "down"}.
+                Your site is {monitor?.status ? "up" : "down"}.
               </Typography>{" "}
-              Checking every {formatDurationRounded(config?.interval)}. Last
-              time checked{" "}
-              {formatDurationRounded(getLastChecked(config?.checks))} ago.
+              Checking every {duration}. Last time checked{" "}
+              {formatDurationRounded(getLastChecked(monitor?.checks))} ago.
             </Typography>
           </Box>
           <Stack
@@ -186,12 +201,13 @@ const Configure = () => {
           </Box>
           <Stack gap={theme.gap.xl}>
             <Field
-              type="url"
+              type={monitor?.type === "http" ? "url" : "text"}
+              https={protocol === "https"}
               id="monitor-url"
               label="URL to monitor"
               placeholder="google.com"
-              value={monitor?.url || ""}
-              onChange={handleChange}
+              value={parsedUrl?.host || monitor?.url || ""}
+              disabled={true}
               error={errors["url"]}
             />
             <Field
@@ -206,48 +222,6 @@ const Configure = () => {
             />
           </Stack>
         </Stack>
-        <Stack
-          className="config-box"
-          direction="row"
-          justifyContent="space-between"
-          gap={theme.gap.xxl}
-        >
-          <Box>
-            <Typography component="h2">Checks to perform</Typography>
-            <Typography component="p" sx={{ mt: theme.gap.small }}>
-              You can always add or remove checks after adding your site.
-            </Typography>
-          </Box>
-          <Stack gap={theme.gap.xl}>
-            <RadioButton
-              id="monitor-checks-http"
-              title="HTTP/website monitoring"
-              desc="Use HTTP(s) to monitor your website or API endpoint."
-              size="small"
-              value="http"
-              checked={monitor?.type === "http"}
-              onChange={handleChange}
-            />
-            <RadioButton
-              id="monitor-checks-ping"
-              title="Ping monitoring"
-              desc="Check whether your server is available or not."
-              size="small"
-              value="ping"
-              checked={monitor?.type === "ping"}
-              onChange={handleChange}
-            />
-            <Box className="error-container">
-              {errors["type"] ? (
-                <Typography component="p" className="input-error">
-                  {errors["type"]}
-                </Typography>
-              ) : (
-                ""
-              )}
-            </Box>
-          </Stack>
-        </Stack>
         <Stack
           className="config-box"
           direction="row"
@@ -261,14 +235,19 @@ const Configure = () => {
             <Select
               id="monitor-interval-configure"
               label="Check frequency"
-              value={monitor?.interval || 1}
+              value={monitor?.interval / MS_PER_MINUTE || 1}
               onChange={(event) => handleChange(event, "interval")}
               items={frequencies}
             />
           </Stack>
         </Stack>
         <Stack direction="row" justifyContent="flex-end">
-          <Button level="primary" label="Save" sx={{ px: theme.gap.ml }} />
+          <Button
+            level="primary"
+            label="Save"
+            sx={{ px: theme.gap.ml }}
+            onClick={handleSubmit}
+          />
         </Stack>
       </form>
     </Box>

From ed0d781779aba2c9c79a0439cd32b7d3f9713d4a Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 31 Jul 2024 11:36:51 -0700
Subject: [PATCH 13/32] Added update and delete functionality

---
 .../UptimeMonitors/uptimeMonitorsSlice.js     | 51 ++++++++++++++++++-
 Client/src/Pages/Monitors/Configure/index.jsx | 33 ++++++++++--
 2 files changed, 78 insertions(+), 6 deletions(-)

diff --git a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
index 4ffa31054..bf7f0378e 100644
--- a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
+++ b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
@@ -73,9 +73,39 @@ export const updateUptimeMonitor = createAsyncThunk(
   async (data, thunkApi) => {
     try {
       const { authToken, monitor } = data;
+      const updatedFields = {
+        name: monitor.name,
+        description: monitor.description,
+        interval: monitor.interval,
+      };
       const res = await axiosInstance.post(
         `/monitors/edit/${monitor._id}`,
-        monitor,
+        updatedFields,
+        {
+          headers: {
+            Authorization: `Bearer ${authToken}`,
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      return res.data;
+    } catch (error) {
+      if (error.response && error.response.data) {
+        return thunkApi.rejectWithValue(error.response.data);
+      }
+      return thunkApi.rejectWithValue(error.message);
+    }
+  }
+);
+
+export const deleteUptimeMonitor = createAsyncThunk(
+  "monitors/deleteMonitor",
+  async (data, thunkApi) => {
+    try {
+      const { authToken, monitor } = data;
+      const res = await axiosInstance.post(
+        `/monitors/delete/${monitor._id}`,
+        {},
         {
           headers: {
             Authorization: `Bearer ${authToken}`,
@@ -181,6 +211,25 @@ const uptimeMonitorsSlice = createSlice({
         state.msg = action.payload
           ? action.payload.msg
           : "Failed to update uptime monitor";
+      })
+
+      // *****************************************************
+      // Delete Monitor
+      // *****************************************************
+      .addCase(deleteUptimeMonitor.pending, (state) => {
+        state.isLoading = true;
+      })
+      .addCase(deleteUptimeMonitor.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.success = action.payload.success;
+        state.msg = action.payload.msg;
+      })
+      .addCase(deleteUptimeMonitor.rejected, (state, action) => {
+        state.isLoading = false;
+        state.success = false;
+        state.msg = action.payload
+          ? action.payload.msg
+          : "Failed to delete uptime monitor";
       });
   },
 });
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 7ff28b576..9a2f44d5f 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -14,7 +14,12 @@ import "./index.css";
 import { monitorValidation } from "../../../Validation/validation";
 import Select from "../../../Components/Inputs/Select";
 import { formatDurationRounded } from "../../../Utils/timeUtils";
-import { updateUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
+import { createToast } from "../../../Utils/toastUtils";
+import {
+  updateUptimeMonitor,
+  getUptimeMonitorsByUserId,
+  deleteUptimeMonitor,
+} from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 /**
  * Parses a URL string and returns a URL object.
  *
@@ -98,11 +103,28 @@ const Configure = () => {
     });
   };
 
-  const handleSubmit = (event) => {
+  const handleSubmit = async (event) => {
     event.preventDefault();
-    const updatedMonitor = { ...monitor };
-    delete updatedMonitor.checks;
-    dispatch(updateUptimeMonitor({ authToken, monitor: updatedMonitor }));
+    const action = await dispatch(
+      updateUptimeMonitor({ authToken, monitor: monitor })
+    );
+    if (action.meta.requestStatus === "fulfilled") {
+      createToast({ body: "Monitor updated successfully!" });
+      dispatch(getUptimeMonitorsByUserId(authToken));
+    } else {
+      createToast({ body: "Failed to update monitor." });
+    }
+  };
+
+  const hanldeRemove = async (event) => {
+    event.preventDefault();
+    // TODO add confirm
+    const action = await dispatch(deleteUptimeMonitor({ authToken, monitor }));
+    if (action.meta.requestStatus === "fulfilled") {
+      navigate("/monitors");
+    } else {
+      createToast({ body: "Failed to delete monitor." });
+    }
   };
 
   const frequencies = [
@@ -186,6 +208,7 @@ const Configure = () => {
                 boxShadow: "none",
                 px: theme.gap.ml,
               }}
+              onClick={hanldeRemove}
             />
           </Stack>
         </Stack>

From 09edaebd98dca99d77f02ba0f3b88fa628c74bb3 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 31 Jul 2024 12:12:05 -0700
Subject: [PATCH 14/32] Implement inserting notifications when a monitor is
 created, update validation

---
 Server/controllers/monitorController.js  | 14 ++++++++++++--
 Server/db/mongo/modules/monitorModule.js |  3 ++-
 Server/validation/joi.js                 |  5 +++--
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
index 0b5523c8a..2c68d5660 100644
--- a/Server/controllers/monitorController.js
+++ b/Server/controllers/monitorController.js
@@ -2,13 +2,14 @@ const {
   getMonitorByIdParamValidation,
   getMonitorByIdQueryValidation,
   getMonitorsByUserIdValidation,
-  monitorValidation,
+  createMonitorBodyValidation,
   editMonitorBodyValidation,
   getMonitorsByUserIdQueryValidation,
 } = require("../validation/joi");
 
 const SERVICE_NAME = "monitorController";
 const { errorMessages, successMessages } = require("../utils/messages");
+const { runInNewContext } = require("vm");
 
 /**
  * Returns all monitors
@@ -118,7 +119,7 @@ const getMonitorsByUserId = async (req, res, next) => {
 
 const createMonitor = async (req, res, next) => {
   try {
-    await monitorValidation.validateAsync(req.body);
+    await createMonitorBodyValidation.validateAsync(req.body);
   } catch (error) {
     error.status = 422;
     error.service = SERVICE_NAME;
@@ -130,7 +131,16 @@ const createMonitor = async (req, res, next) => {
   }
 
   try {
+    const notifications = req.body.notifications;
     const monitor = await req.db.createMonitor(req, res);
+
+    await Promise.all(
+      notifications.map(async (notification) => {
+        notification.monitorId = monitor._id;
+        await req.db.createNotification(notification);
+      })
+    );
+
     // Add monitor to job queue
     req.jobQueue.addJob(monitor._id, monitor);
     return res.status(201).json({
diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index a06ad9c05..74a804c09 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -30,7 +30,6 @@ const getAllMonitors = async (req, res) => {
  */
 const getMonitorById = async (req, res) => {
   try {
-
     const { monitorId } = req.params;
     let { status, limit, sortOrder } = req.query;
 
@@ -140,6 +139,8 @@ const getMonitorsByUserId = async (req, res) => {
 const createMonitor = async (req, res) => {
   try {
     const monitor = new Monitor({ ...req.body });
+    // Remove notifications fom monitor as they aren't needed here
+    delete monitor.notifications;
     monitor.userId = req.user._id;
     await monitor.save();
     return monitor;
diff --git a/Server/validation/joi.js b/Server/validation/joi.js
index 5fdececfa..8d485bf11 100644
--- a/Server/validation/joi.js
+++ b/Server/validation/joi.js
@@ -144,7 +144,7 @@ const getMonitorsByUserIdQueryValidation = joi.object({
     ),
 });
 
-const monitorValidation = joi.object({
+const createMonitorBodyValidation = joi.object({
   _id: joi.string(),
   userId: joi.string().required(),
   name: joi.string().required(),
@@ -153,6 +153,7 @@ const monitorValidation = joi.object({
   url: joi.string().required(),
   isActive: joi.boolean(),
   interval: joi.number(),
+  notifications: joi.array().items(joi.object()),
 });
 
 const editMonitorBodyValidation = joi.object({
@@ -286,7 +287,7 @@ module.exports = {
   inviteRoleValidation,
   inviteBodyValidation,
   inviteVerifciationBodyValidation,
-  monitorValidation,
+  createMonitorBodyValidation,
   getMonitorByIdParamValidation,
   getMonitorByIdQueryValidation,
   getMonitorsByUserIdValidation,

From 905d6ed6585e5339bacc7024d2e6f3a977dd54fb Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 31 Jul 2024 12:27:40 -0700
Subject: [PATCH 15/32] remove delete, use undefined instead

---
 Server/db/mongo/modules/monitorModule.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index 74a804c09..f82496551 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -140,7 +140,7 @@ const createMonitor = async (req, res) => {
   try {
     const monitor = new Monitor({ ...req.body });
     // Remove notifications fom monitor as they aren't needed here
-    delete monitor.notifications;
+    monitor.notifications = undefined;
     monitor.userId = req.user._id;
     await monitor.save();
     return monitor;

From 01854dd5e7d213f12d22abeb7b45c02a5a723f2a Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 31 Jul 2024 15:53:01 -0400
Subject: [PATCH 16/32] Refactored old states

---
 Client/src/Pages/Auth/index.css               |   4 +-
 .../Pages/Monitors/CreateMonitor/index.css    |   3 +-
 .../Pages/Monitors/CreateMonitor/index.jsx    | 202 +++++++-----------
 Client/src/Pages/Monitors/Details/index.css   |   2 +-
 Client/src/Pages/Monitors/index.jsx           |   7 +-
 Client/src/Pages/Settings/index.css           |   3 +-
 6 files changed, 97 insertions(+), 124 deletions(-)

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 = () => {
           </Box>
           <Stack gap={theme.gap.xl}>
             <Field
-              type={
-                checks.type === "http" || checks.type === "https"
-                  ? "url"
-                  : "text"
-              }
+              type={monitor.type === "http" ? "url" : "text"}
               id="monitor-url"
               label="URL to monitor"
-              https={checks.type === "https"}
+              https={https}
               placeholder="google.com"
-              value={generalSettings.url}
-              onChange={(event) =>
-                handleChange(event, "url", setGeneralSettings)
-              }
+              value={monitor.url}
+              onChange={handleChange}
               error={errors["url"]}
             />
             <Field
@@ -196,10 +163,8 @@ const CreateMonitor = () => {
               label="Friendly name"
               isOptional={true}
               placeholder="Google"
-              value={generalSettings.name}
-              onChange={(event) =>
-                handleChange(event, "name", setGeneralSettings)
-              }
+              value={monitor.name}
+              onChange={handleChange}
               error={errors["name"]}
             />
           </Stack>
@@ -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" ? (
                 <ButtonGroup sx={{ ml: "32px" }}>
                   <Button
                     level="secondary"
                     label="HTTP"
-                    onClick={() =>
-                      setChecks((prev) => ({ ...prev, type: "http" }))
-                    }
+                    onClick={() => setHttps(false)}
                     sx={{
                       backgroundColor:
-                        checks.type === "http" &&
-                        theme.palette.otherColors.fillGray,
+                        !https && theme.palette.otherColors.fillGray,
                     }}
                   />
                   <Button
                     level="secondary"
                     label="HTTPS"
-                    onClick={() =>
-                      setChecks((prev) => ({ ...prev, type: "https" }))
-                    }
+                    onClick={() => setHttps(true)}
                     sx={{
                       backgroundColor:
-                        checks.type === "https" &&
-                        theme.palette.otherColors.fillGray,
+                        https && theme.palette.otherColors.fillGray,
                     }}
                   />
                 </ButtonGroup>
@@ -259,8 +218,8 @@ const CreateMonitor = () => {
               desc="Check whether your server is available or not."
               size="small"
               value="ping"
-              checked={checks.type === "ping"}
-              onChange={(event) => handleChange(event, "type", setChecks)}
+              checked={monitor.type === "ping"}
+              onChange={(event) => handleChange(event)}
             />
             {/* TODO */}
             {/* <RadioButton
@@ -299,36 +258,43 @@ const CreateMonitor = () => {
             </Box>
           </Stack>
         </Stack>
-
         <Stack className="config-box">
           <Box>
             <Typography component="h2">Incident notifications</Typography>
             <Typography component="p" mt={theme.gap.small}>
-              When there is an incident, notify users
+              When there is an incident, notify users.
             </Typography>
           </Box>
-          <Stack gap={theme.gap.large}>
+          <Stack gap={theme.gap.medium}>
             <Typography component="p" mt={theme.gap.small}>
               When there is a new incident,
             </Typography>
-            <Checkbox id="notify-sms" label="Notify via SMS (coming soon)" />
+            <Checkbox
+              id="notify-sms"
+              label="Notify via SMS (coming soon)"
+              isDisabled={true}
+            />
             <Checkbox
               id="notify-email-default"
               label={`Notify via email (to ${user.email})`}
             />
             <Checkbox
               id="notify-email"
-              label="Also notify via email to the following addresses:"
-            />
-            <Field
-              id="notify-email-list"
-              type="text"
-              label="You can separate multiple emails with a comma"
-              placeholder="name@gmail.com"
+              label="Also notify via email to multiple addresses (coming soon)"
+              isDisabled={true}
             />
+            <Box mx={`calc(${theme.gap.ml} * 2)`}>
+              <Field
+                id="notify-email-list"
+                type="text"
+                placeholder="name@gmail.com"
+              />
+              <Typography mt={theme.gap.small}>
+                You can separate multiple emails with a comma
+              </Typography>
+            </Box>
           </Stack>
         </Stack>
-
         <Stack className="config-box">
           <Box>
             <Typography component="h2">Advanced settings</Typography>
@@ -337,10 +303,8 @@ const CreateMonitor = () => {
             <Select
               id="monitor-interval"
               label="Check frequency"
-              value={advancedSettings.interval || 1}
-              onChange={(event) =>
-                handleChange(event, "interval", setAdvancedSettings)
-              }
+              value={monitor.interval || 1}
+              onChange={(event) => handleChange(event, "interval")}
               items={frequencies}
             />
             {/* TODO */}
diff --git a/Client/src/Pages/Monitors/Details/index.css b/Client/src/Pages/Monitors/Details/index.css
index f58ff7088..4a7ff305b 100644
--- a/Client/src/Pages/Monitors/Details/index.css
+++ b/Client/src/Pages/Monitors/Details/index.css
@@ -39,7 +39,7 @@
   min-width: 100px;
   border: solid 1px;
   border-radius: var(--env-var-radius-1);
-  padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2);
+  padding: var(--env-var-spacing-1) 18px;
   background-color: var(--env-var-color-8);
 }
 .monitor-details .stat-box:not(:first-of-type) {
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index dee5c3eba..b020ac47b 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -111,7 +111,12 @@ const Monitors = () => {
           ),
         },
         { id: idx + 2, data: <ResponseTimeChart checks={reversedChecks} /> },
-        { id: idx + 3, data: monitor.type },
+        {
+          id: idx + 3,
+          data: (
+            <span style={{ textTransform: "uppercase" }}>{monitor.type}</span>
+          ),
+        },
         { id: idx + 4, data: "TODO" },
       ],
     };
diff --git a/Client/src/Pages/Settings/index.css b/Client/src/Pages/Settings/index.css
index 11a61b7d2..3f6ac8d7a 100644
--- a/Client/src/Pages/Settings/index.css
+++ b/Client/src/Pages/Settings/index.css
@@ -29,6 +29,7 @@
   padding-bottom: 60px;
   border: 1px solid var(--env-var-color-16);
   border-radius: var(--env-var-radius-1);
+  background-color: var(--env-var-color-8);
 }
 .settings .config-box .MuiBox-root,
 .settings .config-box .MuiStack-root {
@@ -39,4 +40,4 @@
   display: flex;
   flex-direction: column;
   gap: var(--env-var-spacing-4);
-}
\ No newline at end of file
+}

From 7d3bc7ee8a205af95a0bab8e847290ef39c309fc Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 31 Jul 2024 12:55:19 -0700
Subject: [PATCH 17/32] Delete notifcations when a user is deleted

---
 Server/controllers/authController.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Server/controllers/authController.js b/Server/controllers/authController.js
index 6d3e757a5..6f34f71ce 100644
--- a/Server/controllers/authController.js
+++ b/Server/controllers/authController.js
@@ -480,6 +480,7 @@ const deleteUserController = async (req, res, next) => {
           await req.jobQueue.deleteJob(monitor);
           await req.db.deleteChecks(monitor._id);
           await req.db.deleteAlertByMonitorId(monitor._id);
+          await req.db.deleteNotificationsByMonitorId(monitor._id);
         })
       );
 

From 2a79264a9a2debf776fae03b47d69d858e8a0fed Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 31 Jul 2024 13:11:20 -0700
Subject: [PATCH 18/32] Added safety check for accessing notifications before
 inserting

---
 Server/controllers/monitorController.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
index 2c68d5660..b6317fa35 100644
--- a/Server/controllers/monitorController.js
+++ b/Server/controllers/monitorController.js
@@ -134,13 +134,14 @@ const createMonitor = async (req, res, next) => {
     const notifications = req.body.notifications;
     const monitor = await req.db.createMonitor(req, res);
 
-    await Promise.all(
-      notifications.map(async (notification) => {
-        notification.monitorId = monitor._id;
-        await req.db.createNotification(notification);
-      })
-    );
-
+    if (notifications && notifications.length !== 0) {
+      await Promise.all(
+        notifications.map(async (notification) => {
+          notification.monitorId = monitor._id;
+          await req.db.createNotification(notification);
+        })
+      );
+    }
     // Add monitor to job queue
     req.jobQueue.addJob(monitor._id, monitor);
     return res.status(201).json({

From 9e51cffb677a3e32af8c957cf7d4530071d4e6fc Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 31 Jul 2024 13:24:38 -0700
Subject: [PATCH 19/32] JobQueue was not deleting jobs correctly due to
 incorrect  lookup in monitor object

---
 Server/controllers/monitorController.js | 3 ++-
 Server/service/jobQueue.js              | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
index b6317fa35..07ec3ced5 100644
--- a/Server/controllers/monitorController.js
+++ b/Server/controllers/monitorController.js
@@ -233,9 +233,10 @@ const editMonitor = async (req, res, next) => {
   }
 
   try {
+    const jobBeforeEdit = await req.db.getMonitorById(req, res);
     const editedMonitor = await req.db.editMonitor(req, res);
     // Delete the old job(editedMonitor has the same ID as the old monitor)
-    await req.jobQueue.deleteJob(editedMonitor);
+    await req.jobQueue.deleteJob(jobBeforeEdit);
     // Add the new job back to the queue
     await req.jobQueue.addJob(editedMonitor._id, editedMonitor);
     return res.status(200).json({
diff --git a/Server/service/jobQueue.js b/Server/service/jobQueue.js
index 035cbdb4a..92b7b6aab 100644
--- a/Server/service/jobQueue.js
+++ b/Server/service/jobQueue.js
@@ -231,7 +231,7 @@ class JobQueue {
    */
   async deleteJob(monitor) {
     try {
-      const deleted = await this.queue.removeRepeatable(monitor.id, {
+      const deleted = await this.queue.removeRepeatable(monitor._id, {
         every: monitor.interval,
       });
       if (deleted) {

From e940c4fd62830297762d5c1a7ad45269bb16eeba Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 31 Jul 2024 16:26:36 -0400
Subject: [PATCH 20/32] Added notification checkbox to monitor state

---
 .../Pages/Monitors/CreateMonitor/index.jsx    | 80 +++++++++++++++----
 1 file changed, 64 insertions(+), 16 deletions(-)

diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index 773d427e9..5281fb07f 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -26,8 +26,7 @@ const CreateMonitor = () => {
     "monitor-name": "name",
     "monitor-checks-http": "type",
     "monitor-checks-ping": "type",
-    "notify-sms": "sms",
-    "notify-email-default": "email",
+    "notify-email-default": "notification-email",
   };
 
   const [monitor, setMonitor] = useState({
@@ -43,24 +42,57 @@ const CreateMonitor = () => {
   const handleChange = (event, name) => {
     const { value, id } = event.target;
     if (!name) name = idMap[id];
-    setMonitor((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
 
-    const { error } = monitorValidation.validate(
-      { [name]: value },
-      { abortEarly: false }
-    );
+    if (name.includes("notification-")) {
+      name = name.replace("notification-", "");
+      let hasNotif = monitor.notifications.some(
+        (notification) => notification.type === name
+      );
+      setMonitor((prev) => {
+        const notifs = [...prev.notifications];
+        if (hasNotif) {
+          return {
+            ...prev,
+            notifications: notifs.filter((notif) => notif.type !== name),
+          };
+        } else {
+          return {
+            ...prev,
+            notifications: [
+              ...notifs,
+              name === "email"
+                ? { type: name, address: value }
+                : // TODO - phone number
+                  { type: name, phone: value },
+            ],
+          };
+        }
+      });
+    } else {
+      setMonitor((prev) => ({
+        ...prev,
+        [name]: value,
+      }));
 
-    setErrors((prev) => {
-      const updatedErrors = { ...prev };
-      if (error) updatedErrors[name] = error.details[0].message;
-      else delete updatedErrors[name];
-      return updatedErrors;
-    });
+      const { error } = monitorValidation.validate(
+        { [name]: value },
+        { abortEarly: false }
+      );
+
+      setErrors((prev) => {
+        const updatedErrors = { ...prev };
+        if (error) updatedErrors[name] = error.details[0].message;
+        else delete updatedErrors[name];
+        return updatedErrors;
+      });
+    }
   };
 
+  // const handleNotifications = (event) => {
+  //   const { value } = event.target;
+  //   setMonitor((prev) => ({ ...prev, notifications: value }));
+  // };
+
   const handleCreateMonitor = async (event) => {
     event.preventDefault();
     //obj to submit
@@ -91,6 +123,7 @@ const CreateMonitor = () => {
         ...form,
         description: form.name,
         userId: user._id,
+        notifications: monitor.notifications,
       };
       const action = await dispatch(
         createUptimeMonitor({ authToken, monitor: form })
@@ -113,6 +146,8 @@ const CreateMonitor = () => {
     { _id: 5, name: "5 minutes" },
   ];
 
+  console.log(monitor);
+
   return (
     <Box className="create-monitor">
       <Button
@@ -272,15 +307,26 @@ const CreateMonitor = () => {
             <Checkbox
               id="notify-sms"
               label="Notify via SMS (coming soon)"
+              isChecked={false}
+              value=""
+              onChange={() => console.log("disabled")}
               isDisabled={true}
             />
             <Checkbox
               id="notify-email-default"
               label={`Notify via email (to ${user.email})`}
+              isChecked={monitor.notifications.some(
+                (notification) => notification.type === "email"
+              )}
+              value={user?.email}
+              onChange={(event) => handleChange(event)}
             />
             <Checkbox
               id="notify-email"
               label="Also notify via email to multiple addresses (coming soon)"
+              isChecked={false}
+              value=""
+              onChange={() => console.log("disabled")}
               isDisabled={true}
             />
             <Box mx={`calc(${theme.gap.ml} * 2)`}>
@@ -288,6 +334,8 @@ const CreateMonitor = () => {
                 id="notify-email-list"
                 type="text"
                 placeholder="name@gmail.com"
+                value=""
+                onChange={() => console.log("disabled")}
               />
               <Typography mt={theme.gap.small}>
                 You can separate multiple emails with a comma

From 972603c2ea7bd068f1e3e1c9850400a871b30ebb Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 31 Jul 2024 16:27:49 -0400
Subject: [PATCH 21/32] Fixed typo

---
 Client/src/Pages/Monitors/CreateMonitor/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index 5281fb07f..4b98602a5 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -132,7 +132,7 @@ const CreateMonitor = () => {
         createToast({ body: "Monitor created successfully!" });
         navigate("/monitors");
       } else {
-        createToast({ body: "Failed to delete monitor." });
+        createToast({ body: "Failed to create monitor." });
       }
     }
   };

From 0c1af23f660c9cb2d3fdfa18c8ba9100eaf8464a Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 31 Jul 2024 13:29:04 -0700
Subject: [PATCH 22/32] Fixed var name

---
 Server/controllers/monitorController.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
index 07ec3ced5..8f7e21453 100644
--- a/Server/controllers/monitorController.js
+++ b/Server/controllers/monitorController.js
@@ -233,10 +233,10 @@ const editMonitor = async (req, res, next) => {
   }
 
   try {
-    const jobBeforeEdit = await req.db.getMonitorById(req, res);
+    const monitorBeforeEdit = await req.db.getMonitorById(req, res);
     const editedMonitor = await req.db.editMonitor(req, res);
     // Delete the old job(editedMonitor has the same ID as the old monitor)
-    await req.jobQueue.deleteJob(jobBeforeEdit);
+    await req.jobQueue.deleteJob(monitorBeforeEdit);
     // Add the new job back to the queue
     await req.jobQueue.addJob(editedMonitor._id, editedMonitor);
     return res.status(200).json({

From 6eac0768474bb2c01f35e2784d77edc6f4e98d02 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 31 Jul 2024 16:33:53 -0400
Subject: [PATCH 23/32] Removed redundant code

---
 Client/src/Pages/Monitors/CreateMonitor/index.jsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index 4b98602a5..b09cc2b97 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -88,11 +88,6 @@ const CreateMonitor = () => {
     }
   };
 
-  // const handleNotifications = (event) => {
-  //   const { value } = event.target;
-  //   setMonitor((prev) => ({ ...prev, notifications: value }));
-  // };
-
   const handleCreateMonitor = async (event) => {
     event.preventDefault();
     //obj to submit
@@ -146,8 +141,6 @@ const CreateMonitor = () => {
     { _id: 5, name: "5 minutes" },
   ];
 
-  console.log(monitor);
-
   return (
     <Box className="create-monitor">
       <Button

From 73310422da7d2c91ea6c0721765be879b918fd2a Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 31 Jul 2024 16:41:04 -0400
Subject: [PATCH 24/32] Updated default https value and disabled multiple
 emails field

---
 .../Pages/Monitors/CreateMonitor/index.jsx    | 76 +++++++------------
 1 file changed, 28 insertions(+), 48 deletions(-)

diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index b09cc2b97..42ebb7cf4 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -36,7 +36,7 @@ const CreateMonitor = () => {
     notifications: [],
     interval: 1,
   });
-  const [https, setHttps] = useState(false);
+  const [https, setHttps] = useState(true);
   const [errors, setErrors] = useState({});
 
   const handleChange = (event, name) => {
@@ -217,15 +217,6 @@ const CreateMonitor = () => {
               />
               {monitor.type === "http" ? (
                 <ButtonGroup sx={{ ml: "32px" }}>
-                  <Button
-                    level="secondary"
-                    label="HTTP"
-                    onClick={() => setHttps(false)}
-                    sx={{
-                      backgroundColor:
-                        !https && theme.palette.otherColors.fillGray,
-                    }}
-                  />
                   <Button
                     level="secondary"
                     label="HTTPS"
@@ -235,6 +226,15 @@ const CreateMonitor = () => {
                         https && theme.palette.otherColors.fillGray,
                     }}
                   />
+                  <Button
+                    level="secondary"
+                    label="HTTP"
+                    onClick={() => setHttps(false)}
+                    sx={{
+                      backgroundColor:
+                        !https && theme.palette.otherColors.fillGray,
+                    }}
+                  />
                 </ButtonGroup>
               ) : (
                 ""
@@ -249,32 +249,6 @@ const CreateMonitor = () => {
               checked={monitor.type === "ping"}
               onChange={(event) => handleChange(event)}
             />
-            {/* TODO */}
-            {/* <RadioButton
-              id="monitor-checks-port"
-              title="Port monitoring"
-              desc="Monitor a specific service on your server."
-              value="port"
-              checked={checks.type === "port"}
-              onChange={(event) => handleChange(event, "type", setChecks)}
-            />
-            <div className="monitors-dropdown-holder">
-              <Select
-                id="monitor-ports"
-                value={checks.port || "placeholder"}
-                inputProps={{ id: "monitor-ports-select" }}
-                onChange={(event) => handleChange(event, "port", setChecks)}
-              >
-                <MenuItem id="port-placeholder" value="placeholder">
-                  Select a port to check
-                </MenuItem>
-                {ports.map((port, index) => (
-                  <MenuItem key={`port-${index}`} value={port}>
-                    {port}
-                  </MenuItem>
-                ))}
-              </Select>
-            </div> */}
             <Box className="error-container">
               {errors["type"] ? (
                 <Typography component="p" className="input-error">
@@ -322,18 +296,24 @@ const CreateMonitor = () => {
               onChange={() => console.log("disabled")}
               isDisabled={true}
             />
-            <Box mx={`calc(${theme.gap.ml} * 2)`}>
-              <Field
-                id="notify-email-list"
-                type="text"
-                placeholder="name@gmail.com"
-                value=""
-                onChange={() => console.log("disabled")}
-              />
-              <Typography mt={theme.gap.small}>
-                You can separate multiple emails with a comma
-              </Typography>
-            </Box>
+            {monitor.notifications.some(
+              (notification) => notification.type === "emails"
+            ) ? (
+              <Box mx={`calc(${theme.gap.ml} * 2)`}>
+                <Field
+                  id="notify-email-list"
+                  type="text"
+                  placeholder="name@gmail.com"
+                  value=""
+                  onChange={() => console.log("disabled")}
+                />
+                <Typography mt={theme.gap.small}>
+                  You can separate multiple emails with a comma
+                </Typography>
+              </Box>
+            ) : (
+              ""
+            )}
           </Stack>
         </Stack>
         <Stack className="config-box">

From 76f4143097e13d9d4172fcc518b27faa02f1e55e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 31 Jul 2024 13:59:14 -0700
Subject: [PATCH 25/32] Notifications removed and readded on monitor edit

---
 Server/controllers/monitorController.js  | 16 ++++++++++++++++
 Server/db/mongo/modules/monitorModule.js |  2 ++
 2 files changed, 18 insertions(+)

diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
index 8f7e21453..e05ed0389 100644
--- a/Server/controllers/monitorController.js
+++ b/Server/controllers/monitorController.js
@@ -234,7 +234,23 @@ const editMonitor = async (req, res, next) => {
 
   try {
     const monitorBeforeEdit = await req.db.getMonitorById(req, res);
+
+    // Get notifications from the request body
+    const notifications = req.body.notifications;
+
     const editedMonitor = await req.db.editMonitor(req, res);
+
+    await req.db.deleteNotificationsByMonitorId(editedMonitor._id);
+
+    if (notifications && notifications.length !== 0) {
+      await Promise.all(
+        notifications.map(async (notification) => {
+          notification.monitorId = editedMonitor._id;
+          await req.db.createNotification(notification);
+        })
+      );
+    }
+
     // Delete the old job(editedMonitor has the same ID as the old monitor)
     await req.jobQueue.deleteJob(monitorBeforeEdit);
     // Add the new job back to the queue
diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index f82496551..6f795e35a 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -209,6 +209,8 @@ const deleteMonitorsByUserId = async (userId) => {
 const editMonitor = async (req, res) => {
   const candidateId = req.params.monitorId;
   const candidateMonitor = req.body;
+  candidateMonitor.notifications = undefined;
+
   try {
     const editedMonitor = await Monitor.findByIdAndUpdate(
       candidateId,

From d0406815d0faf9b7e7dab9499ba62fc73f3d3479 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 31 Jul 2024 18:39:44 -0400
Subject: [PATCH 26/32] Added notif checkboxes to configure page

---
 Client/src/Pages/Monitors/Configure/index.css |   3 +
 Client/src/Pages/Monitors/Configure/index.jsx | 158 +++++++++++++++---
 2 files changed, 134 insertions(+), 27 deletions(-)

diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css
index 005c97188..ab52b028a 100644
--- a/Client/src/Pages/Monitors/Configure/index.css
+++ b/Client/src/Pages/Monitors/Configure/index.css
@@ -51,6 +51,9 @@
   position: absolute;
   top: 100%;
 }
+.configure-monitor .MuiInputBase-root:has(> .Mui-disabled){
+  background-color: var(--env-var-color-13);
+}
 
 .MuiInputBase-root:has(#monitor-interval) {
   height: 34px;
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 9a2f44d5f..31faf2c63 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -20,6 +20,8 @@ import {
   getUptimeMonitorsByUserId,
   deleteUptimeMonitor,
 } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
+import Checkbox from "../../../Components/Inputs/Checkbox";
+
 /**
  * Parses a URL string and returns a URL object.
  *
@@ -55,7 +57,7 @@ const Configure = () => {
   const navigate = useNavigate();
   const theme = useTheme();
   const dispatch = useDispatch();
-  const { authToken } = useSelector((state) => state.auth);
+  const { user, authToken } = useSelector((state) => state.auth);
   const { monitors } = useSelector((state) => state.uptimeMonitors);
   const [monitor, setMonitor] = useState();
   const [duration, setDuration] = useState(0);
@@ -67,6 +69,7 @@ const Configure = () => {
     "monitor-name": "name",
     "monitor-checks-http": "type",
     "monitor-checks-ping": "type",
+    "notify-email-default": "notification-email",
   };
 
   useEffect(() => {
@@ -80,27 +83,55 @@ const Configure = () => {
   const handleChange = (event, name) => {
     let { value, id } = event.target;
     if (!name) name = idMap[id];
-    if (name === "interval") {
-      value = value * MS_PER_MINUTE;
+
+    if (name.includes("notification-")) {
+      name = name.replace("notification-", "");
+      let hasNotif = monitor.notifications.some(
+        (notification) => notification.type === name
+      );
+      setMonitor((prev) => {
+        const notifs = [...prev.notifications];
+        if (hasNotif) {
+          return {
+            ...prev,
+            notifications: notifs.filter((notif) => notif.type !== name),
+          };
+        } else {
+          return {
+            ...prev,
+            notifications: [
+              ...notifs,
+              name === "email"
+                ? { type: name, address: value }
+                : // TODO - phone number
+                  { type: name, phone: value },
+            ],
+          };
+        }
+      });
+    } else {
+      if (name === "interval") {
+        value = value * MS_PER_MINUTE;
+      }
+      setMonitor((prev) => ({
+        ...prev,
+        [name]: value,
+      }));
+
+      const validation = monitorValidation.validate(
+        { [name]: value },
+        { abortEarly: false }
+      );
+
+      setErrors((prev) => {
+        const updatedErrors = { ...prev };
+
+        if (validation.error)
+          updatedErrors[name] = validation.error.details[0].message;
+        else delete updatedErrors[name];
+        return updatedErrors;
+      });
     }
-    setMonitor((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-
-    const validation = monitorValidation.validate(
-      { [name]: value },
-      { abortEarly: false }
-    );
-
-    setErrors((prev) => {
-      const updatedErrors = { ...prev };
-
-      if (validation.error)
-        updatedErrors[name] = validation.error.details[0].message;
-      else delete updatedErrors[name];
-      return updatedErrors;
-    });
   };
 
   const handleSubmit = async (event) => {
@@ -139,6 +170,8 @@ const Configure = () => {
   const parsedUrl = parseUrl(monitor?.url);
   const protocol = parsedUrl?.protocol?.replace(":", "") || "";
 
+  var lastChecked = formatDurationRounded(getLastChecked(monitor?.checks));
+
   return (
     <Box className="configure-monitor">
       <Button
@@ -161,10 +194,18 @@ const Configure = () => {
         <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
           {monitor?.status ? <GreenCheck /> : <RedCheck />}
           <Box>
-            <Typography component="h1" sx={{ lineHeight: 1 }}>
-              {parsedUrl?.host || "..."}
-            </Typography>
-            <Typography mt={theme.gap.small}>
+            {parsedUrl?.host ? (
+              <Typography
+                component="h1"
+                mb={theme.gap.small}
+                sx={{ lineHeight: 1 }}
+              >
+                {parsedUrl.host || "..."}
+              </Typography>
+            ) : (
+              ""
+            )}
+            <Typography lineHeight={parsedUrl?.host ? 1 : theme.gap.large}>
               <Typography
                 component="span"
                 sx={{
@@ -175,8 +216,8 @@ const Configure = () => {
               >
                 Your site is {monitor?.status ? "up" : "down"}.
               </Typography>{" "}
-              Checking every {duration}. Last time checked{" "}
-              {formatDurationRounded(getLastChecked(monitor?.checks))} ago.
+              Checking every {duration}.{" "}
+              {lastChecked ? `Last time checked ${lastChecked} ago.` : ""}
             </Typography>
           </Box>
           <Stack
@@ -248,6 +289,69 @@ const Configure = () => {
             />
           </Stack>
         </Stack>
+        <Stack
+          className="config-box"
+          direction="row"
+          justifyContent="space-between"
+          gap={theme.gap.xxl}
+        >
+          <Box>
+            <Typography component="h2">Incident notifications</Typography>
+            <Typography component="p" mt={theme.gap.small}>
+              When there is an incident, notify users.
+            </Typography>
+          </Box>
+          <Stack gap={theme.gap.medium}>
+            <Typography component="p" mt={theme.gap.small}>
+              When there is a new incident,
+            </Typography>
+            <Checkbox
+              id="notify-sms"
+              label="Notify via SMS (coming soon)"
+              isChecked={false}
+              value=""
+              onChange={() => console.log("disabled")}
+              isDisabled={true}
+            />
+            <Checkbox
+              id="notify-email-default"
+              label={`Notify via email (to ${user.email})`}
+              isChecked={
+                monitor?.notifications?.some(
+                  (notification) => notification.type === "email"
+                ) || false
+              }
+              value={user?.email}
+              onChange={(event) => handleChange(event)}
+            />
+            <Checkbox
+              id="notify-email"
+              label="Also notify via email to multiple addresses (coming soon)"
+              isChecked={false}
+              value=""
+              onChange={() => console.log("disabled")}
+              isDisabled={true}
+            />
+            {monitor?.notifications?.some(
+              (notification) => notification.type === "emails"
+            ) ? (
+              <Box mx={`calc(${theme.gap.ml} * 2)`}>
+                <Field
+                  id="notify-email-list"
+                  type="text"
+                  placeholder="name@gmail.com"
+                  value=""
+                  onChange={() => console.log("disabled")}
+                />
+                <Typography mt={theme.gap.small}>
+                  You can separate multiple emails with a comma
+                </Typography>
+              </Box>
+            ) : (
+              ""
+            )}
+          </Stack>
+        </Stack>
         <Stack
           className="config-box"
           direction="row"

From e6f524f5d3ea143ea027df0c69aff7d670bf5fdf Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 31 Jul 2024 18:58:41 -0400
Subject: [PATCH 27/32] Added modal to remove monitor function

---
 Client/src/Pages/Monitors/Configure/index.css |  5 +-
 Client/src/Pages/Monitors/Configure/index.jsx | 54 +++++++++++++++++--
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css
index ab52b028a..a594348ab 100644
--- a/Client/src/Pages/Monitors/Configure/index.css
+++ b/Client/src/Pages/Monitors/Configure/index.css
@@ -12,6 +12,9 @@
 .configure-monitor .MuiSelect-select {
   color: var(--env-var-color-5);
 }
+.configure-monitor .MuiModal-root h2.MuiTypography-root {
+  color: var(--env-var-color-1);
+}
 .configure-monitor p.MuiTypography-root,
 .configure-monitor .MuiSelect-select {
   font-size: var(--env-var-font-size-medium);
@@ -51,7 +54,7 @@
   position: absolute;
   top: 100%;
 }
-.configure-monitor .MuiInputBase-root:has(> .Mui-disabled){
+.configure-monitor .MuiInputBase-root:has(> .Mui-disabled) {
   background-color: var(--env-var-color-13);
 }
 
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 31faf2c63..fab29e8fe 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useEffect, useState } from "react";
 import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Modal, Stack, Typography } from "@mui/material";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
@@ -147,9 +147,9 @@ const Configure = () => {
     }
   };
 
-  const hanldeRemove = async (event) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const handleRemove = async (event) => {
     event.preventDefault();
-    // TODO add confirm
     const action = await dispatch(deleteUptimeMonitor({ authToken, monitor }));
     if (action.meta.requestStatus === "fulfilled") {
       navigate("/monitors");
@@ -249,7 +249,7 @@ const Configure = () => {
                 boxShadow: "none",
                 px: theme.gap.ml,
               }}
-              onClick={hanldeRemove}
+              onClick={() => setIsOpen(true)}
             />
           </Stack>
         </Stack>
@@ -380,6 +380,52 @@ const Configure = () => {
           />
         </Stack>
       </form>
+      <Modal
+        aria-labelledby="modal-delete-monitor"
+        aria-describedby="delete-monitor-confirmation"
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        disablePortal
+      >
+        <Stack
+          gap={theme.gap.xs}
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: 400,
+            bgcolor: "white",
+            border: "solid 1px #f2f2f2",
+            borderRadius: `${theme.shape.borderRadius}px`,
+            boxShadow: 24,
+            p: "30px",
+            "&:focus": {
+              outline: "none",
+            },
+          }}
+        >
+          <Typography id="modal-delete-monitor" component="h2">
+            Really delete this monitor?
+          </Typography>
+          <Typography id="delete-monitor-confirmation">
+            Once deleted, this monitor cannot be retrieved back.
+          </Typography>
+          <Stack
+            direction="row"
+            gap={theme.gap.small}
+            mt={theme.gap.large}
+            justifyContent="flex-end"
+          >
+            <Button
+              level="tertiary"
+              label="Cancel"
+              onClick={() => setIsOpen(false)}
+            />
+            <Button level="error" label="Delete" onClick={handleRemove} />
+          </Stack>
+        </Stack>
+      </Modal>
     </Box>
   );
 };

From 4ce67b54b6b8b851441f67bb8c9ef95ebfc7e11b Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 31 Jul 2024 19:20:50 -0400
Subject: [PATCH 28/32] Added icons to integrations page

---
 Client/src/Pages/Integrations/index.jsx  | 45 ++++++++++++++++--------
 Client/src/assets/icons/discord-icon.svg |  8 +++++
 Client/src/assets/icons/slack-icon.svg   | 10 ++++++
 Client/src/assets/icons/zapier-icon.svg  |  8 +++++
 4 files changed, 57 insertions(+), 14 deletions(-)
 create mode 100644 Client/src/assets/icons/discord-icon.svg
 create mode 100644 Client/src/assets/icons/slack-icon.svg
 create mode 100644 Client/src/assets/icons/zapier-icon.svg

diff --git a/Client/src/Pages/Integrations/index.jsx b/Client/src/Pages/Integrations/index.jsx
index 376ef6657..dc8e668e0 100644
--- a/Client/src/Pages/Integrations/index.jsx
+++ b/Client/src/Pages/Integrations/index.jsx
@@ -2,19 +2,22 @@ import PropTypes from "prop-types";
 import { Stack, Box, Typography, Grid } from "@mui/material";
 import Button from "../../Components/Button";
 import { useTheme } from "@emotion/react";
+import Discord from "../../assets/icons/discord-icon.svg?react";
+import Slack from "../../assets/icons/slack-icon.svg?react";
+import Zapier from "../../assets/icons/zapier-icon.svg?react";
 
 import "./index.css";
 
 /**
  * Integrations component
  * @param {Object} props - Props for the IntegrationsComponent.
- * @param {string} props.url - The URL for the integration image.
+ * @param {string} props.icon - The icon for the integration image.
  * @param {string} props.header - The header for the integration.
  * @param {string} props.info - Information about the integration.
  * @param {Function} props.onClick - The onClick handler for the integration button.
  * @returns {JSX.Element} The JSX representation of the IntegrationsComponent.
  */
-const IntegrationsComponent = ({ url, header, info, onClick }) => {
+const IntegrationsComponent = ({ icon, header, info, onClick }) => {
   const theme = useTheme();
 
   return (
@@ -24,14 +27,12 @@ const IntegrationsComponent = ({ url, header, info, onClick }) => {
         justifyContent="space-between"
         gap={theme.gap.large}
         p={theme.gap.ml}
+        pl={theme.gap.large}
+        height="100%"
       >
-        <Box
-          component="img"
-          src={url}
-          alt="Integration"
-          width={80}
-          height={80}
-        />
+        <Stack alignItems="center" justifyContent="center">
+          {icon}
+        </Stack>
         <Stack gap={theme.gap.xs} flex={1}>
           <Typography component="h1">{header}</Typography>
           <Typography
@@ -48,6 +49,7 @@ const IntegrationsComponent = ({ url, header, info, onClick }) => {
           level="primary"
           onClick={onClick}
           sx={{ alignSelf: "center" }}
+          disabled={true}
         />
       </Stack>
     </Grid>
@@ -56,7 +58,7 @@ const IntegrationsComponent = ({ url, header, info, onClick }) => {
 
 // PropTypes for IntegrationsComponent
 IntegrationsComponent.propTypes = {
-  url: PropTypes.string.isRequired,
+  icon: PropTypes.object.isRequired,
   header: PropTypes.string.isRequired,
   info: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
@@ -72,19 +74,34 @@ const Integrations = () => {
 
   const integrations = [
     {
-      url: "https://via.placeholder.com/80",
+      icon: (
+        <Slack
+          alt="slack integration"
+          style={{ width: "45px", height: "45px" }}
+        />
+      ),
       header: "Slack",
       info: "Connect with Slack and see incidents in a channel",
       onClick: () => {},
     },
     {
-      url: "https://via.placeholder.com/80",
+      icon: (
+        <Discord
+          alt="discord integration"
+          style={{ width: "42px", height: "42px" }}
+        />
+      ),
       header: "Discord",
       info: "Connect with Discord and view incidents directly in a channel",
       onClick: () => {},
     },
     {
-      url: "https://via.placeholder.com/80",
+      icon: (
+        <Zapier
+          alt="zapier integration"
+          style={{ width: "42px", height: "42px" }}
+        />
+      ),
       header: "Zapier",
       info: "Send all incidents to Zapier, and then see them everywhere",
       onClick: () => {},
@@ -102,7 +119,7 @@ const Integrations = () => {
         {integrations.map((integration, index) => (
           <IntegrationsComponent
             key={index}
-            url={integration.url}
+            icon={integration.icon}
             header={integration.header}
             info={integration.info}
             onClick={integration.onClick}
diff --git a/Client/src/assets/icons/discord-icon.svg b/Client/src/assets/icons/discord-icon.svg
new file mode 100644
index 000000000..c03e8e127
--- /dev/null
+++ b/Client/src/assets/icons/discord-icon.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="#5865F2" fill-rule="nonzero">
+
</path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/Client/src/assets/icons/slack-icon.svg b/Client/src/assets/icons/slack-icon.svg
new file mode 100644
index 000000000..ff256fd4d
--- /dev/null
+++ b/Client/src/assets/icons/slack-icon.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none">
+
<g fill-rule="evenodd" clip-rule="evenodd">
+
<path fill="#E01E5A" d="M2.471 11.318a1.474 1.474 0 001.47-1.471v-1.47h-1.47A1.474 1.474 0 001 9.846c.001.811.659 1.469 1.47 1.47zm3.682-2.942a1.474 1.474 0 00-1.47 1.471v3.683c.002.811.66 1.468 1.47 1.47a1.474 1.474 0 001.47-1.47V9.846a1.474 1.474 0 00-1.47-1.47z"/>
+
<path fill="#36C5F0" d="M4.683 2.471c.001.811.659 1.469 1.47 1.47h1.47v-1.47A1.474 1.474 0 006.154 1a1.474 1.474 0 00-1.47 1.47zm2.94 3.682a1.474 1.474 0 00-1.47-1.47H2.47A1.474 1.474 0 001 6.153c.002.812.66 1.469 1.47 1.47h3.684a1.474 1.474 0 001.47-1.47z"/>
+
<path fill="#2EB67D" d="M9.847 7.624a1.474 1.474 0 001.47-1.47V2.47A1.474 1.474 0 009.848 1a1.474 1.474 0 00-1.47 1.47v3.684c.002.81.659 1.468 1.47 1.47zm3.682-2.941a1.474 1.474 0 00-1.47 1.47v1.47h1.47A1.474 1.474 0 0015 6.154a1.474 1.474 0 00-1.47-1.47z"/>
+
<path fill="#ECB22E" d="M8.377 9.847c.002.811.659 1.469 1.47 1.47h3.683A1.474 1.474 0 0015 9.848a1.474 1.474 0 00-1.47-1.47H9.847a1.474 1.474 0 00-1.47 1.47zm2.94 3.682a1.474 1.474 0 00-1.47-1.47h-1.47v1.47c.002.812.659 1.469 1.47 1.47a1.474 1.474 0 001.47-1.47z"/>
+
</g>
+
</svg>
\ No newline at end of file
diff --git a/Client/src/assets/icons/zapier-icon.svg b/Client/src/assets/icons/zapier-icon.svg
new file mode 100644
index 000000000..6ee0b5eca
--- /dev/null
+++ b/Client/src/assets/icons/zapier-icon.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g>
+        <path d="M128.080089,-0.000183105 C135.311053,0.0131003068 142.422517,0.624138494 149.335663,1.77979593 L149.335663,1.77979593 L149.335663,76.2997796 L202.166953,23.6044907 C208.002065,27.7488446 213.460883,32.3582023 218.507811,37.3926715 C223.557281,42.4271407 228.192318,47.8867213 232.346817,53.7047992 L232.346817,53.7047992 L179.512985,106.400063 L254.227854,106.400063 C255.387249,113.29414 256,120.36111 256,127.587243 L256,127.587243 L256,127.759881 C256,134.986013 255.387249,142.066204 254.227854,148.960282 L254.227854,148.960282 L179.500273,148.960282 L232.346817,201.642324 C228.192318,207.460402 223.557281,212.919983 218.523066,217.954452 L218.523066,217.954452 L218.507811,217.954452 C213.460883,222.988921 208.002065,227.6115 202.182208,231.742607 L202.182208,231.742607 L149.335663,179.04709 L149.335663,253.5672 C142.435229,254.723036 135.323765,255.333244 128.092802,255.348499 L128.092802,255.348499 L127.907197,255.348499 C120.673691,255.333244 113.590195,254.723036 106.677048,253.5672 L106.677048,253.5672 L106.677048,179.04709 L53.8457596,231.742607 C42.1780766,223.466917 31.977435,213.278734 23.6658953,201.642324 L23.6658953,201.642324 L76.4997269,148.960282 L1.78485803,148.960282 C0.612750404,142.052729 0,134.946095 0,127.719963 L0,127.719963 L0,127.349037 C0.0121454869,125.473817 0.134939797,123.182933 0.311311815,120.812834 L0.36577283,120.099764 C0.887996182,113.428547 1.78485803,106.400063 1.78485803,106.400063 L1.78485803,106.400063 L76.4997269,106.400063 L23.6658953,53.7047992 C27.8076812,47.8867213 32.4300059,42.4403618 37.4769335,37.4193681 L37.4769335,37.4193681 L37.5023588,37.3926715 C42.5391163,32.3582023 48.0106469,27.7488446 53.8457596,23.6044907 L53.8457596,23.6044907 L106.677048,76.2997796 L106.677048,1.77979593 C113.590195,0.624138494 120.688946,0.0131003068 127.932622,-0.000183105 L127.932622,-0.000183105 L128.080089,-0.000183105 Z M128.067377,95.7600714 L127.945335,95.7600714 C118.436262,95.7600714 109.32891,97.5001809 100.910584,100.661566 C97.7553011,109.043534 96.0085811,118.129275 95.9958684,127.613685 L95.9958684,127.733184 C96.0085811,137.217594 97.7553011,146.303589 100.923296,154.685303 C109.32891,157.846943 118.436262,159.587052 127.945335,159.587052 L128.067377,159.587052 C137.576449,159.587052 146.683802,157.846943 155.089415,154.685303 C158.257411,146.290368 160.004131,137.217594 160.004131,127.733184 L160.004131,127.613685 C160.004131,118.129275 158.257411,109.043534 155.089415,100.661566 C146.683802,97.5001809 137.576449,95.7600714 128.067377,95.7600714 Z" fill="#FF4A00" fill-rule="nonzero">
+
</path>
+    </g>
+</svg>
\ No newline at end of file

From c48249e30dbb92ac09b793f4b7c9d0512443839f Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 31 Jul 2024 19:23:52 -0400
Subject: [PATCH 29/32] Removed redundant code

---
 Client/src/Pages/Integrations/index.jsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/Client/src/Pages/Integrations/index.jsx b/Client/src/Pages/Integrations/index.jsx
index dc8e668e0..75da41a6b 100644
--- a/Client/src/Pages/Integrations/index.jsx
+++ b/Client/src/Pages/Integrations/index.jsx
@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import { Stack, Box, Typography, Grid } from "@mui/material";
+import { Stack, Typography, Grid } from "@mui/material";
 import Button from "../../Components/Button";
 import { useTheme } from "@emotion/react";
 import Discord from "../../assets/icons/discord-icon.svg?react";
@@ -30,9 +30,7 @@ const IntegrationsComponent = ({ icon, header, info, onClick }) => {
         pl={theme.gap.large}
         height="100%"
       >
-        <Stack alignItems="center" justifyContent="center">
-          {icon}
-        </Stack>
+        {icon}
         <Stack gap={theme.gap.xs} flex={1}>
           <Typography component="h1">{header}</Typography>
           <Typography
@@ -77,7 +75,7 @@ const Integrations = () => {
       icon: (
         <Slack
           alt="slack integration"
-          style={{ width: "45px", height: "45px" }}
+          style={{ width: "45px", height: "45px", alignSelf: "center" }}
         />
       ),
       header: "Slack",
@@ -88,7 +86,7 @@ const Integrations = () => {
       icon: (
         <Discord
           alt="discord integration"
-          style={{ width: "42px", height: "42px" }}
+          style={{ width: "42px", height: "42px", alignSelf: "center" }}
         />
       ),
       header: "Discord",
@@ -99,7 +97,7 @@ const Integrations = () => {
       icon: (
         <Zapier
           alt="zapier integration"
-          style={{ width: "42px", height: "42px" }}
+          style={{ width: "42px", height: "42px", alignSelf: "center" }}
         />
       ),
       header: "Zapier",

From b126830110587b916a50acd87e86de391a95e9a2 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 31 Jul 2024 20:20:04 -0700
Subject: [PATCH 30/32] Add notifications to monitors before returning

---
 Server/db/mongo/modules/monitorModule.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index 6f795e35a..65dae92b2 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -2,6 +2,7 @@ const Monitor = require("../../../models/Monitor");
 const Check = require("../../../models/Check");
 const PageSpeedCheck = require("../../../models/PageSpeedCheck");
 const { errorMessages } = require("../../../utils/messages");
+const Notification = require("../../../models/Notification");
 
 /**
  * Get all monitors
@@ -119,7 +120,12 @@ const getMonitorsByUserId = async (req, res) => {
             createdAt: sortOrder,
           })
           .limit(limit);
-        return { ...monitor.toObject(), checks };
+
+        // Get notifications
+        const notifications = await Notification.find({
+          monitorId: monitor._id,
+        });
+        return { ...monitor.toObject(), checks, notifications };
       })
     );
     return monitorsWithChecks;

From 75a897716f437d1393982a68c3b7904e586544af Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 31 Jul 2024 20:22:11 -0700
Subject: [PATCH 31/32] Add notifcations to getMonitorById as well

---
 Server/db/mongo/modules/monitorModule.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index 65dae92b2..9bca432c2 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -64,7 +64,8 @@ const getMonitorById = async (req, res) => {
         createdAt: sortOrder,
       })
       .limit(limit);
-    const monitorWithChecks = { ...monitor.toObject(), checks };
+    const notifications = await Notification.find({ monitorId: monitor._id });
+    const monitorWithChecks = { ...monitor.toObject(), checks, notifications };
     return monitorWithChecks;
   } catch (error) {
     throw error;

From 110e31fb7de2fba324fba2e3bcdbfbcd9cea8ca4 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Thu, 1 Aug 2024 13:22:39 -0400
Subject: [PATCH 32/32] Added notifications to server validation and small
 styling changes

---
 Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js | 1 +
 Client/src/Pages/Account/index.css                        | 3 +++
 Client/src/Pages/Auth/index.css                           | 2 +-
 Client/src/Pages/Monitors/Configure/index.jsx             | 2 +-
 Client/src/Pages/Settings/index.jsx                       | 2 +-
 Server/validation/joi.js                                  | 1 +
 6 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
index bf7f0378e..05c182f5f 100644
--- a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
+++ b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
@@ -77,6 +77,7 @@ export const updateUptimeMonitor = createAsyncThunk(
         name: monitor.name,
         description: monitor.description,
         interval: monitor.interval,
+        notifications: monitor.notifications
       };
       const res = await axiosInstance.post(
         `/monitors/edit/${monitor._id}`,
diff --git a/Client/src/Pages/Account/index.css b/Client/src/Pages/Account/index.css
index ee28b1c30..29d41aeff 100644
--- a/Client/src/Pages/Account/index.css
+++ b/Client/src/Pages/Account/index.css
@@ -31,6 +31,9 @@
 .account .MuiButtonGroup-root button {
   border-color: var(--env-var-color-16);
 }
+.account button{
+  height: 34px;
+}
 .account [class$="-form"] {
   width: inherit;
 }
diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css
index e2e5d4d56..c9fa48fe5 100644
--- a/Client/src/Pages/Auth/index.css
+++ b/Client/src/Pages/Auth/index.css
@@ -103,7 +103,7 @@
 /* ///// */
 .login-page
   .MuiStack-root:not(:has(> .MuiButtonBase-root))
-  span:not(.MuiTypography-root) {
+  span:not(.MuiTypography-root):not(.field-required) {
   color: var(--env-var-color-3);
   cursor: pointer;
   font-weight: 600;
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index fab29e8fe..cde71bdf7 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -375,7 +375,7 @@ const Configure = () => {
           <Button
             level="primary"
             label="Save"
-            sx={{ px: theme.gap.ml }}
+            sx={{ px: theme.gap.large }}
             onClick={handleSubmit}
           />
         </Stack>
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index 200830677..dcfe81318 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -110,7 +110,7 @@ const Settings = () => {
           </Box>
         </Stack>
         <Stack direction="row" justifyContent="flex-end">
-          <Button level="primary" label="Save" />
+          <Button level="primary" label="Save" sx={{ px: theme.gap.large }} />
         </Stack>
       </form>
     </Box>
diff --git a/Server/validation/joi.js b/Server/validation/joi.js
index 8d485bf11..ccf16f257 100644
--- a/Server/validation/joi.js
+++ b/Server/validation/joi.js
@@ -160,6 +160,7 @@ const editMonitorBodyValidation = joi.object({
   name: joi.string(),
   description: joi.string(),
   interval: joi.number(),
+  notifications: joi.array().items(joi.object()),
 });
 
 //****************************************