Show/hide password function implemented

cps/static/css/style.css

@@ -506,3 +506,21 @@ body > div.container-fluid > div.row-fluid > div.col-sm-2::-webkit-scrollbar {
 body > div.container-fluid  {
   padding-right: 0px;
 }
+
+.input-group .form-control,
+.input-group .toggle-password {
+  height: 40px;
+}
+
+.input-group .toggle-password {
+  min-width: 40px;
+  width: 40px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.input-group .toggle-password .glyphicon {
+  font-size: 16px;
+  line-height: 1;
+  top: 0;
+}

cps/static/js/main.js

@@ -166,6 +166,28 @@ $("#form-upload-format").uploadprogress({
     modalTitleFailed: $("#form-upload-format").data("failed")
 });
 
+$(document).on('click', '.toggle-password', function (event) {
+    event.preventDefault();
+    var $button = $(this);
+    var selector = $button.data('target');
+    var $passwordInput = $(selector);
+    if (!$passwordInput.length) {
+        return;
+    }
+    var isPassword = $passwordInput.attr('type') === 'password';
+    $passwordInput.attr('type', isPassword ? 'text' : 'password');
+    var $icon = $button.find('.glyphicon');
+    if ($icon.length) {
+        $icon.toggleClass('glyphicon-eye-open', !isPassword);
+        $icon.toggleClass('glyphicon-eye-close', isPassword);
+    }
+    var label = isPassword ? _('Hide password') : _('Show password');
+    $button.attr({
+        'aria-label': label,
+        'title': label
+    });
+});
+
 $(document).ready(function() {
     var inp = $('#query').first()
     if (inp.length) {

cps/themes/caliblur/templates/login.html

@@ -11,7 +11,14 @@
     </div>
     <div class="form-group">
       <label for="password">{{_('Password')}}</label>
-      <input type="password" class="form-control" id="password" name="password" placeholder="{{_('Password')}}" value="{{ password }}">
+      <div class="input-group">
+        <input type="password" class="form-control" id="password" name="password" placeholder="{{_('Password')}}" value="{{ password }}">
+        <span class="input-group-btn">
+          <button type="button" class="btn btn-default toggle-password" data-target="#password" aria-label="{{_('Show password')}}" title="{{_('Show password')}}">
+            <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
+          </button>
+        </span>
+      </div>
     </div>
     <div class="checkbox">
       <label>

cps/themes/caliblur/templates/user_edit.html

@@ -168,7 +168,7 @@
       </div>
       <div class="modal-body">...</div>
       <div class="modal-footer">
-        <button type="button" id="kobo_close" class="btn btn-default" data-dismiss="modal">{{_('Close')}}</button>
+        <button type="button" id="kobo_close" class="btn btn-primary" data-dismiss="modal">{{_('Close')}}</button>
       </div>
     </div>
   </div>

cps/themes/standard/templates/login.html

@@ -11,7 +11,14 @@
     </div>
     <div class="form-group">
       <label for="password">{{_('Password')}}</label>
-      <input type="password" class="form-control" id="password" name="password" placeholder="{{_('Password')}}" value="{{ password }}">
+      <div class="input-group">
+        <input type="password" class="form-control" id="password" name="password" placeholder="{{_('Password')}}" value="{{ password }}">
+        <span class="input-group-btn">
+          <button type="button" class="btn btn-default toggle-password" data-target="#password" aria-label="{{_('Show password')}}" title="{{_('Show password')}}">
+            <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
+          </button>
+        </span>
+      </div>
     </div>
     <div class="checkbox">
       <label>