From 7a246a189a5b40b5a5fbd896f1891b963f25872f Mon Sep 17 00:00:00 2001
From: Valentin Lab <valentin.lab@kalysto.org>
Date: Fri, 13 Feb 2026 04:18:29 +0100
Subject: [PATCH] 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.
---
 .../auth/passwords/change_password.blade.php  |  3 +-
 .../views/Shop/auth/firstlogin.blade.php      |  1 +
 .../views/Shop/auth/partials/login.blade.php  |  7 +--
 .../Shop/auth/partials/register.blade.php     |  2 +
 .../passwords/password_confirmation.blade.php |  2 +
 .../views/Shop/auth/passwords/reset.blade.php |  1 +
 .../views/load/form/password_toggle.blade.php | 44 +++++++++++++++++++
 7 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 resources/views/load/form/password_toggle.blade.php

diff --git a/resources/views/Admin/auth/passwords/change_password.blade.php b/resources/views/Admin/auth/passwords/change_password.blade.php
index 9acd1569..b86ae2f4 100644
--- a/resources/views/Admin/auth/passwords/change_password.blade.php
+++ b/resources/views/Admin/auth/passwords/change_password.blade.php
@@ -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>
diff --git a/resources/views/Shop/auth/firstlogin.blade.php b/resources/views/Shop/auth/firstlogin.blade.php
index df040c6c..fda43289 100644
--- a/resources/views/Shop/auth/firstlogin.blade.php
+++ b/resources/views/Shop/auth/firstlogin.blade.php
@@ -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']) }}
diff --git a/resources/views/Shop/auth/partials/login.blade.php b/resources/views/Shop/auth/partials/login.blade.php
index 2069038c..aefcb137 100644
--- a/resources/views/Shop/auth/partials/login.blade.php
+++ b/resources/views/Shop/auth/partials/login.blade.php
@@ -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() !!}
diff --git a/resources/views/Shop/auth/partials/register.blade.php b/resources/views/Shop/auth/partials/register.blade.php
index 57d72dc8..e6bfc863 100644
--- a/resources/views/Shop/auth/partials/register.blade.php
+++ b/resources/views/Shop/auth/partials/register.blade.php
@@ -68,6 +68,8 @@
 </div>
 </form>
 
+@include('load.form.password_toggle')
+
 @push('js')
     <script>
         $('#use_for_delivery').click(function() {
diff --git a/resources/views/Shop/auth/passwords/password_confirmation.blade.php b/resources/views/Shop/auth/passwords/password_confirmation.blade.php
index 8cca2192..ee4f3343 100644
--- a/resources/views/Shop/auth/passwords/password_confirmation.blade.php
+++ b/resources/views/Shop/auth/passwords/password_confirmation.blade.php
@@ -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">
diff --git a/resources/views/Shop/auth/passwords/reset.blade.php b/resources/views/Shop/auth/passwords/reset.blade.php
index ea3b7474..af4d088b 100644
--- a/resources/views/Shop/auth/passwords/reset.blade.php
+++ b/resources/views/Shop/auth/passwords/reset.blade.php
@@ -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>') !!}
diff --git a/resources/views/load/form/password_toggle.blade.php b/resources/views/load/form/password_toggle.blade.php
new file mode 100644
index 00000000..ba0a1289
--- /dev/null
+++ b/resources/views/load/form/password_toggle.blade.php
@@ -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