* Fri Jan 17 2025 Brian Read <brianr@koozali.org> 11.0.0-42.sme

- Implement password visibility icon - [SME: 12803]

root/usr/share/smanager/themes/default/public/css/sme-password.css

@@ -0,0 +1,17 @@
+/* css/sme-password.css */
+.input-container {
+    position: relative;
+    display: inline-block;
+}
+.sme-password {
+    padding-right: 5px; /* Ensure space for the toggle icon */
+}
+.toggle-password {
+    position: absolute;
+    right: 4px; /* Position it towards the right */
+    top: 50%; /* Center vertically */
+    transform: translateY(-50%); /* Adjust for exact centering */
+    cursor: pointer;
+    width: 20px; /* Set the width of the icon */
+    height: 20px; /* Set the height of the icon */
+}

root/usr/share/smanager/themes/default/public/js/sme-password.js

@@ -0,0 +1,31 @@
+// js/sme-password.js
+$(document).ready(function() {
+    // For each password input
+    $('.sme-password').each(function() {
+        // Create a new container
+        //alert("sme-password");
+        var $inputContainer = $('<div class="input-container"></div>');
+        
+        // Move the input into the new container
+        $(this).wrap($inputContainer);
+        
+        // Create the toggle image
+        var $togglePassword = $('<img src="images/visible.png" alt="Show Password" class="toggle-password" />');
+        
+        // Append the toggle image to the container
+        $(this).after($togglePassword);
+    });
+
+    $('.toggle-password').on('click', function() {
+        // Find the associated password field
+        var input = $(this).siblings('.sme-password');
+
+        // Toggle the type attribute between password and text
+        var inputType = input.attr('type') === 'password' ? 'text' : 'password';
+        input.attr('type', inputType);
+        
+        // Toggle the icon source based on the input type
+        var iconSrc = inputType === 'password' ? 'images/visible.png' : 'images/visible-slash.png';
+        $(this).attr('src', iconSrc);
+    });
+});

root/usr/share/smanager/themes/default/templates/layouts/default.html.ep

@@ -11,6 +11,7 @@
     %= stylesheet '/css/sme_main.css'
     %= stylesheet '/css/sme_menu.css'
     %= stylesheet '/css/styles.css'
+    %= stylesheet '/css/sme-password.css'
     %= content_for 'head_contrib'
     % if (config 'hasJquery') {
 	%= include 'partials/_js_imports'
@@ -32,6 +33,7 @@
 	%= javascript '/js/buttons.html5.min.js'
 	%= javascript '/js/buttons.print.min.js'
 	%= javascript '/js/flag-by-locale.js'
+	%= javascript '/js/sme-password.js'
 
 	<link rel="stylesheet" href="/smanager/css/flag-icon.min.css">
 	%= stylesheet '/css/sme-jquery-overrides.css'

root/usr/share/smanager/themes/default/templates/login.html.ep

@@ -43,9 +43,9 @@
     <p><span class=label>
     %=l 'PASSWORD'
     </span><span class=input>
-    %= password_field 'Password', id => 'id_password', autocomplete => 'current-password'
+    %= password_field 'Password', id => 'id_password', autocomplete => 'current-password', class=>'sme-password'
     % if (config 'hasJquery') {
-	<a href='#' id='togglePassword' class='toggle-password tg-icon'> <img src="images/visible.png" height="16" alt="Visible"></a>
+	%#<a href='#' id='togglePassword' class='toggle-password tg-icon'> <img src="images/visible.png" height="16" alt="Visible"></a>
     % }
     </span></p>
 %}

root/usr/share/smanager/themes/default/templates/partials/_iba_pwd.html.ep

@@ -17,7 +17,7 @@
 	<span class=label>
 	%=l 'PASSWORD_NEW', class => 'label'
 	</span><span class=data>
-	%= password_field 'newPass', class => 'input'
+	%= password_field 'newPass', class => 'input' , class=>'sme-password'
 	</span>
 	</p>
 
@@ -25,7 +25,7 @@
 	<span class=label>
 	%=l 'PASSWORD_VERIFY_NEW', class => 'label'
 	</span><span class=data>
-	%= password_field 'newPassVerify', class => 'input'
+	%= password_field 'newPassVerify', class => 'input', class=>'sme-password'
 	</span>
 	</p>
 

root/usr/share/smanager/themes/default/templates/partials/_js_imports.html.ep

@@ -1,5 +1,5 @@
 
-<!--*** toggle hide/unhide password field in login panel ***-->
+<!--*** toggle hide/unhide password field in login panel ***
 
 % content_for 'js_togglePassword' => begin
   %= javascript begin
@@ -22,7 +22,7 @@
 
   % end
 % end
-
+-->
 
 <!--*** toggle hide/unhide menu contents navigation menu ***-->
 

root/usr/share/smanager/themes/default/templates/partials/_usr_pwd.html.ep

@@ -18,7 +18,7 @@
 	<span class=label>
 	%=l 'PASSWORD_NEW', class => 'label'
 	</span><span class=data>
-	%= password_field 'newPass', class => 'input'
+	%= password_field 'newPass', class => 'input', class=>'sme-password'
 	</span>
 	</p>
 
@@ -26,7 +26,7 @@
 	<span class=label>
 	%=l 'PASSWORD_VERIFY_NEW', class => 'label'
 	</span><span class=data>
-	%= password_field 'newPassVerify', class => 'input'
+	%= password_field 'newPassVerify', class => 'input', class=>'sme-password'
 	</span>
 	</p>
 

root/usr/share/smanager/themes/default/templates/partials/_usr_pwds.html.ep

@@ -11,7 +11,7 @@
 	<span class=label>
 	%=l 'usr_CURRENT_SYSTEM_PASSWORD', class => 'label'
 	</span><span class=data>
-	%= password_field 'CurPass', class => 'input'
+	%= password_field 'CurPass', class => 'input', class=>'sme-password'
 	</span>
 	</p>
 
@@ -19,7 +19,7 @@
 	<span class=label>
 	%=l 'usr_NEW_SYSTEM_PASSWORD', class => 'label'
 	</span><span class=data>
-	%= password_field 'Pass', class => 'input'
+	%= password_field 'Pass', class => 'input', class=>'sme-password'
 	</span>
 	</p>
 
@@ -27,7 +27,7 @@
 	<span class=label>
 	%=l 'usr_NEW_SYSTEM_PASSWORD_VERIFY', class => 'label'
 	</span><span class=data>
-	%= password_field 'PassVerify', class => 'input'
+	%= password_field 'PassVerify', class => 'input', class=>'sme-password'
 	</span>
 	</p>
 

root/usr/share/smanager/themes/default/templates/userpassword.html.ep

@@ -47,7 +47,7 @@
 	<p><span class=label>
 	%= l 'pwd_PASSWORD_OLD'
 	</span><span class=data>
-	%= password_field 'Oldpass', class => 'input' 
+	%= password_field 'Oldpass', class => 'input', class=>'sme-password'
 	</span>
 	<br><br></p>
     % }
@@ -55,14 +55,14 @@
 	<p><span class=label>
 	%=l 'pwd_PASSWORD_NEW'
 	</span><span class=data>
-	%= password_field 'Pass', class => 'input'
+	%= password_field 'Pass', class => 'input', class=>'sme-password'
 	</span>
 	<br><br></p>
 
 	<p><span class=label>
 	%=l 'pwd_PASSWORD_VERIFY_NEW'
 	</span><span class=data>
-	%= password_field 'Passverify', class => 'input'
+	%= password_field 'Passverify', class => 'input', class=>'sme-password'
 	</span>
 	<br><br></p>
 

smeserver-manager.spec

@@ -2,7 +2,7 @@ Summary: Sme server  navigation module : manager 2
 %define name smeserver-manager
 Name: %{name}
 %define version 11.0.0
-%define release 41
+%define release 42
 Version: %{version}
 Release: %{release}%{?dist}
 License: GPL
@@ -115,6 +115,9 @@ true
 %defattr(-,root,root)
 
 %changelog
+* Fri Jan 17 2025 Brian Read <brianr@koozali.org> 11.0.0-42.sme
+- Implement password visibility icon - [SME: 12803]
+
 * Wed Jan 15 2025 Brian Read <brianr@koozali.org> 11.0.0-41.sme
 - Add journal files to those not viewable [SME: 12870]