* 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);
+    });
+});