Added some basic styling

Gyran · Apr 11, 2014 · 9502685 · 9502685
1 parent ff7d5ba
commit 9502685
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 15 deletions.
diff --git a/images/helper/helper-door-lock-glow-0.png b/images/helper/helper-door-lock-glow-0.png
diff --git a/images/helper/helper-unlock-button.png b/images/helper/helper-unlock-button.png
diff --git a/images/helper/masterpasswordCenter.png b/images/helper/masterpasswordCenter.png
diff --git a/images/helper/masterpasswordLeft.png b/images/helper/masterpasswordLeft.png
diff --git a/images/helper/masterpasswordRight.png b/images/helper/masterpasswordRight.png
diff --git a/popup.html b/popup.html
@@ -1,13 +1,30 @@
 <!DOCTYPE html>
 <html>
 <head>
-
+    <link rel="stylesheet" type="text/css" href="style/style.css">
 </head>
 <body>
-    <form id="frmVerify" action="">
-        Master password: <input type="password" id="masterpassword">
-        <button id="btnVerify">Verify</button>
-    </form>
+    <div class="wrapper">
+        <div id="unlockWrapper">
+            <div class="lock"></div>
+
+            <form id="frmVerify">
+                <div class="masterpasswordInput">
+                    <div class="masterpasswordRight"></div>
+                    <button id="unlock" tabindex="2" class="unlock"></button>
+                    <div class="masterpasswordLeft"></div>
+
+                    <input id="masterpassword" class="masterpassword" type="password" tabindex="1" placeholder="Master Password">
+                </div>
+            </form>
+        </div>
+
+        <div id="unlockedWrapper" class="hide">
+
+        </div>
+
+        <div class="error" id="error"></div>
+    </div>
 
     <script src="scripts/tld.min.js"></script>
     <script src="scripts/1passwordanywhere.include.js"></script>

diff --git 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
@@ -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;
+}