From e642dc08caf8878a0a7c5963ef7909ea6cb11e56 Mon Sep 17 00:00:00 2001 From: Gabriel Date: Mon, 20 Feb 2023 20:49:04 +0100 Subject: [PATCH 1/2] Added profile page --- profile.html | 94 +++++++++++++++++++++++++++++++++++++++++++++++++ profile.js | 62 ++++++++++++++++++++++++++++++++ styles.css | 3 ++ transactions.js | 8 +++-- 4 files changed, 165 insertions(+), 2 deletions(-) create mode 100644 profile.html create mode 100644 profile.js diff --git a/profile.html b/profile.html new file mode 100644 index 0000000..9d782f6 --- /dev/null +++ b/profile.html @@ -0,0 +1,94 @@ + + + + + + + + + Profile + + + + +
+

Account Profile

+ + +
+ + + + + diff --git a/profile.js b/profile.js new file mode 100644 index 0000000..94e475b --- /dev/null +++ b/profile.js @@ -0,0 +1,62 @@ +const profileForm = document.getElementById("profile-form"); +const accountNameElem = document.getElementById("account-name"); +const accountNumberElem = document.getElementById("account-number"); +const changePinElem = document.getElementById("change-pin"); +const currentPinElem = document.getElementById("current-pin"); +const newPinElem = document.getElementById("new-pin"); +const confirmNewPinElem = document.getElementById("confirm-new-pin"); +const closeBtnElem = document.getElementById("close-btn"); +const updateBtnElem = document.getElementById("update-btn"); +// display of aaccount number +accountNumberElem.value = currentUserAccountNumber; + +const allUsers = JSON.parse(localStorage.getItem("MB_USER_ACCOUNTS")); + +function displayFormToUpdate() { + const pinUpdateSection = document.getElementById("pin-update-section"); + + if ((pinUpdateSection.style.display = "none")) { + pinUpdateSection.style.display = "block"; + } else { + pinUpdateSection.style.display = "none"; + } +} +function updateForm() { + if ( + currentPinElem.value !== + getUserByAccountNumber(currentUserAccountNumber).accountPin + ) { + alert("Incorrect Pin"); + return; + } + if (newPinElem.value !== confirmNewPinElem.value) { + alert("Pins do not match, try again"); + return; + } + + // finding the current user to update profile + + let userToBeUpdated = allUsers.find( + (user) => user.accountNumber == accountNumberElem.value + ); + userToBeUpdated.accountName = accountNameElem.value; + userToBeUpdated.accountPin = newPinElem.value; + // changing the updated properties to a string + const updatedObject = JSON.stringify(allUsers); + // storing it back in local storage + localStorage.setItem("MB_USER_ACCOUNTS", updatedObject); + location.href = "transactions.html"; +} +updateBtnElem.addEventListener("click", () => updateForm()); + +function deleteUserAccount() { + const registeredUsers = localStorage.getItem("MB_USER_ACCOUNTS"); + console.log(registeredUsers); + let usersArray = JSON.parse(registeredUsers); + const index = getUserIndexByAccountNumber(currentUserAccountNumber); + usersArray.splice(index, 1); + const newArrayOfUsers = JSON.stringify(usersArray); + localStorage.setItem("MB_USER_ACCOUNTS", newArrayOfUsers); + // location.href = "/"; +} +closeBtnElem.addEventListener("click", () => deleteUserAccount()); diff --git a/styles.css b/styles.css index aacd9bd..627e368 100644 --- a/styles.css +++ b/styles.css @@ -27,3 +27,6 @@ table { margin-left: 780px; margin-top: 10px; } +div#pin-update-section { + display: none; +} diff --git a/transactions.js b/transactions.js index 7af921f..1a5fb58 100644 --- a/transactions.js +++ b/transactions.js @@ -27,10 +27,14 @@ const renderTransactionRow = (transaction) => { const transactionRowData = document.createElement("td"); transactionRowData.setAttribute("class", "transaction-data"); // if transfer transaction, show beneficiary's name instead of account number - if (rowDataKey === 'beneficiaryAccountNumber' && transaction['beneficiaryAccountNumber']) { + if ( + rowDataKey === "beneficiaryAccountNumber" && + transaction["beneficiaryAccountNumber"] + ) { const beneficiary = getUserByAccountNumber(transaction[rowDataKey]); const beneficiaryName = beneficiary?.accountName; - transactionRowData.textContent = beneficiaryName || transaction[rowDataKey]; + transactionRowData.textContent = + beneficiaryName || transaction[rowDataKey]; } else { transactionRowData.textContent = transaction[rowDataKey]; } From 92cfad55f3042f8e104870b6f098a3190988f9b8 Mon Sep 17 00:00:00 2001 From: Gabriel Date: Mon, 27 Feb 2023 19:34:12 +0100 Subject: [PATCH 2/2] made the necessary corrections --- profile.html | 21 +++++++---- profile.js | 102 ++++++++++++++++++++++++++++++++++++--------------- styles.css | 3 ++ 3 files changed, 88 insertions(+), 38 deletions(-) diff --git a/profile.html b/profile.html index 9d782f6..9dfb7a4 100644 --- a/profile.html +++ b/profile.html @@ -20,6 +20,9 @@
  • Logout
    • +

    Account Profile

    @@ -51,7 +50,6 @@

    Account Profile

    @@ -61,7 +59,6 @@

    Account Profile

    @@ -71,7 +68,6 @@

    Account Profile

    @@ -86,6 +82,15 @@

    Account Profile

    +
    +

    You are about to close account

    + + +
    diff --git a/profile.js b/profile.js index 94e475b..3995268 100644 --- a/profile.js +++ b/profile.js @@ -7,56 +7,98 @@ const newPinElem = document.getElementById("new-pin"); const confirmNewPinElem = document.getElementById("confirm-new-pin"); const closeBtnElem = document.getElementById("close-btn"); const updateBtnElem = document.getElementById("update-btn"); -// display of aaccount number -accountNumberElem.value = currentUserAccountNumber; +const closeBtnConfirmationElem = document.getElementById( + "confirm-close-btn-action" +); +const yesCloseBtn = document.getElementById("yes"); +const dontCloseBtn = document.getElementById("no"); -const allUsers = JSON.parse(localStorage.getItem("MB_USER_ACCOUNTS")); +const pinUpdateSection = document.getElementById("pin-update-section"); -function displayFormToUpdate() { - const pinUpdateSection = document.getElementById("pin-update-section"); +const allUsers = getAllUsers(); +const currentUserIndex = getUserIndexByAccountNumber(currentUserAccountNumber); +// display of aaccount number +accountNumberElem.value = currentUserAccountNumber; +accountNameElem.value = allUsers[currentUserIndex].accountName; - if ((pinUpdateSection.style.display = "none")) { +function togglePinChangeSectionDisplay() { + if (changePinElem.checked == true) { pinUpdateSection.style.display = "block"; + currentPinElem.setAttribute("required", true); + newPinElem.setAttribute("required", true); + confirmNewPinElem.setAttribute("required", true); } else { pinUpdateSection.style.display = "none"; + currentPinElem.setAttribute("required", false); + newPinElem.setAttribute("required", false); + confirmNewPinElem.setAttribute("required", false); } } + +changePinElem.addEventListener("click", () => togglePinChangeSectionDisplay()); + function updateForm() { + allUsers[currentUserIndex].accountName = accountNameElem.value; + + // You need to check that user is updating PIN before you update it, otherwise, it will be updated to empty string if ( - currentPinElem.value !== - getUserByAccountNumber(currentUserAccountNumber).accountPin + changePinElem.checked == true && + currentPinElem.value !== allUsers[currentUserIndex].accountPin ) { - alert("Incorrect Pin"); + alert("Pin Incorrect"); return; } - if (newPinElem.value !== confirmNewPinElem.value) { - alert("Pins do not match, try again"); + if ( + changePinElem.checked == true && + newPinElem.value !== confirmNewPinElem.value + ) { + alert("passwords do not match"); return; } + if ( + changePinElem.checked == true && + confirmNewPinElem.value == allUsers[currentUserIndex].accountPin + ) { + alert("use a different password for update"); + } + if (changePinElem.checked == true && newPinElem.value == " ") { + newPinElem.value = allUsers[currentUserIndex].accountPin; + } + if ( + changePinElem.checked == true && + newPinElem.value === confirmNewPinElem.value + ) { + allUsers[currentUserIndex].accountPin = newPinElem.value; + } - // finding the current user to update profile - - let userToBeUpdated = allUsers.find( - (user) => user.accountNumber == accountNumberElem.value - ); - userToBeUpdated.accountName = accountNameElem.value; - userToBeUpdated.accountPin = newPinElem.value; - // changing the updated properties to a string - const updatedObject = JSON.stringify(allUsers); - // storing it back in local storage - localStorage.setItem("MB_USER_ACCOUNTS", updatedObject); - location.href = "transactions.html"; + localStorage.setItem("MB_USER_ACCOUNTS", JSON.stringify(allUsers)); + // location.href = "transactions.html"; } updateBtnElem.addEventListener("click", () => updateForm()); -function deleteUserAccount() { +function closeUserAccount() { + if ((closeBtnConfirmationElem.style.display = "none")) { + closeBtnConfirmationElem.style.display = "block"; + } + closeBtnElem.style.display = "none"; +} +closeBtnElem.addEventListener("click", () => closeUserAccount()); + +function confirmCloseUserAccount() { const registeredUsers = localStorage.getItem("MB_USER_ACCOUNTS"); - console.log(registeredUsers); - let usersArray = JSON.parse(registeredUsers); + const usersArray = JSON.parse(registeredUsers); const index = getUserIndexByAccountNumber(currentUserAccountNumber); usersArray.splice(index, 1); - const newArrayOfUsers = JSON.stringify(usersArray); - localStorage.setItem("MB_USER_ACCOUNTS", newArrayOfUsers); - // location.href = "/"; + const remainingRegisteredUsers = JSON.stringify(usersArray); + localStorage.setItem("MB_USER_ACCOUNTS", remainingRegisteredUsers); + location.href = "/"; +} +yesCloseBtn.addEventListener("click", () => confirmCloseUserAccount()); + +function doNotConfirmCloseUserAccount() { + if ((closeBtnConfirmationElem.style.display = "block")) { + closeBtnConfirmationElem.style.display = "none"; + } + closeBtnElem.style.display = "block"; } -closeBtnElem.addEventListener("click", () => deleteUserAccount()); +dontCloseBtn.addEventListener("click", () => doNotConfirmCloseUserAccount()); diff --git a/styles.css b/styles.css index 627e368..35ae9f2 100644 --- a/styles.css +++ b/styles.css @@ -30,3 +30,6 @@ table { div#pin-update-section { display: none; } +#confirm-close-btn-action { + display: none; +}