Fix #1131 Add password strength validation

component.json

@@ -23,6 +23,7 @@
     "sinon": "~1.7",
     "sinon-chai": "~2.4",
     "js-fixtures": "https://github.com/badunk/js-fixtures/archive/master.zip",
-    "bootstrap-multiselect": "https://github.com/davidstutz/bootstrap-multiselect.git"
+    "bootstrap-multiselect": "https://github.com/davidstutz/bootstrap-multiselect.git",
+    "zxcvbn" : "https://github.com/lowe/zxcvbn.git"
   }
 }

lib/Alchemy/Phrasea/Controller/Root/Login.php

@@ -191,7 +191,12 @@ class Login implements ControllerProviderInterface
             'no_collection_selected'    => _('No collection selected'),
             'one_collection_selected'   => _('%d collection selected'),
             'collections_selected'      => _('%d collections selected'),
-            'all_collections'           => _('Select all collections')
+            'all_collections'           => _('Select all collections'),
+            // password strength
+            'weak'                      => _('Weak'),
+            'ordinary'                  => _('Ordinary'),
+            'good'                      => _('Good'),
+            'great'                     => _('Great'),
         ));
 
         $response->setExpires(new \DateTime('+1 day'));

templates/web/account/change-password.html.twig

@@ -54,5 +54,6 @@
 
 {% block scripts %}
     {{ parent() }}
+    <script type="text/javascript" src="{{ path('minifier', {'f': 'assets/zxcvbn/zxcvbn-async.js'}) }}"></script>
     <script type="text/javascript" src="{{ path('minifier', {'f': 'scripts/apps/login/home/renewPassword.js'}) }}"></script>
 {% endblock %}

templates/web/common/password_strength_widget.html.twig

@@ -0,0 +1,15 @@
+<table class="password_strength_widget">
+    <tr>
+        <td class="password_strength_label">{% trans %}Security{% endtrans %}</td>
+        <td>
+            <div class="password_strength_container">
+                <div class="password_strength_bg"></div>
+                <div class="password_strength" style="width: 0%;"></div>
+                <div class="password_strength_separator" style="left: 25%;"></div>
+                <div class="password_strength_separator" style="left: 50%;"></div>
+                <div class="password_strength_separator" style="left: 75%;"></div>
+            </div>
+        </td>
+        <td class="password_strength_desc"></td>
+    </tr>
+</table>

templates/web/login/common/macros.html.twig

@@ -28,6 +28,9 @@
         <div class="row-fluid">
             <div class="span12">
                 {{ _self.fieldInput(passField, form_name, icon_name, custom_attributes) }}
+                {% if loop.first %}
+                    {% include 'common/password_strength_widget.html.twig' %}
+                {% endif %}
             </div>
         </div>
     {% endfor %}

templates/web/login/register-classic.html.twig

@@ -101,5 +101,6 @@
 
 {% block scripts %}
     {{ parent() }}
+    <script type="text/javascript" src="{{ path('minifier', {'f': 'assets/zxcvbn/zxcvbn-async.js'}) }}"></script>
     <script type="text/javascript" src="{{ path('minifier', {'f': 'scripts/apps/login/home/register.js'}) }}"></script>
 {% endblock %}

templates/web/login/renew-password.html.twig

@@ -50,5 +50,6 @@
 
 {% block scripts %}
     {{ parent() }}
+    <script type="text/javascript" src="{{ path('minifier', {'f': 'assets/zxcvbn/zxcvbn-async.js'}) }}"></script>
     <script type="text/javascript" src="{{ path('minifier', {'f': 'scripts/apps/login/home/recoverPassword.js'}) }}"></script>
 {% endblock %}

www/scripts/apps/login/home/recoverPassword.js

@@ -11,7 +11,7 @@ require([
     "jquery",
     "i18n",
     "apps/login/home/common",
-    "apps/login/home/views/form"
+    "apps/login/home/views/forms/passwordSetter"
 ], function($, i18n, Common, RenewPassword) {
     i18n.init({
             resGetPath: Common.languagePath,

www/scripts/apps/login/home/register.js

@@ -12,7 +12,7 @@ require([
     "jquery",
     "i18n",
     "apps/login/home/common",
-    "apps/login/home/views/form"
+    "apps/login/home/views/forms/passwordSetter"
 ], function($, i18n, Common, RegisterForm) {
     var fieldsConfiguration = [];
 

www/scripts/apps/login/home/renewPassword.js

@@ -11,7 +11,7 @@ require([
     "jquery",
     "i18n",
     "apps/login/home/common",
-    "apps/login/home/views/form"
+    "apps/login/home/views/forms/passwordSetter"
 ], function($, i18n, Common, RenewPassword) {
     i18n.init({
             resGetPath: Common.languagePath,

www/scripts/apps/login/home/views/form.js

@@ -15,7 +15,7 @@ define([
     "common/validator",
     "apps/login/home/views/input"
 ], function($, _, Backbone, bootstrap, Validator, InputView) {
-    var RegisterForm = Backbone.View.extend({
+    var Form = Backbone.View.extend({
         events: {
             "submit": "_onSubmit"
         },
@@ -82,5 +82,5 @@ define([
         }
     });
 
-    return RegisterForm;
+    return Form;
 });

www/scripts/apps/login/home/views/forms/passwordSetter.js

@@ -0,0 +1,80 @@
+/*
+ * This file is part of Phraseanet
+ *
+ * (c) 2005-2013 Alchemy
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+define([
+    "jquery",
+    "underscore",
+    "i18n",
+    "backbone",
+    "bootstrap",
+    "apps/login/home/views/form"
+], function($, _, i18n, Backbone, bootstrap, FormView) {
+    var PasswordSetterForm = FormView.extend({
+        events: function(){
+           return _.extend({},FormView.prototype.events,{
+               'keyup input[type=password]' : 'onPasswordKeyup'
+           });
+        },
+        onPasswordKeyup : function(event) {
+            var input = $(event.target);
+            var password = input.val();
+            var inputView = this.inputViews[input.attr("name")];
+            var bg = $(".password_strength_bg", inputView.$el);
+            var label = $(".password_strength_label", inputView.$el);
+            var desc = $(".password_strength_desc", inputView.$el);
+            var css = {
+                "width": "0%",
+                "background-color": "rgb(39, 39, 30)"
+            };
+            var result = "";
+
+            if (password.length > 0 ) {
+                var passMeter = zxcvbn(input.val());
+
+                switch (passMeter.score) {
+                    case 0:
+                    case 1:
+                        css = {
+                            "width": "25%",
+                            "background-color": "rgb(200, 24, 24)"
+                        };
+                        result = i18n.t("weak");
+                        break;
+                    case 2:
+                        css = {
+                            "width": "50%",
+                            "background-color": "rgb(255, 172, 29)"
+                        };
+                        result = i18n.t("ordinary");
+                        break;
+                    case 3:
+                        css = {
+                            "width": "75%",
+                            "background-color": "rgb(166, 192, 96)"
+                        };
+                        result = i18n.t("good");
+                        break;
+                    case 4:
+                        css = {
+                            "width": "100%",
+                            "background-color": "rgb(39, 179, 15)"
+                        };
+                        result = i18n.t("great");
+                        break;
+                }
+            }
+
+            bg.css(css);
+            label.css({"color": css["background-color"]});
+            desc.css({"color": css["background-color"]}).html(result);
+        }
+    });
+
+    return PasswordSetterForm;
+});

www/skins/login/less/skin.less

@@ -753,6 +753,50 @@ form[name=registerForm] .multiselect-group {
     font-size: @fontSizeLarge;
 }
 
+.password_strength_widget,  .password_strength_widget tr, .password_strength_widget td {
+    border: none !important;
+}
+
+.password_strength_label, .password_strength_desc {
+    font-size: @fontSizeMini;
+    color: lighten(@backgroundSideBar, 5%) ;
+}
+
+.password_strength_desc {
+    text-align: right;
+}
+
+.password_strength_container {
+    position: relative;
+    width: 100%;
+    margin: 5px auto 0 auto;
+    height: 10px;
+}
+
+.password_strength_bg {
+    height: 4px;
+    background-color: lighten(@backgroundSideBar, 5%);
+    width: 100%;
+    position: absolute;
+    left: 0;
+}
+
+.password_strength {
+    height: 4px;
+    background-color: #c81818;
+    width: 0%;
+    position: absolute;
+    left: 0;
+}
+
+.password_strength_separator {
+    height: 4px;
+    width: 2px;
+    background-color: @backgroundSideBar;
+    position: absolute;
+    left: 0;
+}
+
 /** IE Fixes */
 
 .lt-ie8 authentication-sidebar-language .caret {