1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
🔒🔍 strengthify
================
Combine jQuery and zxcvbn to create a password strength meter.
How to use
----------
As of 0.5.0, the wrapper will be automatically added beneath the target input field
Add `jquery` (tested with 1.10.0), `jquery.strengthify.js` and
`strengthify.css` to your document.
If using the message option, include bootstrap.
If using the titles option, include bootstrap's `tooltip.js`,
```HTML
<script src="jquery-1.10.0.min.js"></script>
<script src="tooltip.js"></script>
<script src="jquery.strengthify.js"></script>
<link rel="stylesheet" href="bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="strengthify.css" type="text/css">
```
Because [zxcvbn](https://github.com/dropbox/zxcvbn) is really
heavyweight, it will be loaded asynchronously from `zxcvbn/zxcvbn.js`.
This can however be configured with an optional parameter.
Then call `.strengthify` on the password input field.
```JavaScript
$('#password-field').strengthify()
```
That's it. Now the password strength meter will be updated after
each keystroke.
Configuration
-------------
The path and the title of the different strength categories can
be configured with the first parameter of `.strengthify`.
<dl>
<dt>drawTitles</dt><dd> pop-up text (above)</dd>
<dt>drawMessage</dt><dd> detailed message beneath input</dd>
<dt>drawBars</dt><dd> password strength color progression bars beneath input</dd>
</dl>
Default:
```JSON
{
"zxcvbn": "zxcvbn/zxcvbn.js",
"titles": [
"Weakest",
"Weak",
"So-so",
"Good",
"Perfect"
],
"drawTitles": false,
"drawMessage": false,
"drawBars": true
}
```
Overwrite example:
```JavaScript
$('#password-field').strengthify({zxcvbn: 'my/path/to/zxcvbn.js'})
```
Versions
--------
<dl>
<dt>0.5.3</dt>
<dd>
<ul>
<li>make possible to specify the element to add the strength bar after (#20)</li>
<li>provide minified version (#16)</li>
</ul>
</dd>
<dt>0.5.2</dt>
<dd>
<ul>
<li>use eval directly (#14)</li>
<li>added missing break (#13)</li>
</ul>
</dd>
<dt>0.5.1</dt>
<dd>add tilesOptions (#10) - you can choose now between tooltip and element or both - thanks to @feirer</dd>
<dt>0.5.0</dt>
<dd> fairly substantial changes:
<ul>
<li>added feedback message</li>
<li> $.each(...) functionality</li>
<li> restructuring wrapping</li>
<li> feature flags</li>
</ul>
"strengthify-wrapper" added automatically beneath target input
</dd>
<dt>0.4.1</dt>
<dd>hotfix for missing ;</dd>
<dt>0.4</dt>
<dd>syntax and performance cleanups</dd>
<dt>0.3</dt>
<dd>some fixes:
<ul>
<li>migrate from "display" to "opacity"</li>
<li>fix pasting to input field</li>
<li>add tipsy with strength</li>
</ul>
</dd>
<dt>0.2</dt>
<dd>solve mimetype issues</dd>
<dt>0.1</dt>
<dd>Initial version</dd>
</dl>
|
