Added Settings and About Us page functionality

src/pages/About-Us.jsx

@@ -1,3 +1,54 @@
+import umass_lowell from './images/umass_lowell.jpeg'
+import river_hawk from './images/river_hawk.png'
+import budget_hero from './images/budgethero1.png'
+
 export default function AboutUs() {
-    return <h1>About Us</h1>
+    return (
+        <>
+        <div className="container overflow-auto">
+        <header>
+            <div className="container h-100">
+            <div className="row h-100 align-items-center">
+                <div className="mt-4 col-12 text-center">
+                <h1 className="fw-light">About Us</h1>
+                <p className="lead">Budget Buddy</p>
+                </div>
+            </div>
+            </div>
+        </header>
+
+        <div className="container h-100">
+            <div className="row h-100 align-items-center">
+            <div className="mt-4 col-12 text-center">
+                <img className="img-fluid col-8" src={umass_lowell} alt="uml campus" />
+            </div>
+            </div>
+        </div>
+        
+        <p className="mt-5">We're four computer science students from UMass Lowell. Our names are Daniel Quinonez, Jacob Veber, Gabe Herrera, and Chris Olaf.</p>
+
+        <p className="mt-4">
+            Using Budget Buddy, we are hoping to help young people learn how to better take control of their finances. We know that it can be extremely 
+            difficult to balance bills and other expenses at the same time as being a full-time student, so we want to make it as 
+            easy as possible for students to quickly understand what their budget looks like. In addition, we want to help young people 
+            make plans to pay off any loans they have needed to take out if, for example, they are a college student. This way, we hope that the 
+            daunting task of managing debt while being a young adult with little or unstable income can be made easier. 
+        </p>
+
+        <p className="mt-4 mb-5">
+            By helping the young demographic manage their way through debt, we are aiming to help them gain financial independence as soon as 
+            possible, so that they can live their lives post-graduation with the most opportunities. Also, and possibly most 
+            importantly, we hope that by using Budget Buddy, people gain an idea of how to effectively balance their budget. 
+            This way, they will be able to manage their money in a more effective way after they graduate and move into the professional 
+            world. We want young people to have an idea of how budgeting can work for them when they begin to make more money in their 
+            careers and begin to take on more debt in order to do things like buy a house.
+        </p>
+
+        <div className="row mb-5">
+            <img src={river_hawk} className="col-4" alt="uml logo" />
+            <img src={budget_hero} className="col-4 offset-4" alt="budget hero" />
+        </div>
+        </div>
+        </>
+    );
 }

src/pages/Settings.jsx

@@ -1,3 +1,125 @@
 export default function Settings() {
-    return <h1>Settings</h1>
+    // javascript for the updated username and password alerts
+    const handleNameClick = () => {
+        const alert = '<div class="alert alert-success alert-dismissible" role="alert">Name updated successfully!<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>';
+        document.getElementById('nameAlert').innerHTML = alert;
+    }
+    
+    const handlePasswordClick = () => {
+        const alert = '<div class="alert alert-success alert-dismissible" role="alert">Name updated successfully!<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>';
+        document.getElementById('passwordAlert').innerHTML = alert;
+    }
+
+    (() => {
+        // Fetch all the forms we want to apply custom Bootstrap validation styles to
+        const forms = document.querySelectorAll('.needs-validation')
+    
+        // Loop over them and prevent submission
+        Array.from(forms).forEach(form => {
+        form.addEventListener('click', event => {
+            if (!form.checkValidity()) {
+            event.preventDefault()
+            event.stopPropagation()
+            }
+
+            form.classList.add('was-validated')
+        }, false)
+        })
+    })()
+
+    // toggle between light mode and dark mode
+    const toggleDarkMode = () => {
+        if (document.documentElement.getAttribute('data-bs-theme') === 'dark') {
+            document.documentElement.setAttribute('data-bs-theme','light')
+        }
+        else {
+            document.documentElement.setAttribute('data-bs-theme','dark')
+        }
+    }
+
+    // JSX: Javascript XML
+    return (
+    <>
+        <div className="container overflow-auto">
+        <h4 className="mt-4 mb-4">Profile Settings</h4>
+
+        <h5 className="mb-4">Email and Name</h5>
+        <form className="needs-validation" noValidate>
+            <div className="row mb-3">
+            <label htmlFor="staticEmail" className="col-2 col-form-label">Email</label>
+            <div className="col-4">
+                <input type="text" readOnly className="form-control-plaintext" id="staticEmail" value="daniel_quinonezrosario@student.uml.edu" />
+            </div>
+            </div>
+            <div className="row mb-3">
+            <label htmlFor="currentName" className="col-2 col-form-label">Current Name</label>
+            <div className="col-4">
+                <input type="text" readOnly className="form-control-plaintext" id="currentName" value="Daniel" />
+            </div>
+            </div>
+            <div className="row mb-3">
+            <label htmlFor="newName" className="col-2 col-form-label">New Name</label>
+            <div className="col-4">
+                <input type="text" className="form-control" id="newName" required />
+                <div className="invalid-feedback">
+                Please enter a new name
+                </div>
+            </div>
+            </div>
+
+            <div id="nameAlert"></div>
+            <div>
+            <button type="button" className="btn btn-primary mb-5" id="newNameButton" onClick={handleNameClick}>Change Name</button>
+            </div>
+        </form>
+
+        <h5 className="mb-4">Password</h5>
+        <form className="needs-validation" noValidate>
+            <div className="row mb-3">
+            <label htmlFor="currentPassword" className="col-2 col-form-label">Current Password</label>
+            <div className="col-4">
+                <input type="password" className="form-control" id="currentPassword" minLength="8" required />
+                <div className="invalid-feedback">
+                Please enter your current password
+                </div>
+            </div>
+            </div>
+            <div className="row mb-3">
+            <label htmlFor="newPassword" className="col-2 col-form-label">New Password</label>
+            <div className="col-4">
+                <input type="password" className="form-control" id="newPassword" minLength="8" required />
+                <div className="invalid-feedback">
+                Please enter a new password
+                <br />
+                Your new password must be at least 8 characters long
+                </div>
+            </div>
+            </div>
+
+            <div id="passwordAlert"></div>
+            <div>
+            <button type="button" className="btn btn-primary mb-5" id="newPasswordButton" onClick={handlePasswordClick}>Change Password</button>
+            </div>
+        </form>
+
+        <h4 className="mb-4">Dark Mode</h4>
+
+        <div className="form-check form-switch mb-5">
+            <input className="form-check-input" type="checkbox" id="darkModeCheckbox" onClick={toggleDarkMode}/>
+            <label className="form-check-label" htmlFor="darkModeCheckbox">Enable Dark Mode</label>
+        </div>
+
+        <h4 className="mb-4">Account Settings</h4>
+
+        <div className="mb-4">
+            <button type="button" className="btn btn-danger">Delete Account</button>
+            <br />
+            <div className="mt-2">
+            CAUTION: This will delete your account. All account and profile data
+            will be completely erased.
+            </div>
+        </div>
+        </div>
+    </>
+    );
 }