Add a password strength indicator on relevant forms

gulpfile.js

@@ -23,6 +23,7 @@ elixir(function (mix) {
             'vendor/bower_components/jquery-serialize-object/jquery.serialize-object.js',
             'vendor/bower_components/chartjs/Chart.js',
             'vendor/bower_components/jquery-sparkline/dist/jquery.sparkline.js',
+            'resources/assets/js/password-strength.js',
             'resources/assets/js/app.js',
             'resources/assets/js/**/*.js'
         ], 'public/dist/js/all.js', './')

public/build/rev-manifest.json

@@ -1,4 +1,4 @@
 {
-  "dist/css/all.css": "dist/css/all-0b44115a9c.css",
+  "dist/css/all.css": "dist/css/all-91ce4bc04d.css",
-  "dist/js/all.js": "dist/js/all-2e68747c92.js"
+  "dist/js/all.js": "dist/js/all-b77c8ca0d2.js"
 }

resources/assets/js/app.js

@@ -350,4 +350,7 @@ $(function() {
             .filter(":lt(" + (next) + ")")
             .addClass("active");
     }
+
+    // Password strength
+    $('.password-strength').strengthify();
 });

resources/assets/js/password-strength.js

@@ -0,0 +1,80 @@
+/**
+ * Combine jQuery and zxcvbn to create a password strength meter.
+ * Based on : strengthify https://github.com/kabum/strengthify
+ */
+(function($) {
+    $.fn.strengthify = function(paramOptions) {
+        var me = this,
+            defaults = {
+                zxcvbn: 'https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/2.0.2/zxcvbn.min.js'
+            },
+            options = $.extend(defaults, paramOptions);
+
+        // Add elements to the DOM
+        $('.strengthify-wrapper')
+            .append('<div class="strengthify-bg" />')
+            .append('<div class="strengthify-container" />')
+            .append('<div class="strengthify-separator" style="left: 25%" />')
+            .append('<div class="strengthify-separator" style="left: 50%" />')
+            .append('<div class="strengthify-separator" style="left: 75%" />');
+
+        $.ajax({
+            cache: true,
+            dataType: 'script',
+            url: options.zxcvbn
+        }).done(function() {
+            me.bind('keyup input', function() {
+                var password = $(this).val(),
+                    // Hide strengthigy if no input is provided
+                    opacity = (password === '') ? 0 : 1,
+                    // Calculate result
+                    result = zxcvbn(password),
+                    css = '',
+                    // cache jQuery selections
+                    $container = $('.strengthify-container'),
+                    $wrapper = $('.strengthify-wrapper');
+
+                $wrapper.children().css(
+                    'opacity',
+                    opacity
+                ).css(
+                    '-ms-filter',
+                    '"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')"'
+                );
+
+                // Style strengthify bar
+                // possible scores: 0, 1, 2, 3, 4
+                switch (result.score) {
+                    case 0:
+                    case 1:
+                        css = 'password-bad';
+                        break;
+                    case 2:
+                        css = 'password-medium';
+                        break;
+                    case 3:
+                    case 4:
+                        css = 'password-good';
+                        break;
+                }
+
+                $container
+                    .attr('class', css + ' strengthify-container')
+                    // possible scores: 0, 1, 2, 3, 4
+                    .css(
+                        'width',
+                        // if score is '0' it will be changed to '1' to
+                        // not hide strengthify if the password is extremely weak
+                        ((result.score === 0 ? 1 : result.score) * 25) + '%'
+                    );
+
+                // Reset state for empty string password
+                if (password === '') {
+                    $container.css('width', 0);
+                }
+            });
+        });
+
+        return me;
+    };
+}(jQuery));

resources/assets/sass/app.scss

@@ -43,6 +43,7 @@ body {
 @import "plugins/messenger";
 @import "plugins/animate";
 @import "plugins/bootstrap-datetimepicker/bootstrap-datetimepicker";
+@import "plugins/password-strength";
 
 // Status Page will need to override certain styles.
 @import "status-page";

resources/assets/sass/plugins/_password-strength.scss

@@ -0,0 +1,44 @@
+.strengthify-wrapper > * {
+    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+    opacity: 0;
+    -webkit-transition:all .5s ease-in-out;
+    -moz-transition:all .5s ease-in-out;
+    transition:all .5s ease-in-out;
+}
+
+.strengthify-wrapper {
+    position: relative;
+}
+
+.strengthify-bg, .strengthify-container, .strengthify-wrapper, .strengthify-separator {
+    height: 5px;
+}
+
+.strengthify-bg, .strengthify-container {
+    display: block;
+    position: absolute;
+    width: 100%;
+}
+
+.strengthify-bg {
+    background-color: #BBB;
+}
+
+.strengthify-separator {
+    display: inline-block;
+    position: absolute;
+    background-color: #FFF;
+    width: 1px;
+    z-index: 10;
+}
+
+.password-bad {
+    background-color: $cachet-red;
+}
+.password-medium {
+    background-color: $cachet-yellow;
+}
+.password-good {
+    background-color: $cachet-green;
+}

resources/views/dashboard/team/add.blade.php

@@ -26,7 +26,8 @@
                         </div>
                         <div class="form-group">
                             <label>{{ trans('forms.user.password') }}</label>
-                            <input type="password" class="form-control" name="password" value="">
+                            <input type="password" class="form-control password-strength" name="password" value="">
+                            <div class="strengthify-wrapper"></div>
                         </div>
                         @if($current_user->isAdmin)
                         <div class="form-group">

resources/views/dashboard/team/edit.blade.php

@@ -26,7 +26,8 @@
                         </div>
                         <div class="form-group">
                             <label>{{ trans('forms.user.password') }}</label>
-                            <input type="password" class="form-control" name="password" value="" {{ !$current_user->isAdmin ? "disabled": "" }}>
+                            <input type="password" class="form-control password-strength" name="password" value="" {{ !$current_user->isAdmin ? "disabled": "" }}>
+                            <div class="strengthify-wrapper"></div>
                         </div>
                     </fieldset>
 

resources/views/dashboard/user/index.blade.php

@@ -25,7 +25,8 @@
                         </div>
                         <div class="form-group">
                             <label>{{ trans('forms.user.password') }}</label>
-                            <input type="password" class="form-control" name="password" value="">
+                            <input type="password" class="form-control password-strength" name="password" value="">
+                            <div class="strengthify-wrapper"></div>
                         </div>
                         <hr>
                         <div class="form-group">

resources/views/setup.blade.php

@@ -145,7 +145,8 @@
                         </div>
                         <div class="form-group">
                             <label>{{ trans("forms.setup.password") }}</label>
-                            <input type="password" name="user[password]" class="form-control" placeholder="{{ trans('forms.setup.password') }}" value="{{ Input::old('user.password', '') }}" required>
+                            <input type="password" name="user[password]" class="form-control password-strength" placeholder="{{ trans('forms.setup.password') }}" value="{{ Input::old('user.password', '') }}" required>
+                            <div class="strengthify-wrapper"></div>
                             @if($errors->has('user.password'))
                             <span class="text-danger">{{ $errors->first('user.password') }}</span>
                             @endif