Merge branch '4721-login-show-pswd' into 'develop'

add icon to show login password

See merge request cooperatic/kohinos-tav!34

assets/css/app.css

@@ -291,6 +291,45 @@ form[name="formEncaissement"] label {
     }
 }
 
+#login-password-container {
+    position: relative;
+}
+
+#show-login-password-icon {
+    cursor: pointer;
+    position: absolute;
+    right: 23px;
+    top: 7px;
+}
+
+#show-login-password-icon:hover + #show-login-text {
+    display: block;
+}
+
+#show-login-text {
+    position: absolute;
+    right: 16px;
+    top: 32px;
+    background-color: black;
+    color: white;
+    padding: 2px 12px;
+    border: 1px solid black;
+    border-radius: 6px;
+    text-align: center;
+    font-size: 0.95em;
+    display: none;
+}
+#show-login-text::after {
+    content: " ";
+    position: absolute;
+    bottom: 100%;  /* At the top of the tooltip */
+    left: 90%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent black transparent;
+}
+
 /**
  * END Success check animation.
  */
\ No newline at end of file

assets/js/app.js

@@ -548,6 +548,20 @@ $(function() {
     }
   });
 
+  $("#show-login-password-icon").on("click", () => {
+    let type = $("#login-password-container #password").prop("type");
+
+    if (type === "password") {
+      $("#login-password-container #password").prop("type", "input");
+      $("#login-password-container #show-login-text").text("Masquer le mot de passe");
+      $("#login-password-container #show-login-password-icon").removeClass("fa-eye").addClass("fa-eye-slash");
+    } else {
+      $("#login-password-container #password").prop("type", "password");
+      $("#login-password-container #show-login-text").text("Afficher le mot de passe");
+      $("#login-password-container #show-login-password-icon").removeClass("fa-eye-slash").addClass("fa-eye");
+    }
+  });
+
   /**
    * Display loader after validating Encaissement form
    */
@@ -559,7 +573,6 @@ $(function() {
     }
   })
 
-
   // $('.js-datepicker').datepicker({
   //     closeText: 'Fermer',
   //     prevText: '<Préc',
@@ -585,4 +598,4 @@ $(function() {
   //     showButtonPanel: true
   // });
 
-});
\ No newline at end of file
+});

public/build/entrypoints.json

@@ -3,10 +3,10 @@
     "app": {
       "js": [
         "/build/runtime.6ad5c9da.js",
-        "/build/app.e7b1f3b8.js"
+        "/build/app.1a688d7d.js"
       ],
       "css": [
-        "/build/app.8f9aaf53.css"
+        "/build/app.9c351632.css"
       ]
     },
     "admin": {

public/build/manifest.json

 {
-  "build/app.css": "/build/app.8f9aaf53.css",
-  "build/app.js": "/build/app.e7b1f3b8.js",
+  "build/app.css": "/build/app.9c351632.css",
+  "build/app.js": "/build/app.1a688d7d.js",
   "build/admin.css": "/build/admin.5dc0eea7.css",
   "build/admin.js": "/build/admin.cee4d78d.js",
   "build/runtime.js": "/build/runtime.6ad5c9da.js",

templates/themes/kohinos/common/login.html.twig

@@ -19,8 +19,10 @@
 		<div class='col-6 text-right'>
 		    <label for="password">{{ 'security.login.password'|trans }} :</label>
 		</div>
-		<div class='col-6 text-left'>
+		<div class='col-6 text-left' id="login-password-container">
 		    <input type="password" id="password" name="_password" required="required" class='d-block w-100' />
+			<i class="fas fa-eye" id="show-login-password-icon"></i>
+			<span id="show-login-text">Afficher le mot de passe</span>
 		</div>
 	</div>
 	<div class='row mt-4'>