code002lover/IPass-GUI
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

change styling

Browse Source 
also add placeholder settings page

Co-authored-by: Peeentaa <Peeentaa@users.noreply.github.com>
This commit is contained in:
none 2023-01-19 10:00:23 +01:00
parent 9d3a272193
commit 988a648b89
10 changed files with 132 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
library

@ -1 +1 @@
Subproject commit 31b8e5bf0ab8b561ffeafb07432a382000323f7a Subproject commit 26aeb75bd1c6d002b9dc0af5cce3d66ac9f11204

2
src-tauri/tauri.conf.json
View File

@ -62,7 +62,7 @@
{ {
"fullscreen": false, "fullscreen": false,
"height": 600, "height": 600,
"resizable": false, "resizable": true,
"title": "IPass", "title": "IPass",
"width": 880, "width": 880,
"theme": "Dark" "theme": "Dark"

BIN
src/images/menu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 994 B

BIN
src/images/security_lock_locked.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/images/security_lock_unlocked.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/images/settings.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

12
src/index.html
View File

@ -10,9 +10,14 @@
</head> </head>
<body> <body>
<h1>IPass</h1> <h1 id="title">IPass</h1>
<p id="lockLabel">Locked</p> <div class="select">
<img alt="Lock" id="lockImg" src="/images/security_lock_locked.png" height=50 width=50></img> <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> <br>
<div id="table_div"> <div id="table_div">
<div id="table_entries"> <div id="table_entries">
@ -32,6 +37,5 @@
<div class="button" id="createEntry_actions"><button tabindex="1">Create</button></div> <div class="button" id="createEntry_actions"><button tabindex="1">Create</button></div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

53
src/main.js
View File

@ -14,7 +14,23 @@ window.addEventListener("DOMContentLoaded", () => {
}); });
async function startup() { 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); document.querySelector("#createEntry_actions > button").addEventListener("click",createEntry);
let entries = await invoke("get_entries"); let entries = await invoke("get_entries");
@ -57,7 +73,7 @@ async function startup() {
setTimeout(function(){ setTimeout(function(){
input.style.borderColor = originalColor; input.style.borderColor = originalColor;
},250) },250)
console.log('Text copied to clipboard'); console.log('Text copied to clipboard');
}, function(err) { }, function(err) {
@ -70,7 +86,7 @@ async function startup() {
console.error('Failed to copy text: ', err); console.error('Failed to copy text: ', err);
}); });
}); });
} }
} }
@ -79,11 +95,11 @@ let entry_priority = 1
function buildEntry(entry) { function buildEntry(entry) {
entry_priority++; entry_priority++;
let nameDiv = document.createElement("div"); let nameDiv = document.createElement("div");
nameDiv.setAttribute("class", "entry_name"); nameDiv.setAttribute("class", "entry_name");
nameDiv.setAttribute("id",`${entry.replaceAll(" ","-")}_name`) nameDiv.setAttribute("id",`${entry.replaceAll(" ","-")}_name`)
let nameInput = document.createElement("input"); let nameInput = document.createElement("input");
nameInput.setAttribute("type", "text"); nameInput.setAttribute("type", "text");
nameInput.setAttribute("placeholder", "New Entry Name"); nameInput.setAttribute("placeholder", "New Entry Name");
@ -92,11 +108,11 @@ function buildEntry(entry) {
nameInput.setAttribute("unselectable", "on") nameInput.setAttribute("unselectable", "on")
nameInput.setAttribute("tabindex",entry_priority) nameInput.setAttribute("tabindex",entry_priority)
nameDiv.appendChild(nameInput); nameDiv.appendChild(nameInput);
let userDiv = document.createElement("div"); let userDiv = document.createElement("div");
userDiv.setAttribute("class", "entry_user"); userDiv.setAttribute("class", "entry_user");
userDiv.setAttribute("id",`${entry.replaceAll(" ","-")}_user`) userDiv.setAttribute("id",`${entry.replaceAll(" ","-")}_user`)
let userInput = document.createElement("input"); let userInput = document.createElement("input");
userInput.setAttribute("type", "password"); userInput.setAttribute("type", "password");
userInput.setAttribute("placeholder", "New Username"); userInput.setAttribute("placeholder", "New Username");
@ -105,11 +121,11 @@ function buildEntry(entry) {
userInput.setAttribute("unselectable", "on") userInput.setAttribute("unselectable", "on")
userInput.setAttribute("tabindex",entry_priority) userInput.setAttribute("tabindex",entry_priority)
userDiv.appendChild(userInput); userDiv.appendChild(userInput);
let passDiv = document.createElement("div"); let passDiv = document.createElement("div");
passDiv.setAttribute("class", "entry_pass"); passDiv.setAttribute("class", "entry_pass");
passDiv.setAttribute("id",`${entry.replaceAll(" ","-")}_pass`) passDiv.setAttribute("id",`${entry.replaceAll(" ","-")}_pass`)
let passInput = document.createElement("input"); let passInput = document.createElement("input");
passInput.setAttribute("type", "password"); passInput.setAttribute("type", "password");
passInput.setAttribute("placeholder", "New Password"); passInput.setAttribute("placeholder", "New Password");
@ -118,7 +134,7 @@ function buildEntry(entry) {
passInput.setAttribute("unselectable", "on") passInput.setAttribute("unselectable", "on")
userInput.setAttribute("tabindex",entry_priority) userInput.setAttribute("tabindex",entry_priority)
passDiv.appendChild(passInput); passDiv.appendChild(passInput);
let showButton = document.createElement("button"); let showButton = document.createElement("button");
showButton.innerText = "Show"; showButton.innerText = "Show";
showButton.addEventListener("click",showEntry.bind(showButton, entry),false); showButton.addEventListener("click",showEntry.bind(showButton, entry),false);
@ -135,12 +151,12 @@ function buildEntry(entry) {
actionDiv.appendChild(showButton) actionDiv.appendChild(showButton)
actionDiv.appendChild(editButton) actionDiv.appendChild(editButton)
actionDiv.setAttribute("id",`${entry.replaceAll(" ","-")}_actions`) actionDiv.setAttribute("id",`${entry.replaceAll(" ","-")}_actions`)
document.getElementById("table_entries").appendChild(nameDiv) document.getElementById("table_entries").appendChild(nameDiv)
document.getElementById("table_users").appendChild(userDiv) document.getElementById("table_users").appendChild(userDiv)
document.getElementById("table_pwds").appendChild(passDiv) document.getElementById("table_pwds").appendChild(passDiv)
document.getElementById("table_actions").appendChild(actionDiv) document.getElementById("table_actions").appendChild(actionDiv)
} }
async function editEntry(entry) { async function editEntry(entry) {
@ -157,7 +173,7 @@ async function editEntry(entry) {
entry_user.value = info[0]; entry_user.value = info[0];
entry_pass.value = info[1]; entry_pass.value = info[1];
entry_user.removeAttribute("readonly"); entry_user.removeAttribute("readonly");
entry_user.setAttribute("unselectable", "off") entry_user.setAttribute("unselectable", "off")
entry_user.type = "text"; entry_user.type = "text";
@ -185,8 +201,8 @@ async function editEntry(entry) {
alert("Could not edit entry!") alert("Could not edit entry!")
return; return;
} }
entry_user.setAttribute("readonly", true); entry_user.setAttribute("readonly", true);
entry_user.setAttribute("unselectable", "off") entry_user.setAttribute("unselectable", "off")
entry_user.type = "password" entry_user.type = "password"
@ -272,7 +288,7 @@ async function createEntry() {
} else { } else {
alert("A critical error occured during entry creation"); alert("A critical error occured during entry creation");
} }
} }
async function toggleLock() { async function toggleLock() {
@ -285,8 +301,9 @@ async function toggleLock() {
if(master_pw == "" || master_pw == null)return; 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; document.getElementById("lockImg").src = src;
lock_status = !lock_status; lock_status = !lock_status;
} }

14
src/settings.html Normal file
View 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>

87
src/style.css
View File

@ -73,7 +73,7 @@ input:not([readonly]){
} }
h1 { h1 {
text-align: center; margin-left: 2em;
} }
button { button {
@ -89,18 +89,6 @@ button {
outline: none; outline: none;
} }
#lockImg {
position: absolute;
top: 1em;
right: 1em;
}
#lockLabel {
position: absolute;
top: 1em;
right: 4em;
}
#table_div { #table_div {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -139,4 +127,75 @@ input[type="password"] {
flex-direction: column; flex-direction: column;
border: 3px double var(--fg-color); border: 3px double var(--fg-color);
border-radius: 5%; 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;
}
*/