Dashboard Entry Update
This commit is contained in:
parent
01e3ab7a4a
commit
a260428f84
1
frontend/assets/search.svg
Normal file
1
frontend/assets/search.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 21 4 C 11.082241 4 3 12.082241 3 22 C 3 31.917759 11.082241 40 21 40 C 24.62177 40 27.99231 38.91393 30.820312 37.0625 L 43.378906 49.621094 L 47.621094 45.378906 L 35.224609 32.982422 C 37.581469 29.938384 39 26.13473 39 22 C 39 12.082241 30.917759 4 21 4 z M 21 8 C 28.756241 8 35 14.243759 35 22 C 35 29.756241 28.756241 36 21 36 C 13.243759 36 7 29.756241 7 22 C 7 14.243759 13.243759 8 21 8 z"/></svg>
|
||||||
|
After Width: | Height: | Size: 505 B |
@ -0,0 +1,37 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>DashBoard</title>
|
||||||
|
<link rel="stylesheet" href="../styles/dashboard.css"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="contentbox">
|
||||||
|
|
||||||
|
<div class="searchbar">
|
||||||
|
<input type="text" id="search">
|
||||||
|
<img src="../assets/search.svg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="objcontainer">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="querybox">
|
||||||
|
<div class="infopanel"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="buttonbox"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script defer src="../scripts/dashboard.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<footer><p>© 2023 Password Manager</p></footer>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -3,7 +3,7 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
|
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
|
||||||
<link rel="stylesheet" href="index.css"/>
|
<link rel="stylesheet" href="../styles/index.css"/>
|
||||||
<title>Login</title>
|
<title>Login</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
@ -41,7 +41,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="index.js"></script>
|
<script src="../scripts/index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<footer><p>© 2023 Password Manager</p></footer>
|
<footer><p>© 2023 Password Manager</p></footer>
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
|
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
|
||||||
<link rel="stylesheet" href="register.css"/>
|
<link rel="stylesheet" href="../styles/register.css"/>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@500&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@500&display=swap" rel="stylesheet">
|
||||||
@ -30,7 +30,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="register.js"></script>
|
<script src="../scripts/register.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<footer><p>© 2023 Password Manager</p></footer>
|
<footer><p>© 2023 Password Manager</p></footer>
|
||||||
|
|||||||
@ -0,0 +1,74 @@
|
|||||||
|
|
||||||
|
const search = document.getElementById('search');
|
||||||
|
let globaldata;
|
||||||
|
|
||||||
|
search.addEventListener('keyup', function() {
|
||||||
|
let result = search.value;
|
||||||
|
if(result == ""){
|
||||||
|
updatelist(globaldata)
|
||||||
|
} else {
|
||||||
|
console.log(result);
|
||||||
|
updatelist(globaldata)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
async function getData() {
|
||||||
|
try {
|
||||||
|
let response = await fetch('/get_data', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if(response.ok) {
|
||||||
|
let userdata = await response.json();
|
||||||
|
console.log(userdata)
|
||||||
|
globaldata = userdata
|
||||||
|
updatelist(userdata);
|
||||||
|
} else if(!response.ok) {
|
||||||
|
const errorMessage = await response.text();
|
||||||
|
throw new Error(errorMessage);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error:', error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// function addlist(userdata) {
|
||||||
|
// let masterdata = [];
|
||||||
|
// for (let field in userdata){
|
||||||
|
// masterdata.push(userdata[field])
|
||||||
|
// }
|
||||||
|
// console.log(...masterdata)
|
||||||
|
// updatelist(masterdata)
|
||||||
|
// }
|
||||||
|
|
||||||
|
const contentbox = document.querySelector('.objcontainer')
|
||||||
|
|
||||||
|
function updatelist(userdata) {
|
||||||
|
contentbox.innerHTML = ''
|
||||||
|
for(let field in userdata){
|
||||||
|
let fields = userdata[field];
|
||||||
|
for (let data in fields) {
|
||||||
|
if (fields.hasOwnProperty(data)) {
|
||||||
|
let value = fields[data];
|
||||||
|
updategui(field, data, value)
|
||||||
|
console.log(field, data, value)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function updategui(title, key, value) {
|
||||||
|
console.log(`${title},${key},${value}`)
|
||||||
|
let content = contentbox.innerHTML.concat(`<div>${title},${key},${value}</div>`)
|
||||||
|
contentbox.innerHTML = content;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
getData();
|
||||||
|
};
|
||||||
@ -38,20 +38,27 @@ function validateLogin() {
|
|||||||
async function getAuth() {
|
async function getAuth() {
|
||||||
let _username = document.getElementById("username").value;
|
let _username = document.getElementById("username").value;
|
||||||
let _password = document.getElementById("password").value;
|
let _password = document.getElementById("password").value;
|
||||||
|
|
||||||
|
formData = new FormData();
|
||||||
|
formData.append('user_name', _username);
|
||||||
|
formData.append('password', _password);
|
||||||
|
console.log(formData)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch('http://127.0.0.1:5000/', {
|
const response = await fetch('/login', {
|
||||||
method: 'POST',
|
method: "post",
|
||||||
headers: {
|
body: formData
|
||||||
'Content-Type': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
user_name: _username,
|
|
||||||
password: _password
|
|
||||||
})
|
|
||||||
});
|
});
|
||||||
|
|
||||||
if(!response.ok) {
|
if(response.ok) {
|
||||||
throw new Error('Connection was not Ok!');
|
window.location.href = "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);
|
||||||
}
|
}
|
||||||
|
|
||||||
// const data = await response.json();
|
// const data = await response.json();
|
||||||
@ -71,7 +78,7 @@ const register = document.getElementById("register");
|
|||||||
|
|
||||||
register.addEventListener("click", function(event) {
|
register.addEventListener("click", function(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
window.location.href = "register.html";
|
window.location.href = "../html/register.html";
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
@ -98,4 +105,4 @@ register.addEventListener("click", function(event) {
|
|||||||
// } else {
|
// } else {
|
||||||
// console.error('Login Failed:', data.error)
|
// console.error('Login Failed:', data.error)
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|||||||
@ -0,0 +1,174 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
display: flex;
|
||||||
|
margin-top: 25px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-image: url("../assets/bg.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
width: 90vw;
|
||||||
|
height: 90vh;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: rgb(0, 255, 255,0.2);
|
||||||
|
backdrop-filter: blur(15px);
|
||||||
|
border-radius: 30px;
|
||||||
|
width: 90vw;
|
||||||
|
height: 80vh;
|
||||||
|
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer{
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
background-color: rgb(12, 12, 12);
|
||||||
|
height: 50px;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer p{
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentbox {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
right: 30px;
|
||||||
|
background-color: rgb(0, 255, 255,0.3);
|
||||||
|
border-radius: 20px;
|
||||||
|
height: 85%;
|
||||||
|
width: 40%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
top: 20px;
|
||||||
|
width: 90%;
|
||||||
|
height: 10%;
|
||||||
|
background-color: rgb(255, 255, 255, 0.8);
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchbar input {
|
||||||
|
width: 95%;
|
||||||
|
height: 80%;
|
||||||
|
border: blue 2px slateblue;
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: rgb(255, 255, 255, 0.5);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchbar img {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 24%;
|
||||||
|
right: 25px;
|
||||||
|
width: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.objcontainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: 10px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
width: 90%;
|
||||||
|
height: 80%;
|
||||||
|
background-color: rgb(255, 255, 255, 0.8);
|
||||||
|
border-radius: 0 0 10px 10px;
|
||||||
|
overflow: auto;
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.objcontainer div{
|
||||||
|
padding: 20px;
|
||||||
|
width: 90%;
|
||||||
|
height: 200px;
|
||||||
|
background-color: rgb(255, 255, 255, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 0 10px black;
|
||||||
|
border: rgba(0, 255, 255, 0.5) 1px solid;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.objcontainer div:hover {
|
||||||
|
background-color: rgb(128, 128, 128, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.objcontainer div:not(:hover) {
|
||||||
|
background-color: rgb(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.querybox {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
left: 30px;
|
||||||
|
bottom: 40px;
|
||||||
|
background-color: rgb(0, 255, 255,0.3);
|
||||||
|
border-radius: 20px;
|
||||||
|
height: 60%;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infopanel {
|
||||||
|
width: 90%;
|
||||||
|
height: 80%;
|
||||||
|
background-color: rgb(255, 255, 255, 0.8);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonbox {
|
||||||
|
position: absolute;
|
||||||
|
left: 30px;
|
||||||
|
top: 40px;
|
||||||
|
background-color: rgb(0, 255, 255,0.3);
|
||||||
|
border-radius: 20px;
|
||||||
|
height: 20%;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: hsl(0, 0%, 53%);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: hsl(0, 0%, 33%);
|
||||||
|
}
|
||||||
@ -8,10 +8,11 @@ body {
|
|||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-image: url("bg.jpg");
|
background-image: url("../assets/bg.jpg");
|
||||||
background-size: 200% auto;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
|
|||||||
@ -8,8 +8,8 @@ body {
|
|||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-image: url("bg.jpg");
|
background-image: url("../assets/bg.jpg");
|
||||||
background-size: 200% auto;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
@ -182,7 +182,7 @@ footer p{
|
|||||||
font-family: 'Pixelify Sans', cursive;
|
font-family: 'Pixelify Sans', cursive;
|
||||||
color: white;
|
color: white;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: url('download.svg');
|
background-image: url('../assets/download.svg');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
||||||
box-shadow: rgb(0, 0, 0) 0px 0px 10px;
|
box-shadow: rgb(0, 0, 0) 0px 0px 10px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user