├── examples.png ├── bower.json ├── package.json ├── strengthify.min.css ├── LICENSE ├── strengthify.css ├── jquery.strengthify.min.js ├── examples.html ├── README.md └── jquery.strengthify.js /examples.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nextcloud/strengthify/HEAD/examples.png -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "strengthify", 3 | "version": "0.5.9", 4 | "homepage": "https://github.com/MorrisJobke/strengthify", 5 | "authors": [ 6 | "Eve Ragins " 8 | ], 9 | "description": "Combine jQuery and zxcvbn to create a password strength meter.", 10 | "main": "jquery.strengthify.js", 11 | "license": "MIT" 12 | } 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "strengthify", 3 | "version": "0.5.9", 4 | "description": "Combine jQuery and zxcvbn to create a password strength meter", 5 | "main": "jquery.strengthify.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/MorrisJobke/strengthify.git" 12 | }, 13 | "author": "Morris Jobke", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/MorrisJobke/strengthify/issues" 17 | }, 18 | "homepage": "https://github.com/MorrisJobke/strengthify#readme" 19 | } 20 | -------------------------------------------------------------------------------- /strengthify.min.css: -------------------------------------------------------------------------------- 1 | .strengthify-wrapper{position:relative}.strengthify-wrapper>*{-ms-filter:"alpha(opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.strengthify-bg,.strengthify-container,.strengthify-separator{height:3px}.strengthify-bg,.strengthify-container{display:block;position:absolute;width:100%}.strengthify-bg{background-color:#BBB}.strengthify-separator{display:inline-block;position:absolute;background-color:#FFF;width:1px;z-index:10}.password-bad{background-color:#C33}.password-medium{background-color:#F80}.password-good{background-color:#3C3}div[data-strengthifyMessage]{padding:3px 8px}.strengthify-tiles{float:right} -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013-2020 Morris Jobke 4 | Eve Ragins @ Eve Corp (github.com/eve-corp) 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy of 7 | this software and associated documentation files (the "Software"), to deal in 8 | the Software without restriction, including without limitation the rights to 9 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 10 | the Software, and to permit persons to whom the Software is furnished to do so, 11 | subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 18 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 19 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 20 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 21 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /strengthify.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Strengthify - show the weakness of a password (uses zxcvbn for this) 3 | * https://github.com/MorrisJobke/strengthify 4 | * Version: 0.5.9 5 | * License: The MIT License (MIT) 6 | * Copyright (c) 2013-2020 Morris Jobke 7 | */ 8 | 9 | .strengthify-wrapper { 10 | position: relative; 11 | } 12 | 13 | .strengthify-wrapper > * { 14 | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 15 | filter: alpha(opacity=0); 16 | opacity: 0; 17 | -webkit-transition:all .5s ease-in-out; 18 | -moz-transition:all .5s ease-in-out; 19 | transition:all .5s ease-in-out; 20 | } 21 | 22 | .strengthify-bg, .strengthify-container, .strengthify-separator { 23 | height: 3px; 24 | } 25 | 26 | .strengthify-bg, .strengthify-container { 27 | display: block; 28 | position: absolute; 29 | width: 100%; 30 | } 31 | 32 | .strengthify-bg { 33 | background-color: #BBB; 34 | } 35 | 36 | .strengthify-separator { 37 | display: inline-block; 38 | position: absolute; 39 | background-color: #FFF; 40 | width: 1px; 41 | z-index: 10; 42 | } 43 | 44 | .password-bad { 45 | background-color: #C33; 46 | } 47 | .password-medium { 48 | background-color: #F80; 49 | } 50 | .password-good { 51 | background-color: #3C3; 52 | } 53 | 54 | div[data-strengthifyMessage] { 55 | padding: 3px 8px; 56 | } 57 | 58 | .strengthify-tiles{ 59 | float: right; 60 | } 61 | -------------------------------------------------------------------------------- /jquery.strengthify.min.js: -------------------------------------------------------------------------------- 1 | (function($){$.fn.strengthify=function(paramOptions){"use strict";var defaults={zxcvbn:'zxcvbn/zxcvbn.js',userInputs:[],titles:['Weakest','Weak','So-so','Good','Perfect'],tilesOptions:{tooltip:true,element:false},drawTitles:false,drawMessage:false,drawBars:true,$addAfter:null,nonce:null};return this.each(function(){var options=$.extend(defaults,paramOptions);if(!options.drawTitles&&!options.drawMessage&&!options.drawBars){console.warn("expect at least one of 'drawTitles', 'drawMessage', or 'drawBars' to be true")}function getWrapperFor(id){return $('div[data-strengthifyFor="'+id+'"]')};function drawStrengthify(){var password=$(this).val().substring(0,100),elemId=$(this).attr('id'),opacity=(password==='')?0:1,result=zxcvbn(password,options.userInputs),css='',bsLevel='',message='',$wrapper=getWrapperFor(elemId),$container=$wrapper.find('.strengthify-container'),$message=$wrapper.find('[data-strengthifyMessage]');$wrapper.children().css('opacity',opacity).css('-ms-filter','"progid:DXImageTransform.Microsoft.Alpha(Opacity='+opacity*100+')"');if(options.onResult){options.onResult(result)}switch(result.score){case 0:case 1:css='password-bad';bsLevel='danger';message=result.feedback?result.feedback.suggestions.join('
'):"";break;case 2:bsLevel='warning';message=result.feedback?result.feedback.suggestions.join('
'):"";css='password-medium';break;case 3:css='password-good';bsLevel='info';message="Getting better.";break;case 4:css='password-good';bsLevel='success';message="Looks good.";break}if($message){$message.removeAttr('class');$message.addClass('bg-'+bsLevel);if(password===''){message=''}$message.html(message)}if($container){$container.attr('class',css+' strengthify-container').css('width',((result.score===0?1:result.score)*25)+'%');if(password===''){$container.css('width',0)}}if(options.drawTitles){if(options.tilesOptions.tooltip){$wrapper.attr('title',options.titles[result.score]).tooltip({placement:'bottom',trigger:'manual'}).tooltip('fixTitle').tooltip('show');if(opacity===0){$wrapper.tooltip('hide')}}if(options.tilesOptions.element){$wrapper.find(".strengthify-tiles").text(options.titles[result.score])}}};function init(){var $elem=$(this),elemId=$elem.attr('id');var drawSelf=drawStrengthify.bind(this);var $addAfter=options.$addAfter;if(!$addAfter){$addAfter=$elem}$addAfter.after('
');if(options.drawBars){getWrapperFor(elemId).append('
').append('
').append('
').append('
').append('
')}if(options.drawMessage){getWrapperFor(elemId).append('
')}if(options.drawTitles&&options.tilesOptions){getWrapperFor(elemId).append('
')}var script=document.createElement("script");script.src=options.zxcvbn;if(options.nonce!==null){script.setAttribute('nonce',options.nonce)}script.onload=function(){$elem.parent().on('scroll',drawSelf);$elem.bind('keyup input change',drawSelf)};document.head.appendChild(script)};init.call(this);})}}(jQuery)); -------------------------------------------------------------------------------- /examples.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | 18 | 19 |
20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 |
32 | 33 | 34 |
35 |
36 | 37 | 38 |
39 |
40 | 41 | 42 |
43 |
44 | 45 | 46 |
47 |
48 | 49 | 50 |
51 |
52 | 53 | 54 |
55 |
56 | 57 | 58 |
59 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 🔒🔍 strengthify 2 | ================ 3 | 4 | Combine jQuery and zxcvbn to create a password strength meter. 5 | 6 | ![Examples](examples.png) 7 | 8 | How to use 9 | ---------- 10 | 11 | As of 0.5.0, the wrapper will be automatically added beneath the target input field 12 | 13 | Add `jquery` (tested with 1.10.0), `jquery.strengthify.js` and 14 | `strengthify.css` to your document. 15 | 16 | If using the message option, include bootstrap. 17 | 18 | If using the titles option, include bootstrap's `tooltip.js`, 19 | 20 | ```HTML 21 | 22 | 23 | 24 | 25 | 26 | ``` 27 | 28 | Because [zxcvbn](https://github.com/dropbox/zxcvbn) is really 29 | heavyweight, it will be loaded asynchronously from `zxcvbn/zxcvbn.js`. 30 | This can however be configured with an optional parameter. 31 | 32 | Then call `.strengthify` on the password input field. 33 | 34 | ```JavaScript 35 | $('#password-field').strengthify() 36 | ``` 37 | 38 | That's it. Now the password strength meter will be updated after 39 | each keystroke. 40 | 41 | Configuration 42 | ------------- 43 | 44 | The path and the title of the different strength categories can 45 | be configured with the first parameter of `.strengthify`. 46 | 47 | 48 |
49 |
userInputs
an array of strings that zxcvbn will treat as an extra dictionary
50 |
drawTitles
pop-up text (above)
51 |
drawMessage
detailed message beneath input
52 |
drawBars
password strength color progression bars beneath input
53 |
$addAfter
element after which the strengthify element should be inserted
54 |
nonce
a nonce that is added to the `