Added password strenght indicator js and css.

5 files changed, 179 insertions, 6 deletions

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 <n0nick@php.net>
+ * 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 = $('<span/>').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 %}
+<script type="text/javascript" src="/site_media/js/jquery/jquery-1.4.4.min.js"></script>
+<script type="text/javascript" src="/site_media/js/jquery/password_strength.js"></script>
+{% endblock %}
 {% block content %}
+<h2>Change password</h2>
 {% if form %}
-    <form action="/changepw/" method="post">{% csrf_token %}
-        {{ form.as_p}}
+<p>When thinking of a new password you need to remember to use:</p>
+<ul>
+    <li>at least one number</li>
+    <li>at least one upper case and one lower case letter</li>
+    <li>one or more special characters</li>
+</ul>
+
+    <p class="error">
+        {{ form.non_field_errors }}
+    </p>
+    <form action="/changepw/" method="post" autocomplete="off">{% csrf_token %}
+    <table>
+    {% for field in form %}
+        <tr>
+            <td class="fielderrors">{{ field.errors }}</td>
+        </tr>
+        <tr>
+            <th class="formlabel">{{ field.label_tag }}:</th><td class="formfield">{{ field }}</td><td><span class="password_strength"></span></td>
+        </tr>
+    {% endfor %}
+    </table>
     <input type="submit" value="Submit" />
     </form>
+    <script type="text/javascript">
+        $('form').attr('autocomplete', 'off');
+        $('#id_new_password').password_strength();
+        $('#id_new_password_again').password_strength();
+    </script>
 {% else %}
     {% if return_value == 0 %}
         <p>Your password was changed successfully.</p>
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))