Skip to content

Added profile page #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gabito1451 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added profile page #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e642dc0
Added profile page
Gabbiechilz Feb 20, 2023
92cfad5
made the necessary corrections
Gabbiechilz Feb 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 99 additions & 0 deletions profile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./helpers/components.css" />
<link rel="stylesheet" href="./styles.css" />
<title>Profile</title>
<script src="./tailwind.js"></script>
</head>
<body>
<nav class="bg-gray-800 text-white p-6">
<ul class="flex justify-between items-center">
<li><a href="./transactions.html">Transactions</a></li>
<li><a href="./deposit.html">Deposit</a></li>
<li><a href="./withdraw.html">Withdraw</a></li>
<li><a href="./transfer.html">Transfer</a></li>
<li><a href="#">Account Profile</a></li>
<li><a id="logout-btn" href="#">Logout</a></li>
</ul>
</nav>
Copy link
Collaborator

@nwankwo-ikemefuna nwankwo-ikemefuna Feb 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where's the account balance section?

Copy link
Owner Author

@gabito1451 gabito1451 Feb 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've fixed it

<div class="account-balance">
<p>Balance: &#8358;<span id="user-account-balance"></span></p>
</div>
<div class="container-fixed">
<h1>Account Profile</h1>
<form id="profile-form" class="account-profile" onsubmit="return false">
<div class="form-group">
<label class="form-control-label">Account Name</label>
<input type="text" id="account-name" class="form-control" required />
</div>
<div class="form-group">
<label class="form-control-label">Account Number</label>
<input
type="number"
id="account-number"
class="form-control"
required
readonly
/>
</div>
<label class="form-control-label">
<input type="checkbox" id="change-pin" />
Change Pin</label
>
<div id="pin-update-section">
<div class="form-group">
<label class="form-control-label">Current PIN</label>
<input
type="password"
id="current-pin"
maxlength="4"
class="form-control"
/>
</div>
<div class="form-group">
<label class="form-control-label">New PIN</label>
<input
type="password"
id="new-pin"
maxlength="4"
class="form-control"
/>
</div>
<div class="form-group">
<label class="form-control-label">Confirm New PIN</label>
<input
type="password"
id="confirm-new-pin"
maxlength="4"
class="form-control"
/>
</div>
</div>
<div class="form-group">
<button class="bg-gray-800 text-white p-2 rounded-md" id="update-btn">
Update
</button>
</div>
</form>
<button id="close-btn" class="bg-red-800 text-white p-2 rounded-md">
Close
</button>
<div id="confirm-close-btn-action">
<p>You are about to close account</p>
<button id="yes" class="bg-green-800 text-white p-2 rounded-md">
Yes
</button>
<button id="no" class="bg-gray-800 text-white p-2 rounded-md">
No
</button>
</div>
</div>
</body>
<script src="./common.js"></script>
<script src="./common-session.js"></script>
<script src="./profile.js"></script>
</html>
104 changes: 104 additions & 0 deletions profile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
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");
const closeBtnConfirmationElem = document.getElementById(
"confirm-close-btn-action"
);
const yesCloseBtn = document.getElementById("yes");
const dontCloseBtn = document.getElementById("no");

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;

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 (
changePinElem.checked == true &&
currentPinElem.value !== allUsers[currentUserIndex].accountPin
) {
alert("Pin Incorrect");
return;
}
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;
}

localStorage.setItem("MB_USER_ACCOUNTS", JSON.stringify(allUsers));
// location.href = "transactions.html";
}
updateBtnElem.addEventListener("click", () => updateForm());

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");
Copy link
Collaborator

@nwankwo-ikemefuna nwankwo-ikemefuna Feb 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't we have a function for getting all users defined in common.js? Why do this?

Copy link
Owner Author

@gabito1451 gabito1451 Feb 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

const usersArray = JSON.parse(registeredUsers);
const index = getUserIndexByAccountNumber(currentUserAccountNumber);
usersArray.splice(index, 1);
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";
}
dontCloseBtn.addEventListener("click", () => doNotConfirmCloseUserAccount());
6 changes: 6 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,9 @@ table {
margin-left: 780px;
margin-top: 10px;
}
div#pin-update-section {
display: none;
}
#confirm-close-btn-action {
display: none;
}
8 changes: 6 additions & 2 deletions transactions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];
}
Expand Down