diff --git a/library b/library index 31b8e5b..26aeb75 160000 --- a/library +++ b/library @@ -1 +1 @@ -Subproject commit 31b8e5bf0ab8b561ffeafb07432a382000323f7a +Subproject commit 26aeb75bd1c6d002b9dc0af5cce3d66ac9f11204 diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 7369f6c..31a55c0 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -62,7 +62,7 @@ { "fullscreen": false, "height": 600, - "resizable": false, + "resizable": true, "title": "IPass", "width": 880, "theme": "Dark" diff --git a/src/images/menu.png b/src/images/menu.png new file mode 100644 index 0000000..c708b89 Binary files /dev/null and b/src/images/menu.png differ diff --git a/src/images/security_lock_locked.png b/src/images/security_lock_locked.png index e67feba..5b37366 100644 Binary files a/src/images/security_lock_locked.png and b/src/images/security_lock_locked.png differ diff --git a/src/images/security_lock_unlocked.png b/src/images/security_lock_unlocked.png index c96a424..cd7c66e 100644 Binary files a/src/images/security_lock_unlocked.png and b/src/images/security_lock_unlocked.png differ diff --git a/src/images/settings.png b/src/images/settings.png new file mode 100644 index 0000000..518ef56 Binary files /dev/null and b/src/images/settings.png differ diff --git a/src/index.html b/src/index.html index 800d55a..2eda5b8 100644 --- a/src/index.html +++ b/src/index.html @@ -10,9 +10,14 @@ -

IPass

-

Locked

- Lock +

IPass

+
+ +
+
Locked
+
Lock
+
+

@@ -32,6 +37,5 @@
- diff --git a/src/main.js b/src/main.js index 34160a3..261d95c 100644 --- a/src/main.js +++ b/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; } \ No newline at end of file diff --git a/src/settings.html b/src/settings.html new file mode 100644 index 0000000..750cbd9 --- /dev/null +++ b/src/settings.html @@ -0,0 +1,14 @@ + + + + + + + + Settings + + +

IPass

+ + + \ No newline at end of file diff --git a/src/style.css b/src/style.css index b6d7f13..fe5cc60 100644 --- a/src/style.css +++ b/src/style.css @@ -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%; -} \ No newline at end of file +} + +#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; +} +*/ \ No newline at end of file