Allow to display password value in login form (#2454)

lemonldap-ng-portal/lib/Lemonldap/NG/Portal/Main/Display.pm

@@ -396,6 +396,7 @@ sub display {
                 ? ( CUSTOM_SCRIPT => $req->data->{customScript} )
                 : ()
             ),
+            ENABLE_PASSWORD_DISPLAY => $self->conf->{portalEnablePasswordDisplay},
         );
 
         # Display captcha if it's enabled

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

@@ -515,6 +515,14 @@ $(window).on 'load', () ->
 	if window.datas.ppolicy? and $('#newpassword').length
 		$('#reset').change togglecheckpassword
 
+	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");
+
 	# Ping if asked
 	if datas['pingInterval'] and datas['pingInterval'] > 0
 		window.setTimeout ping, datas['pingInterval']
@@ -577,4 +585,4 @@ $(window).on 'load', () ->
 				console.log 'Error', err  if err
 				res = JSON.parse j.responseText if j
 				if res and res.error
-					console.log 'Returned error', res
+					console.log 'Returned error', res

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

@@ -561,6 +561,16 @@ LemonLDAP::NG Portal jQuery scripts
     if ((window.datas.ppolicy != null) && $('#newpassword').length) {
       $('#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['pingInterval'] && datas['pingInterval'] > 0) {
       window.setTimeout(ping, datas['pingInterval']);
     }

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

@@ -20,6 +20,11 @@
       <input id="passwordfield" name="password" type="text" class="form-control key" autocomplete="off" required aria-required="true" aria-hidden="true"/>
     <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>
+      </TMPL_IF>
     </TMPL_IF>
   </div>
 

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

@@ -26,7 +26,7 @@
  "scriptname":"<TMPL_VAR NAME="SCRIPT_NAME">",
  "activeTimer":<TMPL_VAR NAME="ACTIVE_TIMER" DEFAULT="0">,
  "pingInterval":<TMPL_VAR NAME="PING" DEFAULT="0">,
- "trOver":<TMPL_VAR NAME="TROVER" DEFAULT="[]"><TMPL_IF NAME="DISPLAY_PPOLICY">,
+ "trOver":<TMPL_VAR NAME="TROVER" DEFAULT="[]">,<TMPL_IF NAME="DISPLAY_PPOLICY">
  "ppolicy": {
             "display": "<TMPL_VAR NAME="DISPLAY_PPOLICY" DEFAULT="0">",
             "minsize": "<TMPL_VAR NAME="PPOLICY_MINSIZE" DEFAULT="0">",
@@ -36,7 +36,8 @@
             "nopolicy": "<TMPL_VAR NAME="PPOLICY_NOPOLICY" DEFAULT="0">",
             "allowedspechar": "<TMPL_VAR NAME="PPOLICY_ALLOWEDSPECHAR" ESCAPE="js" DEFAULT="">",
             "minspechar": "<TMPL_VAR NAME="PPOLICY_MINSPECHAR" DEFAULT="0">"
-            }</TMPL_IF>
+            },</TMPL_IF>
+ "enablePasswordDisplay":<TMPL_VAR NAME="ENABLE_PASSWORD_DISPLAY" DEFAULT="0">
  }
  </script>