diff --git a/frontend/html/dashboard.html b/frontend/html/dashboard.html
index 2810104..df79f3e 100644
--- a/frontend/html/dashboard.html
+++ b/frontend/html/dashboard.html
@@ -101,6 +101,7 @@
+
@@ -138,6 +139,18 @@
+
+
+
+
+
+
+
+
diff --git a/frontend/scripts/dashboard.js b/frontend/scripts/dashboard.js
index 862a7c2..f37891d 100644
--- a/frontend/scripts/dashboard.js
+++ b/frontend/scripts/dashboard.js
@@ -1,4 +1,17 @@
+// const data = {
+// Amazon: {
+// url: "https://www.amazon.com",
+// Name: "Yash",
+// Password: "123"
+// },
+// Google: {
+// url: "https://www.google.com",
+// Name: "XYZ",
+// Password: "Secret"
+// }
+// }
+
//-----------------------------------------------------------------------------------------(Getting Data)
async function getData() {
@@ -60,20 +73,6 @@ function updateListGui(field) {
//----------------------------------------------------------------------------------------- Search Bar and Content Formatting
-
-// const data = {
-// Amazon: {
-// url: "https://www.amazon.com",
-// Name: "Yash",
-// Password: "123"
-// },
-// Google: {
-// url: "https://www.google.com",
-// Name: "XYZ",
-// Password: "Secret"
-// }
-// }
-
function getFieldName(data) { //Gets All Field Values
let fieldnamearray = []
for(let field in data){
@@ -213,6 +212,11 @@ async function sendData(formData){
body: formData
});
if(response.ok){
+ confirmation()
+ setTimeout(() => {
+ entrywindow.style.display = "none"
+ localStorage.removeItem("editVal")
+ }, 1000);
getData()
}
if(!response.ok){
@@ -225,7 +229,7 @@ async function sendData(formData){
}
} catch(error){
console.error(error)
- }
+ }
}
//----------------------------------------------------------------------------------------- Form Data Validation Logic
@@ -381,7 +385,9 @@ function editData() {
editDataHandler(formeditdata)
}
-function editDataHandler(editdata) {
+let isError;
+
+async function editDataHandler(editdata) {
const objData = {}
const userdata = JSON.parse(localStorage.getItem("userdata"))
const entryname = localStorage.getItem("editVal")
@@ -394,37 +400,158 @@ function editDataHandler(editdata) {
}
})
- for(let field in objData){
- let value = objData[field]
+ const properties = ["Username", "Email", "PhNumber", "Password"]
+ for(let property of properties){
+ if(!(property in objData)){
+ objData[property] = ""
+ }
+ }
- if(!(field in userdata[entryname])){
- addNewField(entryname, field, value)
- } else if(value != userdata[entryname][field]){
- editFieldValue(entryname, field, value )
- }
+ console.log(objData)
+ isError = false
+
+ for(let field in objData){
+ if (objData.hasOwnProperty(field)) {
+
+ let value = objData[field]
+
+ if(!(field in userdata[entryname])){
+ addNewField(entryname, field, value)
+ await delay(500)
+ }
+ else if(value != userdata[entryname][field]){
+ editFieldValue(entryname, field, value )
+ await delay(500)
+ }
+
+ }
}
if(sitename != entryname){
changeEntryName(entryname, sitename)
+ await delay(500)
}
+ getData()
+ await delay(100)
+ if(!isError){
+ updateInfoGui(localStorage.getItem("editVal"))
+ confirmation()
+ setTimeout(() => {
+ entrywindow.style.display = "none"
+ localStorage.removeItem("editVal")
+ }, 1000);
+ }
+}
+
+function delay(ms) {
+ return new Promise(resolve => setTimeout(resolve, ms));
}
//----------------------------------------------------------------------------------------- Edit Data API Logic
-function addNewField(sitename, field, value) {
- console.log(sitename, field, value)
+async function addNewField(sitename, field, value) {
+ const formData = new FormData()
+ formData.append("entry_name", sitename)
+ formData.append("field_name", field)
+ formData.append("field_value", value)
+
+ try {
+ const response = await fetch('/add_field', {
+ method: "POST",
+ body: formData
+ });
+ if(response.ok){
+ console.log(`Added Field: ${field}, with Value "${value}"`)
+ }
+ if(!response.ok){
+ isError = true
+ const errorMessage = await response.text();
+ errorlabel.textContent = errorMessage
+ setTimeout(()=>{
+ errorlabel.textContent = ''
+ },3000)
+ throw new Error(errorMessage);
+ }
+ } catch(error){
+ console.error(error)
+ }
+
}
-function editFieldValue(sitename, field, value) {
- console.log(sitename, field, value)
+async function editFieldValue(sitename, field, value) {
+ const formData = new FormData()
+ formData.append("entry_name", sitename)
+ formData.append("field_name", field)
+ formData.append("field_value", value)
+
+ try {
+ const response = await fetch('/edit_field_value', {
+ method: "POST",
+ body: formData
+ });
+ if(response.ok){
+ console.log(`Changed Value of Field: ${field} to "${value}"`)
+ }
+ if(!response.ok){
+ isError = true
+ const errorMessage = await response.text();
+ errorlabel.textContent = errorMessage
+ setTimeout(()=>{
+ errorlabel.textContent = ''
+ },3000)
+ throw new Error(errorMessage);
+ }
+ } catch(error){
+ console.error(error)
+ }
}
-function changeEntryName(entryname, sitename) {
- console.log(entryname, sitename)
+async function changeEntryName(entryname, sitename) {
+ const formData = new FormData()
+ formData.append("old_entry_name", entryname)
+ formData.append("new_entry_name", sitename)
+
+ try {
+ const response = await fetch('/edit_entry_name', {
+ method: "POST",
+ body: formData
+ });
+ if(response.ok){
+ console.log(`Changed EntryName from ${entryname} to "${sitename}"`)
+ localStorage.setItem("editVal", sitename)
+ }
+ if(!response.ok){
+ isError = true
+ const errorMessage = await response.text();
+ errorlabel.textContent = errorMessage
+ setTimeout(()=>{
+ errorlabel.textContent = ''
+ },3000)
+ throw new Error(errorMessage);
+ }
+ } catch(error){
+ console.error(error)
+ }
}
+//----------------------------------------------------------------------------------------- Confirmation Box
-
+function confirmation() {
+ console.log('Confirmed')
+ const confirm = document.querySelector('.confirmdivparent')
+ const tick = document.querySelector('.confirmdiv img')
+ const confirmbox = document.querySelector('.confirmdiv')
+ confirm.style.display = "flex"
+ tick.classList.add('confirmfade')
+ confirmbox.classList.add('confirmdivanimate')
+ confirm.classList.add('confirmdivanimate')
+ setTimeout(() => {
+ confirm.style.display = "none"
+ tick.classList.remove('confirmfade')
+ confirmbox.classList.add('confirmdivanimate')
+ confirm.classList.remove('confirmdivanimate')
+ }, 1000);
+}
//----------------------------------------------------------------------------------------- Display User Information
@@ -542,14 +669,9 @@ logoutbtn.addEventListener('click', () => {
//-----------------------------------------------------------------------------------------
-// window.addEventListener('unload', function() {
-// logOut()
-// });
window.onload = function() {
getData();
greet()
- // entrywindow.classList.toggle("hidden");
- // entrywindow.style.display = "flex";
};
\ No newline at end of file
diff --git a/frontend/styles/dashboard.css b/frontend/styles/dashboard.css
index 846602c..c03cb56 100644
--- a/frontend/styles/dashboard.css
+++ b/frontend/styles/dashboard.css
@@ -693,7 +693,81 @@ footer p{
height: 30px;
background-color: rgb(255, 0, 0, 0.8);
}
-
+
+/*----------------------------------------------------------------------------------------*/
+
+.confirmdivparent {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: hsl(0, 0%, 100%, 10%);
+ display: none;
+ justify-content: center;
+ align-items: center;
+ backdrop-filter: blur(20px);
+ border-radius: 40px;
+}
+
+.confirmdiv {
+ position: relative;
+ width: 400px;
+ height: 200px;
+ background-color: rgb(255, 255, 255, 0.8);
+ backdrop-filter: blur(5px);
+ border-radius: 40px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: opacity 0.3s ease;
+ opacity: 0;
+}
+
+.confirmdivanimate {
+ animation-name: cdani;
+ animation-duration: 1s;
+ animation-timing-function: ease;
+}
+
+@keyframes cdani {
+ 0% {
+ opacity: 0;
+ }
+ 25%, 75% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+
+.confirmdiv img {
+ opacity: 0;
+ width: 40%;
+ height: 40%;
+ transition: opacity 1s ease;
+ transition: transform 0.8s ease;
+}
+
+.confirmfade {
+ animation-name: fade;
+ animation-duration: 1s;
+ animation-timing-function: ease;
+}
+
+@keyframes fade {
+ 0% {
+ opacity: 0;
+ transform: scale(0.9);
+ }
+ 50% {
+ opacity: 1;
+ transform: scale(1.5);
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(0.9);
+ }
+}
/*----------------------------------------------------------------------------------------*/