jquery.strengthify.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. /**
  2. * Strengthify - show the weakness of a password (uses zxcvbn for this)
  3. * https://github.com/kabum/strengthify
  4. *
  5. * Version: 0.4.1
  6. * Author: Morris Jobke (github.com/kabum)
  7. *
  8. * License:
  9. *
  10. * The MIT License (MIT)
  11. *
  12. * Copyright (c) 2013 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. // add elements
  47. $('.strengthify-wrapper')
  48. .append('<div class="strengthify-bg" />')
  49. .append('<div class="strengthify-container" />')
  50. .append('<div class="strengthify-separator" style="left: 25%" />')
  51. .append('<div class="strengthify-separator" style="left: 50%" />')
  52. .append('<div class="strengthify-separator" style="left: 75%" />');
  53. $.ajax({
  54. cache: true,
  55. dataType: 'script',
  56. url: options.zxcvbn
  57. }).done(function() {
  58. me.bind('keyup input', function() {
  59. var password = $(this).val(),
  60. // hide strengthigy if no input is provided
  61. opacity = (password === '') ? 0 : 1,
  62. // calculate result
  63. result = zxcvbn(password),
  64. css = '',
  65. // cache jQuery selections
  66. $container = $('.strengthify-container'),
  67. $wrapper = $('.strengthify-wrapper');
  68. $wrapper.children().css(
  69. 'opacity',
  70. opacity
  71. ).css(
  72. '-ms-filter',
  73. '"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')"'
  74. );
  75. // style strengthify bar
  76. // possible scores: 0-4
  77. switch(result.score) {
  78. case 0:
  79. case 1:
  80. css = 'password-bad';
  81. break;
  82. case 2:
  83. css = 'password-medium';
  84. break;
  85. case 3:
  86. case 4:
  87. css = 'password-good';
  88. break;
  89. }
  90. $container
  91. .attr('class', css + ' strengthify-container')
  92. // possible scores: 0-4
  93. .css(
  94. 'width',
  95. // if score is '0' it will be changed to '1' to
  96. // not hide strengthify if the password is extremely weak
  97. ((result.score === 0 ? 1 : result.score) * 25) + '%'
  98. );
  99. // set a title for the wrapper
  100. $wrapper.attr(
  101. 'title',
  102. options.titles[result.score]
  103. ).tipsy({
  104. trigger: 'manual',
  105. opacity: opacity
  106. }).tipsy(
  107. 'show'
  108. );
  109. if(opacity === 0) {
  110. $wrapper.tipsy(
  111. 'hide'
  112. );
  113. }
  114. // reset state for empty string password
  115. if(password === '') {
  116. $container.css('width', 0);
  117. }
  118. });
  119. });
  120. return me;
  121. };
  122. }(jQuery));