Fix #1131 Add password strength validation

This commit is contained in:
Nicolas Le Goff
2013-06-14 16:55:29 +02:00
parent 6dafcaf775
commit fc5fea2c2f
13 changed files with 158 additions and 7 deletions

View File

@@ -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"
}
}

View File

@@ -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'));

View File

@@ -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 %}

View File

@@ -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>

View File

@@ -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 %}

View File

@@ -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 %}

View File

@@ -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 %}

View File

@@ -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,

View File

@@ -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 = [];

View File

@@ -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,

View File

@@ -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;
});

View File

@@ -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;
});

View File

@@ -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 {