jquery.strengthify.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. /**
  2. * Strengthify - show the weakness of a password (uses zxcvbn for this)
  3. * https://github.com/MorrisJobke/strengthify
  4. *
  5. * Version: 0.4.2
  6. * Author: Morris Jobke (github.com/MorrisJobke)
  7. *
  8. * License:
  9. *
  10. * The MIT License (MIT)
  11. *
  12. * Copyright (c) 2013-2015 Morris Jobke <morris.jobke@gmail.com>
  13. *
  14. * Permission is hereby granted, free of charge, to any person obtaining a copy of
  15. * this software and associated documentation files (the "Software"), to deal in
  16. * the Software without restriction, including without limitation the rights to
  17. * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
  18. * the Software, and to permit persons to whom the Software is furnished to do so,
  19. * subject to the following conditions:
  20. *
  21. * The above copyright notice and this permission notice shall be included in all
  22. * copies or substantial portions of the Software.
  23. *
  24. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  25. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
  26. * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
  27. * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
  28. * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  29. * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  30. */
  31. /* global jQuery */
  32. (function ($) {
  33. $.fn.strengthify = function(paramOptions) {
  34. var me = this,
  35. defaults = {
  36. zxcvbn: 'zxcvbn/zxcvbn.js',
  37. titles: [
  38. 'Weakest',
  39. 'Weak',
  40. 'So-so',
  41. 'Good',
  42. 'Perfect'
  43. ]
  44. },
  45. options = $.extend(defaults, paramOptions),
  46. drawStrengthify = function() {
  47. var password = $(me).val(),
  48. // hide strengthigy if no input is provided
  49. opacity = (password === '') ? 0 : 1,
  50. // calculate result
  51. result = zxcvbn(password),
  52. css = '',
  53. // cache jQuery selections
  54. $container = $('.strengthify-container'),
  55. $wrapper = $('.strengthify-wrapper');
  56. $wrapper.children().css(
  57. 'opacity',
  58. opacity
  59. ).css(
  60. '-ms-filter',
  61. '"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')"'
  62. );
  63. // style strengthify bar
  64. // possible scores: 0-4
  65. switch(result.score) {
  66. case 0:
  67. case 1:
  68. css = 'password-bad';
  69. break;
  70. case 2:
  71. css = 'password-medium';
  72. break;
  73. case 3:
  74. case 4:
  75. css = 'password-good';
  76. break;
  77. }
  78. $container
  79. .attr('class', css + ' strengthify-container')
  80. // possible scores: 0-4
  81. .css(
  82. 'width',
  83. // if score is '0' it will be changed to '1' to
  84. // not hide strengthify if the password is extremely weak
  85. ((result.score === 0 ? 1 : result.score) * 25) + '%'
  86. );
  87. // set a title for the wrapper
  88. $wrapper.attr(
  89. 'title',
  90. options.titles[result.score]
  91. ).tooltip({
  92. placement: 'bottom',
  93. trigger: 'manual',
  94. }).tooltip(
  95. 'show'
  96. );
  97. if(opacity === 0) {
  98. $wrapper.tooltip(
  99. 'hide'
  100. );
  101. }
  102. // reset state for empty string password
  103. if(password === '') {
  104. $container.css('width', 0);
  105. }
  106. };
  107. // add elements
  108. $('.strengthify-wrapper')
  109. .append('<div class="strengthify-bg" />')
  110. .append('<div class="strengthify-container" />')
  111. .append('<div class="strengthify-separator" style="left: 25%" />')
  112. .append('<div class="strengthify-separator" style="left: 50%" />')
  113. .append('<div class="strengthify-separator" style="left: 75%" />');
  114. me.parents().on('scroll', drawStrengthify);
  115. $.ajax({
  116. cache: true,
  117. dataType: 'script',
  118. url: options.zxcvbn
  119. }).done(function() {
  120. me.bind('keyup input change', drawStrengthify);
  121. });
  122. return me;
  123. };
  124. }(jQuery));