summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorIan C <ianc@noddybox.co.uk>2018-07-30 14:42:00 +0000
committerIan C <ianc@noddybox.co.uk>2018-07-30 14:42:00 +0000
commit1742a245acd15db2d017b5f443a316fc624d8868 (patch)
tree6dae847a8ef5c72cd82833f96a77ade553fc23dc
parent374b4419d2ff88bfbb5cfdf2ab97bd9ed885fdaf (diff)
Changed to a single record display to remove the hideous problem with the page
jumping.
-rw-r--r--www/add.php1
-rw-r--r--www/css/main.css47
-rw-r--r--www/index.html34
-rw-r--r--www/scripts/main.js329
4 files changed, 181 insertions, 230 deletions
diff --git a/www/add.php b/www/add.php
index 2ecff7b..8525781 100644
--- a/www/add.php
+++ b/www/add.php
@@ -45,6 +45,7 @@ try
$id = $db->lastInsertId();
$result["id"] = $id;
+ $result["group"] = $group;
$update = $db->prepare("UPDATE pm_store SET display = :id WHERE id = :id");
$update->bindParam(":id", $id);
diff --git a/www/css/main.css b/www/css/main.css
index 3e98b16..64c46f8 100644
--- a/www/css/main.css
+++ b/www/css/main.css
@@ -9,20 +9,49 @@ body
font-size: x-small;
}
-input.fill
+.fill
{
box-sizing: border-box;
display: block;
width: 100%;
}
-tr.style1
+.fillabs
{
- background-color: #ddddff;
+ 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;
}
-tr.style2
+.fill_0_0_higher
{
+ box-sizing: border-box;
+ display: block;
+ width: 94%;
+ position: absolute;
+ z-index: 100;
+ left: 1px;
+ top: 11px;
+}
+
+tr.datatable
+{
+ height: 30px;
+ position: relative;
background-color: #ccccff;
}
@@ -43,9 +72,10 @@ td.headerbutton
td.description
{
- width: 40%;
- min-width: 100px;
+ width: 35%;
+ min-width: 300px;
max-width: 500px;
+ position: relative;
}
td.username
@@ -53,6 +83,7 @@ td.username
width: 20%;
min-width: 50px;
max-width: 200px;
+ position: relative;
}
td.password
@@ -60,13 +91,15 @@ td.password
width: 20%;
min-width: 50px;
max-width: 200px;
+ position: relative;
}
td.commands
{
- width: 20%;
+ width: 25%;
min-width: 50px;
max-width: 100px;
+ position: relative;
}
table.datatable
diff --git a/www/index.html b/www/index.html
index ce53bb4..db66991 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()">
+<select id="Group" onchange="DoSelectGroup()" class="fill">
</select>
</td>
<td class="headerbutton"></td>
@@ -50,14 +50,42 @@
<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"></table>
+<table id="DataTable" class="datatable">
+<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">
+<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>
</body>
</html>
diff --git a/www/scripts/main.js b/www/scripts/main.js
index 4323680..93c3c83 100644
--- a/www/scripts/main.js
+++ b/www/scripts/main.js
@@ -2,28 +2,13 @@
var globalDb = [];
var globalGroups = [];
var globalCurrentGroup = "";
-
-var globalScrollY = 0;
+var globalCurrentSelection = -1;
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);
@@ -122,6 +107,43 @@ 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 SetButtonState()
+{
+ SetEnable("Add", true);
+ SetEnable("Edit", globalCurrentSelection != -1);
+ SetEnable("Delete", globalCurrentSelection != -1);
+ SetEnable("CopyUsername", globalCurrentSelection != -1);
+ SetEnable("CopyPassword", globalCurrentSelection != -1);
+}
+
function LoadGroups(keep_selection)
{
globalGroups = [];
@@ -173,211 +195,82 @@ function LoadGroups(keep_selection)
elem.value = globalCurrentGroup;
}
-function AddTableInputCell(id, text, name, maxlen, classname, type, node)
-{
- var td = document.createElement("td");
- var input = document.createElement("input");
-
- 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 AddSmallLink(node, text, func, id)
-{
- var anchor = document.createElement("a");
-
- anchor.href = "#";
- anchor.onclick = func;
- anchor.text = text;
- anchor.className = "smalltext";
- anchor.dataset.pmId = id;
-
- node.appendChild(anchor);
-}
-
-function AddSmallLinkPrevNext(node, text, func, id, prev, next)
-{
- var anchor = document.createElement("a");
-
- anchor.href = "#";
- anchor.onclick = func;
- anchor.text = text;
- anchor.className = "smalltext";
- anchor.dataset.pmId = id;
- anchor.dataset.pmPrevId = prev;
- anchor.dataset.pmNextId = next;
-
- node.appendChild(anchor);
-}
-
-function AddSmallLinkUpDown(node, text, down_func, up_func, id)
-{
- var anchor = document.createElement("a");
-
- anchor.href = "#";
- anchor.onmousedown = down_func;
- anchor.onmouseup = up_func;
- anchor.text = text;
- anchor.className = "smalltext";
- anchor.dataset.pmId = id;
-
- node.appendChild(anchor);
-}
-
-function AddText(node, text)
-{
- var t = document.createTextNode(text);
- node.appendChild(t);
-}
-
-function AddElement(node, elementname)
+function LoadDescriptions(keep_selection)
{
- 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");
+ var rows = GetGroupRows();
+ var elem = document.getElementById("DescriptionSelect");
+ var f;
- if ((rowcount % 2) == 1)
- {
- tr.className = "style1";
- }
- else
+ if (!keep_selection)
{
- tr.className = "style2";
+ globalCurrentSelection = -1;
}
- AddTableInputCell(id, desc, "Description", 1024, "description", "text", tr);
- AddTableInputCell(id, username, "Username", 256, "username", "text", tr);
-
- if (ShowPasswords())
- {
- AddTableInputCell(id, password, "Password", 256,
- "password", "text", tr);
- }
- else
+ while(elem.length > 0)
{
- AddTableInputCell(id, password, "Password", 256,
- "password", "password", tr);
+ elem.remove(0);
}
- var td = document.createElement("td");
+ var firstid = -1;
+ var selected = false;
- td.className = "commands";
-
- if (id == -1)
- {
- AddSmallLink(td, "Add", DoAdd, id);
- }
- else
+ for(f = 0; f < rows.length; f++)
{
- AddSmallLink(td, "Edit", DoEdit, id);
- AddText(td, "\u00a0");
- AddText(td, "\u00a0");
- AddSmallLink(td, "Delete", DoDelete, id);
- AddText(td, "\u00a0");
- AddText(td, "\u00a0");
- AddSmallLinkUpDown(td, "Show", DoShow, DoHide, id);
+ var option = document.createElement("option");
+
+ option.text = rows[f].description;
+ option.value = rows[f].id;
- if (next_id != -1 || prev_id != -1)
+ if (firstid == -1)
{
- if (prev_id != -1)
- {
- AddText(td, "\u00a0");
- AddText(td, "\u00a0");
- AddSmallLinkPrevNext(td, "Up", DoUp, id, prev_id, next_id);
- }
-
- if (next_id != -1)
- {
- AddText(td, "\u00a0");
- AddText(td, "\u00a0");
- AddSmallLinkPrevNext(td, "Down", DoDown, id, prev_id, next_id);
- }
+ firstid = rows[f].id;
}
- AddElement(td, "br");
+ if (globalCurrentSelection == rows[f].id)
+ {
+ selected = true;
+ }
- AddSmallLink(td, "Copy Username", DoCopyUsername, id);
- AddText(td, "\u00a0");
- AddText(td, "\u00a0");
- AddSmallLink(td, "Copy Password", DoCopyPassword, id);
+ elem.add(option);
}
- tr.appendChild(td);
-
- table.appendChild(tr);
-}
-
-function GetGroupRows()
-{
- var result = [];
-
- for(var f = 0; f < globalDb.length; f++)
+ if (!selected)
{
- if (globalDb[f].group == globalCurrentGroup)
- {
- result.push(globalDb[f]);
- }
+ globalCurrentSelection = firstid;
}
- return result;
+ if (globalCurrentSelection != -1)
+ {
+ elem.value = globalCurrentSelection;
+ }
}
function LoadTable()
{
- var table = document.getElementById("DataTable");
-
- table.innerHTML = "";
+ var record = GetData(globalCurrentSelection);
- var rowcount = 0;
-
- var rows = GetGroupRows();
-
- for(var f = 0; f < rows.length; f++)
+ if (record != null)
{
- var prevId = -1;
- var nextId = -1;
+ var elem;
- if (f > 0)
- {
- prevId = rows[f-1].id;
- }
+ elem = document.getElementById("Description");
+ elem.value = record.description;
- if (f < rows.length - 1)
- {
- nextId = rows[f+1].id;
- }
+ elem = document.getElementById("Username");
+ elem.value = record.username;
- AddRow(table,
- rows[f].id,
- prevId,
- nextId,
- rows[f].description,
- rows[f].username,
- Decrypt(rows[f].password),
- rowcount++);
+ elem = document.getElementById("Password");
+ elem.value = Decrypt(record.password);
}
-
- AddRow(table, -1, -1, -1, "", "", "", rowcount++);
}
function RefreshDataAsync()
{
globalDb = JSON.parse(this.responseText);
LoadGroups(true);
+ LoadDescriptions(true);
LoadTable();
+ SetButtonState();
}
function RefreshData()
@@ -388,6 +281,7 @@ function RefreshData()
function LoadInitialData()
{
LoadGroups(false);
+ LoadDescriptions(false);
LoadTable();
}
@@ -403,6 +297,7 @@ function DoLoadAsync()
else
{
LoadInitialData();
+ SetButtonState();
SetEnable("ChangePassphrase", true);
}
}
@@ -416,6 +311,7 @@ function DoLoad()
}
WebRequest("get.php", DoLoadAsync, []);
+ LoadInitialData();
}
function DoChangePassphraseAsync()
@@ -470,6 +366,15 @@ function DoSelectGroup()
globalCurrentGroup = elem.value;
document.getElementById("NewGroup").value = "";
+ LoadDescriptions(false);
+ LoadTable();
+}
+
+function DoSelectDescription()
+{
+ var elem = document.getElementById("DescriptionSelect");
+
+ globalCurrentSelection = elem.value;
LoadTable();
}
@@ -483,22 +388,29 @@ 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 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 description = document.getElementById("Description").value;
+ var username = document.getElementById("Username").value;
+ var password = document.getElementById("Password").value;
var group;
if (description == "" || username == "" | password == "")
@@ -543,10 +455,9 @@ function DoEditAsync()
function DoEdit()
{
- 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 description = document.getElementById("Description").value;
+ var username = document.getElementById("Username").value;
+ var password = document.getElementById("Password").value;
var group;
if (description == "" || username == "" | password == "")
@@ -567,7 +478,7 @@ function DoEdit()
WebRequest("edit.php", DoEditAsync,
[
- "id", id,
+ "id", globalCurrentSelection,
"description", description,
"group", group,
"username", username,
@@ -592,26 +503,21 @@ function DoDeleteAsync()
function DoDelete()
{
- var id = this.dataset.pmId;
-
WebRequest("delete.php", DoDeleteAsync,
[
- "id", id
+ "id", globalCurrentSelection
]
);
}
function DoCopyUsername()
{
- var id = "Username" + this.dataset.pmId;
- Copy(id);
+ Copy("Username");
}
function DoCopyPassword()
{
- var id = "Password" + this.dataset.pmId;
-
- SaveScroll();
+ var id = "Password";
if (!ShowPasswords())
{
@@ -624,15 +530,12 @@ function DoCopyPassword()
{
SetInputType(id, "password");
}
-
- RestoreScroll();
}
function DoShow()
{
if (!ShowPasswords())
{
- SaveScroll();
SetInputType("Password" + this.dataset.pmId, "text");
}
}
@@ -642,7 +545,6 @@ function DoHide()
if (!ShowPasswords())
{
SetInputType("Password" + this.dataset.pmId, "password");
- setTimeout(RestoreScroll, 0);
}
}
@@ -657,7 +559,6 @@ function DoReorderAsync()
else
{
RefreshData();
- RestoreScroll();
}
}
@@ -666,8 +567,6 @@ function DoUp()
var id = this.dataset.pmId;
var prev = this.dataset.pmPrevId;
- SaveScroll();
-
WebRequest("reorder.php", DoReorderAsync,
[
"from_id", id,
@@ -681,8 +580,6 @@ function DoDown()
var id = this.dataset.pmId;
var next = this.dataset.pmNextId;
- SaveScroll();
-
WebRequest("reorder.php", DoReorderAsync,
[
"from_id", id,
@@ -706,16 +603,8 @@ function DoShowPasswords()
SetInputType("PassPhrase", type);
SetInputType("NewPassPhrase", 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);
- }
+ SetInputType("Password", type);
+ SetInputType("NewPassword", type);
}
// vim: sw=4 ts=4