jev/opensem
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new: add password visibility toggle on all password fields

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

3
resources/views/Admin/auth/passwords/change_password.blade.php
View File

@@ -9,7 +9,8 @@
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
@include('load.form.password_toggle')
<div class="modal-body">
<div class="row" style="padding: 10px 20px;">
<div class="col-xs-12 text-center" id="changePasswordMessage"></div>
</div>

1
resources/views/Shop/auth/firstlogin.blade.php
View File

@@ -10,6 +10,7 @@
<div class="alert alert-info">
<p>{{ __('boilerplate::auth.firstlogin.intro') }}</p>
</div>
@include('load.form.password_toggle')
<div class="form-group {{ $errors->has('password') ? 'has-error' : '' }}">
{{ Form::label('password', __('boilerplate::auth.fields.password')) }}
{{ Form::input('password', 'password', Request::old('password'), ['class' => 'form-control', 'autofocus']) }}

7
resources/views/Shop/auth/partials/login.blade.php
View File

@@ -15,9 +15,9 @@
<div class="input-group form-group {{ $errors->has('password') ? 'has-error' : '' }}">
{{ Form::password('password', ['class' => 'form-control', 'placeholder' => __('boilerplate::auth.fields.password'), 'required']) }}
<div class="input-group-append">
<div class="btn btn-outline-secondary">
<i class="fa fa-lock"></i>
</div>
<button class="btn btn-outline-secondary password-toggle" type="button" tabindex="-1">
<i class="fa fa-eye"></i>
</button>
</div>
</div>
{!! $errors->first('password', '<p class="text-danger"><strong>:message</strong></p>') !!}
@@ -46,4 +46,5 @@
-->
</div>
</div>
@include('load.form.password_toggle')
{!! Form::close() !!}

2
resources/views/Shop/auth/partials/register.blade.php
View File

@@ -68,6 +68,8 @@
</div>
</form>
@include('load.form.password_toggle')
@push('js')
<script>
$('#use_for_delivery').click(function() {

2
resources/views/Shop/auth/passwords/password_confirmation.blade.php
View File

@@ -1,3 +1,5 @@
@include('load.form.password_toggle')
<div class="row mb-3 mt-3">
<label for="new-password" class="col-md-6 control-label text-right">Mot de passe actuel</label>
<div class="col-md-6">

1
resources/views/Shop/auth/passwords/reset.blade.php
View File

@@ -14,6 +14,7 @@
{{ Form::email('email', old('email', $email), ['class' => 'form-control', 'placeholder' => __('boilerplate::auth.fields.email'), 'required', 'autofocus']) }}
{!! $errors->first('email','<p class="text-danger"><strong>:message</strong></p>') !!}
</div>
@include('load.form.password_toggle')
<div class="form-group {{ $errors->has('password') ? 'has-error' : '' }}">
{{ Form::password('password', ['class' => 'form-control', 'placeholder' => __('boilerplate::auth.fields.password'), 'required']) }}
{!! $errors->first('password','<p class="text-danger"><strong>:message</strong></p>') !!}

44
resources/views/load/form/password_toggle.blade.php Normal file
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