diff options
-rw-r--r-- | www/css/main.css | 43 | ||||
-rw-r--r-- | www/index.html | 43 | ||||
-rw-r--r-- | www/scripts/main.js | 388 |
3 files changed, 240 insertions, 234 deletions
diff --git a/www/css/main.css b/www/css/main.css index 64c46f8..33446e3 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -9,49 +9,20 @@ body font-size: x-small; } -.fill +input.fill { box-sizing: border-box; display: block; width: 100%; } -.fillabs +tr.style1 { - box-sizing: border-box; - display: block; - width: 99%; - position: absolute; - left: 1px; - top: 11px; -} - -.fill_0_0_lower -{ - box-sizing: border-box; - display: block; - width: 99%; - position: absolute; - z-index: 0; - left: 1px; - top: 11px; -} - -.fill_0_0_higher -{ - box-sizing: border-box; - display: block; - width: 94%; - position: absolute; - z-index: 100; - left: 1px; - top: 11px; + background-color: #ddddff; } -tr.datatable +tr.style2 { - height: 30px; - position: relative; background-color: #ccccff; } @@ -73,9 +44,8 @@ td.headerbutton td.description { width: 35%; - min-width: 300px; + min-width: 100px; max-width: 500px; - position: relative; } td.username @@ -83,7 +53,6 @@ td.username width: 20%; min-width: 50px; max-width: 200px; - position: relative; } td.password @@ -91,7 +60,6 @@ td.password width: 20%; min-width: 50px; max-width: 200px; - position: relative; } td.commands @@ -99,7 +67,6 @@ td.commands width: 25%; min-width: 50px; max-width: 100px; - position: relative; } table.datatable diff --git a/www/index.html b/www/index.html index 088767d..ce53bb4 100644 --- a/www/index.html +++ b/www/index.html @@ -26,7 +26,7 @@ <tr> <td class="headertext">Group:</td> <td class="headerinput"> -<select id="Group" onchange="DoSelectGroup()" class="fill"> +<select id="Group" onchange="DoSelectGroup()"> </select> </td> <td class="headerbutton"></td> @@ -50,51 +50,14 @@ <input type="password" id="NewPassPhrase" maxlength="512" class="fill"> </td> <td class="headerbutton"> -<input id="ChangePassphrase" type="button" value="Change" - onclick="DoChangePassphrase()" class="fill" disabled> +<input id="ChangePassphrase" type="button" value="Change" onclick="DoChangePassphrase()" class="fill" disabled> </td> </tr> </table> <hr> -<table id="DataTable" class="datatable"> -<tr class="datatable"> -<td class="description">Description</td> -<td class="username">Username</td> -<td class="password">Password</td> -<td class="commands">Commands</td> -<tr class="datatable"> -<td class="description"> -<select id="DescriptionSelect" class="fill_0_0_lower" - onchange="DoSelectDescription()"> -</select> -<input type="text" maxlength="1024" class="fill_0_0_higher" id="Description"> -</td> -<td class="username"> -<input type="text" maxlength="64" class="fillabs" id="Username"> -</td> -<td class="password"> -<input type="password" maxlength="64" class="fillabs" id="Password"> -</td> -<td class="commands"> -<input type="button" id="Edit" value="Edit" onclick="DoEdit()" - class="smalltext" disabled> -<input type="button" id="Delete" value="Delete" onclick="DoDelete()" - class="smalltext" disabled> -<input type="button" id="Add" value="Add" onclick="DoAdd()" class="smalltext"> -<input type="button" id="Up" value="Up" onclick="DoUp()" class="smalltext" - disabled> -<input type="button" id="Down" value="Down" onclick="DoDown()" - class="smalltext" disabled> -<br> -<input type="button" id="CopyUsername" value="Copy Username" - onclick="DoCopyUsername()" class="smalltext" disabled> -<input type="button" id="CopyPassword" value="Copy Password" - onclick="DoCopyPassword()" class="smalltext" disabled> -</td> -</tr> -</table> +<table id="DataTable" class="datatable"></table> </body> </html> diff --git a/www/scripts/main.js b/www/scripts/main.js index 36ac5f3..f75f23c 100644 --- a/www/scripts/main.js +++ b/www/scripts/main.js @@ -2,13 +2,28 @@ var globalDb = []; var globalGroups = []; var globalCurrentGroup = ""; -var globalCurrentSelection = -1; + +var globalScrollY = 0; function Error(message) { alert(message); } +function SaveScroll() +{ + globalScrollY = window.pageYOffset; +} + +function RestoreScroll() +{ + if (globalScrollY > 0) + { + window.scroll(0, globalScrollY); + globalScrollY = 0; + } +} + function SetEnable(id, enabled) { var elem = document.getElementById(id); @@ -107,70 +122,6 @@ function SetInputType(id, type) document.getElementById(id).type = type; } -function GetGroupRows() -{ - var result = []; - - for(var f = 0; f < globalDb.length; f++) - { - if (globalDb[f].group == globalCurrentGroup) - { - result.push(globalDb[f]); - } - } - - return result; -} - -function GetData(id) -{ - for(var f = 0; f < globalDb.length; f++) - { - if (globalDb[f].id == id) - { - return globalDb[f]; - } - } - - return null; -} - -function FindNextPrevious() -{ - var rows = GetGroupRows(); - var f; - var ret = {prev: -1, next: -1}; - var prev = -1; - - for(f = 0; f < rows.length; f++) - { - if (rows[f].id == globalCurrentSelection) - { - ret.prev = prev; - - if (f < rows.length - 1) - { - ret.next = rows[f + 1].id; - } - } - - prev = rows[f].id; - } - - return ret; -} - -function SetButtonState() -{ - SetEnable("Add", true); - SetEnable("Edit", globalCurrentSelection != -1); - SetEnable("Delete", globalCurrentSelection != -1); - SetEnable("CopyUsername", globalCurrentSelection != -1); - SetEnable("CopyPassword", globalCurrentSelection != -1); - SetEnable("Up", globalCurrentSelection != -1); - SetEnable("Down", globalCurrentSelection != -1); -} - function LoadGroups(keep_selection) { globalGroups = []; @@ -222,82 +173,207 @@ function LoadGroups(keep_selection) elem.value = globalCurrentGroup; } -function LoadDescriptions(keep_selection) +function AddTableInputCell(id, text, name, maxlen, classname, type, node) { - var rows = GetGroupRows(); - var elem = document.getElementById("DescriptionSelect"); - var f; + var td = document.createElement("td"); + var input = document.createElement("input"); - if (!keep_selection) + input.value = text; + input.id = name + id; + input.type = type; + input.maxLength = maxlen; + input.className = "fill"; + + td.className = classname; + + td.appendChild(input); + node.appendChild(td); +} + +function AddSmallButton(node, text, func, id) +{ + var button = document.createElement("input"); + + button.type = "button"; + button.onclick = func; + button.value = text; + button.className = "smalltext"; + button.dataset.pmId = id; + + node.appendChild(button); +} + +function AddSmallButtonPrevNext(node, text, func, id, prev, next) +{ + var button = document.createElement("input"); + + button.type = "button"; + button.onclick = func; + button.value = text; + button.className = "smalltext"; + button.dataset.pmId = id; + button.dataset.pmPrevId = prev; + button.dataset.pmNextId = next; + + node.appendChild(button); +} + +function AddSmallButtonUpDown(node, text, down_func, up_func, id) +{ + var button = document.createElement("input"); + + button.type = "button"; + button.onmousedown = down_func; + button.onmouseup = up_func; + button.value = text; + button.className = "smalltext"; + button.dataset.pmId = id; + + node.appendChild(button); +} + +function AddText(node, text) +{ + var t = document.createTextNode(text); + node.appendChild(t); +} + +function AddElement(node, elementname) +{ + var elem = document.createElement(elementname); + + node.appendChild(elem); +} + +function AddRow(table, id, prev_id, next_id, desc, username, password, rowcount) +{ + var tr = document.createElement("tr"); + + if ((rowcount % 2) == 1) { - globalCurrentSelection = -1; + tr.className = "style1"; } - - while(elem.length > 0) + else { - elem.remove(0); + tr.className = "style2"; } - var firstid = -1; - var selected = false; + AddTableInputCell(id, desc, "Description", 1024, "description", "text", tr); + AddTableInputCell(id, username, "Username", 256, "username", "text", tr); - for(f = 0; f < rows.length; f++) + if (ShowPasswords()) { - var option = document.createElement("option"); + AddTableInputCell(id, password, "Password", 256, + "password", "text", tr); + } + else + { + AddTableInputCell(id, password, "Password", 256, + "password", "password", tr); + } - option.text = rows[f].description; - option.value = rows[f].id; + var td = document.createElement("td"); - if (firstid == -1) - { - firstid = rows[f].id; - } + td.className = "commands"; + + if (id == -1) + { + AddSmallButton(td, "Add", DoAdd, id); + } + else + { + AddSmallButton(td, "Edit", DoEdit, id); + AddText(td, "\u00a0"); + AddSmallButton(td, "Delete", DoDelete, id); + AddText(td, "\u00a0"); + AddSmallButtonUpDown(td, "Show", DoShow, DoHide, id); - if (globalCurrentSelection == rows[f].id) + if (next_id != -1 || prev_id != -1) { - selected = true; + if (prev_id != -1) + { + AddText(td, "\u00a0"); + AddSmallButtonPrevNext(td, "Up", DoUp, id, prev_id, next_id); + } + + if (next_id != -1) + { + AddText(td, "\u00a0"); + AddSmallButtonPrevNext + (td, "Down", DoDown, id, prev_id, next_id); + } } - elem.add(option); - } + AddElement(td, "br"); - if (!selected) - { - globalCurrentSelection = firstid; + AddSmallButton(td, "Copy Username", DoCopyUsername, id); + AddText(td, "\u00a0"); + AddSmallButton(td, "Copy Password", DoCopyPassword, id); } - if (globalCurrentSelection != -1) + tr.appendChild(td); + + table.appendChild(tr); +} + +function GetGroupRows() +{ + var result = []; + + for(var f = 0; f < globalDb.length; f++) { - elem.value = globalCurrentSelection; + if (globalDb[f].group == globalCurrentGroup) + { + result.push(globalDb[f]); + } } + + return result; } function LoadTable() { - var record = GetData(globalCurrentSelection); + var table = document.getElementById("DataTable"); + + table.innerHTML = ""; + + var rowcount = 0; - if (record != null) + var rows = GetGroupRows(); + + for(var f = 0; f < rows.length; f++) { - var elem; + var prevId = -1; + var nextId = -1; - elem = document.getElementById("Description"); - elem.value = record.description; + if (f > 0) + { + prevId = rows[f-1].id; + } - elem = document.getElementById("Username"); - elem.value = record.username; + if (f < rows.length - 1) + { + nextId = rows[f+1].id; + } - elem = document.getElementById("Password"); - elem.value = Decrypt(record.password); + AddRow(table, + rows[f].id, + prevId, + nextId, + rows[f].description, + rows[f].username, + Decrypt(rows[f].password), + rowcount++); } + + AddRow(table, -1, -1, -1, "", "", "", rowcount++); } function RefreshDataAsync() { globalDb = JSON.parse(this.responseText); LoadGroups(true); - LoadDescriptions(true); LoadTable(); - SetButtonState(); } function RefreshData() @@ -308,7 +384,6 @@ function RefreshData() function LoadInitialData() { LoadGroups(false); - LoadDescriptions(false); LoadTable(); } @@ -324,7 +399,6 @@ function DoLoadAsync() else { LoadInitialData(); - SetButtonState(); SetEnable("ChangePassphrase", true); } } @@ -338,7 +412,6 @@ function DoLoad() } WebRequest("get.php", DoLoadAsync, []); - LoadInitialData(); } function DoChangePassphraseAsync() @@ -383,7 +456,6 @@ function DoChangePassphrase() ); } - document.getElementById("PassPhrase").value = newphrase; document.getElementById("NewPassPhrase").value = ""; } } @@ -394,15 +466,6 @@ function DoSelectGroup() globalCurrentGroup = elem.value; document.getElementById("NewGroup").value = ""; - LoadDescriptions(false); - LoadTable(); -} - -function DoSelectDescription() -{ - var elem = document.getElementById("DescriptionSelect"); - - globalCurrentSelection = elem.value; LoadTable(); } @@ -417,28 +480,22 @@ function DoAddAsync() else { globalCurrentGroup = response.group; - globalCurrentSelection = response.id; RefreshData(); } } function DoAdd() { - if (IsEmpty("PassPhrase")) - { - Error("Passphrase empty"); - return; - } - if (IsEmpty("Group") && IsEmpty("NewGroup")) { Error("No groups defined -- please enter a group name"); return; } - var description = document.getElementById("Description").value; - var username = document.getElementById("Username").value; - var password = document.getElementById("Password").value; + var id = this.dataset.pmId; + var description = document.getElementById("Description" + id).value; + var username = document.getElementById("Username" + id).value; + var password = document.getElementById("Password" + id).value; var group; if (description == "" || username == "" | password == "") @@ -478,16 +535,16 @@ function DoEditAsync() else { globalCurrentGroup = response.group; - globalCurrentSelection = response.id; RefreshData(); } } function DoEdit() { - var description = document.getElementById("Description").value; - var username = document.getElementById("Username").value; - var password = document.getElementById("Password").value; + var id = this.dataset.pmId; + var description = document.getElementById("Description" + id).value; + var username = document.getElementById("Username" + id).value; + var password = document.getElementById("Password" + id).value; var group; if (description == "" || username == "" | password == "") @@ -508,7 +565,7 @@ function DoEdit() WebRequest("edit.php", DoEditAsync, [ - "id", globalCurrentSelection, + "id", id, "description", description, "group", group, "username", username, @@ -533,21 +590,26 @@ function DoDeleteAsync() function DoDelete() { + var id = this.dataset.pmId; + WebRequest("delete.php", DoDeleteAsync, [ - "id", globalCurrentSelection + "id", id ] ); } function DoCopyUsername() { - Copy("Username"); + var id = "Username" + this.dataset.pmId; + Copy(id); } function DoCopyPassword() { - var id = "Password"; + var id = "Password" + this.dataset.pmId; + + SaveScroll(); if (!ShowPasswords()) { @@ -560,12 +622,15 @@ function DoCopyPassword() { SetInputType(id, "password"); } + + RestoreScroll(); } function DoShow() { if (!ShowPasswords()) { + SaveScroll(); SetInputType("Password" + this.dataset.pmId, "text"); } } @@ -575,6 +640,7 @@ function DoHide() if (!ShowPasswords()) { SetInputType("Password" + this.dataset.pmId, "password"); + setTimeout(RestoreScroll, 0); } } @@ -589,37 +655,38 @@ function DoReorderAsync() else { RefreshData(); + RestoreScroll(); } } function DoUp() { - var rec = FindNextPrevious(); + var id = this.dataset.pmId; + var prev = this.dataset.pmPrevId; - if (rec.prev != -1) - { - WebRequest("reorder.php", DoReorderAsync, - [ - "from_id", globalCurrentSelection, - "to_id", rec.prev - ] - ); - } + SaveScroll(); + + WebRequest("reorder.php", DoReorderAsync, + [ + "from_id", id, + "to_id", prev + ] + ); } function DoDown() { - var rec = FindNextPrevious(); + var id = this.dataset.pmId; + var next = this.dataset.pmNextId; - if (rec.next != -1) - { - WebRequest("reorder.php", DoReorderAsync, - [ - "from_id", globalCurrentSelection, - "to_id", rec.next - ] - ); - } + SaveScroll(); + + WebRequest("reorder.php", DoReorderAsync, + [ + "from_id", id, + "to_id", next + ] + ); } function DoShowPasswords() @@ -637,7 +704,16 @@ function DoShowPasswords() SetInputType("PassPhrase", type); SetInputType("NewPassPhrase", type); - SetInputType("Password", type); + SetInputType("Password-1", type); + + var rows = GetGroupRows(); + var f; + + for(f = 0; f < rows.length;f++) + { + var id = "Password" + rows[f].id; + SetInputType(id, type); + } } // vim: sw=4 ts=4 |