Browse Source

IP-514 - Add a password strength meter

Kovah 2 years ago
parent
commit
aef6b57fdc

+ 9 - 0
Gruntfile.js

@@ -91,6 +91,12 @@ module.exports = function (grunt) {
                 'node_modules/clipboard/dist/clipboard.js'
             ],
             dest: 'assets/core/js/dependencies.js'
+        },
+        zxcvbn: {
+            src: [
+                'node_modules/zxcvbn/dist/zxcvbn.js'
+            ],
+            dest: 'assets/core/js/zxcvbn.js'
         }
     });
 
@@ -154,6 +160,7 @@ module.exports = function (grunt) {
         'postcss:dev',
         'concat:legacy',
         'concat:dependencies',
+        'concat:zxcvbn',
         'copy:datepickerlocale',
         'copy:fontawesome',
         'copy:devjs'
@@ -165,6 +172,7 @@ module.exports = function (grunt) {
         'postcss:dev',
         'concat:legacy',
         'concat:dependencies',
+        'concat:zxcvbn',
         'copy:datepickerlocale',
         'copy:fontawesome',
         'copy:devjs',
@@ -177,6 +185,7 @@ module.exports = function (grunt) {
         'postcss:build',
         'concat:legacy',
         'concat:dependencies',
+        'concat:zxcvbn',
         'uglify:build',
         'clean:build',
         'copy:datepickerlocale',

+ 10 - 1
application/modules/setup/views/create_user.php

@@ -7,6 +7,8 @@
     });
 </script>
 
+<script src="<?php echo base_url(); ?>assets/core/js/zxcvbn.js"></script>
+
 <div class="container">
     <div class="install-panel">
 
@@ -46,7 +48,14 @@
                 <label for="user_password">
                     <?php _trans('password'); ?>
                 </label>
-                <input type="password" name="user_password" id="user_password" class="form-control">
+                <input type="password" name="user_password" id="user_password"
+                       class="form-control passwordmeter-input">
+                <div class="progress" style="height:3px;">
+                    <div class="progress-bar progress-bar-danger passmeter passmeter-1" style="width: 33%"></div>
+                    <div class="progress-bar progress-bar-warning passmeter passmeter-2" style="display: none; width: 33%"></div>
+                    <div class="progress-bar progress-bar-success passmeter passmeter-3" style="display: none; width: 34%"></div>
+                </div>
+
                 <span class="help-block"><?php _trans('setup_user_password_info'); ?></span>
             </div>
 

+ 8 - 1
application/modules/users/views/form_change_password.php

@@ -1,3 +1,5 @@
+<script src="<?php echo base_url(); ?>assets/core/js/zxcvbn.js"></script>
+
 <form method="post">
 
     <input type="hidden" name="_ip_csrf" value="<?= $this->security->get_csrf_hash() ?>">
@@ -25,7 +27,12 @@
                                 <?php _trans('password'); ?>
                             </label>
                             <input type="password" name="user_password" id="user_password"
-                                   class="form-control">
+                                   class="form-control passwordmeter-input">
+                            <div class="progress" style="height:3px;">
+                                <div class="progress-bar progress-bar-danger passmeter passmeter-1" style="width: 33%"></div>
+                                <div class="progress-bar progress-bar-warning passmeter passmeter-2" style="display: none; width: 33%"></div>
+                                <div class="progress-bar progress-bar-success passmeter passmeter-3" style="display: none; width: 34%"></div>
+                            </div>
                         </div>
 
                         <div class="form-group">

+ 14 - 0
assets/core/js/scripts.js

@@ -237,4 +237,18 @@ $(document).ready(function () {
         $('#loader-icon').addClass('fa-spin').removeClass('text-danger');
         clearTimeout(window.fullpageloaderTimeout);
     });
+
+    var password_input = $('.passwordmeter-input');
+    if (password_input) {
+        password_input.on('input', function(){
+            var strength = zxcvbn(password_input.val());
+
+            $('.passmeter-2, .passmeter-3').hide();
+            if (strength.score === 4) {
+                $('.passmeter-2, .passmeter-3').show();
+            } else if (strength.score === 3) {
+                $('.passmeter-2').show();
+            }
+        });
+    }
 });

+ 1 - 1
assets/core/scss/_bootstrap.scss

@@ -28,7 +28,7 @@
 //@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
 //@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
 @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/alerts";
-//@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
+@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
 //@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/media";
 @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/list-group";
 @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/panels";

+ 12 - 0
assets/core/scss/_core.scss

@@ -879,6 +879,18 @@ legend, .install-step h2 {
   transform: rotate(22deg);
 }
 
+.passwordmeter-input {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: 0;
+  padding-bottom: $padding-base-vertical + 3px;
+
+  + .progress {
+    height: 3px;
+    margin: -3px 0 0;
+  }
+}
+
 /*
 |   =========================================================
 |   Login

+ 2 - 1
package.json

@@ -34,6 +34,7 @@
     "js-cookie": "^2.1.3",
     "load-grunt-tasks": "^3.5.2",
     "postcss": "^5.2.13",
-    "select2": "^4.0.3"
+    "select2": "^4.0.3",
+    "zxcvbn": "^4.4.2"
   }
 }