jquery.strengthify.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. /**
  2. * Strengthify - show the weakness of a password (uses zxcvbn for this)
  3. * https://github.com/MorrisJobke/strengthify
  4. *
  5. * Version: 0.5.1
  6. * Author: Morris Jobke (github.com/MorrisJobke) - original
  7. * Eve Ragins @ Eve Corp (github.com/eve-corp)
  8. *
  9. *
  10. * License:
  11. *
  12. * The MIT License (MIT)
  13. *
  14. * Copyright (c) 2013-2016 Morris Jobke <morris.jobke@gmail.com>
  15. *
  16. * Permission is hereby granted, free of charge, to any person obtaining a copy of
  17. * this software and associated documentation files (the "Software"), to deal in
  18. * the Software without restriction, including without limitation the rights to
  19. * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
  20. * the Software, and to permit persons to whom the Software is furnished to do so,
  21. * subject to the following conditions:
  22. *
  23. * The above copyright notice and this permission notice shall be included in all
  24. * copies or substantial portions of the Software.
  25. *
  26. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  27. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
  28. * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
  29. * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
  30. * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  31. * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  32. */
  33. /* global jQuery */
  34. (function($) {
  35. $.fn.strengthify = function(paramOptions) {
  36. "use strict";
  37. var defaults = {
  38. zxcvbn: 'zxcvbn/zxcvbn.js',
  39. titles: [
  40. 'Weakest',
  41. 'Weak',
  42. 'So-so',
  43. 'Good',
  44. 'Perfect'
  45. ],
  46. tilesOptions:{
  47. tooltip: true,
  48. element: false
  49. },
  50. drawTitles: false,
  51. drawMessage: false,
  52. drawBars: true
  53. };
  54. return this.each(function() {
  55. var options = $.extend(defaults, paramOptions);
  56. if (!options.drawTitles
  57. && !options.drawMessage
  58. && !options.drawBars)
  59. console.warn("expect at least one of 'drawTitles', 'drawMessage', or 'drawBars' to be true");
  60. function getWrapperFor(id) {
  61. return $('div[data-strengthifyFor="' + id + '"]');
  62. };
  63. function drawStrengthify() {
  64. var password = $(this).val(),
  65. elemId = $(this).attr('id'),
  66. // hide strengthify if no input is provided
  67. opacity = (password === '') ? 0 : 1,
  68. // calculate result
  69. result = zxcvbn(password),
  70. // setup some vars for later
  71. css = '',
  72. bsLevel = '',
  73. message = '',
  74. // cache jQuery selections
  75. $wrapper = getWrapperFor(elemId),
  76. $container = $wrapper.find('.strengthify-container'),
  77. $message = $wrapper.find('[data-strengthifyMessage]');
  78. $wrapper.children()
  79. .css('opacity', opacity)
  80. .css('-ms-filter',
  81. '"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity * 100 + ')"'
  82. );
  83. // style strengthify bar
  84. // possible scores: 0-4
  85. switch (result.score) {
  86. case 0:
  87. case 1:
  88. css = 'password-bad';
  89. bsLevel = 'danger';
  90. message = result.feedback ? result.feedback.suggestions.join('<br/>') : "";
  91. break;
  92. case 2:
  93. bsLevel = 'warning';
  94. message = result.feedback ? result.feedback.suggestions.join('<br/>') : "";
  95. css = 'password-medium';
  96. break;
  97. case 3:
  98. css = 'password-good';
  99. bsLevel = 'info';
  100. message = "Getting better.";
  101. case 4:
  102. css = 'password-good';
  103. bsLevel = 'success';
  104. message = "Looks good.";
  105. break;
  106. }
  107. if ($message) {
  108. $message.removeAttr('class');
  109. $message.addClass('bg-' + bsLevel);
  110. // reset state for empty string password
  111. if (password === '') {
  112. message = '';
  113. }
  114. $message.html(message);
  115. }
  116. if ($container) {
  117. $container
  118. .attr('class', css + ' strengthify-container')
  119. // possible scores: 0-4
  120. .css(
  121. 'width',
  122. // if score is '0' it will be changed to '1' to
  123. // not hide strengthify if the password is extremely weak
  124. ((result.score === 0 ? 1 : result.score) * 25) + '%'
  125. );
  126. // reset state for empty string password
  127. if (password === '') {
  128. $container.css('width', 0);
  129. }
  130. }
  131. if (options.drawTitles) {
  132. // set a title for the wrapper
  133. if(options.tilesOptions.tooltip){
  134. $wrapper.attr(
  135. 'title',
  136. options.titles[result.score]
  137. ).tooltip({
  138. placement: 'bottom',
  139. trigger: 'manual',
  140. }).tooltip(
  141. 'fixTitle'
  142. ).tooltip(
  143. 'show'
  144. );
  145. if (opacity === 0) {
  146. $wrapper.tooltip(
  147. 'hide'
  148. );
  149. }
  150. }
  151. if(options.tilesOptions.element){
  152. $wrapper.find(".strengthify-tiles").text(options.titles[result.score]);
  153. }
  154. }
  155. };
  156. function init() {
  157. var $elem = $(this),
  158. elemId = $elem.attr('id');
  159. var drawSelf = drawStrengthify.bind(this);
  160. // add elements
  161. $elem.after('<div class="strengthify-wrapper" data-strengthifyFor="' + $elem.attr('id') + '"></div>');
  162. if (options.drawBars) {
  163. getWrapperFor(elemId)
  164. .append('<div class="strengthify-bg" />')
  165. .append('<div class="strengthify-container" />')
  166. .append('<div class="strengthify-separator" style="left: 25%" />')
  167. .append('<div class="strengthify-separator" style="left: 50%" />')
  168. .append('<div class="strengthify-separator" style="left: 75%" />');
  169. }
  170. if (options.drawMessage) {
  171. getWrapperFor(elemId).append('<div data-strengthifyMessage></div>');
  172. }
  173. if (options.drawTitles && options.tilesOptions) {
  174. getWrapperFor(elemId).append('<div class="strengthify-tiles"></div>');
  175. }
  176. $elem.parent().on('scroll', drawSelf);
  177. $.ajax({
  178. cache: true,
  179. dataType: 'script',
  180. url: options.zxcvbn
  181. }).done(function() {
  182. $elem.bind('keyup input change', drawSelf);
  183. });
  184. };
  185. init.call(this);
  186. //return me;
  187. });
  188. };
  189. } (jQuery));