Work on multi password fix

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

@@ -20,3 +20,75 @@ $(document).ready(function () {
     });
   }
 });
+
+$(document).ready(function () {
+
+  // Get the fields
+  const toggle = document.querySelector("#togglePasswords");
+  const passwords = document.querySelectorAll('[type="password"]');
+
+
+  // listen for click events on the toggle
+  toggle.addEventListener("click", function () {
+    // loop through each password field
+    for (let password of passwords) {
+      // if toggle is checked, change type to "text"
+      // otherwise, change it back to "password"
+      if (toggle.checked) {
+        password.type = "text";
+      } else {
+        password.type = "password";
+      }
+    }
+  });
+
+});
+
+$(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 () {
+
+    alert("toggle-password");
+    // 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);
+
+    const type = password.getAttribute("type") === "password" ? "text" : "password";
+
+    password.setAttribute("type", type);
+    // toggle the eye icon
+    if (type === "text") {
+      $(this).removeClass("bi-eye");
+      $(this).addClass("bi-eye-slash");
+    } else {
+      $(this).removeClass("bi-eye-slash");
+      $(this).addClass("bi-eye");
+    }
+
+  });
+
+});
+
+

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

@@ -4,19 +4,19 @@
 
 <div class="card-body">
 
-    % if (config->{debug} == 1) {
+    % if (config->{debug} == 0) {
-    <p>
+        <pre>
-    %= dumper $c->current_route
+            <%= dumper $c->current_route %>
-    %= dumper $pwd_datas
+            <%= dumper $pwd_datas %>
-    </p>
+        </pre>
     % }
 
     <h2><%= l 'pwd_ACCOUNT_PASSWORD_CHANGE' %></h2>
 
     % if ( stash 'error' ) {
         <br>
-        <div>
+        <div CLASS="text-danvgr">
-            %= $c->render_to_string(inline => stash 'error')
+            <%= $c->render_to_string(inline => stash 'error') %>
         </div>
     % }
 
@@ -25,96 +25,94 @@
     % my $url = '/userpassword';
 
     <div>
-        %= $c->render_to_string( inline => l('pwd_DESCRIPTION'));
+        <%= $c->render_to_string( inline => l('pwd_DESCRIPTION')); %>
     </div>
 
     % if ( $pwd_datas->{trt} eq 'RESET' ) {
         % my $btn = l('pwd_PASSWORD_RESET');
         % my $url = '/userpasswordr';
-    %= $c->render_to_string( inline => l('pwd_DESCRIPTION_RESET'));
+        <%= $c->render_to_string( inline => l('pwd_DESCRIPTION_RESET')); %>
     % }
 
    <br>
 
-    <!-- Start of Form -->
-    %= form_for $url => (method => 'POST') => begin
 
-    <table class="table table-bordered user-table-max-wdith">
+    <!-- Start of Form -->
-        <thead>
+
-            <tr>
+    <form action="smanager/userpassword" method="POST">
-                <th class="col-sm">
+
-                    %= l 'pwd_YOUR_ACCOUNT'
+        <div class="row g-3 align-items-center">
-                </th>
+            <div class="col-md-1">
-                <th class="col-sm">
+                <label for="YourAccount" class="col-form-label"><%= l 'pwd_YOUR_ACCOUNT' %></label>
-                    %=l 'USER_NAME'
+            </div>
-                </th>
+            <div class="col-auto">
-            </tr>
+                <input type="text" name="Account" id="YourAccount" class="form-control-plaintext" value="<%= $pwd_datas->{Account} %>" readonly>
-        </thead>
+            </div>
-        <tbody>
+        </div>
-            <tr>
-                <td><%= $pwd_datas->{Account} %></td>
-                <td><%= $pwd_datas->{name} %>Not in pwd_datas-> name ? :-( </td>
-           </tr>
-       </tbody>
-    </table>
 
         <br>
 
         % if ( $pwd_datas->{trt} ne 'RESET' ) {
-        <div>
-        <%= l 'pwd_PASSWORD_OLD' %>
-        </div>
-
-        <br>
-
             <div class="row g-3 align-items-center">
-            <div class="col-md-2">
+                <div class="col-md-1">
-            <input name="OldPass" id="OldPass" type="password" class="form-control sme-password" placeholder="Password">
+                    <label for="OldPass" class="col-form-label"><%= l 'pwd_PASSWORD_OLD' %></label>
+                </div>
+                <div class="col-auto">
+                    <input name="OldPass" type="password" id="OldPass" class="form-control" placeholder="Old Password">
+                </div>
+                <div class="col-auto">
+                    <span id="togglePasswordVerify" class="bi bi-eye"></span>
                 </div>
             </div>
+            <br>
         % }
 
-    <br>
+        <div class="row g-3 align-items-center">
-
+            <div class="col-md-1">
-    <div>
+                <label for="Pass" class="col-form-label"><%= l 'pwd_PASSWORD_NEW' %></label>
-    <%= l 'pwd_PASSWORD_NEW' %>
+            </div>
+            <div class="col-auto">
+                <input name="Pass" type="password" id="Pass" class="form-control" placeholder="New Password">
+            </div>
+            <div class="col-auto">
+                <span id="togglePasswordVerify" class="bi bi-eye"></span>
+            </div>
         </div>
 
         <br>
 
-    <div class="row g-3 align-items-center">
+        <div class="row g-3 align-items-center sme-password">
-        <div class="col-md-2">
+            <div class="col-md-1">
-        <input name="Pass" id="Pass" type="password" class="form-control sme-password" placeholder="Password">
+                <label for="PassVerify" class="col-form-label"><%=l 'pwd_PASSWORD_VERIFY_NEW' %></label>
+            </div>
+            <div class="col-auto">
+                <input name="Passverify" type="password" id="PassVerify" class="form-control" placeholder="Verify Password">
+            </div>
+            <div class="col-auto">
+                <span id="togglePassword" class="bi bi-eye"></span>
             </div>
         </div>
 
         <br>
 
         <div>
-    %=l 'pwd_PASSWORD_VERIFY_NEW'
+        Show All Passwords Test
+            <span id="togglePasswords" class="bi bi-eye"></span>
         </div>
 
         <br>
 
-    <div class="row g-3 align-items-center">
+        <%= hidden_field 'User' => $pwd_datas->{Account} %>
-        <div class="col-md-2">
+        <%= hidden_field 'Trt' => $pwd_datas->{trt} %>
-        <input name="Passverify" id="PassVerify" type="password" class="form-control sme-password" placeholder="Password">
+        <%= hidden_field 'jwt' => $pwd_datas->{jwt} %>
-        </div>
-    </div>
-
-    <br>
 
         <div class="row g-3 align-items-center">
-        <div class="col-md-2">
+            <div class="col-md-1">
                 <button type="submit" class="btn btn-primary btn-sm"><%= $btn %></button>
             </div>
         </div>
 
-    %= hidden_field 'User' => $pwd_datas->{Account}
+    </form>
-    %= hidden_field 'Trt' => $pwd_datas->{trt}
-    %= hidden_field 'jwt' => $pwd_datas->{jwt}
-
-    % end
     <!-- End of Form -->
 
 </div>

smeserver-manager-AdminLTE.spec

@@ -1,6 +1,6 @@
 %define name smeserver-manager-AdminLTE
 %define version 11.0.0
-%define release 46
+%define release 47
 
 Summary: AdminLTE is an html framework for admin consoles - this rpm adds it to smeserver manager2
 Name: %{name}
@@ -17,7 +17,7 @@ BuildArchitectures: noarch
 BuildRoot: /var/tmp/%{name}-%{version}-%{release}-buildroot
 BuildRequires: smeserver-devtools
 Requires: smeserver-release >= 11.0
-Requires: smeserver-manager >= 11.0.0-101
+Requires: smeserver-manager >= 11.0.0-104
 Requires: smeserver-lib >= 11.0.0-13
 Requires: e-smith-manager >= 2.4.0-22
 
@@ -29,6 +29,9 @@ AdminLTE is an html framework for admin consoles
 wget https://github.com/ColorlibHQ/AdminLTE/archive/master.zip
 
 %changelog
+* Tue Jul 08 2025 John Crisp <jcrisp@safeandsoundit.co.uk> 11.0.0-47.sme
+- Working on multipassword show/hide
+
 * Mon Jul 07 2025 John Crisp <jcrisp@safeandsoundit.co.uk> 11.0.0-46.sme
 - Too fast on the build button and missed some files