From d1427010c26e6c72d8c89016582512c932718e8c Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 11 Jun 2024 12:58:21 -0700
Subject: [PATCH 01/11] Added validation for eamil field in forgot-password
 page.  Make axios request to backend

---
 Client/src/Pages/ForgotPassword/index.jsx | 49 ++++++++++++++++++++++-
 Client/src/Pages/Register/index.jsx       |  1 -
 Client/src/Validation/validation.js       | 13 +++++-
 3 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/Client/src/Pages/ForgotPassword/index.jsx b/Client/src/Pages/ForgotPassword/index.jsx
index b94546251..d5ec84088 100644
--- a/Client/src/Pages/ForgotPassword/index.jsx
+++ b/Client/src/Pages/ForgotPassword/index.jsx
@@ -5,8 +5,52 @@ import Logomark from "../../assets/Images/key-password.png";
 import EmailTextField from "../../Components/TextFields/Email/EmailTextField";
 import Button from "../../Components/Button";
 import LeftArrow from "../../assets/Images/arrow-left.png";
+import { useState, useEffect } from "react";
+import { recoveryValidation } from "../../Validation/validation";
+import axios from "axios";
+
+const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
 
 const ForgotPassword = () => {
+  const [errors, setErrors] = useState({});
+  const [form, setForm] = useState({
+    email: "",
+  });
+
+  const idMap = {
+    "forgot-password-email-input": "email",
+  };
+
+  useEffect(() => {
+    const { error } = recoveryValidation.validate(form);
+    if (error === undefined) {
+      setErrors({});
+    } else {
+      const validationErrors = error.details.reduce((acc, err) => {
+        return { ...acc, [err.path[0]]: err.message };
+      }, {});
+      setErrors(validationErrors);
+    }
+  }, [form]);
+
+  const handleInput = (e) => {
+    const fieldName = idMap[e.target.id];
+    setForm({ ...form, [fieldName]: e.target.value });
+  };
+
+  const handleSubmit = async () => {
+    const { error } = recoveryValidation.validate(form);
+    if (error === undefined) {
+      try {
+        const res = await axios.post(`${BASE_URL}/auth/recovery/request`, form);
+        console.log(res);
+      } catch (error) {
+        console.log(error);
+      }
+    } else {
+      alert(error);
+    }
+  };
   return (
     <div className="forgot-password-page">
       <BackgroundPattern></BackgroundPattern>
@@ -27,12 +71,15 @@ const ForgotPassword = () => {
         <div className="forgot-password-v-gap-large"></div>
         <div className="forgot-password-body">
           <EmailTextField
-            error={false}
+            onChange={handleInput}
+            error={errors.email ? true : false}
+            helperText={errors.email ? errors.email : ""}
             placeholder="Enter your email"
             id="forgot-password-email-input"
           />
           <div className="forgot-password-v-gap-medium"></div>
           <Button
+            onClick={handleSubmit}
             level="primary"
             label="Reset password"
             sx={{
diff --git a/Client/src/Pages/Register/index.jsx b/Client/src/Pages/Register/index.jsx
index ca4eaea6e..81d458873 100644
--- a/Client/src/Pages/Register/index.jsx
+++ b/Client/src/Pages/Register/index.jsx
@@ -1,7 +1,6 @@
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
-import axios from "axios";
 import "./index.css";
 import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
 import Logomark from "../../assets/Images/Logomark.png";
diff --git a/Client/src/Validation/validation.js b/Client/src/Validation/validation.js
index 997fd1c16..067991734 100644
--- a/Client/src/Validation/validation.js
+++ b/Client/src/Validation/validation.js
@@ -40,4 +40,15 @@ const loginValidation = joi.object({
   }),
 });
 
-export { registerValidation, loginValidation };
+const recoveryValidation = joi.object({
+  email: joi
+    .string()
+    .email({ tlds: { allow: false } })
+    .required()
+    .messages({
+      "string.email": "Email must be a valid email",
+      "string.empty": "Email is required",
+    }),
+});
+
+export { registerValidation, loginValidation, recoveryValidation };

From a8af106606763447b43423300774ec07d90bed33 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 11 Jun 2024 14:18:20 -0700
Subject: [PATCH 02/11] Connected set new password to backend

---
 Client/src/Pages/ForgotPassword/index.jsx | 27 +++++----
 Client/src/Pages/SetNewPassword/index.jsx | 71 +++++++++++++++++++++--
 Client/src/Validation/validation.js       | 19 +++++-
 Server/controllers/authController.js      |  2 +-
 Server/db/MongoDB.js                      |  5 +-
 5 files changed, 105 insertions(+), 19 deletions(-)

diff --git a/Client/src/Pages/ForgotPassword/index.jsx b/Client/src/Pages/ForgotPassword/index.jsx
index d5ec84088..b77865ebb 100644
--- a/Client/src/Pages/ForgotPassword/index.jsx
+++ b/Client/src/Pages/ForgotPassword/index.jsx
@@ -12,6 +12,7 @@ import axios from "axios";
 const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
 
 const ForgotPassword = () => {
+  const [isLoading, setIsLoading] = useState(false); // Used to disable the button while loading so user doesn't submit multiple times
   const [errors, setErrors] = useState({});
   const [form, setForm] = useState({
     email: "",
@@ -39,16 +40,21 @@ const ForgotPassword = () => {
   };
 
   const handleSubmit = async () => {
-    const { error } = recoveryValidation.validate(form);
-    if (error === undefined) {
-      try {
-        const res = await axios.post(`${BASE_URL}/auth/recovery/request`, form);
-        console.log(res);
-      } catch (error) {
-        console.log(error);
+    //TODO show loading spinner
+    setIsLoading(true);
+    try {
+      const { error } = recoveryValidation.validate(form);
+      if (error !== undefined) {
+        throw error;
       }
-    } else {
+      const res = await axios.post(`${BASE_URL}/auth/recovery/request`, form);
+      // TODO properly display success
+      alert(JSON.stringify(res.data));
+    } catch (error) {
+      //TODO display error (Toast?)
       alert(error);
+    } finally {
+      setIsLoading(false);
     }
   };
   return (
@@ -72,13 +78,14 @@ const ForgotPassword = () => {
         <div className="forgot-password-body">
           <EmailTextField
             onChange={handleInput}
-            error={errors.email ? true : false}
-            helperText={errors.email ? errors.email : ""}
+            error={errors.email !== undefined ? true : false}
+            helperText={errors.email !== undefined ? errors.email : ""}
             placeholder="Enter your email"
             id="forgot-password-email-input"
           />
           <div className="forgot-password-v-gap-medium"></div>
           <Button
+            disabled={errors.email !== undefined || isLoading === true}
             onClick={handleSubmit}
             level="primary"
             label="Reset password"
diff --git a/Client/src/Pages/SetNewPassword/index.jsx b/Client/src/Pages/SetNewPassword/index.jsx
index fc453cde1..9b0004723 100644
--- a/Client/src/Pages/SetNewPassword/index.jsx
+++ b/Client/src/Pages/SetNewPassword/index.jsx
@@ -1,14 +1,69 @@
 import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
 import "./index.css";
-import React from "react";
 import LockIcon from "../../assets/Images/lock-icon.png";
 import PasswordTextField from "../../Components/TextFields/Password/PasswordTextField";
 import Check from "../../Components/Check/Check";
 import Button from "../../Components/Button";
 import LeftArrow from "../../assets/Images/arrow-left.png";
 import { useParams } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { newPasswordValidation } from "../../Validation/validation";
+import axios from "axios";
+const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
+import { useNavigate } from "react-router-dom";
 
 const SetNewPassword = () => {
+  const navigate = useNavigate();
+  const [errors, setErrors] = useState({});
+  const [form, setForm] = useState({});
+  const [isLoading, setIsLoading] = useState(false);
+
+  const idMap = {
+    "register-password-input": "password",
+    "confirm-password-input": "confirm",
+  };
+
+  const handleInput = (e) => {
+    const fieldName = idMap[e.target.id];
+    setForm({ ...form, [fieldName]: e.target.value });
+    console.log(errors);
+  };
+
+  const handleSubmit = async () => {
+    // TODO show loading spinner
+    setIsLoading(true);
+    try {
+      await axios.post(`${BASE_URL}/auth/recovery/validate`, {
+        recoveryToken: token,
+      });
+      await axios.post(`${BASE_URL}/auth/recovery/reset`, {
+        ...form,
+        recoveryToken: token,
+      });
+      navigate("/login");
+    } catch (error) {
+      // TODO display error (Toast?)
+      alert(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const { error } = newPasswordValidation.validate(form, {
+      abortEarly: false,
+    });
+
+    if (error) {
+      const validationErrors = error.details.reduce((acc, err) => {
+        return { ...acc, [err.path[0]]: err.message };
+      }, {});
+      setErrors(validationErrors);
+    } else {
+      setErrors({});
+    }
+  }, [form]);
+
   const { token } = useParams();
   return (
     <div className="set-new-password-page">
@@ -31,16 +86,20 @@ const SetNewPassword = () => {
         <div className="set-new-password-form-content">
           <PasswordTextField
             label="Password"
-            error={false}
+            onChange={handleInput}
+            error={errors.password !== undefined ? true : false}
+            helperText={errors.password !== undefined ? errors.password : ""}
             placeholder="••••••••"
             id="register-password-input"
           />
           <div className="set-new-password-form-gap-medium"></div>
           <PasswordTextField
             label="Confirm password"
-            error={false}
+            onChange={handleInput}
+            error={errors.confirm !== undefined ? true : false}
+            helperText={errors.confirm !== undefined ? errors.confirm : ""}
             placeholder="••••••••"
-            id="register-password-input"
+            id="confirm-password-input"
           />
           <div className="set-new-password-form-gap-medium"></div>
           <div className="set-new-password-form-checks">
@@ -50,8 +109,10 @@ const SetNewPassword = () => {
           </div>
           <div className="set-new-password-form-gap-medium"></div>
           <Button
+            disabled={Object.keys(errors).length !== 0 || isLoading === true}
+            onClick={handleSubmit}
             level="primary"
-            label="Reset passwprd"
+            label="Reset password"
             sx={{
               width: "100%",
               fontSize: "13px",
diff --git a/Client/src/Validation/validation.js b/Client/src/Validation/validation.js
index 067991734..74233a029 100644
--- a/Client/src/Validation/validation.js
+++ b/Client/src/Validation/validation.js
@@ -51,4 +51,21 @@ const recoveryValidation = joi.object({
     }),
 });
 
-export { registerValidation, loginValidation, recoveryValidation };
+const newPasswordValidation = joi.object({
+  password: joi.string().min(8).required().messages({
+    "string.min": "Password must be at least 8 characters",
+    "string.empty": "Password is required",
+  }),
+  confirm: joi.string().valid(joi.ref("password")).min(8).required().messages({
+    "string.min": "Password must be at least 8 characters",
+    "string.empty": "Password is required",
+    "any.only": "Passwords do not match",
+  }),
+});
+
+export {
+  registerValidation,
+  loginValidation,
+  recoveryValidation,
+  newPasswordValidation,
+};
diff --git a/Server/controllers/authController.js b/Server/controllers/authController.js
index 6c035aa5c..4f4078def 100644
--- a/Server/controllers/authController.js
+++ b/Server/controllers/authController.js
@@ -167,7 +167,7 @@ const recoveryRequestController = async (req, res, next) => {
       await sendEmail(
         [req.body.email],
         "Uptime Monitor Password Recovery",
-        `<a href='${process.env.CLIENT_HOST}/set-new-password/${recoveryToken.token}'>Click here to reset your password</a>`,
+        `<a clicktracking="off" href='${process.env.CLIENT_HOST}/set-new-password/${recoveryToken.token}'>Click here to reset your password</a>`,
         `Recovery token: ${recoveryToken.token}`
       );
       return res.status(200).json({
diff --git a/Server/db/MongoDB.js b/Server/db/MongoDB.js
index f64059342..0e379b687 100644
--- a/Server/db/MongoDB.js
+++ b/Server/db/MongoDB.js
@@ -131,7 +131,6 @@ const validateRecoveryToken = async (req, res) => {
 const resetPassword = async (req, res) => {
   try {
     const newPassword = req.body.password;
-
     // Validate token again
     const recoveryToken = await validateRecoveryToken(req, res);
     const user = await UserModel.findOne({ email: recoveryToken.email });
@@ -148,7 +147,9 @@ const resetPassword = async (req, res) => {
     } else {
       throw new Error("User not found");
     }
-  } catch (error) {}
+  } catch (error) {
+    throw error;
+  }
 };
 
 //****************************************

From 6ac5f3ab10c361fec1e155808d602df2b83ff44b Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 11 Jun 2024 14:46:39 -0700
Subject: [PATCH 03/11] Added server side validation

---
 Server/controllers/authController.js |  8 +++++++-
 Server/validation/joi.js             | 20 ++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/Server/controllers/authController.js b/Server/controllers/authController.js
index 4f4078def..0391a904f 100644
--- a/Server/controllers/authController.js
+++ b/Server/controllers/authController.js
@@ -4,6 +4,9 @@ const {
   loginValidation,
   editUserParamValidation,
   editUserBodyValidation,
+  recoveryValidation,
+  recoveryTokenValidation,
+  newPasswordValidation,
 } = require("../validation/joi");
 const logger = require("../utils/logger");
 require("dotenv").config();
@@ -161,6 +164,7 @@ const userEditController = async (req, res, next) => {
  */
 const recoveryRequestController = async (req, res, next) => {
   try {
+    await recoveryValidation.validateAsync(req.body);
     const user = await req.db.getUserByEmail(req, res);
     if (user) {
       const recoveryToken = await req.db.requestRecoveryToken(req, res);
@@ -194,7 +198,8 @@ const recoveryRequestController = async (req, res, next) => {
  */
 const validateRecoveryTokenController = async (req, res, next) => {
   try {
-    const recoveryToken = await req.db.validateRecoveryToken(req, res);
+    await recoveryTokenValidation.validateAsync(req.body);
+    await req.db.validateRecoveryToken(req, res);
     // TODO Redirect user to reset password after validating token
     return res.status(200).json({
       success: true,
@@ -219,6 +224,7 @@ const validateRecoveryTokenController = async (req, res, next) => {
  */
 const resetPasswordController = async (req, res, next) => {
   try {
+    await newPasswordValidation.validateAsync(req.body);
     user = await req.db.resetPassword(req, res);
     res.status(200).json({ success: true, msg: "Password reset", data: user });
   } catch (error) {
diff --git a/Server/validation/joi.js b/Server/validation/joi.js
index 9eea3e9a6..2277083e7 100644
--- a/Server/validation/joi.js
+++ b/Server/validation/joi.js
@@ -26,6 +26,23 @@ const editUserBodyValidation = joi.object({
   profilePicUrl: joi.string(),
 });
 
+const recoveryValidation = joi.object({
+  email: joi
+    .string()
+    .email({ tlds: { allow: false } })
+    .required(),
+});
+
+const recoveryTokenValidation = joi.object({
+  recoveryToken: joi.string().required(),
+});
+
+const newPasswordValidation = joi.object({
+  recoveryToken: joi.string().required(),
+  password: joi.string().min(8).required(),
+  confirm: joi.string(),
+});
+
 //****************************************
 // Monitors
 //****************************************
@@ -120,6 +137,9 @@ const deleteChecksParamValidation = joi.object({
 module.exports = {
   loginValidation,
   registerValidation,
+  recoveryValidation,
+  recoveryTokenValidation,
+  newPasswordValidation,
   getMonitorByIdValidation,
   getMonitorsByUserIdValidation,
   monitorValidation,

From 45f093a432330311219d4e2c9cddafee956a75ce Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 12 Jun 2024 09:48:46 -0700
Subject: [PATCH 04/11] forgot-password redirected to /check-email on success

---
 Client/src/Pages/ForgotPassword/index.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/Client/src/Pages/ForgotPassword/index.jsx b/Client/src/Pages/ForgotPassword/index.jsx
index b77865ebb..c5dbb0de3 100644
--- a/Client/src/Pages/ForgotPassword/index.jsx
+++ b/Client/src/Pages/ForgotPassword/index.jsx
@@ -8,10 +8,13 @@ import LeftArrow from "../../assets/Images/arrow-left.png";
 import { useState, useEffect } from "react";
 import { recoveryValidation } from "../../Validation/validation";
 import axios from "axios";
+import { useNavigate } from "react-router-dom";
 
 const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
 
 const ForgotPassword = () => {
+  const navigate = useNavigate();
+
   const [isLoading, setIsLoading] = useState(false); // Used to disable the button while loading so user doesn't submit multiple times
   const [errors, setErrors] = useState({});
   const [form, setForm] = useState({
@@ -47,9 +50,8 @@ const ForgotPassword = () => {
       if (error !== undefined) {
         throw error;
       }
-      const res = await axios.post(`${BASE_URL}/auth/recovery/request`, form);
-      // TODO properly display success
-      alert(JSON.stringify(res.data));
+      await axios.post(`${BASE_URL}/auth/recovery/request`, form);
+      navigate("/check-email");
     } catch (error) {
       //TODO display error (Toast?)
       alert(error);

From 76fd0e9fe0695f97b2a7e45bc90fe76a47dadf26 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 12 Jun 2024 09:50:00 -0700
Subject: [PATCH 05/11] set-new-password redirected to /new-password-confirmed
 on success

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

diff --git a/Client/src/Pages/SetNewPassword/index.jsx b/Client/src/Pages/SetNewPassword/index.jsx
index 9b0004723..3da1c4f3e 100644
--- a/Client/src/Pages/SetNewPassword/index.jsx
+++ b/Client/src/Pages/SetNewPassword/index.jsx
@@ -40,7 +40,7 @@ const SetNewPassword = () => {
         ...form,
         recoveryToken: token,
       });
-      navigate("/login");
+      navigate("/new-passsword-confirmed");
     } catch (error) {
       // TODO display error (Toast?)
       alert(error);

From 80af000a0c82a0040043021a84f0276d31421579 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 12 Jun 2024 10:25:35 -0700
Subject: [PATCH 06/11] ACheck for new password different than old password. 
 Fixed typo in route.  Updated error msg

---
 Client/src/Components/Notifications/notify.js | 2 ++
 Client/src/Pages/SetNewPassword/index.jsx     | 4 ++--
 Server/db/MongoDB.js                          | 6 ++++++
 3 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 Client/src/Components/Notifications/notify.js

diff --git a/Client/src/Components/Notifications/notify.js b/Client/src/Components/Notifications/notify.js
new file mode 100644
index 000000000..86be4a0ab
--- /dev/null
+++ b/Client/src/Components/Notifications/notify.js
@@ -0,0 +1,2 @@
+import { toast } from "react-toastify";
+export default (message) => toast(message);
diff --git a/Client/src/Pages/SetNewPassword/index.jsx b/Client/src/Pages/SetNewPassword/index.jsx
index 3da1c4f3e..d2360c7c5 100644
--- a/Client/src/Pages/SetNewPassword/index.jsx
+++ b/Client/src/Pages/SetNewPassword/index.jsx
@@ -40,10 +40,10 @@ const SetNewPassword = () => {
         ...form,
         recoveryToken: token,
       });
-      navigate("/new-passsword-confirmed");
+      navigate("/new-password-confirmed");
     } catch (error) {
       // TODO display error (Toast?)
-      alert(error);
+      alert(error.response.data.msg);
     } finally {
       setIsLoading(false);
     }
diff --git a/Server/db/MongoDB.js b/Server/db/MongoDB.js
index 0e379b687..07804589e 100644
--- a/Server/db/MongoDB.js
+++ b/Server/db/MongoDB.js
@@ -131,10 +131,16 @@ const validateRecoveryToken = async (req, res) => {
 const resetPassword = async (req, res) => {
   try {
     const newPassword = req.body.password;
+
     // Validate token again
     const recoveryToken = await validateRecoveryToken(req, res);
     const user = await UserModel.findOne({ email: recoveryToken.email });
 
+    const match = await user.comparePassword(newPassword);
+    if (match === true) {
+      throw new Error("New password must be different from old password");
+    }
+
     if (user !== null) {
       user.password = newPassword;
       await user.save();

From b1d2a3912a51a87d2bd22832994e4196a08d4907 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 12 Jun 2024 11:04:11 -0700
Subject: [PATCH 07/11] Removed accidental Notification commit, updated readme
 with ENV vars for client

---
 Client/src/Components/Notifications/notify.js |  2 --
 README.md                                     | 34 +++++++++++++------
 2 files changed, 24 insertions(+), 12 deletions(-)
 delete mode 100644 Client/src/Components/Notifications/notify.js

diff --git a/Client/src/Components/Notifications/notify.js b/Client/src/Components/Notifications/notify.js
deleted file mode 100644
index 86be4a0ab..000000000
--- a/Client/src/Components/Notifications/notify.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import { toast } from "react-toastify";
-export default (message) => toast(message);
diff --git a/README.md b/README.md
index 02890e230..bee12f083 100644
--- a/README.md
+++ b/README.md
@@ -17,12 +17,14 @@ BlueWave uptime monitoring application
 - Clone this repository to your local machine
 
 1.  [Installation (Client)](#client)
-2.  [Installation (Server)](#server)
-3.  [Configuration(Server)](#config-server)
-    - [Environment](#environmental-variables)
+2.  [Configuration(Client)](#config-server)
+    - [Environment](#env-vars-client)
+3.  [Installation (Server)](#server)
+4.  [Configuration(Server)](#config-server)
+    - [Environment](#env-vars-server)
     - [Database](#databases)
       - [Docker Images](#docker-images)
-4.  [Endpoints](#endpoints)
+5.  [Endpoints](#endpoints)
     ###### Auth
     - <code>POST</code> [/api/v1/auth/register](#post-register)
     - <code>POST</code> [/api/v1/auth/login](#post-login)
@@ -48,8 +50,8 @@ BlueWave uptime monitoring application
     - <code>GET</code> [/api/v1/alerts/{alertId}](#get-alert-alert-id)
     - <code>POST</code> [/api/v1/alerts/edit/{alertId}](#edit-alert)
     - <code>POST</code> [/api/v1/alerts/delete/{alertId}](#delete-alert)
-5.  [Error Handling](#error-handling)
-6.  [Contributors](#contributors)
+6.  [Error Handling](#error-handling)
+7.  [Contributors](#contributors)
 
 ---
 
@@ -60,6 +62,18 @@ BlueWave uptime monitoring application
 1.  Change directory to the `Client` directory
 2.  Install all dependencies by running `npm install`
 
+<br/>
+
+#### Configuration <a id="config-client"></a>
+
+##### Environmental Variables <a id="env-vars-client"></a>
+
+| ENV Variable Name     | Required/Optional | Type     | Description        | Accepted Values |
+| --------------------- | ----------------- | -------- | ------------------ | --------------- |
+| VITE_APP_API_BASE_URL | Required          | `string` | Base URL of server | {host}/api/v1   |
+
+<br/>
+
 #### Starting Development Server
 
 1.  Run `npm run dev` to start the development server.
@@ -73,11 +87,11 @@ BlueWave uptime monitoring application
 1.  Change directory to the `Server` directory
 2.  Install all dependencies by running `npm install`
 
----
+<br/>
 
 #### Configuration <a id="config-server"></a>
 
-##### Environmental Variables
+##### Environmental Variables <a id="env-vars-server"></a>
 
 Configure the server with the following environmental variables:
 
@@ -94,7 +108,7 @@ Configure the server with the following environmental variables:
 | REDIS_HOST           | Required          | `string`  | Host address for Redis database                                                             |                     |
 | REDIS_PORT           | Required          | `integer` | Port for Redis database                                                                     |                     |
 
----
+<br/>
 
 ##### Databases
 
@@ -133,7 +147,7 @@ From the `Redis` folder run
 2.  Run the image: `docker run -d -p 6379:6379 -v $(pwd)/../redis/redis_data:/data --name uptime_redis uptime_redis`
 </details>
 
----
+<br/>
 
 #### Starting the Development Server
 

From d0da8fa4826c01c6906265e54211fd955adfe093 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 12 Jun 2024 11:25:51 -0700
Subject: [PATCH 08/11] Fixed link

---
 README.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index bee12f083..41c727c24 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ BlueWave uptime monitoring application
 - Clone this repository to your local machine
 
 1.  [Installation (Client)](#client)
-2.  [Configuration(Client)](#config-server)
+2.  [Configuration(Client)](#config-client)
     - [Environment](#env-vars-client)
 3.  [Installation (Server)](#server)
 4.  [Configuration(Server)](#config-server)
@@ -57,14 +57,14 @@ BlueWave uptime monitoring application
 
 ### Client
 
-#### Installation
+#### <u>Installation</u>
 
 1.  Change directory to the `Client` directory
 2.  Install all dependencies by running `npm install`
 
 <br/>
 
-#### Configuration <a id="config-client"></a>
+#### <u>Configuration</u> <a id="config-client"></a>
 
 ##### Environmental Variables <a id="env-vars-client"></a>
 
@@ -74,7 +74,7 @@ BlueWave uptime monitoring application
 
 <br/>
 
-#### Starting Development Server
+#### <u>Starting Development Server</u>
 
 1.  Run `npm run dev` to start the development server.
 
@@ -82,14 +82,14 @@ BlueWave uptime monitoring application
 
 ### Server
 
-#### Installation
+#### <u>Installation</u>
 
 1.  Change directory to the `Server` directory
 2.  Install all dependencies by running `npm install`
 
 <br/>
 
-#### Configuration <a id="config-server"></a>
+#### <u>Configuration</u> <a id="config-server"></a>
 
 ##### Environmental Variables <a id="env-vars-server"></a>
 
@@ -149,7 +149,7 @@ From the `Redis` folder run
 
 <br/>
 
-#### Starting the Development Server
+#### <u>Starting the Development Server</u>
 
 1.  run `npm run dev` to start the development server
 

From 08565c9edab879b00e8da473b170dc782454f24d Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 12 Jun 2024 13:30:56 -0700
Subject: [PATCH 09/11] Simplified form control in Login and Register.  Fixed
 registration bug.  Throw better errors

---
 Client/src/Pages/Login/index.jsx      | 11 +----------
 Client/src/Pages/Register/index.jsx   | 11 +----------
 Server/controllers/alertController.js |  2 --
 Server/controllers/authController.js  | 16 ++--------------
 Server/db/MongoDB.js                  |  4 ++++
 Server/middleware/handleErrors.js     |  1 -
 6 files changed, 8 insertions(+), 37 deletions(-)

diff --git a/Client/src/Pages/Login/index.jsx b/Client/src/Pages/Login/index.jsx
index 01cce9ded..8bee2d1d4 100644
--- a/Client/src/Pages/Login/index.jsx
+++ b/Client/src/Pages/Login/index.jsx
@@ -44,7 +44,7 @@ const Login = () => {
     } else {
       setErrors({});
     }
-  }, []);
+  }, [form]);
 
   const handleSubmit = async () => {
     try {
@@ -77,15 +77,6 @@ const Login = () => {
   };
 
   const handleInput = (e) => {
-    const fieldName = idMap[e.target.id];
-    // Extract and validate individual fields as input changes
-    const fieldSchema = loginValidation.extract(fieldName);
-    const { error } = fieldSchema.validate(e.target.value);
-    let errMsg = "";
-    if (error) {
-      errMsg = error.message;
-    }
-    setErrors({ ...errors, [fieldName]: errMsg });
     const newForm = { ...form, [idMap[e.target.id]]: e.target.value };
     setForm(newForm);
   };
diff --git a/Client/src/Pages/Register/index.jsx b/Client/src/Pages/Register/index.jsx
index 81d458873..70181e194 100644
--- a/Client/src/Pages/Register/index.jsx
+++ b/Client/src/Pages/Register/index.jsx
@@ -52,18 +52,9 @@ const Register = () => {
     } else {
       setErrors({});
     }
-  }, []);
+  }, [form]);
 
   const handleInput = (e) => {
-    const fieldName = idMap[e.target.id];
-    // Extract and validate individual fields as input changes
-    const fieldSchema = registerValidation.extract(fieldName);
-    const { error } = fieldSchema.validate(e.target.value);
-    let errMsg = "";
-    if (error) {
-      errMsg = error.message;
-    }
-    setErrors({ ...errors, [fieldName]: errMsg });
     const newForm = { ...form, [idMap[e.target.id]]: e.target.value };
     setForm(newForm);
   };
diff --git a/Server/controllers/alertController.js b/Server/controllers/alertController.js
index f0c3df5dd..bcc408a25 100644
--- a/Server/controllers/alertController.js
+++ b/Server/controllers/alertController.js
@@ -1,4 +1,3 @@
-const express = require("express");
 const logger = require("../utils/logger");
 require("dotenv").config();
 const {
@@ -11,7 +10,6 @@ const {
   editAlertBodyValidation,
   deleteAlertParamValidation,
 } = require("../validation/joi");
-const { get } = require("mongoose");
 
 const SERVICE_NAME = "alerts";
 
diff --git a/Server/controllers/authController.js b/Server/controllers/authController.js
index 0391a904f..7730219ea 100644
--- a/Server/controllers/authController.js
+++ b/Server/controllers/authController.js
@@ -45,18 +45,6 @@ const registerController = async (req, res, next) => {
     return;
   }
 
-  // Check if the user exists
-  try {
-    const isUser = await req.db.getUserByEmail(req, res);
-    if (isUser) {
-      throw new Error("User already exists");
-    }
-  } catch (error) {
-    error.service = SERVICE_NAME;
-    next(error);
-    return;
-  }
-
   // Create a new user
   try {
     const newUser = await req.db.insertUser(req, res);
@@ -101,8 +89,8 @@ const loginController = async (req, res, next) => {
 
     // Compare password
     const match = await user.comparePassword(req.body.password);
-    if (!match) {
-      throw new Error("Password does not match!");
+    if (match !== true) {
+      throw new Error("Incorrect password");
     }
 
     // Remove password from user object.  Should this be abstracted to DB layer?
diff --git a/Server/db/MongoDB.js b/Server/db/MongoDB.js
index 07804589e..4ec6e8422 100644
--- a/Server/db/MongoDB.js
+++ b/Server/db/MongoDB.js
@@ -5,6 +5,7 @@ const Check = require("../models/Check");
 const Alert = require("../models/Alert");
 const RecoveryToken = require("../models/RecoveryToken");
 const crypto = require("crypto");
+const DUPLICATE_KEY_CODE = 11000; // MongoDB error code for duplicate key
 
 const connect = async () => {
   try {
@@ -34,6 +35,9 @@ const insertUser = async (req, res) => {
     await newUser.save();
     return await UserModel.findOne({ _id: newUser._id }).select("-password"); // .select() doesn't work with create, need to save then find
   } catch (error) {
+    if (error.code === DUPLICATE_KEY_CODE) {
+      throw new Error("Email already exists");
+    }
     throw error;
   }
 };
diff --git a/Server/middleware/handleErrors.js b/Server/middleware/handleErrors.js
index a20db8571..b8690b438 100644
--- a/Server/middleware/handleErrors.js
+++ b/Server/middleware/handleErrors.js
@@ -4,7 +4,6 @@ const handleErrors = (error, req, res, next) => {
   const status = error.status || 500;
   const message = error.message || "Something went wrong";
   const service = error.service || "Unknown service";
-
   logger.error(error.message, { service: service });
   res.status(status).json({ success: false, msg: message });
 };

From 3cc01db55f4db063c53a3900dece207d237ab33d Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 12 Jun 2024 13:49:38 -0700
Subject: [PATCH 10/11] Wrapped login and register in forms

---
 Client/src/Components/Button/index.jsx        |   7 +-
 .../TextFields/Email/EmailTextField.jsx       |   2 +
 .../TextFields/Password/PasswordTextField.jsx |   2 +
 .../Components/TextFields/Text/TextField.jsx  |   2 +
 Client/src/Pages/Login/index.jsx              |  11 +-
 Client/src/Pages/Register/index.jsx           | 149 +++++++++---------
 6 files changed, 92 insertions(+), 81 deletions(-)

diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx
index 6f67f0c02..72c438514 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/index.jsx
@@ -36,6 +36,7 @@ const levelConfig = {
  * @component
  * @param {Object} props
  * @param {'primary' | 'secondary' | 'tertiary' | 'error' | 'imagePrimary' | 'imageSecondary' | 'imageTertiary'} props.level - The level of the button
+ * @param {string} props.type - The type of the button
  * @param {string} props.label - The label of the button
  * @param {React.ReactNode} props.img - Image for button
  * @param {boolean} [props.disabled] - Whether the button is disabled
@@ -44,13 +45,14 @@ const levelConfig = {
  * @returns {JSX.Element}
  * @example
  * // Render an error button
- * <Button level="error" label="Error" disabled sx={{marginTop: "1rem"}}/>
+ * <Button type="submit" level="error" label="Error" disabled sx={{marginTop: "1rem"}}/>
  */
 
-const Button = ({ level, label, disabled, img, onClick, sx }) => {
+const Button = ({ type, level, label, disabled, img, onClick, sx }) => {
   const { variant, color } = levelConfig[level];
   return (
     <MuiButton
+      type={type}
       variant={variant}
       color={color}
       disabled={disabled}
@@ -67,6 +69,7 @@ const Button = ({ level, label, disabled, img, onClick, sx }) => {
 };
 
 Button.propTypes = {
+  type: PropTypes.string,
   level: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   img: PropTypes.node,
diff --git a/Client/src/Components/TextFields/Email/EmailTextField.jsx b/Client/src/Components/TextFields/Email/EmailTextField.jsx
index 64189b395..e75f92689 100644
--- a/Client/src/Components/TextFields/Email/EmailTextField.jsx
+++ b/Client/src/Components/TextFields/Email/EmailTextField.jsx
@@ -32,6 +32,7 @@ const EmailTextField = ({
   label = "Email",
   variant,
   placeholder,
+  autoComplete,
   icon,
   helperText,
   error,
@@ -60,6 +61,7 @@ const EmailTextField = ({
           id={id}
           variant={variant}
           placeholder={placeholder}
+          autoComplete={autoComplete}
           InputProps={{
             endAdornment: (
               <InputAdornment position="end">
diff --git a/Client/src/Components/TextFields/Password/PasswordTextField.jsx b/Client/src/Components/TextFields/Password/PasswordTextField.jsx
index e5aa07a96..b0c18de8d 100644
--- a/Client/src/Components/TextFields/Password/PasswordTextField.jsx
+++ b/Client/src/Components/TextFields/Password/PasswordTextField.jsx
@@ -22,6 +22,7 @@ const PasswordTextField = ({
   onChange,
   id,
   label = "Password",
+  autoComplete,
   variant,
   placeholder,
   icon,
@@ -48,6 +49,7 @@ const PasswordTextField = ({
         <TextField
           onChange={onChange}
           type="password"
+          autoComplete={autoComplete}
           error={error}
           className="password-text-field-input"
           id={id}
diff --git a/Client/src/Components/TextFields/Text/TextField.jsx b/Client/src/Components/TextFields/Text/TextField.jsx
index 40e9fcbee..8fa177844 100644
--- a/Client/src/Components/TextFields/Text/TextField.jsx
+++ b/Client/src/Components/TextFields/Text/TextField.jsx
@@ -19,6 +19,7 @@ import { useTheme } from "@mui/material";
  */
 const StringTextField = ({
   onChange,
+  autoComplete,
   id,
   label,
   variant,
@@ -51,6 +52,7 @@ const StringTextField = ({
           id={id}
           variant={variant}
           placeholder={placeholder}
+          autoComplete={autoComplete}
           InputProps={{
             endAdornment: (
               <InputAdornment position="end">
diff --git a/Client/src/Pages/Login/index.jsx b/Client/src/Pages/Login/index.jsx
index 8bee2d1d4..1bf2ad9c9 100644
--- a/Client/src/Pages/Login/index.jsx
+++ b/Client/src/Pages/Login/index.jsx
@@ -46,7 +46,8 @@ const Login = () => {
     }
   }, [form]);
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (e) => {
+    e.preventDefault();
     try {
       await loginValidation.validateAsync(form, { abortEarly: false });
       const action = await dispatch(login(form));
@@ -84,7 +85,7 @@ const Login = () => {
   return (
     <div className="login-page">
       <BackgroundPattern></BackgroundPattern>
-      <div className="login-form">
+      <form className="login-form" onSubmit={handleSubmit}>
         <div className="login-form-header">
           <img
             className="login-form-header-logo"
@@ -101,6 +102,7 @@ const Login = () => {
             error={errors.email ? true : false}
             helperText={errors.email ? errors.email : ""}
             placeholder="Enter your email"
+            autoComplete="username"
             id="login-email-input"
           />
           <div className="login-form-v2-spacing" />
@@ -109,6 +111,7 @@ const Login = () => {
             error={errors.password ? true : false}
             helperText={errors.password ? errors.password : ""}
             placeholder="Password"
+            autoComplete="current-password"
             id="login-password-input"
           />
         </div>
@@ -120,10 +123,10 @@ const Login = () => {
         <div className="login-form-v3-spacing" />
         <div className="login-form-actions">
           <Button
+            type="submit"
             level="primary"
             label="Sign in"
             sx={{ width: "100%" }}
-            onClick={handleSubmit}
           />
           <div className="login-form-v-spacing" />
           <Button
@@ -138,7 +141,7 @@ const Login = () => {
           Don’t have an account?
           <span className="new-account-option-span">Sign up</span>
         </div>
-      </div>
+      </form>
     </div>
   );
 };
diff --git a/Client/src/Pages/Register/index.jsx b/Client/src/Pages/Register/index.jsx
index 70181e194..5f8622e8b 100644
--- a/Client/src/Pages/Register/index.jsx
+++ b/Client/src/Pages/Register/index.jsx
@@ -59,7 +59,8 @@ const Register = () => {
     setForm(newForm);
   };
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (e) => {
+    e.preventDefault();
     try {
       await registerValidation.validateAsync(form, { abortEarly: false });
       const action = await dispatch(register(form));
@@ -94,82 +95,80 @@ const Register = () => {
   return (
     <div className="register-page">
       <BackgroundPattern></BackgroundPattern>
-      <form>
-        <div className="register-form">
-          <div className="register-form-header">
-            <img
-              className="register-form-header-logo"
-              src={Logomark}
-              alt="Logomark"
-            />
-            <div className="register-form-v-spacing-large" />
-            <div className="register-form-heading">Create an account</div>
-            <div className="register-form-v-spacing-large"></div>
-          </div>
-          <div className="register-form-v-spacing-40px" />
-          <div className="register-form-inputs">
-            <StringTextField
-              onChange={handleInput}
-              error={errors.firstname ? true : false}
-              helperText={errors.firstname ? errors.firstname : ""}
-              label="First name*"
-              placeholder="Enter your first name"
-              id="register-firstname-input"
-            />
-            <div className="login-form-v2-spacing" />
-            <StringTextField
-              onChange={handleInput}
-              error={errors.lastname ? true : false}
-              helperText={errors.lastname ? errors.lastname : ""}
-              label="Last name*"
-              placeholder="Enter your last name"
-              id="register-lastname-input"
-            />
-            <div className="login-form-v2-spacing" />
-            <EmailTextField
-              onChange={handleInput}
-              label="Email*"
-              error={errors.email ? true : false}
-              helperText={errors.email ? errors.email : ""}
-              placeholder="Enter your email"
-              id="register-email-input"
-            />
-            <div className="login-form-v2-spacing" />
-            <PasswordTextField
-              onChange={handleInput}
-              label="Password*"
-              error={errors.password ? true : false}
-              helperText={errors.password ? errors.password : ""}
-              placeholder="Create a password"
-              id="register-password-input"
-            />
-          </div>
-          <div className="login-form-v2-spacing" />
-          <div className="register-form-checks">
-            <Check text="Must be at least 8 characters" />
-            <div className="register-form-v-spacing-small"></div>
-            <Check text="Must contain one special character" />
-          </div>
-          <div className="login-form-v2-spacing" />
-          <div className="register-form-actions">
-            <Button
-              onClick={handleSubmit}
-              level="primary"
-              label="Get started"
-              sx={{ width: "100%" }}
-            />
-            <div className="login-form-v-spacing" />
-            <Button
-              disabled={true}
-              level="secondary"
-              label="Sign up with Google"
-              sx={{ width: "100%", color: "#344054", fontWeight: "700" }}
-              img={<img className="google-enter" src={Google} alt="Google" />}
-            />
-          </div>
+      <form className="register-form" onSubmit={handleSubmit}>
+        <div className="register-form-header">
+          <img
+            className="register-form-header-logo"
+            src={Logomark}
+            alt="Logomark"
+          />
+          <div className="register-form-v-spacing-large" />
+          <div className="register-form-heading">Create an account</div>
+          <div className="register-form-v-spacing-large"></div>
+        </div>
+        <div className="register-form-v-spacing-40px" />
+        <div className="register-form-inputs">
+          <StringTextField
+            onChange={handleInput}
+            error={errors.firstname ? true : false}
+            helperText={errors.firstname ? errors.firstname : ""}
+            label="First name*"
+            placeholder="Enter your first name"
+            id="register-firstname-input"
+          />
+          <div className="login-form-v2-spacing" />
+          <StringTextField
+            onChange={handleInput}
+            error={errors.lastname ? true : false}
+            helperText={errors.lastname ? errors.lastname : ""}
+            label="Last name*"
+            placeholder="Enter your last name"
+            id="register-lastname-input"
+          />
+          <div className="login-form-v2-spacing" />
+          <EmailTextField
+            onChange={handleInput}
+            label="Email*"
+            error={errors.email ? true : false}
+            helperText={errors.email ? errors.email : ""}
+            placeholder="Enter your email"
+            id="register-email-input"
+          />
+          <div className="login-form-v2-spacing" />
+          <PasswordTextField
+            onChange={handleInput}
+            label="Password*"
+            error={errors.password ? true : false}
+            helperText={errors.password ? errors.password : ""}
+            placeholder="Create a password"
+            id="register-password-input"
+          />
+        </div>
+        <div className="login-form-v2-spacing" />
+        <div className="register-form-checks">
+          <Check text="Must be at least 8 characters" />
+          <div className="register-form-v-spacing-small"></div>
+          <Check text="Must contain one special character" />
+        </div>
+        <div className="login-form-v2-spacing" />
+        <div className="register-form-actions">
+          <Button
+            type="submit"
+            level="primary"
+            label="Get started"
+            sx={{ width: "100%" }}
+          />
+          <div className="login-form-v-spacing" />
+          <Button
+            disabled={true}
+            level="secondary"
+            label="Sign up with Google"
+            sx={{ width: "100%", color: "#344054", fontWeight: "700" }}
+            img={<img className="google-enter" src={Google} alt="Google" />}
+          />
         </div>
-        <div className="register-bottom-spacing"></div>
       </form>
+      <div className="register-bottom-spacing"></div>
     </div>
   );
 };

From 7d0fa0fe17eb89fed094ff8458215b5c23cb6457 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 12 Jun 2024 13:51:28 -0700
Subject: [PATCH 11/11] Added autocomplete attribute

---
 Client/src/Pages/Login/index.jsx    | 2 +-
 Client/src/Pages/Register/index.jsx | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/Client/src/Pages/Login/index.jsx b/Client/src/Pages/Login/index.jsx
index 1bf2ad9c9..c67f67ec1 100644
--- a/Client/src/Pages/Login/index.jsx
+++ b/Client/src/Pages/Login/index.jsx
@@ -102,7 +102,7 @@ const Login = () => {
             error={errors.email ? true : false}
             helperText={errors.email ? errors.email : ""}
             placeholder="Enter your email"
-            autoComplete="username"
+            autoComplete="email"
             id="login-email-input"
           />
           <div className="login-form-v2-spacing" />
diff --git a/Client/src/Pages/Register/index.jsx b/Client/src/Pages/Register/index.jsx
index 5f8622e8b..5d08e0c0d 100644
--- a/Client/src/Pages/Register/index.jsx
+++ b/Client/src/Pages/Register/index.jsx
@@ -132,6 +132,7 @@ const Register = () => {
             error={errors.email ? true : false}
             helperText={errors.email ? errors.email : ""}
             placeholder="Enter your email"
+            autoComplete="email"
             id="register-email-input"
           />
           <div className="login-form-v2-spacing" />
@@ -141,6 +142,7 @@ const Register = () => {
             error={errors.password ? true : false}
             helperText={errors.password ? errors.password : ""}
             placeholder="Create a password"
+            autoComplete="current-password"
             id="register-password-input"
           />
         </div>