login: add a way to display the password

* Closes rero#2033. Co-Authored-by: Bertrand Zuchuat <[email protected]>
Garfield-fr · Mar 6, 2023 · 2accdbc · 2accdbc
1 parent 76abf36
commit 2accdbc
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 8 deletions.
diff --git a/rero_ils/manual_translations.txt b/rero_ils/manual_translations.txt
@@ -1,5 +1,5 @@
 # RERO ILS
-# Copyright (C) 2019-2022 RERO
+# Copyright (C) 2019-2023 RERO
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License as published by
@@ -85,3 +85,7 @@ _('standing_order')
 _('monographic_set')
 _('planned_order')
 _('multi_volume')
+
+
+# Login screen
+_('Hide password')
diff --git a/rero_ils/theme/assets/js/reroils/login.js b/rero_ils/theme/assets/js/reroils/login.js
@@ -1,7 +1,7 @@
 /*
 
 RERO ILS
-Copyright (C) 2020 RERO
+Copyright (C) 2020-2023 RERO
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
@@ -47,6 +47,22 @@ $("#login-user").submit(function (e) {
   });
 });
 
+$('#password-show-hide').on('click', function() {
+  var type = 'password' == $('#password').attr('type') ? 'text': 'password';
+  $('#password').attr('type', type);
+  if ('text' == type) {
+    $('#password-show-hide-icon')
+      .attr('title', 'Hide password')
+      .removeClass('fa-eye')
+      .addClass('fa-eye-slash');
+  } else {
+    $('#password-show-hide-icon')
+      .attr('title', 'Show password')
+      .removeClass('fa-eye-slash')
+      .addClass('fa-eye');
+  }
+});
+
 var getUrlParameter = function getUrlParameter(sParam) {
   var sPageURL = window.location.search.substring(1),
     sURLVariables = sPageURL.split('&'),

diff --git a/rero_ils/theme/assets/scss/rero_ils/styles.scss b/rero_ils/theme/assets/scss/rero_ils/styles.scss
@@ -188,3 +188,8 @@ div.tooltip div.tooltip-inner{
   outline:none;
   box-shadow:none;
 }
+
+
+#password-show-hide-icon:hover {
+  cursor: pointer;
+}
diff --git a/rero_ils/theme/templates/rero_ils/macros/macro.html b/rero_ils/theme/templates/rero_ils/macros/macro.html
@@ -1,7 +1,7 @@
 {# -*- coding: utf-8 -*-
 
   RERO ILS
-  Copyright (C) 2019 RERO
+  Copyright (C) 2019-2023 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -171,13 +171,21 @@
   <div class="input-group {{size}}{% if icon %} has-feedback{% endif %}{% if field.errors %} has-error{% endif %} mb-2">
     {%- set extras = dict(autofocus="") if autofocus else dict() %}
     {{field(class_="form-control", placeholder=placeholder, **extras)}}
-    {%- if icon %}
+    {%- if icon and field.id != 'password' %}
     <div class="input-group-append">
-    <span class="input-group-text">
-      <i class="{{icon}} form-control-feedback" aria-hidden="true" ></i>
-    </span>
-  </div>
+      <span class="input-group-text">
+        <i class="{{icon}} form-control-feedback" aria-hidden="true"></i>
+      </span>
+    </div>
     {%- endif%}
+
+    {% if field.id == 'password' %}
+    <div class="input-group-append">
+      <span id="password-show-hide" class="input-group-text">
+        <small><i id="password-show-hide-icon" class="fa fa-eye form-control-feedback" aria-hidden="true" title="{{ _('Show password') }}"></i></small>
+      </span>
+    </div>
+    {% endif %}
   </div>
   {%- if field.errors and errormsg %}
   <div class="text-danger text-left" role="alert">