new: display dynamic password rules checklist on registration and profile edit

Each rule (length, lowercase, uppercase, number, special character)
shows a live check/cross icon as the user types.  Also aligns
``handlePasswordChange`` server-side validation with the boilerplate
``Password`` rule (was only enforcing min 8 chars).

app/Http/Controllers/Shop/CustomerController.php

@@ -168,8 +168,26 @@ class CustomerController extends Controller
             return __('Les mots de passe ne correspondent pas.');
         }
 
-        if (strlen($request->input('new-password')) < 8) {
+        $newPassword = $request->input('new-password');
-            return __('Le nouveau mot de passe doit contenir au moins 8 caractères.');
+
+        if (strlen($newPassword) < 8) {
+            return __('Le mot de passe doit contenir au moins 8 caractères.');
+        }
+
+        if (! preg_match('/[a-z]/', $newPassword)) {
+            return __('Le mot de passe doit contenir au moins une lettre minuscule.');
+        }
+
+        if (! preg_match('/[A-Z]/', $newPassword)) {
+            return __('Le mot de passe doit contenir au moins une lettre majuscule.');
+        }
+
+        if (! preg_match('/[0-9]/', $newPassword)) {
+            return __('Le mot de passe doit contenir au moins un chiffre.');
+        }
+
+        if (! preg_match('/[^A-Za-z0-9]/', $newPassword)) {
+            return __('Le mot de passe doit contenir au moins un caractère spécial.');
         }
 
         $customer->password = Hash::make($request->input('new-password'));

resources/views/Shop/auth/partials/password_rules.blade.php

@@ -0,0 +1,62 @@
+@php
+    $passwordInputId = $passwordInputId ?? 'password';
+@endphp
+
+<ul class="list-unstyled small mt-1 mb-0 password-rules" data-input="#{{ $passwordInputId }}" style="display: none;">
+    <li data-rule="length"><i class="fa fa-fw fa-times"></i> Au moins 8 caractères</li>
+    <li data-rule="lowercase"><i class="fa fa-fw fa-times"></i> Au moins une lettre minuscule</li>
+    <li data-rule="uppercase"><i class="fa fa-fw fa-times"></i> Au moins une lettre majuscule</li>
+    <li data-rule="number"><i class="fa fa-fw fa-times"></i> Au moins un chiffre</li>
+    <li data-rule="special"><i class="fa fa-fw fa-times"></i> Au moins un caractère spécial</li>
+</ul>
+
+@once
+@push('css')
+<style>
+    .password-rules li {
+        color: #dc3545;
+        transition: all 0.3s;
+    }
+    .password-rules li.valid {
+        display: none;
+    }
+</style>
+@endpush
+
+@push('js')
+<script>
+$(function() {
+    $('.password-rules').each(function() {
+        var $rules = $(this);
+        var inputSelector = $rules.data('input');
+        var $input = $(inputSelector);
+
+        if (!$input.length) return;
+
+        var checks = {
+            length:    function(v) { return v.length >= 8; },
+            lowercase: function(v) { return /[a-z]/.test(v); },
+            uppercase: function(v) { return /[A-Z]/.test(v); },
+            number:    function(v) { return /[0-9]/.test(v); },
+            special:   function(v) { return /[^A-Za-z0-9]/.test(v); }
+        };
+
+        $input.on('input keyup', function() {
+            var val = $(this).val();
+            if (val.length === 0) {
+                $rules.hide();
+                return;
+            }
+            $rules.find('li').each(function() {
+                var rule = $(this).data('rule');
+                if (checks[rule]) {
+                    $(this).toggleClass('valid', checks[rule](val));
+                }
+            });
+            $rules.show();
+        });
+    });
+});
+</script>
+@endpush
+@endonce

resources/views/Shop/auth/partials/register.blade.php

@@ -11,10 +11,12 @@
                         <label>Mot de passe *</label>
                         {{ Form::password('password', [
                             'class' => 'form-control',
+                            'id' => 'password',
                             'placeholder' => __('boilerplate::auth.fields.password'),
                             'required',
                         ]) }}
                         {!! $errors->registration->first('password', '<p class="text-danger"><strong>:message</strong></p>') !!}
+                        @include('Shop.auth.partials.password_rules', ['passwordInputId' => 'password'])
                     </div>
                 </div>
                 <div class="col-6">

resources/views/Shop/auth/passwords/password_confirmation.blade.php

@@ -14,6 +14,7 @@
 
     <div class="col-md-6">
         <input id="new-password" type="password" class="form-control" name="new-password">
+        @include('Shop.auth.partials.password_rules', ['passwordInputId' => 'new-password'])
     </div>
 </div>