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 1/8] 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 2/8] 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 3/8] 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 4/8] 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 5/8] 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 6/8] 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 7/8] 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 8/8] 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