Merge branch 'main' of https://github.com/jacobmveber-01839764/BudgetBuddy

build/asset-manifest.json

@@ -0,0 +1,23 @@
+{
+  "files": {
+    "main.css": "/static/css/main.a647f1f7.css",
+    "main.js": "/static/js/main.205e7457.js",
+    "static/js/496.f12dc038.chunk.js": "/static/js/496.f12dc038.chunk.js",
+    "static/media/budgethero1.png": "/static/media/budgethero1.ef97d4454cc11d5d60d0.png",
+    "static/media/umass_lowell.jpeg": "/static/media/umass_lowell.adff7eaefc5d0aa6343d.jpeg",
+    "static/media/expenses_logo.png": "/static/media/expenses_logo.f24db1454b6c041fade7.png",
+    "static/media/money2.png": "/static/media/money2.4e0a9f8da499f5fe72a1.png",
+    "static/media/money1.png": "/static/media/money1.900d2433a99d49f20ade.png",
+    "static/media/river_hawk.png": "/static/media/river_hawk.175d1b2ee8b8ae31ab50.png",
+    "static/media/money3.png": "/static/media/money3.8859e70f73221654d7ed.png",
+    "static/media/BudgetBuddyLogo.png": "/static/media/BudgetBuddyLogo.8e4cd296c3a372956bf4.png",
+    "index.html": "/index.html",
+    "main.a647f1f7.css.map": "/static/css/main.a647f1f7.css.map",
+    "main.205e7457.js.map": "/static/js/main.205e7457.js.map",
+    "496.f12dc038.chunk.js.map": "/static/js/496.f12dc038.chunk.js.map"
+  },
+  "entrypoints": [
+    "static/css/main.a647f1f7.css",
+    "static/js/main.205e7457.js"
+  ]
+}

build/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

build/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

build/static/js/main.205e7457.js.LICENSE.txt

@@ -0,0 +1,122 @@
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/*!
+ *
+ * Copyright 2009-2017 Kris Kowal under the terms of the MIT
+ * license found at https://github.com/kriskowal/q/blob/v1/LICENSE
+ *
+ * With parts by Tyler Close
+ * Copyright 2007-2009 Tyler Close under the terms of the MIT X license found
+ * at http://www.opensource.org/licenses/mit-license.html
+ * Forked at ref_send.js version: 2009-05-11
+ *
+ * With parts by Mark Miller
+ * Copyright (C) 2011 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+/*!
+ * @kurkle/color v0.3.2
+ * https://github.com/kurkle/color#readme
+ * (c) 2023 Jukka Kurkela
+ * Released under the MIT License
+ */
+
+/*!
+ * Chart.js v4.2.1
+ * https://www.chartjs.org
+ * (c) 2023 Chart.js Contributors
+ * Released under the MIT License
+ */
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @mui/styled-engine v5.12.0
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * A better abstraction over CSS.
+ *
+ * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
+ * @website https://github.com/cssinjs/jss
+ * @license MIT
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

src/components/LoanCalculator.js

@@ -29,9 +29,9 @@ const LoanCalculator = () => {
             <h4 className="mb-5">Loan Calculator</h4>
 
             <form onSubmit={(event) => event.preventDefault()}>
-                <FormInputGroup text="Loan Amount $" placeholder="Enter the value of the loan" value={loanAmount} onInput={(event) => setLoanAmount(event.target.value)}/>
-                <FormInputGroup text="Interest Rate %" placeholder="Enter interest rate of the loan" value={interestRate} onInput={(event) => setInterestRate(event.target.value)}/>
-                <FormInputGroup text="Loan Duration in Years" placeholder="Enter the duration of the loan in years" value={loanDuration} onInput={(event) => setLoanDuration(event.target.value)}/>
+                <FormInputGroup text="Loan Amount $" placeholder="" value={loanAmount} onInput={(event) => setLoanAmount(event.target.value)}/>
+                <FormInputGroup text="Interest Rate %" placeholder="" value={interestRate} onInput={(event) => setInterestRate(event.target.value)}/>
+                <FormInputGroup text="Loan Duration in Years" placeholder="" value={loanDuration} onInput={(event) => setLoanDuration(event.target.value)}/>
                 
                 <h4 className="alert alert-info fw-bold">
                     Monthly Payment: ${monthlyPayment.toFixed(2)}

src/pages/Settings.jsx

@@ -1,13 +1,115 @@
-export default function Settings() {
+import React, { useState, useEffect } from "react";
+import { getName, getEmail, getSessionKey, handleLogout } from "../utils/utils";
+
+const Settings = () => {
+    const [currentName, setCurrentName] = useState('');
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
+    const [newName, setNewName] = useState('');
+    const [currentPassword, setCurrentPassword] = useState('');
+    const [newPassword, setNewPassword] = useState('');
+    const [email, setEmail] = useState('');
+    const [deleteAccount, setDeleteAccount] = useState('');
+    
+    useEffect(() => {
+        async function fetchName() {
+            const currentName = await getName();
+            setCurrentName(currentName);
+        }
+        fetchName();
+    }, []);
+
+    useEffect(() => {
+        async function fetchEmail() {
+            const email = await getEmail();
+            setEmail(email);
+        }
+        fetchEmail();
+    }, []);
+
     // 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 handleNameChange = (event) => {
+        event.preventDefault();
+
+        const name = `${firstName} ${lastName}`;
+        setNewName(name);
+
+        const formData = new FormData();
+        formData.append('name', name);
+
+        fetch(`https://api.bb.gabefarrell.com/auth/changename?name=${name}`, {
+            method: 'POST',
+            body: formData,
+            headers: {
+                'x-session-key': getSessionKey(),
+            },
+        })
+        .then(response => {
+            if(response.ok) {
+                alert('Name updated successfully!');
+                window.location.reload();
+            }
+            else {
+                alert('Name update failed!');
+                window.location.reload();
+            }
+        })
     }
     
-    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;
+    const handlePasswordChange = (event) => {
+        event.preventDefault();
+        
+        const oldP = `${currentPassword}`;
+        const newP = `${newPassword}`
+
+        const formData = new FormData();
+        formData.append('old', oldP);
+        formData.append('new', newP);
+
+        fetch(`https://api.bb.gabefarrell.com/auth/changepassword?old=${oldP}&new=${newP}`, {
+            method: 'POST',
+            body: formData,
+            headers: {
+                'x-session-key': getSessionKey(),
+            },
+        })
+        .then(response => {
+            if(response.ok) {
+                alert('Password updated successfully!');
+                window.location.reload();
+            }
+            else {
+                alert('Password update failed! Make sure you have entered your current password correctly');
+                window.location.reload();
+            }
+        })
+    }
+
+    const handleDeleteAccount = (event) => {
+        event.preventDefault();
+
+        const password = `${deleteAccount}`;
+
+        const formData = new FormData();
+        formData.append('password', password);
+
+        fetch(`https://api.bb.gabefarrell.com/auth/deleteaccount?password=${password}`, {
+            method: 'POST',
+            body: formData,
+            headers: {
+                'x-session-key': getSessionKey(),
+            },
+        })
+        .then(response => {
+            if(response.ok) {
+                alert('Account deleted successfully!');
+                handleLogout();
+            }
+            else {
+                alert('Account could not be delete. Make sure you have entered your current password correctly');
+                window.location.reload();
+            }
+        })
     }
 
     (() => {
@@ -16,10 +118,10 @@ export default function Settings() {
     
         // Loop over them and prevent submission
         Array.from(forms).forEach(form => {
-        form.addEventListener('click', event => {
+        form.addEventListener('submit', event => {
             if (!form.checkValidity()) {
-            event.preventDefault()
-            event.stopPropagation()
+                event.preventDefault();
+                event.stopPropagation();
             }
 
             form.classList.add('was-validated')
@@ -28,98 +130,117 @@ export default function Settings() {
     })()
 
     // toggle between light mode and dark mode
-    const toggleDarkMode = () => {
+    /*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>
+            <form className="needs-validation" onSubmit={handleNameChange} 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
+                    <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={email}/>
                     </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={currentName}/>
+                    </div>
+                </div>
+                <div className="row mb-3">
+                    <label htmlFor="newFirstName" className="col-2 col-form-label">New First Name</label>
+                    <div className="col-4">
+                        <input type="text" className="form-control" id="newFirstName" placeholder="Please enter a new first name" value={firstName} onChange={(event) => setFirstName(event.target.value)} required/>
+                        <div className="invalid-feedback">
+                            Please enter a new first name
+                        </div>
+                    </div>
+                </div>
+                <div className="row mb-3">
+                    <label htmlFor="newLastName" className="col-2 col-form-label">New Last Name</label>
+                    <div className="col-4">
+                        <input type="text" className="form-control" id="newLastName" placeholder="Please enter a new last name" value={lastName} onChange={(event) => setLastName(event.target.value)} required />
+                        <div className="invalid-feedback">
+                            Please enter a new last 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>
+                    <button type="submit" className="btn btn-primary mb-5" id="newNameButton">Change Name</button>
                 </div>
             </form>
 
             <h5 className="mb-4">Password</h5>
-            <form className="needs-validation" noValidate>
+            <form className="needs-validation" onSubmit={handlePasswordChange} 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
+                    <label htmlFor="currentPassword" className="col-2 col-form-label">Current Password</label>
+                    <div className="col-4">
+                        <input type="password" className="form-control" id="currentPassword" placeholder="Please enter your current password" minLength="8" value={currentPassword} onChange={(event) => setCurrentPassword(event.target.value)} required />
+                        <div className="invalid-feedback">
+                            Please enter your current password
+                        </div>
                     </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
+                    <label htmlFor="newPassword" className="col-2 col-form-label">New Password</label>
+                    <div className="col-4">
+                        <input type="password" className="form-control" id="newPassword" placeholder="Please enter a new password" minLength="8" value={newPassword} onChange={(event) => setNewPassword(event.target.value)} 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>
 
-                <div id="passwordAlert"></div>
                 <div>
-                <button type="button" className="btn btn-primary mb-5" id="newPasswordButton" onClick={handlePasswordClick}>Change Password</button>
+                    <button type="submit" className="btn btn-primary mb-5" id="newPasswordButton">Change Password</button>
                 </div>
             </form>
 
-            <h4 className="mb-4">Dark Mode</h4>
+            {/*<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>*/}
+
+            <h4 className="mb-4">Account Settings</h4>
+
+            <h5 className="mb-4">Delete Your Account</h5>
+            <form className="needs-validation" onSubmit={handleDeleteAccount} noValidate>
+                <div className="row mb-3">
+                    <label htmlFor="deleteAccount" className="col-2 col-form-label">Current Password</label>
+                    <div className="col-4">
+                        <input type="password" className="form-control" id="deleteAccount" placeholder="Please enter your current password" minLength="8" value={deleteAccount} onChange={(event) => setDeleteAccount(event.target.value)} required />
+                        <div className="invalid-feedback">
+                            Please enter your current password in order to delete your account
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <button type="submit" className="btn btn-danger" id="deleteAccountButton">Delete Account</button>
+                </div>
+                <div className="mt-2 mb-5 fw-bold">
+                    CAUTION: This will delete your account. All account and profile data
+                    will be completely erased.
+                </div>
+            </form>
         </div>
     </>
-    );
-}
+    )
+}
+
+export default Settings;

src/utils/utils.js

@@ -35,6 +35,22 @@ export async function getName() {
   }
 }
 
+export async function getEmail() {
+  try {
+    const response = await fetch('https://api.bb.gabefarrell.com/userinfo', {
+      method: 'GET',
+      headers: {
+        'x-session-key': getSessionKey(),
+      },
+    });
+    const data = await response.json();
+    const email = data.email;
+    return email;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
 export function handleLogout() {
   document.cookie.split(";").forEach(function(c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });
   window.location.href='/welcome';