Allow to display password with dontStorePassword option & Update unit test (#2454)

lemonldap-ng-portal/site/coffee/portal.coffee

@@ -515,13 +515,22 @@ $(window).on 'load', () ->
 	if window.datas.ppolicy? and $('#newpassword').length
 		$('#reset').change togglecheckpassword
 
+	# Functions to show/hide display password button
 	if datas['enablePasswordDisplay']
-		$(".toggle-password").mousedown (e) ->
-			$(this).toggleClass("fa-eye fa-eye-slash")
-			$("input[name=password]").attr("type", "text")
-		$(".toggle-password").mouseup (e) ->
-			$(this).toggleClass("fa-eye fa-eye-slash")
-			$("input[name=password]").attr("type", "password")
+		if datas['dontStorePassword']
+			$(".toggle-password").mousedown () ->
+				$(this).toggleClass("fa-eye fa-eye-slash")
+				$("input[name=password]").attr('class', 'form-control')
+			$(".toggle-password").mouseup () ->
+				$(this).toggleClass("fa-eye fa-eye-slash")
+				$("input[name=password]").attr('class', 'form-control key') if $("input[name=password]").get(0).value 
+		else
+			$(".toggle-password").mousedown () ->
+				$(this).toggleClass("fa-eye fa-eye-slash")
+				$("input[name=password]").attr("type", "text")
+			$(".toggle-password").mouseup () ->
+				$(this).toggleClass("fa-eye fa-eye-slash")
+				$("input[name=password]").attr("type", "password")
 
 	# Ping if asked
 	if datas['pingInterval'] and datas['pingInterval'] > 0
@@ -537,7 +546,7 @@ $(window).on 'load', () ->
 
 	# Functions to show/hide change password inputs
 	$('#show-hide-button').on 'click', () ->
-		if $("#newpassword").attr('autocomplete') == 'off'
+		if datas['dontStorePassword']
 			if  $("#newpassword").attr('class') == 'form-control key' || $("#confirmpassword").attr('class') == 'form-control key'
 				console.log 'Show passwords'
 				$("#newpassword").attr('class', 'form-control')
@@ -562,22 +571,22 @@ $(window).on 'load', () ->
 
 	# Functions to show/hide placeholder password inputs
 	$('#passwordfield').on 'input', () ->
-		if $('#passwordfield').get(0).value && $("#passwordfield").attr('autocomplete') == 'off'
+		if $('#passwordfield').get(0).value && datas['dontStorePassword']
 			$("#passwordfield").attr('class', 'form-control key')
 		else
 			$("#passwordfield").attr('class', 'form-control')
 	$('#oldpassword').on 'input', () ->
-		if $('#oldpassword').get(0).value && $('#oldpassword').attr('autocomplete') == 'off'
+		if $('#oldpassword').get(0).value && datas['dontStorePassword']
 			$("#oldpassword").attr('class', 'form-control key')
 		else
 			$("#oldpassword").attr('class', 'form-control')
 	$('#newpassword').on 'input', () ->
-		if $('#newpassword').get(0).value && $('#newpassword').attr('autocomplete') == 'off'
+		if $('#newpassword').get(0).value && datas['dontStorePassword']
 			$("#newpassword").attr('class', 'form-control key') if $("#show-hide-icon-button").attr('class') == 'fa fa-eye'
 		else
 			$("#newpassword").attr('class', 'form-control')
 	$('#confirmpassword').on 'input', () ->
-		if $('#confirmpassword').get(0).value && $('#confirmpassword').attr('autocomplete') == 'off'
+		if $('#confirmpassword').get(0).value && datas['dontStorePassword']
 			$("#confirmpassword").attr('class', 'form-control key') if $("#show-hide-icon-button").attr('class') == 'fa fa-eye'
 		else
 			$("#confirmpassword").attr('class', 'form-control')

lemonldap-ng-portal/site/htdocs/static/common/js/portal.js

@@ -562,14 +562,27 @@ LemonLDAP::NG Portal jQuery scripts
       $('#reset').change(togglecheckpassword);
     }
     if (datas['enablePasswordDisplay']) {
-      $(".toggle-password").mousedown(function(e) {
-        $(this).toggleClass("fa-eye fa-eye-slash");
-        return $("input[name=password]").attr("type", "text");
-      });
-      $(".toggle-password").mouseup(function(e) {
-        $(this).toggleClass("fa-eye fa-eye-slash");
-        return $("input[name=password]").attr("type", "password");
-      });
+      if (datas['dontStorePassword']) {
+        $(".toggle-password").mousedown(function() {
+          $(this).toggleClass("fa-eye fa-eye-slash");
+          return $("input[name=password]").attr('class', 'form-control');
+        });
+        $(".toggle-password").mouseup(function() {
+          $(this).toggleClass("fa-eye fa-eye-slash");
+          if ($("input[name=password]").get(0).value) {
+            return $("input[name=password]").attr('class', 'form-control key');
+          }
+        });
+      } else {
+        $(".toggle-password").mousedown(function() {
+          $(this).toggleClass("fa-eye fa-eye-slash");
+          return $("input[name=password]").attr("type", "text");
+        });
+        $(".toggle-password").mouseup(function() {
+          $(this).toggleClass("fa-eye fa-eye-slash");
+          return $("input[name=password]").attr("type", "password");
+        });
+      }
     }
     if (datas['pingInterval'] && datas['pingInterval'] > 0) {
       window.setTimeout(ping, datas['pingInterval']);
@@ -583,7 +596,7 @@ LemonLDAP::NG Portal jQuery scripts
       return removeOidcConsent($(this).attr('partner'));
     });
     $('#show-hide-button').on('click', function() {
-      if ($("#newpassword").attr('autocomplete') === 'off') {
+      if (datas['dontStorePassword']) {
         if ($("#newpassword").attr('class') === 'form-control key' || $("#confirmpassword").attr('class') === 'form-control key') {
           console.log('Show passwords');
           $("#newpassword").attr('class', 'form-control');
@@ -616,21 +629,21 @@ LemonLDAP::NG Portal jQuery scripts
       }
     });
     $('#passwordfield').on('input', function() {
-      if ($('#passwordfield').get(0).value && $("#passwordfield").attr('autocomplete') === 'off') {
+      if ($('#passwordfield').get(0).value && datas['dontStorePassword']) {
         return $("#passwordfield").attr('class', 'form-control key');
       } else {
         return $("#passwordfield").attr('class', 'form-control');
       }
     });
     $('#oldpassword').on('input', function() {
-      if ($('#oldpassword').get(0).value && $('#oldpassword').attr('autocomplete') === 'off') {
+      if ($('#oldpassword').get(0).value && datas['dontStorePassword']) {
         return $("#oldpassword").attr('class', 'form-control key');
       } else {
         return $("#oldpassword").attr('class', 'form-control');
       }
     });
     $('#newpassword').on('input', function() {
-      if ($('#newpassword').get(0).value && $('#newpassword').attr('autocomplete') === 'off') {
+      if ($('#newpassword').get(0).value && datas['dontStorePassword']) {
         if ($("#show-hide-icon-button").attr('class') === 'fa fa-eye') {
           return $("#newpassword").attr('class', 'form-control key');
         }
@@ -639,7 +652,7 @@ LemonLDAP::NG Portal jQuery scripts
       }
     });
     $('#confirmpassword').on('input', function() {
-      if ($('#confirmpassword').get(0).value && $('#confirmpassword').attr('autocomplete') === 'off') {
+      if ($('#confirmpassword').get(0).value && datas['dontStorePassword']) {
         if ($("#show-hide-icon-button").attr('class') === 'fa fa-eye') {
           return $("#confirmpassword").attr('class', 'form-control key');
         }

lemonldap-ng-portal/site/templates/bootstrap/standardform.tpl

@@ -18,12 +18,17 @@
     </div>
     <TMPL_IF NAME="DONT_STORE_PASSWORD">
       <input id="passwordfield" name="password" type="text" class="form-control" trplaceholder="password" autocomplete="off" required aria-required="true" aria-hidden="true"/>
+      <TMPL_IF NAME="ENABLE_PASSWORD_DISPLAY">
+        <div class="input-group-append">
+          <span class="input-group-text"><i class="fa fa-eye-slash toggle-password"></i></span>
+        </div>
+      </TMPL_IF>
     <TMPL_ELSE>
       <input id="passwordfield" name="password" type="password" class="form-control" trplaceholder="password" required aria-required="true"/>
       <TMPL_IF NAME="ENABLE_PASSWORD_DISPLAY">
-      <div class="input-group-append">
-        <span class="input-group-text"><i class="fa fa-eye-slash toggle-password"></i></span>
-      </div>
+        <div class="input-group-append">
+          <span class="input-group-text"><i class="fa fa-eye-slash toggle-password"></i></span>
+        </div>
       </TMPL_IF>
     </TMPL_IF>
   </div>

lemonldap-ng-portal/site/templates/common/script.tpl

@@ -37,7 +37,8 @@
             "allowedspechar": "<TMPL_VAR NAME="PPOLICY_ALLOWEDSPECHAR" ESCAPE="js" DEFAULT="">",
             "minspechar": "<TMPL_VAR NAME="PPOLICY_MINSPECHAR" DEFAULT="0">"
             },</TMPL_IF>
- "enablePasswordDisplay":<TMPL_VAR NAME="ENABLE_PASSWORD_DISPLAY" DEFAULT="0">
+ "enablePasswordDisplay":<TMPL_VAR NAME="ENABLE_PASSWORD_DISPLAY" DEFAULT="0">,
+ "dontStorePassword":<TMPL_VAR NAME="DONT_STORE_PASSWORD" DEFAULT="0">
  }
  </script>
 

lemonldap-ng-portal/t/01-EnablePasswordDisplay.t

@@ -5,11 +5,18 @@ require 't/test-lib.pm';
 
 my $res;
 
-my $client = LLNG::Manager::Test->new(
-    { ini => { logLevel => 'error', 'portalEnablePasswordDisplay' => 1 } } );
+my $client = LLNG::Manager::Test->new( {
+        ini => {
+            logLevel                      => 'error',
+            'portalEnablePasswordDisplay' => 1,
+            'browsersDontStorePassword'   => 1
+        }
+    }
+);
 
 ok( $res = $client->_get( '/', accept => 'text/html' ), 'Display portal' );
-ok( $res->[2]->[0] =~ m%<i class="fa fa-eye-slash toggle-password">%, ' toggle password icon found' )
+ok( $res->[2]->[0] =~ m%<i class="fa fa-eye-slash toggle-password">%,
+    ' toggle password icon found' )
   or print STDERR Dumper( $res->[2]->[0] );
 count(2);