Success X
- Error X
-
-
-
-
-
- Success X
+ Something went wrong. Try again X
@@ -143,7 +141,7 @@
Banka
+
+
+
+
+
+
+
+ Activate / Deactivate Accounts
@@ -161,25 +159,40 @@
Activate / Deactivate Accounts
+
+ Add Staffs - Banka Dashboard
-
-
-
-
-
-
- Staffs
-
-
- Create Staffs
+ Staff
Activate / Deactivate
diff --git a/frontend-app/js/activate.js b/frontend-app/js/activate.js
index 9fa0536..374fd1e 100644
--- a/frontend-app/js/activate.js
+++ b/frontend-app/js/activate.js
@@ -2,9 +2,11 @@ const token = sessionStorage.getItem('token');
const api = 'https://bankaapp-api.herokuapp.com/api';
const go = document.querySelector('#go');
const limitSelect = document.querySelector('#limit');
-const onSuccess = document.querySelectorAll('.successMessage');
-const errMessage = document.querySelectorAll('.errMessage');
-const errMsg = document.querySelector('.errorMessage');
+const loader = document.querySelector('#loader');
+const successMsg = document.querySelector('.successMsg');
+const errMsg = document.querySelector('.errMsg');
+const userTable = document.querySelector('.user-table');
+const queryForm = document.querySelector('.queryForm');
// POST FETCH REQUEST FOR ACCOUNTS
const formSelect = document.querySelector('.form-select');
@@ -26,16 +28,17 @@ const patchApi = (url, data) => {
})
.then(response => response.json())
.then((data1) => {
+ const cModal = document.querySelector('.modal');
if (data1.status === 200) {
- errMessage.forEach((err) => {
- err.innerHTML = '';
- });
- onSuccess.forEach((success) => {
- success.innerHTML = 'Updated successfully';
- setInterval(() => {
- document.location.reload(true);
- }, 3000);
- });
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ errMsg.parentElement.style.display = 'none';
+ errMsg.innerHTML = '';
+ successMsg.parentElement.style.display = 'flex';
+ successMsg.innerHTML = 'Account updated Successfuly';
+ setInterval(() => {
+ document.location.reload(true);
+ }, 3000);
}
});
};
@@ -54,17 +57,18 @@ const deleteApi = (url) => {
redirect: 'follow',
referrer: 'no-referrer',
})
- .then((response) => {
- if (response.status === 204) {
- errMessage.forEach((err) => {
- err.innerHTML = '';
- });
- onSuccess.forEach((success) => {
- success.innerHTML = 'Deleted successfully';
- setInterval(() => {
- document.location.reload(true);
- }, 3000);
- });
+ .then(response => response.json())
+ .then((data) => {
+ const cModal = document.querySelector('.modal');
+ if (data.status === 200) {
+ loader.style.display = 'none';
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ successMsg.parentElement.style.display = 'flex';
+ successMsg.innerHTML = 'Account successfully deleted';
+ setInterval(() => {
+ location.reload(true);
+ }, 3000);
}
});
};
@@ -85,17 +89,33 @@ const getAccountsApi = (url) => {
})
.then((response) => {
if (response.status === 403) {
+ loader.style.display = 'none';
+ errMsg.parentElement.style.display = 'flex';
errMsg.innerHTML = 'you must be logged in to view accounts';
+ userTable.style.display = 'none';
+ queryForm.style.display = 'none';
} else {
+ errMsg.parentElement.style.display = 'none';
+ loader.style.display = 'none';
errMsg.innerHTML = '';
+ userTable.style.display = 'block';
+ queryForm.style.display = 'flex';
return response.json();
}
})
.then((data1) => {
if (data1.status === 401) {
+ loader.style.display = 'none';
+ errMsg.parentElement.style.display = 'flex';
errMsg.innerHTML = 'you must be an admin or staff to view accounts';
+ userTable.style.display = 'none';
+ queryForm.style.display = 'none';
} else {
+ errMsg.parentElement.style.display = 'none';
+ userTable.style.display = 'block';
+ queryForm.style.display = 'flex';
data1.data.map((i) => {
+ loader.style.display = 'none';
const table = document.querySelector('.table');
const tableRow = document.createElement('div');
tableRow.classList = 'table-row table-body';
@@ -121,6 +141,7 @@ const getAccountsApi = (url) => {
const aDeleteAccount = document.createElement('a');
aDeleteAccount.href = '#';
aDeleteAccount.className = 'deactivate-btn';
+ aDeleteAccount.id = 'show-modal2';
aDeleteAccount.innerHTML = 'Delete';
deleteAccount.appendChild(aDeleteAccount);
tableRow.appendChild(accountNumber);
@@ -131,11 +152,10 @@ const getAccountsApi = (url) => {
table.appendChild(tableRow);
});
}
- return data1;
- })
- .then(() => {
+
// modal
const showModal = document.querySelectorAll('#show-modal');
+ const showModal2 = document.querySelectorAll('#show-modal2');
const accountName = document.querySelectorAll('#username');
const accountNumber = document.querySelectorAll('#acnumber');
const accountBalance = document.querySelectorAll('#balance');
@@ -143,29 +163,66 @@ const getAccountsApi = (url) => {
const modalFunction = (modalClick, modalIn, modalId) => {
if (modalClick) {
const mModal = document.querySelector(modalIn);
+ const onPatch = document.querySelector('.onPatch');
+ const onDelete = document.querySelector('.onDelete');
modalClick.forEach((modal) => {
modal.addEventListener('click', (e) => {
- mModal.style.visibility = 'visible';
- mModal.style.opacity = '1';
- if (e.target.parentElement.parentElement) {
- const ACNumber = e.target.parentElement.parentElement.children[0].innerHTML;
- const ACName = e.target.parentElement.parentElement.children[1].innerHTML;
- const ACBalance = e.target.parentElement.parentElement.children[2].innerHTML;
- accountName.forEach((name) => {
- name.innerHTML = ACName;
- });
- accountNumber.forEach((number) => {
- number.innerHTML = ACNumber;
- });
- accountBalance.forEach((balance) => {
- balance.innerHTML = ACBalance;
- });
+ const ACNumber = e.target.parentElement.parentElement.children[0].innerHTML;
+ const ACName = e.target.parentElement.parentElement.children[1].innerHTML;
+ const ACBalance = e.target.parentElement.parentElement.children[2].innerHTML;
+ // CHECK IF PATCH BUTTON IS CLICKED
+ if (e.target.id === 'show-modal') {
+ onDelete.style.display = 'none'; // HIDE DELETE
+ onPatch.style.display = 'block'; // SHOW PATCH
+ mModal.style.visibility = 'visible';
+ mModal.style.opacity = '1';
+ if (e.target.parentElement.parentElement) {
+ accountName.forEach((name) => {
+ name.innerHTML = ACName;
+ });
+ accountNumber.forEach((number) => {
+ number.innerHTML = ACNumber;
+ });
+ accountBalance.forEach((balance) => {
+ balance.innerHTML = ACBalance;
+ });
+
+ submit.addEventListener('click', () => {
+ e.preventDefault();
+ patchApi(`${api}/v1/accounts/${ACNumber}`, { status: formSelect.value });
+ });
+ }
+ } else if (e.target.id === 'show-modal2') {
+ onPatch.style.display = 'none'; // HIDE PATCH
+ onDelete.style.display = 'block'; // SHOW DELETE
+ mModal.style.visibility = 'visible';
+ mModal.style.opacity = '1';
+ if (e.target.parentElement.parentElement) {
+ accountName.forEach((name) => {
+ name.innerHTML = ACName;
+ });
+ accountNumber.forEach((number) => {
+ number.innerHTML = ACNumber;
+ });
- submit.addEventListener('click', () => {
- e.preventDefault();
- patchApi(`${api}/v1/accounts/${ACNumber}`, { status: formSelect.value });
- });
+ const del = document.querySelector('#delete');
+ const cancel = document.querySelector('#cancel');
+
+ del.addEventListener('click', (event) => {
+ event.preventDefault();
+ deleteApi(`${api}/v1/accounts/${ACNumber}`);
+ e.target.parentElement.parentElement.remove();
+ loader.style.display = 'flex';
+ });
+
+ cancel.addEventListener('click', (event) => {
+ event.preventDefault();
+ const cModal = document.querySelector(modalIn);
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ });
+ }
}
});
});
@@ -182,18 +239,13 @@ const getAccountsApi = (url) => {
};
modalFunction(showModal, '.modal', '#modal');
+ modalFunction(showModal2, '.modal', '#modal');
- // DELETE
- const dels = document.querySelectorAll('.deactivate-btn');
- dels.forEach((del) => {
- del.addEventListener('click', (e) => {
- const ACNumber = e.target.parentElement.parentElement.children[0].innerHTML;
- deleteApi(`${api}/v1/accounts/${ACNumber}`);
- e.target.parentElement.parentElement.remove();
- });
- });
+ return data1;
});
};
+
+loader.style.display = 'flex';
getAccountsApi(`${api}/v1/accounts?limit=${limitSelect.value}`);
// GET FETCH API REQUEST TO GET A SPECIFIC ACCOUNT OF A USER
@@ -212,52 +264,72 @@ const getSpecficAccountApi = (url) => {
})
.then((response) => {
if (response.status === 403) {
+ loader.style.display = 'none';
+ userTable.style.display = 'none';
+ queryForm.style.display = 'none';
errMsg.innerHTML = 'you must be logged in to view accounts';
} else {
+ loader.style.display = 'none';
errMsg.innerHTML = '';
+ userTable.style.display = 'block';
+ queryForm.style.display = 'flex';
return response.json();
}
})
.then((data1) => {
- const i = data1.data;
- const table = document.querySelector('.table');
- const tableRow = document.createElement('div');
- tableRow.classList = 'table-row table-body';
- const accountNumber = document.createElement('div');
- accountNumber.className = 'account-index';
- accountNumber.innerHTML = i.accountnumber;
- const accountName = document.createElement('div');
- accountName.className = 'account-name';
- accountName.innerHTML = `${i.firstname} ${i.lastname}`;
- const status = document.createElement('div');
- status.className = 'account-status';
- status.innerHTML = i.status;
- const activate = document.createElement('div');
- activate.className = 'activate';
- const aActivate = document.createElement('a');
- aActivate.href = '#';
- aActivate.className = 'activate-btn';
- aActivate.id = 'show-modal';
- aActivate.innerHTML = 'Active/Dormant';
- activate.appendChild(aActivate);
- const deleteAccount = document.createElement('div');
- deleteAccount.className = 'deactivate';
- const aDeleteAccount = document.createElement('a');
- aDeleteAccount.href = '#';
- aDeleteAccount.className = 'deactivate-btn';
- aDeleteAccount.innerHTML = 'Delete';
- deleteAccount.appendChild(aDeleteAccount);
- tableRow.appendChild(accountNumber);
- tableRow.appendChild(accountName);
- tableRow.appendChild(status);
- tableRow.appendChild(activate);
- tableRow.appendChild(deleteAccount);
- table.appendChild(tableRow);
+ if (data1.status === 404) {
+ loader.style.display = 'none';
+ errMsg.parentElement.style.display = 'flex';
+ errMsg.innerHTML = 'no account found';
+ userTable.style.display = 'none';
+ queryForm.style.display = 'none';
+ } else {
+ errMsg.parentElement.style.display = 'none';
+ loader.style.display = 'none';
+ userTable.style.display = 'block';
+ queryForm.style.display = 'flex';
+ const i = data1.data;
+ const table = document.querySelector('.table');
+ const tableRow = document.createElement('div');
+ tableRow.classList = 'table-row table-body';
+ const accountNumber = document.createElement('div');
+ accountNumber.className = 'account-index';
+ accountNumber.innerHTML = i.accountnumber;
+ const accountName = document.createElement('div');
+ accountName.className = 'account-name';
+ accountName.innerHTML = `${i.firstname} ${i.lastname}`;
+ const status = document.createElement('div');
+ status.className = 'account-status';
+ status.innerHTML = i.status;
+ const activate = document.createElement('div');
+ activate.className = 'activate';
+ const aActivate = document.createElement('a');
+ aActivate.href = '#';
+ aActivate.className = 'activate-btn';
+ aActivate.id = 'show-modal';
+ aActivate.innerHTML = 'Active/Dormant';
+ activate.appendChild(aActivate);
+ const deleteAccount = document.createElement('div');
+ deleteAccount.className = 'deactivate';
+ const aDeleteAccount = document.createElement('a');
+ aDeleteAccount.href = '#';
+ aDeleteAccount.className = 'deactivate-btn';
+ aDeleteAccount.id = 'show-modal2';
+ aDeleteAccount.innerHTML = 'Delete';
+ deleteAccount.appendChild(aDeleteAccount);
+ tableRow.appendChild(accountNumber);
+ tableRow.appendChild(accountName);
+ tableRow.appendChild(status);
+ tableRow.appendChild(activate);
+ tableRow.appendChild(deleteAccount);
+ table.appendChild(tableRow);
+ }
return data1;
})
.then(() => {
// modal
const showModal = document.querySelectorAll('#show-modal');
+ const showModal2 = document.querySelectorAll('#show-modal2');
const accountName = document.querySelectorAll('#username');
const accountNumber = document.querySelectorAll('#acnumber');
const accountBalance = document.querySelectorAll('#balance');
@@ -265,31 +337,66 @@ const getSpecficAccountApi = (url) => {
const modalFunction = (modalClick, modalIn, modalId) => {
if (modalClick) {
const mModal = document.querySelector(modalIn);
+ const onPatch = document.querySelector('.onPatch');
+ const onDelete = document.querySelector('.onDelete');
modalClick.forEach((modal) => {
modal.addEventListener('click', (e) => {
- mModal.style.visibility = 'visible';
- mModal.style.opacity = '1';
- if (e.target.parentElement.parentElement) {
- const ACNumber = e.target.parentElement.parentElement.children[0].innerHTML;
- const ACName = e.target.parentElement.parentElement.children[1].innerHTML;
- const ACBalance = e.target.parentElement.parentElement.children[2].innerHTML;
- accountName.forEach((name) => {
- name.innerHTML = ACName;
- });
- accountNumber.forEach((number) => {
- number.innerHTML = ACNumber;
- });
- accountBalance.forEach((balance) => {
- balance.innerHTML = ACBalance;
- });
+ const ACNumber = e.target.parentElement.parentElement.children[0].innerHTML;
+ const ACName = e.target.parentElement.parentElement.children[1].innerHTML;
+ const ACBalance = e.target.parentElement.parentElement.children[2].innerHTML;
+ // CHECK IF PATCH BUTTON IS CLICKED
+ if (e.target.id === 'show-modal') {
+ onDelete.style.display = 'none'; // HIDE DELETE
+ onPatch.style.display = 'block'; // SHOW PATCH
+ mModal.style.visibility = 'visible';
+ mModal.style.opacity = '1';
+ if (e.target.parentElement.parentElement) {
+ accountName.forEach((name) => {
+ name.innerHTML = ACName;
+ });
+ accountNumber.forEach((number) => {
+ number.innerHTML = ACNumber;
+ });
+ accountBalance.forEach((balance) => {
+ balance.innerHTML = ACBalance;
+ });
+
+ submit.addEventListener('click', () => {
+ e.preventDefault();
+ patchApi(`${api}/v1/accounts/${ACNumber}`, { status: formSelect.value });
+ });
+ }
+ } else if (e.target.id === 'show-modal2') {
+ onPatch.style.display = 'none'; // HIDE PATCH
+ onDelete.style.display = 'block'; // SHOW DELETE
+ mModal.style.visibility = 'visible';
+ mModal.style.opacity = '1';
+ if (e.target.parentElement.parentElement) {
+ accountName.forEach((name) => {
+ name.innerHTML = ACName;
+ });
+ accountNumber.forEach((number) => {
+ number.innerHTML = ACNumber;
+ });
+
+ const del = document.querySelector('#delete');
+ const cancel = document.querySelector('#cancel');
- submit.addEventListener('click', () => {
- e.preventDefault();
- patchApi(`${api}/v1/accounts/${ACNumber}`, { status: formSelect.value });
- });
+ del.addEventListener('click', (event) => {
+ event.preventDefault();
+ deleteApi(`${api}/v1/accounts/${ACNumber}`);
+ e.target.parentElement.parentElement.remove();
+ loader.style.display = 'flex';
+ });
- console.log(e.target);
+ cancel.addEventListener('click', (event) => {
+ event.preventDefault();
+ const cModal = document.querySelector(modalIn);
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ });
+ }
}
});
});
@@ -306,16 +413,7 @@ const getSpecficAccountApi = (url) => {
};
modalFunction(showModal, '.modal', '#modal');
-
- // DELETE
- const dels = document.querySelectorAll('.deactivate-btn');
- dels.forEach((del) => {
- del.addEventListener('click', (e) => {
- const ACNumber = e.target.parentElement.parentElement.children[0].innerHTML;
- deleteApi(`${api}/v1/accounts/${ACNumber}`);
- e.target.parentElement.parentElement.remove();
- });
- });
+ modalFunction(showModal2, '.modal', '#modal');
});
};
@@ -326,6 +424,7 @@ go.addEventListener('click', (e) => {
tableBody.remove();
});
+ loader.style.display = 'flex';
getAccountsApi(`${api}/v1/accounts?limit=${limitSelect.value}`);
});
@@ -338,5 +437,6 @@ search.addEventListener('keyup', (e) => {
tableBody.remove();
});
+ loader.style.display = 'flex';
getSpecficAccountApi(`${api}/v1/accounts/${search.value}`);
});
diff --git a/frontend-app/js/addstaff.js b/frontend-app/js/addstaff.js
deleted file mode 100644
index cb03190..0000000
--- a/frontend-app/js/addstaff.js
+++ /dev/null
@@ -1,120 +0,0 @@
-const api = 'https://bankaapp-api.herokuapp.com/api/v1';
-const token = sessionStorage.getItem('token');
-
-const fnameAndLnameRegex = /^[a-zA-Z ]{2,15}$/;
-const emailRegex = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,10})$/;
-const passwordRegex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
-const firstName = document.querySelector('#firstname');
-const lastName = document.querySelector('#lastname');
-const email = document.querySelector('#email');
-const type = document.querySelector('.form-select');
-const password = document.querySelector('#password');
-const errorFname = document.querySelector('.errorfname');
-const errorLname = document.querySelector('.errorlname');
-const errorEmail = document.querySelector('.erroremail');
-const errorPassword = document.querySelector('.errorpassword');
-const submit = document.querySelector('#submit');
-let fnamePassed, lnamePassed, emailPassed, passwordPassed;
-
-firstName.addEventListener('keyup', () => {
- if (!fnameAndLnameRegex.test(firstName.value)) {
- errorFname.innerHTML = 'first name should at least be 2 characters';
- fnamePassed = false;
- } else {
- errorFname.innerHTML = '';
- fnamePassed = true;
- }
-});
-
-lastName.addEventListener('keyup', () => {
- if (!fnameAndLnameRegex.test(lastName.value)) {
- errorLname.innerHTML = 'last name should at least be 2 characters';
- lnamePassed = false;
- } else {
- errorLname.innerHTML = '';
- lnamePassed = true;
- }
-});
-
-email.addEventListener('keyup', () => {
- if (!emailRegex.test(email.value)) {
- errorEmail.innerHTML = 'invaild email address';
- emailPassed = false;
- } else {
- errorEmail.innerHTML = '';
- emailPassed = true;
- }
-});
-
-password.addEventListener('keyup', () => {
- if (!passwordRegex.test(password.value)) {
- errorPassword.innerHTML = 'Password must at least have 1 alphabet, lowercase, uppercase, number and cannot be less than 8';
- passwordPassed = false;
- } else {
- errorPassword.innerHTML = '';
- passwordPassed = true;
- }
-});
-
-// POST FETCH API REQUEST
-const postApi = (url, data) => {
- fetch(url, {
- method: 'POST',
- mode: 'cors',
- cache: 'no-cache',
- credentials: 'same-origin',
- headers: {
- Authorization: `Bearer ${token}`,
- 'Content-Type': 'application/json',
- },
- redirect: 'follow',
- referrer: 'no-referrer',
- body: JSON.stringify(data),
- })
- .then((response) => {
- const error = document.querySelector('.errMsg');
- if (response.status === 403) {
- error.parentElement.style.display = 'flex';
- error.innerHTML = 'You are not logged in. Login here';
- } else if (response.status === 401) {
- error.parentElement.style.display = 'flex';
- error.innerHTML = 'You are not an admin to perform this task';
- } else if (response.status === 409) {
- errorEmail.innerHTML = 'email already exist';
- } else if (response.status === 201) {
- const success = document.querySelector('.successMsg');
- success.parentElement.style.display = 'flex';
- success.innerHTML = 'User created successfully';
- setInterval(() => {
- document.location.reload(true);
- }, 3000);
- }
- });
-};
-
-submit.addEventListener('click', (e) => {
- e.preventDefault();
- if (fnamePassed === true && lnamePassed === true && emailPassed === true && passwordPassed === true) {
- if (type.value === 'staff') {
- const signupData = {
- firstName: firstName.value,
- lastName: lastName.value,
- email: email.value,
- type: type.value,
- password: password.value,
- isAdmin: false,
- };
- postApi(`${api}/users/addstaff`, signupData);
- } else {
- const signupData = {
- firstName: firstName.value,
- lastName: lastName.value,
- email: email.value,
- type: 'staff',
- password: password.value,
- isAdmin: true,
- };
- postApi(`${api}/users/addstaff`, signupData);
- }
- }
-});
diff --git a/frontend-app/js/allaccounts.js b/frontend-app/js/allaccounts.js
index 860610e..d395799 100644
--- a/frontend-app/js/allaccounts.js
+++ b/frontend-app/js/allaccounts.js
@@ -7,6 +7,7 @@ const errMsg = document.querySelector('.errMsg');
const userTable = document.querySelector('.user-table');
const queryForm = document.querySelector('.queryForm');
const search = document.querySelector('#search');
+const loader = document.querySelector('#loader');
// DELETE FETCH REQUEST FOR ACCOUNTS
const deleteApi = (url) => {
@@ -22,7 +23,20 @@ const deleteApi = (url) => {
redirect: 'follow',
referrer: 'no-referrer',
})
- .then(response => response.json());
+ .then(response => response.json())
+ .then((data) => {
+ const cModal = document.querySelector('.modal');
+ if (data.status === 200) {
+ loader.style.display = 'none';
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ successMsg.parentElement.style.display = 'flex';
+ successMsg.innerHTML = 'Account successfully deleted';
+ setInterval(() => {
+ location.reload(true);
+ }, 3000);
+ }
+ });
};
// GET FETCH API REQUEST TO GET ALL ACCOUNTS OF A USER
@@ -41,11 +55,13 @@ const getAccountsApi = (url) => {
})
.then((response) => {
if (response.status === 403) {
+ loader.style.display = 'none';
errMsg.parentElement.style.display = 'flex';
userTable.style.display = 'none';
queryForm.style.display = 'none';
errMsg.innerHTML = 'you must be logged in to view accounts';
} else {
+ loader.style.display = 'none';
userTable.style.display = 'block';
queryForm.style.display = 'flex';
errMsg.parentElement.style.display = 'none';
@@ -55,11 +71,13 @@ const getAccountsApi = (url) => {
})
.then((data1) => {
if (data1.status === 401) {
+ loader.style.display = 'none';
errMsg.parentElement.style.display = 'flex';
userTable.style.display = 'none';
queryForm.style.display = 'none';
errMsg.innerHTML = 'you must be an admin or staff to view accounts';
} else {
+ loader.style.display = 'none';
userTable.style.display = 'block';
queryForm.style.display = 'flex';
errMsg.parentElement.style.display = 'none';
@@ -84,6 +102,7 @@ const getAccountsApi = (url) => {
const aDeleteAccount = document.createElement('a');
aDeleteAccount.href = '#';
aDeleteAccount.className = 'deactivate-btn';
+ aDeleteAccount.id = 'show-modal';
aDeleteAccount.innerHTML = 'Delete';
deleteAccount.appendChild(aDeleteAccount);
tableRow.appendChild(accountNumber);
@@ -94,24 +113,67 @@ const getAccountsApi = (url) => {
table.appendChild(tableRow);
});
- // DELETE
- const dels = document.querySelectorAll('.deactivate-btn');
- dels.forEach((del) => {
- del.addEventListener('click', (e) => {
- const acnumber = e.target.parentElement.parentElement.children[0].innerHTML;
- deleteApi(`${api}/v1/accounts/${acnumber}`);
- e.target.parentElement.parentElement.remove();
- successMsg.parentElement.style.display = 'flex';
- successMsg.innerHTML = 'Account successfully deleted';
- setInterval(() => {
- location.reload(true);
- }, 3000);
+ // show modal
+ const showModal = document.querySelectorAll('#show-modal');
+ const acName = document.querySelectorAll('#username');
+ const acNumber = document.querySelectorAll('#acnumber');
+
+ const modalFunction = (modalClick, modalIn, modalId) => {
+ if (modalClick) {
+ const mModal = document.querySelector(modalIn);
+
+ modalClick.forEach((modal) => {
+ modal.addEventListener('click', (e) => {
+ mModal.style.visibility = 'visible';
+ mModal.style.opacity = '1';
+ if (e.target.parentElement.parentElement) {
+ const ACNumber = e.target.parentElement.parentElement.children[0].innerHTML;
+ const ACName = e.target.parentElement.parentElement.children[1].innerHTML;
+ acName.forEach((name) => {
+ name.innerHTML = ACName;
+ });
+ acNumber.forEach((number) => {
+ number.innerHTML = ACNumber;
+ });
+
+ const del = document.querySelector('#delete');
+ const cancel = document.querySelector('#cancel');
+
+ del.addEventListener('click', (event) => {
+ event.preventDefault();
+ deleteApi(`${api}/v1/accounts/${ACNumber}`);
+ e.target.parentElement.parentElement.remove();
+ loader.style.display = 'flex';
+ });
+
+ cancel.addEventListener('click', (event) => {
+ event.preventDefault();
+ const cModal = document.querySelector(modalIn);
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ });
+ }
+ });
+ });
+ }
+
+ window.addEventListener('click', (e) => {
+ const modal = document.querySelector(modalId);
+ const cModal = document.querySelector(modalIn);
+ if (e.target === modal) {
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ }
});
- });
+ };
+
+ modalFunction(showModal, '.modal', '#modal');
}
return data1;
});
};
+
+loader.style.display = 'flex';
getAccountsApi(`${api}/v1/accounts?limit=${limitSelect.value}`);
// GET FETCH API REQUEST TO GET A SPECIFIC ACCOUNT OF A USER
@@ -130,11 +192,13 @@ const getSpecficAccountApi = (url) => {
})
.then((response) => {
if (response.status === 403) {
+ loader.style.display = 'none';
errMsg.parentElement.style.display = 'flex';
userTable.style.display = 'none';
queryForm.style.display = 'none';
errMsg.innerHTML = 'you must be logged in to view accounts';
} else {
+ loader.style.display = 'none';
userTable.style.display = 'block';
queryForm.style.display = 'flex';
errMsg.parentElement.style.display = 'none';
@@ -144,16 +208,19 @@ const getSpecficAccountApi = (url) => {
})
.then((data1) => {
if (data1.status === 401) {
+ loader.style.display = 'none';
errMsg.parentElement.style.display = 'flex';
userTable.style.display = 'none';
queryForm.style.display = 'none';
errMsg.innerHTML = 'you must be an admin or staff to view accounts';
} else if (data1.status === 404) {
+ loader.style.display = 'none';
errMsg.parentElement.style.display = 'flex';
userTable.style.display = 'none';
queryForm.style.display = 'none';
errMsg.innerHTML = 'no account found';
} else {
+ loader.style.display = 'none';
userTable.style.display = 'block';
queryForm.style.display = 'flex';
errMsg.parentElement.style.display = 'none';
@@ -178,6 +245,7 @@ const getSpecficAccountApi = (url) => {
const aDeleteAccount = document.createElement('a');
aDeleteAccount.href = '#';
aDeleteAccount.className = 'deactivate-btn';
+ aDeleteAccount.id = 'show-modal';
aDeleteAccount.innerHTML = 'Delete';
deleteAccount.appendChild(aDeleteAccount);
tableRow.appendChild(accountNumber);
@@ -187,20 +255,61 @@ const getSpecficAccountApi = (url) => {
tableRow.appendChild(deleteAccount);
table.appendChild(tableRow);
- // DELETE
- const dels = document.querySelectorAll('.deactivate-btn');
- dels.forEach((del) => {
- del.addEventListener('click', (e) => {
- const acnumber = e.target.parentElement.parentElement.children[0].innerHTML;
- deleteApi(`${api}/v1/accounts/${acnumber}`);
- e.target.parentElement.parentElement.remove();
- successMsg.parentElement.style.display = 'flex';
- successMsg.innerHTML = 'Account successfully deleted';
- setInterval(() => {
- location.reload(true);
- }, 3000);
+ // show modal
+ const showModal = document.querySelectorAll('#show-modal');
+ const acName = document.querySelectorAll('#username');
+ const acNumber = document.querySelectorAll('#acnumber');
+
+ const modalFunction = (modalClick, modalIn, modalId) => {
+ if (modalClick) {
+ const mModal = document.querySelector(modalIn);
+
+ modalClick.forEach((modal) => {
+ modal.addEventListener('click', (e) => {
+ mModal.style.visibility = 'visible';
+ mModal.style.opacity = '1';
+ if (e.target.parentElement.parentElement) {
+ const ACNumber = e.target.parentElement.parentElement.children[0].innerHTML;
+ const ACName = e.target.parentElement.parentElement.children[1].innerHTML;
+ acName.forEach((name) => {
+ name.innerHTML = ACName;
+ });
+ acNumber.forEach((number) => {
+ number.innerHTML = ACNumber;
+ });
+
+ const del = document.querySelector('#delete');
+ const cancel = document.querySelector('#cancel');
+
+ del.addEventListener('click', (event) => {
+ event.preventDefault();
+ deleteApi(`${api}/v1/accounts/${ACNumber}`);
+ e.target.parentElement.parentElement.remove();
+ loader.style.display = 'flex';
+ });
+
+ cancel.addEventListener('click', (event) => {
+ event.preventDefault();
+ const cModal = document.querySelector(modalIn);
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ });
+ }
+ });
+ });
+ }
+
+ window.addEventListener('click', (e) => {
+ const modal = document.querySelector(modalId);
+ const cModal = document.querySelector(modalIn);
+ if (e.target === modal) {
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ }
});
- });
+ };
+
+ modalFunction(showModal, '.modal', '#modal');
return data1;
}
@@ -213,7 +322,7 @@ go.addEventListener('click', (e) => {
tableBodies.forEach((tableBody) => {
tableBody.remove();
});
-
+ loader.style.display = 'flex';
getAccountsApi(`${api}/v1/accounts?limit=${limitSelect.value}`);
});
@@ -223,6 +332,6 @@ search.addEventListener('keyup', (e) => {
tableBodies.forEach((tableBody) => {
tableBody.remove();
});
-
+ loader.style.display = 'flex';
getSpecficAccountApi(`${api}/v1/accounts/${search.value}`);
});
diff --git a/frontend-app/js/staffs.js b/frontend-app/js/staffs.js
index 3c3198c..2867e8a 100644
--- a/frontend-app/js/staffs.js
+++ b/frontend-app/js/staffs.js
@@ -1,13 +1,91 @@
const token = sessionStorage.getItem('token');
const api = 'https://bankaapp-api.herokuapp.com/api';
const limitSelect = document.querySelector('#limit');
+const loader = document.querySelector('#loader');
const submit = document.querySelector('#go');
const errMsg = document.querySelector('.errMsg');
const successMsg = document.querySelector('.successMsg');
const userTable = document.querySelector('.user-table');
const queryForm = document.querySelector('.queryForm');
+const fnameAndLnameRegex = /^[a-zA-Z ]{2,15}$/;
+const emailRegex = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,10})$/;
+const passwordRegex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
+const firstName = document.querySelector('#firstname');
+const lastName = document.querySelector('#lastname');
+const email = document.querySelector('#email');
+const type = document.querySelector('.form-select');
+const password = document.querySelector('#password');
+const errorFname = document.querySelector('.errorfname');
+const errorLname = document.querySelector('.errorlname');
+const errorEmail = document.querySelector('.erroremail');
+const errorPassword = document.querySelector('.errorpassword');
+const addStaff = document.querySelector('#add-staff');
+const submitStaff = document.querySelector('#submit-staff');
+const togglePassword = document.querySelector('.toggle-password-button');
+const see = document.querySelector('#see');
+const unsee = document.querySelector('#unsee');
+let fnamePassed, lnamePassed, emailPassed, passwordPassed;
-// DELETE FETCH REQUEST FOR USERS
+const fnameChecker = () => {
+ if (!fnameAndLnameRegex.test(firstName.value)
+ || firstName.value.length === 0
+ || firstName.value === '') {
+ errorFname.innerHTML = 'first name should at least be 2 characters';
+ fnamePassed = false;
+ } else {
+ errorFname.innerHTML = '';
+ fnamePassed = true;
+ }
+};
+
+firstName.addEventListener('keyup', fnameChecker);
+submitStaff.addEventListener('click', fnameChecker);
+
+const lnameChecker = () => {
+ if (!fnameAndLnameRegex.test(lastName.value)
+ || lastName.value.length === 0
+ || lastName.value === '') {
+ errorLname.innerHTML = 'last name should at least be 2 characters';
+ lnamePassed = false;
+ } else {
+ errorLname.innerHTML = '';
+ lnamePassed = true;
+ }
+};
+
+lastName.addEventListener('keyup', lnameChecker);
+submitStaff.addEventListener('click', lnameChecker);
+
+const emailChecker = () => {
+ if (!emailRegex.test(email.value)
+ || email.value.length === 0
+ || email.value === '') {
+ errorEmail.innerHTML = 'invaild email address';
+ emailPassed = false;
+ } else {
+ errorEmail.innerHTML = '';
+ emailPassed = true;
+ }
+};
+email.addEventListener('keyup', emailChecker);
+submitStaff.addEventListener('click', emailChecker);
+
+const passwordChecker = () => {
+ if (!passwordRegex.test(password.value)
+ || password.value.length === 0
+ || password.value === '') {
+ errorPassword
+ .innerHTML = 'Password must have 1 lowercase, uppercase, number and special character';
+ passwordPassed = false;
+ } else {
+ errorPassword.innerHTML = '';
+ passwordPassed = true;
+ }
+};
+password.addEventListener('keyup', passwordChecker);
+submitStaff.addEventListener('click', passwordChecker);
+
+// DELETE FETCH REQUEST FOR ACCOUNTS
const deleteApi = (url) => {
fetch(url, {
method: 'DELETE',
@@ -21,7 +99,20 @@ const deleteApi = (url) => {
redirect: 'follow',
referrer: 'no-referrer',
})
- .then(response => response.json());
+ .then(response => response.json())
+ .then((data) => {
+ const cModal = document.querySelector('.modal');
+ if (data.status === 200) {
+ loader.style.display = 'none';
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ successMsg.parentElement.style.display = 'flex';
+ successMsg.innerHTML = 'Account successfully deleted';
+ setInterval(() => {
+ location.reload(true);
+ }, 3000);
+ }
+ });
};
// GET FETCH API REQUEST TO GET ALL ACCOUNTS OF A USER
@@ -40,11 +131,13 @@ const getUsersApi = (url) => {
})
.then((response) => {
if (response.status === 403) {
+ loader.style.display = 'none';
errMsg.parentElement.style.display = 'flex';
userTable.style.display = 'none';
queryForm.style.display = 'none';
errMsg.innerHTML = 'you must be logged in to view users';
} else {
+ loader.style.display = 'none';
userTable.style.display = 'block';
queryForm.style.display = 'flex';
errMsg.parentElement.style.display = 'none';
@@ -54,11 +147,13 @@ const getUsersApi = (url) => {
})
.then((data1) => {
if (data1.status === 401) {
+ loader.style.display = 'none';
errMsg.parentElement.style.display = 'flex';
userTable.style.display = 'none';
queryForm.style.display = 'none';
errMsg.innerHTML = 'you must be an admin or staff to view accounts';
} else {
+ loader.style.display = 'none';
userTable.style.display = 'block';
queryForm.style.display = 'flex';
errMsg.parentElement.style.display = 'none';
@@ -72,12 +167,12 @@ const getUsersApi = (url) => {
const fullname = document.createElement('div');
fullname.className = 'account-index';
fullname.innerHTML = `${i.firstname} ${i.lastname}`;
- const email = document.createElement('div');
- email.className = 'account-name';
- email.innerHTML = i.email;
- const type = document.createElement('div');
- type.className = 'account-status';
- type.innerHTML = i.type;
+ const emailEl = document.createElement('div');
+ emailEl.className = 'account-name';
+ emailEl.innerHTML = i.email;
+ const typeEl = document.createElement('div');
+ typeEl.className = 'account-status';
+ typeEl.innerHTML = i.type;
const isAdmin = document.createElement('div');
isAdmin.className = 'activate';
isAdmin.innerHTML = i.isadmin;
@@ -86,7 +181,7 @@ const getUsersApi = (url) => {
const aDeleteUser = document.createElement('a');
aDeleteUser.href = '#';
aDeleteUser.className = 'delete-btn';
- aDeleteUser.id = 'delete';
+ aDeleteUser.id = 'show-modal';
aDeleteUser.innerHTML = 'Delete';
deleteUser.appendChild(aDeleteUser);
const newBalnace = document.createElement('div');
@@ -94,31 +189,117 @@ const getUsersApi = (url) => {
newBalnace.innerHTML = i.newbalance;
tableRow.appendChild(userId);
tableRow.appendChild(fullname);
- tableRow.appendChild(email);
- tableRow.appendChild(type);
+ tableRow.appendChild(emailEl);
+ tableRow.appendChild(typeEl);
tableRow.appendChild(isAdmin);
tableRow.appendChild(deleteUser);
table.appendChild(tableRow);
});
- // DELETE
- const dels = document.querySelectorAll('.delete-btn');
- dels.forEach((del) => {
- del.addEventListener('click', (e) => {
- const id = e.target.parentElement.parentElement.children[0].innerHTML;
- deleteApi(`${api}/v1/users/${id}`);
- e.target.parentElement.parentElement.remove();
- successMsg.parentElement.style.display = 'flex';
- successMsg.innerHTML = 'User successfully deleted';
- setInterval(() => {
- location.reload(true);
- }, 3000);
+ // show modal
+ const showModal = document.querySelectorAll('#show-modal');
+ const acName = document.querySelectorAll('#username');
+
+ const modalFunction = (modalClick, modalIn, modalId) => {
+ if (modalClick) {
+ const mModal = document.querySelector(modalIn);
+
+ modalClick.forEach((modal) => {
+ modal.addEventListener('click', (e) => {
+ mModal.style.visibility = 'visible';
+ mModal.style.opacity = '1';
+ if (e.target.parentElement.parentElement) {
+ const userID = e.target.parentElement.parentElement.children[0].innerHTML;
+ const ACName = e.target.parentElement.parentElement.children[1].innerHTML;
+ acName.forEach((name) => {
+ name.innerHTML = ACName;
+ });
+
+ const del = document.querySelector('#delete');
+ const cancel = document.querySelector('#cancel');
+
+ del.addEventListener('click', (event) => {
+ event.preventDefault();
+ deleteApi(`${api}/v1/users/${userID}`);
+ e.target.parentElement.parentElement.remove();
+ loader.style.display = 'flex';
+ });
+
+ cancel.addEventListener('click', (event) => {
+ event.preventDefault();
+ const cModal = document.querySelector(modalIn);
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ });
+ }
+ });
+ });
+ }
+
+ window.addEventListener('click', (e) => {
+ const modal = document.querySelector(modalId);
+ const cModal = document.querySelector(modalIn);
+ if (e.target === modal) {
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ }
});
- });
+ };
+
+ modalFunction(showModal, '.modal', '#modal');
}
return data1;
});
};
+
+// POST FETCH API REQUEST
+const postApi = (url, data) => {
+ fetch(url, {
+ method: 'POST',
+ mode: 'cors',
+ cache: 'no-cache',
+ credentials: 'same-origin',
+ headers: {
+ Authorization: `Bearer ${token}`,
+ 'Content-Type': 'application/json',
+ },
+ redirect: 'follow',
+ referrer: 'no-referrer',
+ body: JSON.stringify(data),
+ })
+ .then((response) => {
+ const error = document.querySelector('.errMsg');
+ const cModal = document.querySelector('.modal2');
+ if (response.status === 403) {
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ loader.style.display = 'none';
+ error.parentElement.style.display = 'flex';
+ error.innerHTML = 'You are not logged in. Login here';
+ } else if (response.status === 401) {
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ loader.style.display = 'none';
+ error.parentElement.style.display = 'flex';
+ error.innerHTML = 'You are not an admin to perform this task';
+ } else if (response.status === 409) {
+ loader.style.display = 'none';
+ errorEmail.innerHTML = 'email already exist';
+ } else if (response.status === 201) {
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ loader.style.display = 'none';
+ const success = document.querySelector('.successMsg');
+ success.parentElement.style.display = 'flex';
+ success.innerHTML = 'User created successfully';
+ setInterval(() => {
+ document.location.reload(true);
+ }, 3000);
+ }
+ });
+};
+
+loader.style.display = 'flex';
getUsersApi(`${api}/v1/users/staffs`);
submit.addEventListener('click', (e) => {
@@ -128,5 +309,71 @@ submit.addEventListener('click', (e) => {
tableBody.remove();
});
+ loader.style.display = 'flex';
getUsersApi(`${api}/v1/users/staffs?limit=${limitSelect.value}`);
});
+
+// ADD STAFF
+addStaff.addEventListener('click', (e) => {
+ e.preventDefault();
+
+ // SHOW FORM MODAL
+ const modalFunction = (modalIn, modalId) => {
+ const mModal = document.querySelector(modalIn);
+ mModal.style.visibility = 'visible';
+ mModal.style.opacity = '1';
+
+ window.addEventListener('click', () => {
+ const modal = document.querySelector(modalId);
+ const cModal = document.querySelector(modalIn);
+ if (e.target === modal) {
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ }
+ });
+
+ submitStaff.addEventListener('click', (event) => {
+ event.preventDefault();
+ if (fnamePassed === true && lnamePassed === true && emailPassed === true && passwordPassed === true) {
+ loader.style.display = 'flex';
+ if (type.value === 'staff') {
+ const signupData = {
+ firstName: firstName.value,
+ lastName: lastName.value,
+ email: email.value,
+ type: type.value,
+ password: password.value,
+ isAdmin: false,
+ };
+ postApi(`${api}/v1/users/addstaff`, signupData);
+ } else {
+ const signupData = {
+ firstName: firstName.value,
+ lastName: lastName.value,
+ email: email.value,
+ type: 'staff',
+ password: password.value,
+ isAdmin: true,
+ };
+ postApi(`${api}/v1/users/addstaff`, signupData);
+ }
+ }
+ });
+ };
+
+ modalFunction('.modal2', '#modal2');
+});
+
+togglePassword.addEventListener('click', (e) => {
+ e.preventDefault();
+
+ if (password.type === 'password') {
+ password.type = 'text';
+ see.style.display = 'block';
+ unsee.style.display = 'none';
+ } else {
+ password.type = 'password';
+ see.style.display = 'none';
+ unsee.style.display = 'block';
+ }
+});
diff --git a/frontend-app/js/users.js b/frontend-app/js/users.js
index 8c55959..0844e79 100644
--- a/frontend-app/js/users.js
+++ b/frontend-app/js/users.js
@@ -1,13 +1,14 @@
const token = sessionStorage.getItem('token');
const api = 'https://bankaapp-api.herokuapp.com/api';
const limitSelect = document.querySelector('#limit');
+const loader = document.querySelector('#loader');
const submit = document.querySelector('#go');
const errMsg = document.querySelector('.errMsg');
const successMsg = document.querySelector('.successMsg');
const userTable = document.querySelector('.user-table');
const queryForm = document.querySelector('.queryForm');
-// DELETE FETCH REQUEST FOR USERS
+// DELETE FETCH REQUEST FOR ACCOUNTS
const deleteApi = (url) => {
fetch(url, {
method: 'DELETE',
@@ -21,7 +22,20 @@ const deleteApi = (url) => {
redirect: 'follow',
referrer: 'no-referrer',
})
- .then(response => response.json());
+ .then(response => response.json())
+ .then((data) => {
+ const cModal = document.querySelector('.modal');
+ if (data.status === 200) {
+ loader.style.display = 'none';
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ successMsg.parentElement.style.display = 'flex';
+ successMsg.innerHTML = 'Account successfully deleted';
+ setInterval(() => {
+ location.reload(true);
+ }, 3000);
+ }
+ });
};
// GET FETCH API REQUEST TO GET ALL ACCOUNTS OF A USER
@@ -40,11 +54,13 @@ const getUsersApi = (url) => {
})
.then((response) => {
if (response.status === 403) {
+ loader.style.display = 'none';
errMsg.parentElement.style.display = 'flex';
userTable.style.display = 'none';
queryForm.style.display = 'none';
errMsg.innerHTML = 'you must be logged in to view users';
} else {
+ loader.style.display = 'none';
userTable.style.display = 'block';
queryForm.style.display = 'flex';
errMsg.parentElement.style.display = 'none';
@@ -54,11 +70,13 @@ const getUsersApi = (url) => {
})
.then((data1) => {
if (data1.status === 401) {
+ loader.style.display = 'none';
errMsg.parentElement.style.display = 'flex';
userTable.style.display = 'none';
queryForm.style.display = 'none';
errMsg.innerHTML = 'you must be an admin or staff to view accounts';
} else {
+ loader.style.display = 'none';
userTable.style.display = 'block';
queryForm.style.display = 'flex';
errMsg.parentElement.style.display = 'none';
@@ -86,7 +104,7 @@ const getUsersApi = (url) => {
const aDeleteUser = document.createElement('a');
aDeleteUser.href = '#';
aDeleteUser.className = 'delete-btn';
- aDeleteUser.id = 'delete';
+ aDeleteUser.id = 'show-modal';
aDeleteUser.innerHTML = 'Delete';
deleteUser.appendChild(aDeleteUser);
const newBalnace = document.createElement('div');
@@ -101,24 +119,63 @@ const getUsersApi = (url) => {
table.appendChild(tableRow);
});
- // DELETE
- const dels = document.querySelectorAll('.delete-btn');
- dels.forEach((del) => {
- del.addEventListener('click', (e) => {
- const id = e.target.parentElement.parentElement.children[0].innerHTML;
- deleteApi(`${api}/v1/users/${id}`);
- e.target.parentElement.parentElement.remove();
- successMsg.parentElement.style.display = 'flex';
- successMsg.innerHTML = 'User successfully deleted';
- setInterval(() => {
- location.reload(true);
- }, 3000);
+ // show modal
+ const showModal = document.querySelectorAll('#show-modal');
+ const acName = document.querySelectorAll('#username');
+
+ const modalFunction = (modalClick, modalIn, modalId) => {
+ if (modalClick) {
+ const mModal = document.querySelector(modalIn);
+
+ modalClick.forEach((modal) => {
+ modal.addEventListener('click', (e) => {
+ mModal.style.visibility = 'visible';
+ mModal.style.opacity = '1';
+ if (e.target.parentElement.parentElement) {
+ const userID = e.target.parentElement.parentElement.children[0].innerHTML;
+ const ACName = e.target.parentElement.parentElement.children[1].innerHTML;
+ acName.forEach((name) => {
+ name.innerHTML = ACName;
+ });
+
+ const del = document.querySelector('#delete');
+ const cancel = document.querySelector('#cancel');
+
+ del.addEventListener('click', (event) => {
+ event.preventDefault();
+ deleteApi(`${api}/v1/users/${userID}`);
+ e.target.parentElement.parentElement.remove();
+ loader.style.display = 'flex';
+ });
+
+ cancel.addEventListener('click', (event) => {
+ event.preventDefault();
+ const cModal = document.querySelector(modalIn);
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ });
+ }
+ });
+ });
+ }
+
+ window.addEventListener('click', (e) => {
+ const modal = document.querySelector(modalId);
+ const cModal = document.querySelector(modalIn);
+ if (e.target === modal) {
+ cModal.style.visibility = 'hidden';
+ cModal.style.opacity = '0';
+ }
});
- });
+ };
+
+ modalFunction(showModal, '.modal', '#modal');
}
return data1;
});
};
+
+loader.style.display = 'flex';
getUsersApi(`${api}/v1/users/clients?limit=${limitSelect.value}`);
submit.addEventListener('click', (e) => {
@@ -128,5 +185,6 @@ submit.addEventListener('click', (e) => {
tableBody.remove();
});
+ loader.style.display = 'flex';
getUsersApi(`${api}/v1/users/clients?limit=${limitSelect.value}`);
});
diff --git a/frontend-app/staffs.html b/frontend-app/staffs.html
index b0d488c..d5cdb7e 100644
--- a/frontend-app/staffs.html
+++ b/frontend-app/staffs.html
@@ -41,10 +41,7 @@
- Staffs
-
-
- Create Staffs
+ Staff
Activate / Deactivate
@@ -142,6 +139,12 @@
+
+
+
+
diff --git a/frontend-app/adduser.html b/frontend-app/adduser.html
deleted file mode 100644
index a9c3bd2..0000000
--- a/frontend-app/adduser.html
+++ /dev/null
@@ -1,172 +0,0 @@
-
-
-
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/frontend-app/css/style.css b/frontend-app/css/style.css
index 1df4c26..07b7d92 100644
--- a/frontend-app/css/style.css
+++ b/frontend-app/css/style.css
@@ -271,6 +271,14 @@ body,
display: none;
}
+.onDelete {
+ height: 9rem;
+ text-align: center;
+}
+
+#username {
+ text-transform: capitalize;
+}
/*
====================================
diff --git a/frontend-app/dashboard.html b/frontend-app/dashboard.html
index 4820a89..8fc6c89 100644
--- a/frontend-app/dashboard.html
+++ b/frontend-app/dashboard.html
@@ -41,10 +41,7 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Banka
UsersBanka
UsersBanka
+
+
@@ -159,6 +162,82 @@
Users Accounts
+
+
+
+
+
+
+
+
+
diff --git a/frontend-app/transactions.html b/frontend-app/transactions.html
index 7809e0d..874088a 100644
--- a/frontend-app/transactions.html
+++ b/frontend-app/transactions.html
@@ -41,10 +41,7 @@
+