src/templates/people/modules/password.js

   1 $(function() {
   2         var progress = $("#password-strength");
   3         var warning  = $("#password-warning");
   4         var feedback = $("#password-feedback");
   5
   6         var password1 = $("#password1");
   7         var password2 = $("#password2");
   8
   9         var form = password1.parents("form");
  10         var submit = form.find(":submit");
  11
  12         // Fetch words that are common to the user
  13         var user_inputs = password1.data("user-input").split(" ");
  14
  15         var quality;
  16
  17         password1.keyup(function(event) {
  18                 var val1 = password1.val();
  19
  20                 if (val1) {
  21                         // Estimate password quality
  22                         quality = zxcvbn(val1, user_inputs);
  23
  24                         // Convert score into percentage
  25                         var percentage = (quality.score + 1) * 20;
  26
  27                         // Set progress bar width
  28                         progress.css("width", percentage + "%");
  29
  30                         // Clear all previous backgrounds
  31                         progress.removeClass([
  32                                 "bg-success", "bg-warning", "bg-danger"
  33                         ]);
  34
  35                         // Make progress bar show in the right colour
  36                         switch (quality.score) {
  37                                 case 0:
  38                                 case 1:
  39                                 case 2:
  40                                         progress.addClass("bg-danger");
  41                                         break;
  42
  43                                 case 3:
  44                                         progress.addClass("bg-warning");
  45                                         break;
  46
  47                                 case 4:
  48                                         progress.addClass("bg-success");
  49                                         break;
  50                         }
  51
  52                         // Show any feedback
  53                         warning.empty();
  54                         feedback.empty();
  55
  56                         if (quality.feedback) {
  57                                 if (quality.feedback.warning) {
  58                                         warning.html(quality.feedback.warning);
  59                                 }
  60
  61                                 $.each(quality.feedback.suggestions, function (i, suggestion) {
  62                                         feedback.append("<li>" + suggestion + "</li>");
  63                                 });
  64                         }
  65                 } else {
  66                         progress.css("width", "0%");
  67
  68                         // Clear all feedback
  69                         warning.empty();
  70                         feedback.empty();
  71                 }
  72
  73                 form.trigger("change");
  74         });
  75
  76         password2.keyup(function(event) {
  77                 form.trigger("change");
  78         });
  79
  80         form.on("change", function() {
  81                 $("#password-mismatch").hide();
  82                 submit.prop("disabled", true);
  83
  84                 var val1 = password1.val();
  85                 var val2 = password2.val();
  86
  87                 // We cannot submit the form when password2 is empty
  88                 if (!val2)
  89                         return;
  90
  91                 // If the passwords match, we allow to submit the form
  92                 if (val1 !== val2) {
  93                         $("#password-mismatch").show();
  94                         return;
  95                 }
  96
  97                 if (!quality || quality.score < 3)
  98                         return;
  99
 100                 // They match, so we can enable the submit button
 101                 submit.prop("disabled", false);
 102         });
 103 });