src/templates/auth/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                 form.trigger("change");
  19         });
  20
  21         password2.keyup(function(event) {
  22                 form.trigger("change");
  23         });
  24
  25         form.on("change", function() {
  26                 submit.prop("disabled", true);
  27
  28                 var val1 = password1.val();
  29                 var val2 = password2.val();
  30
  31                 if (val1) {
  32                         // Estimate password quality
  33                         quality = zxcvbn(val1, user_inputs);
  34
  35                         // Convert score into percentage
  36                         var percentage = (quality.score + 1) * 20;
  37
  38                         // Set progress bar width
  39                         progress.val(percentage);
  40
  41                         // Clear all previous backgrounds
  42                         progress.removeClass([
  43                                 "is-success", "is-warning", "is-danger"
  44                         ]);
  45
  46                         // Make progress bar show in the right colour
  47                         switch (quality.score) {
  48                                 case 0:
  49                                 case 1:
  50                                 case 2:
  51                                         progress.addClass("is-danger");
  52                                         break;
  53
  54                                 case 3:
  55                                         progress.addClass("is-warning");
  56                                         break;
  57
  58                                 case 4:
  59                                         progress.addClass("is-success");
  60                                         break;
  61                         }
  62
  63                         // Show any feedback
  64                         feedback.empty();
  65
  66                         if (quality.feedback) {
  67                                 if (val2 && (val1 !== val2)) {
  68                                         feedback.append("<li>{{ _("Passwords do not match") }}</li>");
  69                                 }
  70
  71                                 if (quality.feedback.warning) {
  72                                         feedback.append("<li>" + quality.feedback.warning + "</li>");
  73                                 }
  74
  75                                 $.each(quality.feedback.suggestions, function (i, suggestion) {
  76                                         feedback.append("<li>" + suggestion + "</li>");
  77                                 });
  78                         }
  79                 } else {
  80                         progress.val(0);
  81
  82                         // Clear all feedback
  83                         feedback.empty();
  84                 }
  85
  86                 // We cannot submit the form when password2 is empty
  87                 if (!val2)
  88                         return;
  89
  90                 if (!quality || quality.score < 3)
  91                         return;
  92
  93                 // They match, so we can enable the submit button
  94                 submit.prop("disabled", false);
  95         });
  96 });