From d8b4329d8f323d174662f4983f781e43b6c60593 Mon Sep 17 00:00:00 2001 From: Johan Lundberg Date: Wed, 26 Jan 2011 13:43:37 +0100 Subject: Added password strenght indicator js and css. --- media/css/change_password.css | 8 ++ media/js/password_strength.js | 135 ++++++++++++++++++++++++++++++++ models.py | 2 +- templates/changepw/change_password.html | 36 ++++++++- views.py | 4 +- 5 files changed, 179 insertions(+), 6 deletions(-) create mode 100644 media/css/change_password.css create mode 100644 media/js/password_strength.js diff --git a/media/css/change_password.css b/media/css/change_password.css new file mode 100644 index 0000000..7c5a053 --- /dev/null +++ b/media/css/change_password.css @@ -0,0 +1,8 @@ +/* Password change styles */ +ul.errorlist { +font-weight:bold; +list-style:none; +} +th.formlabel { +text-align:right; +} diff --git a/media/js/password_strength.js b/media/js/password_strength.js new file mode 100644 index 0000000..e2f30b7 --- /dev/null +++ b/media/js/password_strength.js @@ -0,0 +1,135 @@ +/* + * Password Strength (0.1.1) + * by Sagie Maoz (n0nick.net) + * n0nick@php.net + * + * This plugin will check the value of a password field and evaluate the + * strength of the typed password. This is done by checking for + * the diversity of character types: numbers, lowercase and uppercase + * letters and special characters. + * + * Copyright (c) 2010 Sagie Maoz + * Licensed under the GPL license, see http://www.gnu.org/licenses/gpl-3.0.html + * + * + * NOTE: This script requires jQuery to work. Download jQuery at www.jquery.com + * + */ + +(function($){ + +var passwordStrength = new function() +{ + this.countRegexp = function(val, rex) + { + var match = val.match(rex); + return match ? match.length : 0; + } + + this.getStrength = function(val, minLength) + { + var len = val.length; + + // too short =( + if (len < minLength) + { + return 0; + } + + var nums = this.countRegexp(val, /\d/g), + lowers = this.countRegexp(val, /[a-z]/g), + uppers = this.countRegexp(val, /[A-Z]/g), + specials = len - nums - lowers - uppers; + + // not all types used + if (nums == 0 || lowers == 0 || uppers == 0 || specials == 0) + { + return 0; + } + + var strength = len; + /* + if (nums) { strength+= 2; } + if (lowers) { strength+= uppers? 4 : 3; } + if (uppers) { strength+= lowers? 4 : 3; } + if (specials) { strength+= 5; } + if (len > 10) { strength+= 1; } + */ + + return strength; + } + + this.getStrengthLevel = function(val, minLength) + { + var strength = this.getStrength(val, minLength); + switch (true) + { + case (strength <= 0): + return 1; + break; + case (strength > 0 && strength <= 8): + return 2; + break; + case (strength > 8 && strength <= 12): + return 3; + break; + case (strength > 12 && strength <= 15): + return 4; + break; + case (strength > 15): + return 5; + break; + } + + return 1; + } +} + +$.fn.password_strength = function(options) +{ + var settings = $.extend({ + 'container' : null, + 'minLength' : 8, + 'texts' : { + 1 : 'Too weak', + 2 : 'Weak password', + 3 : 'Normal strength', + 4 : 'Strong password', + 5 : 'Very strong password' + } + }, options); + + return this.each(function() + { + if (settings.container) + { + var container = $(settings.container); + } + else + { + var container = $('').attr('class', 'password_strength'); + $(this).after(container); + } + + $(this).keyup(function() + { + var val = $(this).val(); + if (val.length > 0) + { + var level = passwordStrength.getStrengthLevel(val, settings.minLength); + var _class = 'password_strength_' + level; + + if (!container.hasClass(_class) && level in settings.texts) + { + container.text(settings.texts[level]).attr('class', 'password_strength ' + _class); + } + } + else + { + container.text('').attr('class', 'password_strength'); + } + }); + }); +}; + +})(jQuery); diff --git a/models.py b/models.py index 46a24e8..3a82892 100644 --- a/models.py +++ b/models.py @@ -32,6 +32,6 @@ in your password.') case letter and one lower case letter in your password.') if not re.search('[,.\[\]!@#$%^&*?_\(\)-]', new_password): raise forms.ValidationError('You need at least one special \ -character i.e. ,.[]!@#$%^&*?_()-') +character i.e. ,.][!@#$%^&*?_()-') return cleaned_data diff --git a/templates/changepw/change_password.html b/templates/changepw/change_password.html index e8af7bd..3b5db61 100644 --- a/templates/changepw/change_password.html +++ b/templates/changepw/change_password.html @@ -1,11 +1,39 @@ -{% extends "base.html" %} - +{% extends "nordunet_base.html" %} +{% block js %} + + +{% endblock %} {% block content %} +

Change password

{% if form %} -
{% csrf_token %} - {{ form.as_p}} +

When thinking of a new password you need to remember to use:

+
    +
  • at least one number
    • +
  • at least one upper case and one lower case letter
    • +
  • one or more special characters
    • +
+ +

+ {{ form.non_field_errors }} +

+ {% csrf_token %} + + {% for field in form %} + + + + + + + {% endfor %} +
{{ field.errors }}
{{ field.label_tag }}:{{ field }}
+ {% else %} {% if return_value == 0 %}

Your password was changed successfully.

diff --git a/views.py b/views.py index dd8f1d8..d95859a 100644 --- a/views.py +++ b/views.py @@ -11,8 +11,10 @@ def change_password(request): if form.is_valid(): new_password = form.cleaned_data['new_password'] + # Get user name and additional info from headers + # Magic for actually changing the password happens here - return_value = subprocess.check_call(['echo', new_password]) + return_value = subprocess.call(['echo', new_password]) return render_to_response('changepw/change_password.html', {'return_value': return_value}, context_instance=RequestContext(request)) -- cgit v1.1