diff --git a/frontend/html/dashboard.html b/frontend/html/dashboard.html index 0d87004..3c5c41d 100644 --- a/frontend/html/dashboard.html +++ b/frontend/html/dashboard.html @@ -150,6 +150,7 @@ p +<<<<<<< HEAD
@@ -321,16 +322,21 @@ p <<<<<<< HEAD >>>>>>> b6d960f (Add Add Entry Page & CSS Animations) ======= +======= +>>>>>>> 7afbaba (Finish Frontend)
-
- -
+
+
+
+
+ +
>>>>>>> 19834dd (Add Change Password Function + Dashboard Complete) diff --git a/frontend/html/index.html b/frontend/html/index.html index 75df2ca..603a5e9 100644 --- a/frontend/html/index.html +++ b/frontend/html/index.html @@ -34,11 +34,14 @@
<<<<<<< HEAD +<<<<<<< HEAD ======= Forgot Password
>>>>>>> 22cbef5 (Add all other pages) +======= +>>>>>>> 7afbaba (Finish Frontend) Register
diff --git a/frontend/html/register.html b/frontend/html/register.html index bdb2416..37f7da6 100644 --- a/frontend/html/register.html +++ b/frontend/html/register.html @@ -51,7 +51,12 @@
+
+ +
+
+<<<<<<< HEAD =======
@@ -66,6 +71,9 @@
>>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500) +======= + +>>>>>>> 7afbaba (Finish Frontend)
diff --git a/frontend/scripts/dashboard.js b/frontend/scripts/dashboard.js index 796d53a..b1c6e76 100644 --- a/frontend/scripts/dashboard.js +++ b/frontend/scripts/dashboard.js @@ -144,6 +144,8 @@ addentry.addEventListener('click', function() { entrywindow.style.display = "flex"; const otherbutton = document.getElementById('submitdatabtn') const editbutton = document.getElementById('submiteditdatabtn') + const binbutton = document.getElementById('deletedata') + binbutton.style.display = "none" otherbutton.style.display = "block"; editbutton.style.display = "none"; const inputbox = document.getElementById("sitenamefield") @@ -297,7 +299,7 @@ function showEditPage(field) { const binbutton = document.getElementById('deletedata') otherbutton.style.display = "none"; editbutton.style.display = "block"; - binbutton.style.display = "block" + binbutton.style.display = "block"; const inputbox = document.getElementById("sitenamefield") const urlfield = document.getElementById("urlfield") inputbox.value = '' @@ -405,13 +407,15 @@ async function deleteEntry() { }); if(response.ok){ console.log(`Deleted ${localStorage.getItem("editVal")}`) - entrywindow.style.display = "none" localStorage.removeItem("editVal") getData() + confirmation() + await delay(1000) const infobox = document.querySelector('.infobox') const infopanel = document.querySelector('.infopanel') const popupdivparent = document.querySelector('.popupdivparent') const popupdiv = document.querySelector('.popupdivchild') + entrywindow.style.display = "none" infobox.style.display = 'flex' infopanel.style.display = 'none' popupdivparent.style.display = "none" @@ -563,6 +567,7 @@ async function editDataHandler(editdata) { confirmation() setTimeout(() => { entrywindow.style.display = "none" + binbutton.style.display = "none" localStorage.removeItem("editVal") }, 1000); const backbtn = document.getElementById('backbtn') diff --git a/frontend/scripts/index.js b/frontend/scripts/index.js index f54555e..c79db5d 100644 --- a/frontend/scripts/index.js +++ b/frontend/scripts/index.js @@ -45,7 +45,7 @@ localStorage.setItem("username", _username); formData = new FormData(); formData.append('user_name', _username); formData.append('password', _password); -console.log(formData) +// console.log(formData) try { <<<<<<< HEAD @@ -157,6 +157,7 @@ window.onload = async function() { }; +<<<<<<< HEAD @@ -172,6 +173,8 @@ window.onload = async function() { >>>>>>> 22cbef5 (Add all other pages) +======= +>>>>>>> 7afbaba (Finish Frontend) // function handleAuthRes(data) { // if(data.token){ // localStorage.setItem('token', data.token); diff --git a/frontend/scripts/register.js b/frontend/scripts/register.js index e69de29..bd6d844 100644 --- a/frontend/scripts/register.js +++ b/frontend/scripts/register.js @@ -0,0 +1,78 @@ + +const errlabel = document.getElementById('errlabel') + +function validateRegister() { + const username = document.getElementById('username').value + const password = document.getElementById('password').value + const confirmpassword = document.getElementById('conpassword').value + + if(username== "" || password=="" || confirmpassword==""){ + errlabel.textContent = "Can't Leave Blank!" + setTimeout(() => { + errlabel.textContent = "" + }, 3000); + } + else if(password != confirmpassword){ + errlabel.textContent = "Password Must Match!" + setTimeout(() => { + errlabel.textContent = "" + }, 3000); + } + else if(password == confirmpassword && username!=''){ + createUser(username,password) + } +} + +async function createUser(username,password) { + formData = new FormData() + formData.append("user_name",username) + formData.append("password", password) + + try { + const response = await fetch('/add_user', { + method: "POST", + body: formData + }); + if(response.ok) { + console.log("User Created!") + Login(username,password) + } else if(!response.ok) { + const errorMessage = await response.text(); + errlabel.textContentL = errorMessage; + setTimeout(()=> { + errorlabel.textContent = ""; + },3000) + throw new Error(errorMessage); + } + } catch (error) { + console.error('Error:', error.message); + } +} + +async function Login(username,password){ + formData = new FormData(); + formData.append('user_name', username); + formData.append('password', password); + + try { + const response = await fetch('/login', { + method: "post", + body: formData + }); + + if(response.ok) { + localStorage.setItem("username", username); + window.location.href = "../html/dashboard.html"; + } else if(!response.ok) { + const errorMessage = await response.text(); + document.getElementById("errlabel").innerHTML = errorMessage; + setTimeout(()=> { + document.getElementById("errlabel").innerHTML = ""; + },3000) + throw new Error(errorMessage); + } + + } catch (error) { + console.error('Error:', error.message); + } +} \ No newline at end of file diff --git a/frontend/styles/dashboard.css b/frontend/styles/dashboard.css index 8495f8b..5b960aa 100644 --- a/frontend/styles/dashboard.css +++ b/frontend/styles/dashboard.css @@ -855,6 +855,17 @@ footer p{ font-weight: bold; text-align: center; display: block; + color: white; +} + +.c1f:hover { + transform: scale(1.05); + background-color: rgb(255, 255, 255, 0.8); +} + +.c1f:hover label{ + transform: scale(1.05); + color: rgb(0, 0, 0); } .c1f { @@ -864,10 +875,11 @@ footer p{ justify-content: center; align-items: center; overflow: hidden; - background-color: rgb(255, 255, 255, 0.7); + background-color: rgb(255, 255, 255, 0.5); border-radius: 10px; padding: 10px; box-shadow: 0 0 10px; + transition: transform 0.3s ease; } .c1l { diff --git a/frontend/styles/index.css b/frontend/styles/index.css index e16d9c6..6752bbc 100644 --- a/frontend/styles/index.css +++ b/frontend/styles/index.css @@ -114,15 +114,15 @@ body { .help { width: 100%; display: flex; - justify-content: space-between; + justify-content: center; align-items: center; - } .help div{ display: flex; width: 50%; justify-content: center; + align-items: center; } .error label { diff --git a/frontend/styles/register.css b/frontend/styles/register.css index 4c2ddae..d532490 100644 --- a/frontend/styles/register.css +++ b/frontend/styles/register.css @@ -34,11 +34,13 @@ body { width: 450px; height: 400px; flex-direction: column; - padding: 70px; + padding: 20px; + padding-top: 70px; padding-bottom: 90px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6); row-gap: 8px; border-radius: 50px; + flex-direction: column; } #register { @@ -62,6 +64,7 @@ body { border-left: rgb(255, 255, 255, 0.2) 2px solid; border-radius: 10px; padding-left: 5px; + flex-shrink: 0; } .idiv p { @@ -94,7 +97,10 @@ body { flex-direction: column; row-gap: 10px; justify-content: center; + align-items: center; padding: 7px; + width: 90%; + height: 40%; } .idiv p{ @@ -130,23 +136,32 @@ body { } - .help div{ display: flex; width: 50%; justify-content: center; } +.error { + position: relative; + height: 20px; + width: 90%; + display: flex; + align-items: center; + justify-content: center; +} + .error label { position: absolute; - display: block; + display: inline-block; justify-content: center; - translate: -50% 3px; color: rgba(184, 156, 255, 0.9); font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: bold; font-weight: bold; + text-align: center; + padding: 5px; } a { @@ -186,7 +201,6 @@ footer p{ background-color: transparent; background-image: url('../assets/download.svg'); background-size: cover; - box-shadow: rgb(0, 0, 0) 0px 0px 10px; } =======