From ad86ba549da86c36015c63f979030dc849248420 Mon Sep 17 00:00:00 2001 From: danielq65 Date: Mon, 24 Apr 2023 08:35:19 -0400 Subject: [PATCH] Updated functionality of settings page Updated functionality of settings page. Also tweaked the placeholder values in the loan calculator form --- src/components/LoanCalculator.js | 6 +- src/pages/Settings.jsx | 238 +++++++++++++++++++++++-------- src/utils/utils.js | 16 +++ 3 files changed, 199 insertions(+), 61 deletions(-) diff --git a/src/components/LoanCalculator.js b/src/components/LoanCalculator.js index 9a9b93c..7e54ab2 100644 --- a/src/components/LoanCalculator.js +++ b/src/components/LoanCalculator.js @@ -29,9 +29,9 @@ const LoanCalculator = () => {

Loan Calculator

event.preventDefault()}> - setLoanAmount(event.target.value)}/> - setInterestRate(event.target.value)}/> - setLoanDuration(event.target.value)}/> + setLoanAmount(event.target.value)}/> + setInterestRate(event.target.value)}/> + setLoanDuration(event.target.value)}/>

Monthly Payment: ${monthlyPayment.toFixed(2)} diff --git a/src/pages/Settings.jsx b/src/pages/Settings.jsx index 262815a..8a0b72f 100644 --- a/src/pages/Settings.jsx +++ b/src/pages/Settings.jsx @@ -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 = ''; - 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 = ''; - 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 ( <>

Profile Settings

Email and Name
- +
- -
- -
+ +
+ +
- -
- -
+ +
+ +
- -
- -
- Please enter a new name + +
+ setFirstName(event.target.value)} required/> +
+ Please enter a new first name +
+
+ +
+ setLastName(event.target.value)} required /> +
+ Please enter a new last name +
+
-
- +
Password
-
+
- -
- -
- Please enter your current password + +
+ setCurrentPassword(event.target.value)} required /> +
+ Please enter your current password +
-
- -
- -
- Please enter a new password -
- Your new password must be at least 8 characters long + +
+ setNewPassword(event.target.value)} required /> +
+ Please enter a new password +
+ Your new password must be at least 8 characters long +
-
-
- +
-

Dark Mode

+ {/*

Dark Mode

-
+
*/} - {/*

Account Settings

+

Account Settings

-
- -
-
- CAUTION: This will delete your account. All account and profile data - will be completely erased. +
Delete Your Account
+
+
+ +
+ setDeleteAccount(event.target.value)} required /> +
+ Please enter your current password in order to delete your account +
+
-
*/} +
+ +
+
+ CAUTION: This will delete your account. All account and profile data + will be completely erased. +
+
- ); -} \ No newline at end of file + ) +} + +export default Settings; \ No newline at end of file diff --git a/src/utils/utils.js b/src/utils/utils.js index c301b6c..8992979 100644 --- a/src/utils/utils.js +++ b/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';