Нет описания

passwordStrength.js 5.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. angular.module('MyApp')
  2. .directive('passwordStrength', function() {
  3. return {
  4. restrict: 'A',
  5. require: 'ngModel',
  6. link: function(scope, element, attrs, ngModel) {
  7. var indicator = element.children();
  8. var dots = Array.prototype.slice.call(indicator.children());
  9. var weakest = dots.slice(-1)[0];
  10. var weak = dots.slice(-2);
  11. var strong = dots.slice(-3);
  12. var strongest = dots.slice(-4);
  13. element.after(indicator);
  14. element.bind('keyup', function() {
  15. var matches = {
  16. positive: {},
  17. negative: {}
  18. },
  19. counts = {
  20. positive: {},
  21. negative: {}
  22. },
  23. tmp,
  24. strength = 0,
  25. letters = 'abcdefghijklmnopqrstuvwxyz',
  26. numbers = '01234567890',
  27. symbols = '\\!@#$%&/()=?¿',
  28. strValue;
  29. angular.forEach(dots, function(el) {
  30. el.style.backgroundColor = '#ebeef1';
  31. });
  32. if (ngModel.$viewValue) {
  33. // Increase strength level
  34. matches.positive.lower = ngModel.$viewValue.match(/[a-z]/g);
  35. matches.positive.upper = ngModel.$viewValue.match(/[A-Z]/g);
  36. matches.positive.numbers = ngModel.$viewValue.match(/\d/g);
  37. matches.positive.symbols = ngModel.$viewValue.match(/[$-/:-?{-~!^_`\[\]]/g);
  38. matches.positive.middleNumber = ngModel.$viewValue.slice(1, -1).match(/\d/g);
  39. matches.positive.middleSymbol = ngModel.$viewValue.slice(1, -1).match(/[$-/:-?{-~!^_`\[\]]/g);
  40. counts.positive.lower = matches.positive.lower ? matches.positive.lower.length : 0;
  41. counts.positive.upper = matches.positive.upper ? matches.positive.upper.length : 0;
  42. counts.positive.numbers = matches.positive.numbers ? matches.positive.numbers.length : 0;
  43. counts.positive.symbols = matches.positive.symbols ? matches.positive.symbols.length : 0;
  44. counts.positive.numChars = ngModel.$viewValue.length;
  45. tmp += (counts.positive.numChars >= 8) ? 1 : 0;
  46. counts.positive.requirements = (tmp >= 3) ? tmp : 0;
  47. counts.positive.middleNumber = matches.positive.middleNumber ? matches.positive.middleNumber.length : 0;
  48. counts.positive.middleSymbol = matches.positive.middleSymbol ? matches.positive.middleSymbol.length : 0;
  49. // Decrease strength level
  50. matches.negative.consecLower = ngModel.$viewValue.match(/(?=([a-z]{2}))/g);
  51. matches.negative.consecUpper = ngModel.$viewValue.match(/(?=([A-Z]{2}))/g);
  52. matches.negative.consecNumbers = ngModel.$viewValue.match(/(?=(\d{2}))/g);
  53. matches.negative.onlyNumbers = ngModel.$viewValue.match(/^[0-9]*$/g);
  54. matches.negative.onlyLetters = ngModel.$viewValue.match(/^([a-z]|[A-Z])*$/g);
  55. counts.negative.consecLower = matches.negative.consecLower ? matches.negative.consecLower.length : 0;
  56. counts.negative.consecUpper = matches.negative.consecUpper ? matches.negative.consecUpper.length : 0;
  57. counts.negative.consecNumbers = matches.negative.consecNumbers ? matches.negative.consecNumbers.length : 0;
  58. // Calculations
  59. strength += counts.positive.numChars * 4;
  60. if (counts.positive.upper) {
  61. strength += (counts.positive.numChars - counts.positive.upper) * 2;
  62. }
  63. if (counts.positive.lower) {
  64. strength += (counts.positive.numChars - counts.positive.lower) * 2;
  65. }
  66. if (counts.positive.upper || counts.positive.lower) {
  67. strength += counts.positive.numbers * 4;
  68. }
  69. strength += counts.positive.symbols * 6;
  70. strength += (counts.positive.middleSymbol + counts.positive.middleNumber) * 2;
  71. strength += counts.positive.requirements * 2;
  72. strength -= counts.negative.consecLower * 2;
  73. strength -= counts.negative.consecUpper * 2;
  74. strength -= counts.negative.consecNumbers * 2;
  75. if (matches.negative.onlyNumbers) {
  76. strength -= counts.positive.numChars;
  77. }
  78. if (matches.negative.onlyLetters) {
  79. strength -= counts.positive.numChars;
  80. }
  81. strength = Math.max(0, Math.min(100, Math.round(strength)));
  82. if (strength > 85) {
  83. angular.forEach(strongest, function(el) {
  84. el.style.backgroundColor = '#008cdd';
  85. });
  86. } else if (strength > 65) {
  87. angular.forEach(strong, function(el) {
  88. el.style.backgroundColor = '#6ead09';
  89. });
  90. } else if (strength > 30) {
  91. angular.forEach(weak, function(el) {
  92. el.style.backgroundColor = '#e09115';
  93. });
  94. } else {
  95. weakest.style.backgroundColor = '#e01414';
  96. }
  97. }
  98. });
  99. },
  100. template: '<span class="password-strength-indicator"><span></span><span></span><span></span><span></span></span>'
  101. };
  102. });