3 files changed, 86 insertions, 13 deletions
diff --git a/www/css/main.css b/www/css/main.css
index d400b22..3e98b16 100644
--- a/www/css/main.css
+++ b/www/css/main.css
@@ -9,7 +9,7 @@ body
 	font-size: x-small;
 }
 
-td input
+input.fill
 {
 	box-sizing: border-box;
 	display: block;
diff --git a/www/index.html b/www/index.html
index 1d8becb..a52d173 100644
--- a/www/index.html
+++ b/www/index.html
@@ -13,9 +13,13 @@
 <table>
 <tr>
 <td class="headertext">Passphrase:</td>
-<td class="headerinput"><input type="password" id="PassPhrase"></td>
+<td class="headerinput">
+<input type="password" id="PassPhrase" class="fill">
+</td>
 <td class="headerbutton">
-<input type="button" id="LoadButton" value="Load" onclick="DoLoad()">
+<div>
+<input type="button" value="Load" onclick="DoLoad()" class="fill">
+</div>
 </td>
 </tr>
 <tr>
@@ -25,10 +29,18 @@
 </select>
 </td>
 <td class="headerbutton"></td>
+<tr>
+<td class="headertext">Show Passwords:</td>
+<td class="headerinput">
+<input type="checkbox" id="ShowPasswords" onclick="DoShowPasswords()">
+</td>
+<td class="headerbutton"></td>
 </tr>
 <tr>
 <td class="headertext">New Group:</td>
-<td class="headerinput"><input type="text" id="NewGroup" maxlength="512"></td>
+<td class="headerinput">
+<input type="text" id="NewGroup" maxlength="512" class="fill">
+</td>
 <td class="headerbutton"></td>
 </tr>
 </table>
diff --git a/www/scripts/main.js b/www/scripts/main.js
index 79fb0b7..d989803 100644
--- a/www/scripts/main.js
+++ b/www/scripts/main.js
@@ -90,6 +90,18 @@ function IsEmpty(id)
 	return elem.value == "";
 }
 
+function ShowPasswords()
+{
+	var elem = document.getElementById("ShowPasswords");
+
+	return elem.checked;
+}
+
+function SetInputType(id, type)
+{
+	document.getElementById(id).type = type;
+}
+
 function LoadGroups(keep_selection)
 {
 	globalGroups = [];
@@ -150,6 +162,7 @@ function AddTableInputCell(id, text, name, maxlen, classname, type, node)
 	input.id = name + id;
 	input.type = type;
 	input.maxLength = maxlen;
+	input.className = "fill";
 
 	td.className = classname;
 
@@ -225,10 +238,19 @@ function AddRow(table, id, prev_id, next_id, desc, username, password, rowcount)
 		tr.className = "style2";
 	}
 
-	AddTableInputCell(id, desc, "Description", 1024, "description", "text", tr); 
+	AddTableInputCell(id, desc, "Description", 1024, "description", "text", tr);
 	AddTableInputCell(id, username, "Username", 256, "username", "text", tr); 
-	AddTableInputCell(id, password, "Password", 256,
-						"password", "password", tr); 
+
+	if (ShowPasswords())
+	{
+		AddTableInputCell(id, password, "Password", 256,
+							"password", "text", tr); 
+	}
+	else
+	{
+		AddTableInputCell(id, password, "Password", 256,
+							"password", "password", tr); 
+	}
 
 	var td = document.createElement("td");
 
@@ -512,21 +534,34 @@ function DoCopyUsername()
 function DoCopyPassword()
 {
 	var id = "Password" + this.dataset.pmId;
-	document.getElementById(id).type = "text";
+
+	if (!ShowPasswords())
+	{
+		SetInputType(id, "text");
+	}
+
 	Copy(id);
-	document.getElementById(id).type = "password";
+
+	if (!ShowPasswords())
+	{
+		SetInputType(id, "password");
+	}
 }
 
 function DoShow()
 {
-	var elem = document.getElementById("Password" + this.dataset.pmId);
-	elem.type = "text";
+	if (!ShowPasswords())
+	{
+		SetInputType("Password" + this.dataset.pmId, "text");
+	}
 }
 
 function DoHide()
 {
-	var elem = document.getElementById("Password" + this.dataset.pmId);
-	elem.type = "password";
+	if (!ShowPasswords())
+	{
+		SetInputType("Password" + this.dataset.pmId, "password");
+	}
 }
 
 function DoReorderAsync()
@@ -569,4 +604,30 @@ function DoDown()
 	);
 }
 
+function DoShowPasswords()
+{
+	var type;
+
+	if (ShowPasswords())
+	{
+		type = "text";
+	}
+	else
+	{
+		type = "password";
+	}
+
+	SetInputType("PassPhrase", 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