new: add password visibility toggle on all password fields

Reusable ``password_toggle.blade.php`` partial that wraps every
``input[type=password]`` with an eye icon button. Clicking it
toggles between hidden and visible text. Handles Bootstrap modals
via ``shown.bs.modal`` event. Applied on login, register, password
change (shop + admin), password reset, and first login pages.
This commit is contained in:
Valentin Lab
2026-02-13 04:18:29 +01:00
parent f8a5caec60
commit 7a246a189a
7 changed files with 56 additions and 4 deletions

View File

@@ -0,0 +1,44 @@
@if (!defined('LOAD_PASSWORD_TOGGLE'))
@push('js')
<script>
function initPasswordToggle(context) {
var $ctx = $(context || document);
$ctx.find('input[type="password"]').each(function() {
var $input = $(this);
if ($input.closest('.input-group').find('.password-toggle').length) {
return;
}
if (!$input.parent().hasClass('input-group')) {
$input.wrap('<div class="input-group"></div>');
}
var $btn = $('<div class="input-group-append">' +
'<button class="btn btn-outline-secondary password-toggle" type="button" tabindex="-1">' +
'<i class="fa fa-eye"></i>' +
'</button></div>');
$input.after($btn);
});
}
$(function() {
initPasswordToggle();
$(document).on('shown.bs.modal', function(e) {
initPasswordToggle(e.target);
});
$(document).on('click', '.password-toggle', function() {
var $btn = $(this);
var $input = $btn.closest('.input-group').find('input');
if ($input.attr('type') === 'password') {
$input.attr('type', 'text');
$btn.find('i').removeClass('fa-eye').addClass('fa-eye-slash');
} else {
$input.attr('type', 'password');
$btn.find('i').removeClass('fa-eye-slash').addClass('fa-eye');
}
});
});
</script>
@endpush
@php(define('LOAD_PASSWORD_TOGGLE', true))
@endif