Merge pull request #106 from devgeeks/show-password-toggle

The UX battle over displaying or masking the passphrase rages on

Author: devgeeks

src/views/SignupView.js

@@ -11,21 +11,26 @@
     events: {
       "submit form": "form_submitHandler",
       "click .signupButton": "signupButton_clickHandler",
-      "click a.backToLogin": "backToLogin_clickHandler"
+      "click a.backToLogin": "backToLogin_clickHandler",
+      "change #show-passphrase": "showPassphrase_changeHandler"
     },
     initialize: function() {
       _.bindAll(this,
           "input_focusHandler",
           "input_blurHandler",
           "form_submitHandler",
           "signupButton_clickHandler",
-          "backToLogin_clickHandler");
+          "backToLogin_clickHandler",
+          "showPassphrase_changeHandler");
       $(document).on("focus", ".signup input", this.input_focusHandler);
       $(document).on("blur", ".signup input", this.input_blurHandler);
     },
     render: function() {
       this.$el.html(window.tmpl["signupView"]({}));
       $(".app").append(this.el);
+      if ($.os.nodeWebkit) this.$("input[type=checkbox]").css({
+        "height": "15px"
+      });
       return this;
     },
     input_focusHandler: function(event) {
@@ -34,6 +39,9 @@
     input_blurHandler: function(event) {
       $(event.target).closest("div.login-input").removeClass("focused");
     },
+    showPassphrase_changeHandler: function(event) {
+      this.$("#newpassphrase").toggleClass("passphrase-shown");
+    },
     form_submitHandler: function(event) {
       var _this = this;
       event.preventDefault();

tpl/signupView.html

@@ -12,11 +12,20 @@ <h1 class="middle">Register</h1>
       <input id="newpassphrase" type="text" name="newpassphrase"
                  placeholder="Choose a Passphrase"
                  autocomplete="off" autocorrect="off" autocapitalize="off"
-                 tabindex="2" />
+                 tabindex="2" class="passphrase-shown" />
+    </div>
+    <div class="login-input checkbox-container">
+      <label for="show-passphrase"> Show passphrase
+        <input type="checkbox" id="show-passphrase" checked="checked" 
+                  class="show-passphrase" />
+      </label>
     </div>
     <a class="button signupButton primary" tabindex="-1">Register</a>
-    <div class="middle backToLoginLink"><a class="backToLogin">Back to login &raquo;</a></div>
+    <div class="middle backToLoginLink">
+      <a class="backToLogin">Back to login &raquo;</a>
+    </div>
     <input type="submit" style="visibility:hidden" tabindex="-1"/>
   </form>
 </div>
-<div style="width:150px; margin:-10px auto; opacity:0.4;"><img style="width: 150px" src="img/zk.png" /></div>
+<div style="width:150px; margin:-10px auto; opacity:0.4;">
+  <img style="width: 150px" src="img/zk.png" /></div>

www/css/index.css

@@ -316,10 +316,51 @@ input[type="password"] {
   border-bottom-right-radius: 5px;
   border-bottom: none;
 }
+#newpassphrase {
+  -webkit-text-security: disc;
+  -moz-text-security: disc;
+  text-security: disc;
+}
+#newpassphrase.passphrase-shown {
+  -webkit-text-security: none;
+  -moz-text-security: none;
+  text-security: none;
+}
 div.login-input {
   -webkit-box-sizing: border-box;
   padding: 0 20px;
 }
+.login-input.checkbox-container {
+  height: 30px;
+  margin: 5px 0 0 0;
+  text-align: right;
+  line-height: 30px;
+}
+.login-input label {
+}
+.login-input input[type=checkbox] {
+  visibility: hidden;
+  margin: 0 10px 0 10px;
+}
+.login-input input[type=checkbox]:checked:after {
+  position: relative;
+  top: -3px;
+  color: #fff;
+  font-family: FontAwesome;
+  content: '\f058';
+  visibility: visible;
+  font-size: 25px;
+}
+.login-input input[type=checkbox]:after {
+  position: relative;
+  top: -3px;
+  color: #fff;
+  font-family: FontAwesome;
+  /*content: '\f10c';*/
+  content: '\f111';
+  visibility: visible;
+  font-size: 25px;
+}
 .signupLink,
 .backToLoginLink {
   margin-top: 20px;