people: Improve password UI

The submit button is now disabled as long as the form should
not be sent.

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/auth/activate.html b/src/templates/auth/activate.html
index 4b661c161411e0c7d61bcc2ece0e35110ac26f5c..472a41ea3f052d7f4a7f46cff5dda545f3bea15b 100644 (file)
--- a/src/templates/auth/activate.html
+++ b/src/templates/auth/activate.html
@@ -17,7 +17,7 @@
 
                                {% module Password() %}
 
-                               <button type="submit" class="btn btn-primary btn-block">
+                               <button type="submit" class="btn btn-primary btn-block" disabled>
                                        {{ _("Activate Account") }}
                                </button>
                        </form>

diff --git a/src/templates/people/modules/password.js b/src/templates/people/modules/password.js
index e20ed56806fae94455f35d822fc43111c7c3bfe3..8235fc733ebbfdd4b0d1e66decfb11ed3523a903 100644 (file)
--- a/src/templates/people/modules/password.js
+++ b/src/templates/people/modules/password.js
@@ -1,79 +1,103 @@
 $(function() {
-    var progress = $("#password-strength");
-    var warning  = $("#password-warning");
-    var feedback = $("#password-feedback");
-
-    $("#password1").keyup(function(event) {
-        var password1 = $(this).val();
-
-        // Fetch words that are common to the user
-        var user_inputs = $(this).data("user-input").split(" ");    
-
-        if (password1) {
-            // Estimate password quality
-            var quality = zxcvbn(password1, user_inputs);
-
-            // Convert score into percentage
-            var percentage = (quality.score + 1) * 20;
-
-            // Set progress bar width
-            progress.css("width", percentage + "%");
-
-            // Clear all previous backgrounds
-            progress.removeClass([
-                "bg-success", "bg-warning", "bg-danger"
-            ]);
-
-            // Make progress bar show in the right colour
-            switch (quality.score) {
-                case 0:
-                case 1:
-                case 2:
-                    progress.addClass("bg-danger");
-                    break;
-
-                case 3:
-                    progress.addClass("bg-warning");
-                    break;
-
-                case 4:
-                    progress.addClass("bg-success");
-                    break;
-            }
-
-            // Show any feedback
-            warning.empty();
-            feedback.empty();
-
-            if (quality.feedback) {
-                if (quality.feedback.warning) {
-                    warning.html(quality.feedback.warning);
-                }
-
-                $.each(quality.feedback.suggestions, function (i, suggestion) {
-                    feedback.append("<li>" + suggestion + "</li>");
-                });
-            }
-        } else {
-            progress.css("width", "0%");
-
-            // Clear all feedback
-            warning.empty();
-            feedback.empty();
-        }
-    });
-
-    $("input[type=submit]").click( function(event) {
-        var password1 = $("#password1");
-        var password2 = $("#password2");
-
-        // If the passwords match, we allow to submit the form
-        if (password1.val() === password2.val()) {
-            return true;
-
-        } else {
-            $("#password-mismatch").show();
-            return false;
-        }
-    });
+       var progress = $("#password-strength");
+       var warning  = $("#password-warning");
+       var feedback = $("#password-feedback");
+
+       var password1 = $("#password1");
+       var password2 = $("#password2");
+
+       var form = password1.parents("form");
+       var submit = form.find(":submit");
+
+       // Fetch words that are common to the user
+       var user_inputs = password1.data("user-input").split(" ");
+
+       var quality;
+
+       password1.keyup(function(event) {
+               var val1 = password1.val();
+
+               if (val1) {
+                       // Estimate password quality
+                       quality = zxcvbn(val1, user_inputs);
+
+                       // Convert score into percentage
+                       var percentage = (quality.score + 1) * 20;
+
+                       // Set progress bar width
+                       progress.css("width", percentage + "%");
+
+                       // Clear all previous backgrounds
+                       progress.removeClass([
+                               "bg-success", "bg-warning", "bg-danger"
+                       ]);
+
+                       // Make progress bar show in the right colour
+                       switch (quality.score) {
+                               case 0:
+                               case 1:
+                               case 2:
+                                       progress.addClass("bg-danger");
+                                       break;
+
+                               case 3:
+                                       progress.addClass("bg-warning");
+                                       break;
+
+                               case 4:
+                                       progress.addClass("bg-success");
+                                       break;
+                       }
+
+                       // Show any feedback
+                       warning.empty();
+                       feedback.empty();
+
+                       if (quality.feedback) {
+                               if (quality.feedback.warning) {
+                                       warning.html(quality.feedback.warning);
+                               }
+
+                               $.each(quality.feedback.suggestions, function (i, suggestion) {
+                                       feedback.append("<li>" + suggestion + "</li>");
+                               });
+                       }
+               } else {
+                       progress.css("width", "0%");
+
+                       // Clear all feedback
+                       warning.empty();
+                       feedback.empty();
+               }
+
+               form.trigger("change");
+       });
+
+       password2.keyup(function(event) {
+               form.trigger("change");
+       });
+
+       form.on("change", function() {
+               $("#password-mismatch").hide();
+               submit.prop("disabled", true);
+
+               var val1 = password1.val();
+               var val2 = password2.val();
+
+               // We cannot submit the form when password2 is empty
+               if (!val2)
+                       return;
+
+               // If the passwords match, we allow to submit the form
+               if (val1 !== val2) {
+                       $("#password-mismatch").show();
+                       return;
+               }
+
+               if (!quality || quality.score < 3)
+                       return;
+
+               // They match, so we can enable the submit button
+               submit.prop("disabled", false);
+       });
 });