Inscription: Add password checker - refs BT#20923

public/main/auth/inscription.php

@@ -276,7 +276,7 @@ if (false === $userAlreadyRegisteredShowTerms &&
         'password',
         'pass1',
         [get_lang('Pass'), $passDiv],
-        ['id' => 'pass1', 'size' => 20, 'autocomplete' => 'off']
+        ['id' => 'pass1', 'size' => 20, 'autocomplete' => 'off', 'show_hide' => true]
     );
 
     $checkPass = api_get_setting('allow_strength_pass_checker');

public/main/inc/lib/api.lib.php

@@ -6441,53 +6441,71 @@ function api_get_password_checker_js($usernameInputId, $passwordInputId)
         return null;
     }
 
-    $translations = [
-        'wordLength' => get_lang('The password is too short'),
-        'wordNotEmail' => get_lang('Your password cannot be the same as your email'),
-        'wordSimilarToUsername' => get_lang('Your password cannot contain your username'),
-        'wordTwoCharacterClasses' => get_lang('Use different character classes'),
-        'wordRepetitions' => get_lang('Too many repetitions'),
-        'wordSequences' => get_lang('Your password contains sequences'),
-        'errorList' => get_lang('errors found'),
-        'veryWeak' => get_lang('Very weak'),
-        'weak' => get_lang('Weak'),
-        'normal' => get_lang('Normal'),
-        'medium' => get_lang('Medium'),
-        'strong' => get_lang('Strong'),
-        'veryStrong' => get_lang('Very strong'),
+    $minRequirements = Security::getPasswordRequirements()['min'];
+
+    $options = [
+        'rules' => [],
     ];
 
-    $js = api_get_asset('pwstrength-bootstrap/dist/pwstrength-bootstrap.js');
-    $js .= "<script>
-    var errorMessages = {
-        password_to_short : \"".get_lang('The password is too short')."\",
-        same_as_username : \"".get_lang('Your password cannot be the same as your username')."\"
-    };
+    if ($minRequirements['length'] > 0) {
+        $options['rules'][] = [
+            'minChar' => $minRequirements['length'],
+            'pattern' => '.',
+            'helpText' => sprintf(
+                get_lang('Minimum %s characters in total'),
+                $minRequirements['length']
+            ),
+        ];
+    }
+
+    if ($minRequirements['lowercase'] > 0) {
+        $options['rules'][] = [
+            'minChar' => $minRequirements['lowercase'],
+            'pattern' => '[a-z]',
+            'helpText' => sprintf(
+                get_lang('Minimum %s lowercase characters'),
+                $minRequirements['lowercase']
+            ),
+        ];
+    }
+
+    if ($minRequirements['uppercase'] > 0) {
+        $options['rules'][] = [
+            'minChar' => $minRequirements['uppercase'],
+            'pattern' => '[A-Z]',
+            'helpText' => sprintf(
+                get_lang('Minimum %s uppercase characters'),
+                $minRequirements['uppercase']
+            ),
+        ];
+    }
+
+    if ($minRequirements['numeric'] > 0) {
+        $options['rules'][] = [
+            'minChar' => $minRequirements['numeric'],
+            'pattern' => '[0-9]',
+            'helpText' => sprintf(
+                get_lang('Minimum %s numerical (0-9) characters'),
+                $minRequirements['numeric']
+            ),
+        ];
+    }
 
+    if ($minRequirements['specials'] > 0) {
+        $options['rules'][] = [
+            'minChar' => $minRequirements['specials'],
+            'pattern' => '[!"#$%&\'()*+,\-./\\\:;<=>?@[\\]^_`{|}~]',
+            'helpText' => sprintf(
+                get_lang('Minimum %s special characters'),
+                $minRequirements['specials']
+            ),
+        ];
+    }
+
+    $js = api_get_js('password-checker/password-checker.js');
+    $js .= "<script>
     $(function() {
-        var lang = ".json_encode($translations).";
-        var options = {
-            onLoad : function () {
-                //$('#messages').text('Start typing password');
-            },
-            onKeyUp: function (evt) {
-                $(evt.target).pwstrength('outputErrorList');
-            },
-            errorMessages : errorMessages,
-            viewports: {
-                progress: '#password_progress',
-                verdict: '#password-verdict',
-                errors: '#password-errors'
-            },
-            usernameField: '$usernameInputId'
-        };
-        options.i18n = {
-            t: function (key) {
-                var result = lang[key];
-                return result === key ? '' : result; // This assumes you return the
-            }
-        };
-        $('".$passwordInputId."').pwstrength(options);
+        $('".$passwordInputId."').passwordChecker(".json_encode($options).");
     });
     </script>";
 

public/main/inc/lib/javascript/password-checker/password-checker.js

@@ -0,0 +1,46 @@
+(function ($) {
+    $.fn.passwordChecker = function (options) {
+        options = $.extend({
+            rules: []
+        }, options);
+
+        this.each(function (i, el) {
+            var $el = $(el);
+            var $parent = $el.parent();
+
+            var $ulHelp = $('<ul class="help-block fa-ul"></ul>');
+
+            var helpTexts = [];
+
+            $(options.rules).each(function (j, rule) {
+                helpTexts.push(
+                    $('<li>')
+                );
+
+                helpTexts[j].text(rule.helpText).appendTo($ulHelp).append('<span class="fa fa-fw fa-li ">');
+            });
+
+            $ulHelp.insertAfter($parent);
+
+            $el
+                .on('input', function () {
+                    var tempPassword = this.value;
+
+                    $(options.rules).each(function (j, rule) {
+                        var match = tempPassword.match(
+                            new RegExp(rule.pattern, 'g')
+                        );
+
+                        if (match && match.length >= rule.minChar) {
+                            helpTexts[j].removeClass('text-error').addClass('text-success')
+                                .find('.fa-li').removeClass('fa-times').addClass('fa-check');
+                        } else {
+                            helpTexts[j].addClass('text-error').removeClass('text-success')
+                                .find('.fa-li').addClass('fa-times').removeClass('fa-check');
+                        }
+                    });
+                })
+                .trigger('input');
+        });
+    };
+})(jQuery);

public/main/inc/lib/security.lib.php

@@ -544,6 +544,7 @@ class Security
                 'uppercase' => 0,
                 'numeric' => 2,
                 'length' => 5,
+                'specials' => 1,
             ],
         ];