fix bug + add tabindex

This commit is contained in:
Mystikfluu 2023-01-15 12:20:21 +01:00
parent ddf53e5908
commit 9d3a272193
2 changed files with 69 additions and 60 deletions

View File

@ -17,19 +17,19 @@
<div id="table_div"> <div id="table_div">
<div id="table_entries"> <div id="table_entries">
<div>Entry name</div> <div>Entry name</div>
<div class="entry_name" id="createEntry_name"><input type="text" placeholder="New Entry Name"></div> <div class="entry_name" id="createEntry_name"><input type="text" placeholder="New Entry Name" tabindex="1"></div>
</div> </div>
<div id="table_users"> <div id="table_users">
<div>Username</div> <div>Username</div>
<div class="entry_user" id="createEntry_user"><input type="text" placeholder="New Username"></div> <div class="entry_user" id="createEntry_user"><input type="text" placeholder="New Username" tabindex="1"></div>
</div> </div>
<div id="table_pwds"> <div id="table_pwds">
<div>Password</div> <div>Password</div>
<div class="entry_pass" id="createEntry_pass"><input type="password" placeholder="New Password"></div> <div class="entry_pass" id="createEntry_pass"><input type="password" placeholder="New Password" tabindex="1"></div>
</div> </div>
<div id="table_actions"> <div id="table_actions">
<div>Action</div> <div>Action</div>
<div class="button" id="createEntry_actions"><button>Create</button></div> <div class="button" id="createEntry_actions"><button tabindex="1">Create</button></div>
</div> </div>
</div> </div>

View File

@ -18,7 +18,7 @@ async function startup() {
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");
console.log(entries);
for(let i = 0; i < entries.length; i++) { for(let i = 0; i < entries.length; i++) {
buildEntry(entries[i]); buildEntry(entries[i]);
} }
@ -74,8 +74,12 @@ async function startup() {
} }
} }
let entry_priority = 1
function buildEntry(entry) { function buildEntry(entry) {
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`)
@ -86,6 +90,7 @@ function buildEntry(entry) {
nameInput.setAttribute("value", entry); nameInput.setAttribute("value", entry);
nameInput.setAttribute("readonly", true); nameInput.setAttribute("readonly", true);
nameInput.setAttribute("unselectable", "on") nameInput.setAttribute("unselectable", "on")
nameInput.setAttribute("tabindex",entry_priority)
nameDiv.appendChild(nameInput); nameDiv.appendChild(nameInput);
let userDiv = document.createElement("div"); let userDiv = document.createElement("div");
@ -98,6 +103,7 @@ function buildEntry(entry) {
userInput.setAttribute("value", "PLACEHOLDER"); userInput.setAttribute("value", "PLACEHOLDER");
userInput.setAttribute("readonly", true); userInput.setAttribute("readonly", true);
userInput.setAttribute("unselectable", "on") userInput.setAttribute("unselectable", "on")
userInput.setAttribute("tabindex",entry_priority)
userDiv.appendChild(userInput); userDiv.appendChild(userInput);
let passDiv = document.createElement("div"); let passDiv = document.createElement("div");
@ -110,17 +116,20 @@ function buildEntry(entry) {
passInput.setAttribute("value", "PLACEHOLDER!"); passInput.setAttribute("value", "PLACEHOLDER!");
passInput.setAttribute("readonly", true); passInput.setAttribute("readonly", true);
passInput.setAttribute("unselectable", "on") passInput.setAttribute("unselectable", "on")
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);
showButton.setAttribute("class", "showbutton"); showButton.setAttribute("class", "showbutton");
showButton.setAttribute("tabindex",entry_priority)
let editButton = document.createElement("button"); let editButton = document.createElement("button");
editButton.innerText = "Edit"; editButton.innerText = "Edit";
editButton.addEventListener("click", editEntry.bind(editButton, entry), false); editButton.addEventListener("click", editEntry.bind(editButton, entry), false);
editButton.setAttribute("class", "editbutton"); editButton.setAttribute("class", "editbutton");
editButton.setAttribute("tabindex",entry_priority)
let actionDiv = document.createElement("div") let actionDiv = document.createElement("div")
actionDiv.appendChild(showButton) actionDiv.appendChild(showButton)
@ -252,7 +261,7 @@ async function createEntry() {
let mpw = await get_pw() let mpw = await get_pw()
let success = await invoke("create_entry", {name: entryNameField.value, username: entryNameField.value, pw: entryPassField.value, mpw: mpw}); let success = await invoke("create_entry", {name: entryNameField.value, username: entryUserField.value, pw: entryPassField.value, mpw: mpw});
if(success) { if(success) {
alert("Successfully created entry!"); alert("Successfully created entry!");