[showpassword] make passwork icon clickable to CHANGE state

Author: xeroc

app.js

@@ -67,12 +67,16 @@ $('input[name=name]').keyup(processKeyPress);
 $('input[name=password]').keyup(processKeyPress);
 $('input[name=passwordConfirm]').keyup(processKeyPress);
 
-$(".glyphicon-eye-open").mousedown(function(){
- $(this).prev().attr('type','text');
-}).mouseup(function(){
- $(this).prev().attr('type','password');
-}).mouseout(function(){
- $(this).prev().attr('type','password');
+$(".showpwdicon").click(function(){
+ if ($(this).prev().attr('type') == "text") {
+  $(this).prev().attr('type','password');
+  $(this).addClass('glyphicon-eye-open')
+  $(this).removeClass('glyphicon-eye-close')
+ } else {
+  $(this).prev().attr('type','text');
+  $(this).addClass('glyphicon-eye-close')
+  $(this).removeClass('glyphicon-eye-open')
+ }
 });
 
 $("#printBtn").click(function() {

dist/index.html

@@ -59,14 +59,14 @@ <h3 class="panel-title">Plaintext Password</h3>
       <label><i class="fa fa-key"></i> Password</label>
       <div class="password">
        <input class="form-control" class="form-control" type=password name="password" />
-       <span class="glyphicon glyphicon-eye-open"></span>
+       <span class="glyphicon glyphicon-eye-open showpwdicon"></span>
       </div>
      </div>
      <div class="form-group">
       <label><i class="fa fa-key"></i> Confirm Password</label>
       <div class="password">
        <input class="form-control" class="form-control" type=password name="passwordConfirm" />
-       <span class="glyphicon glyphicon-eye-open"></span>
+       <span class="glyphicon glyphicon-eye-open showpwdicon"></span>
       </div>
      </div>
      <div class="form-group hidden-print result">