Merge pull request #65 from futurice/improve-password-change

Improve password change

Author: mixman

fum/api/views.py

@@ -326,9 +326,9 @@ def password(self, request, username=None, relname=None):
                 user.set_ldap_password(password)
                 return Response("Ok", status=200)
             except Exception, e:
-                return Response("Fail: %s"%e, status=500)
+                return Response("New password too similar to the username or to an old password", status=403)
         else:
-            return Response("Old password fail", status=403)
+            return Response("Incorrect old password", status=403)
 
     # TODO: Faster failing option: try to first write to ldap, only then save the image files to disk?
     @action(methods=['post'])

fum/common/static/js/main.js

@@ -56,20 +56,20 @@ $.fn.editable.defaults.select2 = {
 })();
 
 function validatePassword(password) {
-    if (password.length < 10) {
-        return "Password has to be at least 10 characters long";
-    }
+    return validatePasswordLength(password) &&
+        validatePasswordCharacterGroups(password);
+}
 
+function validatePasswordLength(password) {
+    return password.length >= 10;
+}
+function validatePasswordCharacterGroups(password) {
     lower_case = new RegExp('[a-z]').test(password);
     upper_case = new RegExp('[A-Z]').test(password);
     numbers = new RegExp('[0-9]').test(password);
     special = new RegExp('[^a-zA-Z0-9]').test(password);
 
-    if (lower_case + upper_case + numbers + special < 3) {
-        return "You must have characters from at least 3 character groups (a-z, A-Z, 0-9, special)";
-    }
-
-    return "OK";
+    return (lower_case + upper_case + numbers + special) >= 3
 }
 
 $(document).ready(function(){
@@ -102,41 +102,56 @@ $(document).ready(function(){
 	 */
 	$('#password-modal').on('shown', function() {
 		$('#password-modal input:visible').first().focus();
+        $('#password-length').show();
+        $('#password-character-groups').show();
+        $('#passwords-matching').hide();
 	    });
 
 	$('#password-modal').on('hide', function() {
 		$('#password-new, #password-new-again, #password-current').val('');
 		$('#password-status, #password-status-again').html('');
 		$('#password-new-again').change();
+        $('#wrong-password-alert').hide();
 	    });
 	/* validations */
 	$('#password-new').bind("change paste keyup", function() {
-		$('#password-status').html(validatePassword($(this).val()));
+        if(!validatePasswordLength($(this).val())){
+            $('#password-length').show();
+        }else{
+            $('#password-length').hide();
+        }
+        if(!validatePasswordCharacterGroups($(this).val())){
+            $('#password-character-groups').show();
+        }else{
+            $('#password-character-groups').hide();
+        }
 		$('#password-new-again').change();
 	    });
 
 	$('#password-new-again').bind("change paste keyup", function() {
-		var state = "No match";
 		if ($(this).val() === $('#password-new').val() && $(this).val().length > 0) {
-		    state = "OK";
-		    if (validatePassword($('#password-new').val()) === "OK") {
+		    $('#passwords-matching').hide();
+		    if (validatePassword($('#password-new').val())) {
 			$('#password-change').removeClass('btn-warning').addClass('btn-success').removeAttr('disabled');
 		    }
 		} else {
+            $('#passwords-matching').show();
 		    $('#password-change').removeClass('btn-success').addClass('btn-warning').attr('disabled', 'disabled');
 		}
 		if ($(this).val().length < 1) {
-		    state = "";
+		    $('#passwords-matching').hide();
 		}
-		$('#password-status-again').html(state);
 	    });
 
 	/* custom ajax post */
 	$('#password-change').click(function() {
-		if ($('#password-new').val() === $('#password-new-again').val() && validatePassword($('#password-new').val()) === "OK") {
+		if ($('#password-new').val() === $('#password-new-again').val() && validatePassword($('#password-new').val())) {
 		    $.post($(this).attr('data-url'), { 'password': $('#password-new').val(), 'old_password': $('#password-current').val() || "" })
 			.done(function() { $('#password-cancel').click(); })
-			.fail(function(data) { $('#password-status-again').html(data.responseText); });
+			.fail(function(data) {
+                $('#wrong-password-alert').html(data.responseText.replace(/\"/g, ""));
+                $('#wrong-password-alert').show();
+            });
 		} else {
 		    return;
 		}

fum/users/templates/users/users_detail.html

@@ -181,17 +181,20 @@ <h3>Change password{% if sudo %} (for user {{object.username}}) {% endif %}</h3>
     {% if sudo %}
         <a href="{% url "users-changepassword" object.username %}" id="sudo_change_password">SUDO: Change to a random password and send it via SMS</a>
     {% endif %}
-
+    <div id="wrong-password-alert" class="alert alert-danger" style="display:none;"></div>
+        <div id="password-length" class="alert alert-info">Password must be at least 10 characters long</div>
+        <div id="password-character-groups" class="alert alert-info">Password must have characters from at least 3 character groups (a-z, A-Z, 0-9, special)</div>
+        <div id="passwords-matching" class="alert alert-info" style="display:none;">Passwords don't match</div>
     {% if not sudo %}
+        
         <label>Current password</label>
         <input type="password" id="password-current"></input>
     {% endif %}
+    <br>
     <label>New password</label>
     <input type="password" id="password-new"></input>
-    <div id="password-status"></div>
     <label>Again</label>
     <input type="password" id="password-new-again"></input>
-    <div id="password-status-again"></div>
   </div>
   <div class="modal-footer">
     <a href="#" class="btn" data-dismiss="modal" id="password-cancel">Cancel</a>