-
+
@@ -113,7 +113,8 @@
-
+
+
diff --git a/frontend/scripts/dashboard.js b/frontend/scripts/dashboard.js
index 3a12e0e..fab31a9 100644
--- a/frontend/scripts/dashboard.js
+++ b/frontend/scripts/dashboard.js
@@ -52,7 +52,7 @@ function updateListGui(field) {
});
editbtns.forEach(btn => {
btn.addEventListener('click', () => {
- updateInfoGui(btn.id);
+ showEditPage(btn.id);
});
});
}
@@ -137,6 +137,10 @@ const entrywindow = document.querySelector('#entrycontainer')
addentry.addEventListener('click', function() {
entrywindow.classList.toggle("hidden");
entrywindow.style.display = "flex";
+ const otherbutton = document.getElementById('submitdatabtn')
+ const editbutton = document.getElementById('submiteditdatabtn')
+ otherbutton.style.display = "block";
+ editbutton.style.display = "none";
const inputbox = document.getElementById("sitenamefield")
const urlfield = document.getElementById("urlfield")
inputbox.value = ''
@@ -264,10 +268,129 @@ function validateUrl(){
}
}
+//----------------------------------------------------------------------------------------- Edit Page Logic
+
+function showEditPage(field) {
+ entrywindow.classList.toggle("hidden");
+ entrywindow.style.display = "flex";
+ const otherbutton = document.getElementById('submitdatabtn')
+ const editbutton = document.getElementById('submiteditdatabtn')
+ otherbutton.style.display = "none";
+ editbutton.style.display = "block";
+ const inputbox = document.getElementById("sitenamefield")
+ const urlfield = document.getElementById("urlfield")
+ inputbox.value = ''
+ urlfield.value = ""
+ addFieldEditLogic(field)
+}
+
+function addFieldEditLogic(field){
+ const forminputs = document.querySelectorAll('.inputfieldpanel div input[type="text"]')
+ const formcheckbox = document.querySelectorAll('.inputfieldpanel div input[type="checkbox"]')
+ const url = document.getElementById('urlfield')
+ const sitename = document.getElementById('sitenamefield')
+ const userdata = JSON.parse(localStorage.getItem("userdata"))
+
+ sitename.value = field
+ url.value = userdata[field]["url"]
+
+ formcheckbox.forEach((checkbox, index) => {
+ forminputs[index].disabled = true
+
+ switch (forminputs[index].id) {
+ case "u_input":
+ forminputs[index].value = userdata[field]["Username"] ?? "";
+ break;
+ case "p_input":
+ forminputs[index].value = userdata[field]["Password"] ?? "";
+ break;
+ case "e_input":
+ forminputs[index].value = userdata[field]["Email"] ?? "";
+ break;
+ case "n_input":
+ forminputs[index].value = userdata[field]["PhNumber"] ?? "";
+ break;
+ }
+
+ if(forminputs[index].value == ""){
+ checkbox.checked = false;
+ } else {
+ checkbox.checked = true;
+ }
+
+ forminputs[index].disabled = !checkbox.checked;
+ checkbox.addEventListener('change', function(){
+ forminputs[index].disabled = !checkbox.checked;
+ if(forminputs[index].disabled){
+ forminputs[index].value = ''
+ }
+ })
+
+ })
+
+}
+
+//----------------------------------------------------------------------------------------- Edit Data Validation
+
+function validateEditData() {
+ if(validateEditSitename() && validateEditUrl())
+ editData();
+ return;
+}
+
+function validateEditSitename(){
+ const sitename = document.getElementById('sitenamefield').value
+ if(sitename =='' || sitename == null){
+ errorlabel.textContent = "Enter Sitename!"
+ setTimeout(()=>{
+ errorlabel.textContent = ''
+ },3000)
+ return false;
+ } else{
+ return true;
+ }
+}
+
+function validateEditUrl(){
+ const url = document.getElementById('urlfield').value
+ const urlPattern = /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i;
+ if(url == '' || url ==null){
+ errorlabel.textContent = "Enter URL!"
+ setTimeout(()=>{
+ errorlabel.textContent = ''
+ },3000)
+ return false;
+ }else if(!urlPattern.test(url)){
+ errorlabel.textContent = "Enter Valid URL!"
+ setTimeout(()=>{
+ errorlabel.textContent = ''
+ },3000)
+ return false;
+ }else{
+ return true;
+ }
+}
+
+//----------------------------------------------------------------------------------------- Edit Data Submission Logic
+
+function editData() {
+ const form = document.getElementById('formdata')
+ const formeditdata = new FormData(form)
+ formatEditData(formeditdata)
+}
+
+function formatEditData(editdata) {
+
+}
+
+
+//----------------------------------------------------------------------------------------- Edit Data API Logic
+
//----------------------------------------------------------------------------------------- Display User Information
+let previousClickListener = null
function updateInfoGui(field) {
const title = document.getElementById('displayname')
title.textContent = field
@@ -275,6 +398,21 @@ function updateInfoGui(field) {
const data = JSON.parse(localStorage.getItem("userdata"))
+ const linkButton = document.getElementById('linkbutton')
+
+ function link() {
+ const url = data[field]["url"]
+ window.open(url, '_blank');
+ }
+
+ if(previousClickListener) {
+ linkButton.removeEventListener('click', previousClickListener);
+ }
+ linkButton.addEventListener('click', link)
+
+ previousClickListener = link;
+
+
const inputmap = new Map();
inputmap.set("dusername","div_u")
inputmap.set("demail","div_e")
diff --git a/frontend/styles/dashboard.css b/frontend/styles/dashboard.css
index 806573f..846602c 100644
--- a/frontend/styles/dashboard.css
+++ b/frontend/styles/dashboard.css
@@ -755,7 +755,7 @@ footer p{
height: 30px;
}
-.fieldcontainer form > div:first-child button{
+.fieldcontainer form > div:first-child button:first-of-type{
width: 60px;
height: 30px;
border-radius: 10px;
@@ -770,7 +770,29 @@ footer p{
box-shadow: 0 0 10px;
}
-.fieldcontainer form > div:first-child button:hover{
+.fieldcontainer form > div:first-child button:first-of-type:hover{
+ background-color: rgb(255, 255, 255, 0.9);
+ width: 65px;
+ height: 35px;
+}
+
+.fieldcontainer form > div:first-child button:last-child{
+ display: none;
+ width: 60px;
+ height: 30px;
+ border-radius: 10px;
+ background-color: rgba(0, 255, 81, 0.8);
+ border: none;
+ margin-top: 5px;
+ transition: height 0.1s ease, width 0.1s ease;
+ box-shadow: black 0 0 10px;
+ font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+ font-weight: bold;
+ color: white;
+}
+
+.fieldcontainer form > div:first-child button:last-child:hover{
+ color: black;
background-color: rgb(255, 255, 255, 0.9);
width: 65px;
height: 35px;