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:
44
resources/views/load/form/password_toggle.blade.php
Normal file
44
resources/views/load/form/password_toggle.blade.php
Normal 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
|
||||
Reference in New Issue
Block a user