smeserver/smeserver-manager
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
- Implement password visibility icon - [SME: 12803]
This commit is contained in:
Brian Read 2025-01-17 12:04:36 +00:00
parent 9b03d377e2
commit ec4f515012
12 changed files with 75 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
root/usr/share/smanager/themes/default/public/css/sme-password.css Normal file
View File

@ -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 */
}

BIN
root/usr/share/smanager/themes/default/public/images/visible-slash.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
root/usr/share/smanager/themes/default/public/images/visible.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

31
root/usr/share/smanager/themes/default/public/js/sme-password.js Normal file
View File

@ -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);
});
});

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

@ -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'
@ -125,4 +127,4 @@
</body>
</html>
</html>

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

@ -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>
%}
@ -66,4 +66,4 @@
% end
</div>
%end
%end

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

@ -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>
@ -39,4 +39,4 @@
% end
</div>
</div>

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

@ -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 ***-->
@ -98,4 +98,4 @@
});
% end
% end
% end

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

@ -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>
@ -41,4 +41,4 @@
% end
</div>
</div>

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

@ -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>
@ -42,4 +42,4 @@
% end
</div>
</div>

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

@ -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>
@ -75,4 +75,4 @@
</div>
% end
% end

5
smeserver-manager.spec
View File

@ -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]