diff --git a/images/helper/helper-door-lock-glow-0.png b/images/helper/helper-door-lock-glow-0.png
new file mode 100644
index 0000000..c1af5d1
Binary files /dev/null and b/images/helper/helper-door-lock-glow-0.png differ
diff --git a/images/helper/helper-unlock-button.png b/images/helper/helper-unlock-button.png
new file mode 100644
index 0000000..6ca96f0
Binary files /dev/null and b/images/helper/helper-unlock-button.png differ
diff --git a/images/helper/masterpasswordCenter.png b/images/helper/masterpasswordCenter.png
new file mode 100644
index 0000000..2d901f3
Binary files /dev/null and b/images/helper/masterpasswordCenter.png differ
diff --git a/images/helper/masterpasswordLeft.png b/images/helper/masterpasswordLeft.png
new file mode 100644
index 0000000..0187048
Binary files /dev/null and b/images/helper/masterpasswordLeft.png differ
diff --git a/images/helper/masterpasswordRight.png b/images/helper/masterpasswordRight.png
new file mode 100644
index 0000000..7f664aa
Binary files /dev/null and b/images/helper/masterpasswordRight.png differ
diff --git a/popup.html b/popup.html
index c60dd4e..0e4687b 100644
--- a/popup.html
+++ b/popup.html
@@ -1,13 +1,30 @@
-
+
-
+
diff --git a/scripts/popup.js b/scripts/popup.js
index 41ee053..a3ef7a3 100644
--- a/scripts/popup.js
+++ b/scripts/popup.js
@@ -2,6 +2,16 @@
var onepassword = null;
var tab = null;
+ var unlockWrapper = document.getElementById("unlockWrapper");
+ var unlockedWrapper = document.getElementById("unlockedWrapper");
+
+ var btnUnlock = document.getElementById("unlock");
+ btnUnlock.disabled = true;
+ var frmVerify = document.getElementById("frmVerify");
+ var error = document.getElementById("error");
+ var masterpassword = document.getElementById("masterpassword");
+
+
function init () {
Q.all([initOnePassword(), getActiveTab()]).spread(function (op, t) {
onepassword = op;
@@ -17,7 +27,7 @@
}, function (items) {
onepassword = new window.OnePassword(items.baseurl);
onepassword.load().then(function () {
- btnVerify.disabled = false;
+ btnUnlock.disabled = false;
});
deferred.resolve(onepassword);
@@ -32,16 +42,27 @@
}
function verify (event) {
+ error.textContent = "";
event.preventDefault();
- var password = document.getElementById("masterpassword").value;
+ var password = masterpassword.value;
if (onepassword.verifyPassword(password)) {
var domain = getCurrentDomain();
var webforms = onepassword.webformsFromDomain(domain);
- fillForm(webforms[0]);
- //window.close();
+
+ unlockWrapper.classList.add("hide");
+ unlockedWrapper.classList.remove("hide");
+
+ if (webforms.length === 1) {
+ fillForm(webforms[0]);
+ } else if (webforms.length > 1) {
+ // TODO: show a list of possible webforms
+ fillForm(webforms[0]);
+ } else {
+ error.textContent = "No password for this domain found!";
+ }
} else {
- alert("wrong password!");
+ error.textContent = "Wrong master password!";
}
}
@@ -77,11 +98,6 @@
return deferred.promise;
}
-
- btnVerify = document.getElementById("btnVerify");
- btnVerify.disabled = true;
- frmVerify = document.getElementById("frmVerify");
-
document.addEventListener("DOMContentLoaded", init);
frmVerify.addEventListener("submit", verify);
diff --git a/style/style.css b/style/style.css
new file mode 100644
index 0000000..3ce6fc1
--- /dev/null
+++ b/style/style.css
@@ -0,0 +1,69 @@
+.wrapper {
+ width: 250px;
+}
+
+.lock {
+ background-image: url(../images/helper/helper-door-lock-glow-0.png);
+ background-size: 75px 75px;
+ width: 75px;
+ height: 75px;
+ margin: 10px auto;
+
+}
+
+.masterpasswordInput {
+ margin-top: 20px;
+ height: 45px;
+ background-image: url(../images/helper/masterpasswordCenter.png);
+}
+
+.masterpasswordLeft {
+ height: 45px;
+ width: 10px;
+ background-image: url(../images/helper/masterpasswordLeft.png);
+ float: left;
+}
+
+.masterpasswordRight {
+ height: 45px;
+ width: 10px;
+ background-image: url(../images/helper/masterpasswordRight.png);
+ float: right;;
+}
+
+.masterpassword {
+ border: none;
+ height: 25px;
+ margin-top: 10px;
+ background: none;
+ width: 195px;
+}
+
+.masterpassword:focus {
+ outline: none;
+}
+
+.unlock {
+ background: transparent url(../images/helper/helper-unlock-button.png) no-repeat;
+ background-size: 29px 25px;
+ width: 29px;
+ height: 25px;
+ float: right;
+ margin-top: 10px;
+ border-style: none;
+}
+
+.unlock:focus {
+ outline: none;
+}
+
+.error {
+ text-align: center;
+ color: #f00;
+ height: 40px;
+ margin-top: 10px;
+}
+
+.hide {
+ display: none;
+}