change styling
also add placeholder settings page Co-authored-by: Peeentaa <Peeentaa@users.noreply.github.com>
This commit is contained in:
none
parent
9d3a272193
commit
988a648b89
2
library
2
library
@ -1 +1 @@
|
||||
Subproject commit 31b8e5bf0ab8b561ffeafb07432a382000323f7a
|
||||
Subproject commit 26aeb75bd1c6d002b9dc0af5cce3d66ac9f11204
|
||||
@ -62,7 +62,7 @@
|
||||
{
|
||||
"fullscreen": false,
|
||||
"height": 600,
|
||||
"resizable": false,
|
||||
"resizable": true,
|
||||
"title": "IPass",
|
||||
"width": 880,
|
||||
"theme": "Dark"
|
||||
|
||||
BIN
src/images/menu.png
Normal file
BIN
src/images/menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 994 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 1.9 KiB |
BIN
src/images/settings.png
Normal file
BIN
src/images/settings.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
@ -10,9 +10,14 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>IPass</h1>
|
||||
<p id="lockLabel">Locked</p>
|
||||
<img alt="Lock" id="lockImg" src="/images/security_lock_locked.png" height=50 width=50></img>
|
||||
<h1 id="title">IPass</h1>
|
||||
<div class="select">
|
||||
<img src="/images/menu.png" width="50" height="50">
|
||||
<div>
|
||||
<div><a href="/settings"><img id="cogWImg" src="/images/settings.png" width="50" height="50" alt="Locked" title="Locked"></a></div>
|
||||
<div><img alt="Lock" id="lockImg" src="/images/security_lock_locked.png" height=50 width=50></img></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div id="table_div">
|
||||
<div id="table_entries">
|
||||
@ -32,6 +37,5 @@
|
||||
<div class="button" id="createEntry_actions"><button tabindex="1">Create</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
53
src/main.js
53
src/main.js
@ -14,7 +14,23 @@ window.addEventListener("DOMContentLoaded", () => {
|
||||
});
|
||||
|
||||
async function startup() {
|
||||
|
||||
|
||||
let select = document.querySelector(".select");
|
||||
select.addEventListener("click", function(){
|
||||
this.enabled = !this.enabled
|
||||
if(this.enabled) {
|
||||
this.classList.add("open")
|
||||
} else {
|
||||
this.classList.remove("open")
|
||||
}
|
||||
|
||||
for(let cont of document.querySelectorAll(".select > div")) {
|
||||
cont.style.display=(this.enabled && "block") || "none"
|
||||
}
|
||||
document.querySelector('#table_div').style.marginTop=(this.enabled && "8em") || "0px";
|
||||
});
|
||||
|
||||
|
||||
document.querySelector("#createEntry_actions > button").addEventListener("click",createEntry);
|
||||
|
||||
let entries = await invoke("get_entries");
|
||||
@ -57,7 +73,7 @@ async function startup() {
|
||||
setTimeout(function(){
|
||||
input.style.borderColor = originalColor;
|
||||
},250)
|
||||
|
||||
|
||||
console.log('Text copied to clipboard');
|
||||
}, function(err) {
|
||||
|
||||
@ -70,7 +86,7 @@ async function startup() {
|
||||
console.error('Failed to copy text: ', err);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -79,11 +95,11 @@ let entry_priority = 1
|
||||
function buildEntry(entry) {
|
||||
|
||||
entry_priority++;
|
||||
|
||||
|
||||
let nameDiv = document.createElement("div");
|
||||
nameDiv.setAttribute("class", "entry_name");
|
||||
nameDiv.setAttribute("id",`${entry.replaceAll(" ","-")}_name`)
|
||||
|
||||
|
||||
let nameInput = document.createElement("input");
|
||||
nameInput.setAttribute("type", "text");
|
||||
nameInput.setAttribute("placeholder", "New Entry Name");
|
||||
@ -92,11 +108,11 @@ function buildEntry(entry) {
|
||||
nameInput.setAttribute("unselectable", "on")
|
||||
nameInput.setAttribute("tabindex",entry_priority)
|
||||
nameDiv.appendChild(nameInput);
|
||||
|
||||
|
||||
let userDiv = document.createElement("div");
|
||||
userDiv.setAttribute("class", "entry_user");
|
||||
userDiv.setAttribute("id",`${entry.replaceAll(" ","-")}_user`)
|
||||
|
||||
|
||||
let userInput = document.createElement("input");
|
||||
userInput.setAttribute("type", "password");
|
||||
userInput.setAttribute("placeholder", "New Username");
|
||||
@ -105,11 +121,11 @@ function buildEntry(entry) {
|
||||
userInput.setAttribute("unselectable", "on")
|
||||
userInput.setAttribute("tabindex",entry_priority)
|
||||
userDiv.appendChild(userInput);
|
||||
|
||||
|
||||
let passDiv = document.createElement("div");
|
||||
passDiv.setAttribute("class", "entry_pass");
|
||||
passDiv.setAttribute("id",`${entry.replaceAll(" ","-")}_pass`)
|
||||
|
||||
|
||||
let passInput = document.createElement("input");
|
||||
passInput.setAttribute("type", "password");
|
||||
passInput.setAttribute("placeholder", "New Password");
|
||||
@ -118,7 +134,7 @@ function buildEntry(entry) {
|
||||
passInput.setAttribute("unselectable", "on")
|
||||
userInput.setAttribute("tabindex",entry_priority)
|
||||
passDiv.appendChild(passInput);
|
||||
|
||||
|
||||
let showButton = document.createElement("button");
|
||||
showButton.innerText = "Show";
|
||||
showButton.addEventListener("click",showEntry.bind(showButton, entry),false);
|
||||
@ -135,12 +151,12 @@ function buildEntry(entry) {
|
||||
actionDiv.appendChild(showButton)
|
||||
actionDiv.appendChild(editButton)
|
||||
actionDiv.setAttribute("id",`${entry.replaceAll(" ","-")}_actions`)
|
||||
|
||||
|
||||
document.getElementById("table_entries").appendChild(nameDiv)
|
||||
document.getElementById("table_users").appendChild(userDiv)
|
||||
document.getElementById("table_pwds").appendChild(passDiv)
|
||||
document.getElementById("table_actions").appendChild(actionDiv)
|
||||
|
||||
|
||||
}
|
||||
|
||||
async function editEntry(entry) {
|
||||
@ -157,7 +173,7 @@ async function editEntry(entry) {
|
||||
|
||||
entry_user.value = info[0];
|
||||
entry_pass.value = info[1];
|
||||
|
||||
|
||||
entry_user.removeAttribute("readonly");
|
||||
entry_user.setAttribute("unselectable", "off")
|
||||
entry_user.type = "text";
|
||||
@ -185,8 +201,8 @@ async function editEntry(entry) {
|
||||
alert("Could not edit entry!")
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
entry_user.setAttribute("readonly", true);
|
||||
entry_user.setAttribute("unselectable", "off")
|
||||
entry_user.type = "password"
|
||||
@ -272,7 +288,7 @@ async function createEntry() {
|
||||
} else {
|
||||
alert("A critical error occured during entry creation");
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
async function toggleLock() {
|
||||
@ -285,8 +301,9 @@ async function toggleLock() {
|
||||
if(master_pw == "" || master_pw == null)return;
|
||||
}
|
||||
|
||||
document.getElementById("lockLabel").innerText = txt;
|
||||
document.getElementById("lockImg").title = txt;
|
||||
document.getElementById("lockImg").alt = txt;
|
||||
document.getElementById("lockImg").src = src;
|
||||
|
||||
|
||||
lock_status = !lock_status;
|
||||
}
|
||||
14
src/settings.html
Normal file
14
src/settings.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Settings</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="title"><a href="/" class="nostyle">IPass</a></h1>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -73,7 +73,7 @@ input:not([readonly]){
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
button {
|
||||
@ -89,18 +89,6 @@ button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#lockImg {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
}
|
||||
|
||||
#lockLabel {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: 4em;
|
||||
}
|
||||
|
||||
#table_div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -139,4 +127,75 @@ input[type="password"] {
|
||||
flex-direction: column;
|
||||
border: 3px double var(--fg-color);
|
||||
border-radius: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
#table_actions > div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#table_actions > div > button {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
#table_div > div > div {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#createEntry_actions > button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#title {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select {
|
||||
padding: 5px 10px;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
|
||||
/* hide the default dropdown arrow */
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
|
||||
.select > div{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 4em;
|
||||
}
|
||||
.select > div > div{
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
a.nostyle:link {
|
||||
text-decoration: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a.nostyle:visited {
|
||||
text-decoration: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
.select{
|
||||
transform: rotate(0deg);
|
||||
transition: transform 1s linear;
|
||||
}
|
||||
|
||||
.select.open{
|
||||
transform: rotate(180deg);
|
||||
transition: transform 1s linear;
|
||||
}
|
||||
*/
|
||||
Loading…
x
Reference in New Issue
Block a user