diff --git a/root/usr/share/smanager/themes/default/public/css/sme-password.css b/root/usr/share/smanager/themes/default/public/css/sme-password.css new file mode 100644 index 0000000..62e1bf3 --- /dev/null +++ b/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 */ +} \ No newline at end of file diff --git a/root/usr/share/smanager/themes/default/public/images/visible-slash.png b/root/usr/share/smanager/themes/default/public/images/visible-slash.png new file mode 100644 index 0000000..001c465 Binary files /dev/null and b/root/usr/share/smanager/themes/default/public/images/visible-slash.png differ diff --git a/root/usr/share/smanager/themes/default/public/images/visible.png b/root/usr/share/smanager/themes/default/public/images/visible.png new file mode 100644 index 0000000..b53ec92 Binary files /dev/null and b/root/usr/share/smanager/themes/default/public/images/visible.png differ diff --git a/root/usr/share/smanager/themes/default/public/js/sme-password.js b/root/usr/share/smanager/themes/default/public/js/sme-password.js new file mode 100644 index 0000000..cb312b2 --- /dev/null +++ b/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 = $('
'); + + // Move the input into the new container + $(this).wrap($inputContainer); + + // Create the toggle image + var $togglePassword = $(''); + + // 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); + }); +}); \ No newline at end of file diff --git a/root/usr/share/smanager/themes/default/templates/layouts/default.html.ep b/root/usr/share/smanager/themes/default/templates/layouts/default.html.ep index 932e9e6..5bd7fed 100644 --- a/root/usr/share/smanager/themes/default/templates/layouts/default.html.ep +++ b/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' %= stylesheet '/css/sme-jquery-overrides.css' @@ -125,4 +127,4 @@