mirror of
https://github.com/gabehf/BudgetBuddy.git
synced 2026-03-07 21:48:14 -08:00
Updated functionality of settings page
Updated functionality of settings page. Also tweaked the placeholder values in the loan calculator form
This commit is contained in:
danielq65
parent
377ac40bd6
commit
ad86ba549d
3 changed files with 205 additions and 67 deletions
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,116 @@
|
|||
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('');
|
||||
const [errorText, setErrorText] = useState(null);
|
||||
|
||||
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 +119,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 +131,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;
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue