Pass Strength (HTML widget)
This project is an HTML widget that detects the password strength, preventing to create a password outside the specified standards.
Images
Password = ''
Password = 'test1'
Password = 'test1234'
Password = 'test1234@'
Password = 'test1234@A'
Password standards
To a password to be accepted, it must meet the following standards:
- Must have a minimum specified length
- Must have numbers and letters
- Must have special caracters
- Must have uppercase and lowercase letters
How to use
- Add class 'pass_input' in password input tag
- Add after this tag a div tag with id='pass_strength_box'
- Inside this tag must have three blocks:
- Header
<h5 class='pass_strength_header'>Header text</h5> - Progress bar
<div class='progress'>
<div class='pass_strength_bar'>
</div> </div> - Requirements list
<ul class='pass_strength'>
<li id='pass_length' data-length='MINIMUM_CHARACTERS'>
Password length (minimum: MINIMUM_CHARACTERS characters)
<span class='pass_strength_icon'></span>
</li>
<li id='pass_numCharact'>
Numbers and Characters
<span class='pass_strength_icon'></span>
</li>
<li id='pass_specCharact'>
Special characters
<span class='pass_strength_icon'></span>
</li>
<li id='pass_ulCharact'>
Uppercase and lowercase letters
<span class='pass_strength_icon'></span>
</li>
</ul>
- Header
- Exchange MINIMUM_CHARACTERS to the minimum password length
- Finally, add class 'submit' at the submit input tag
Requirements
- Bootstrap 4
- jQuery
- Font awesome (for icons)
Project files
| File | Type | Description |
|---|---|---|
| example | Directory | Contains a HTML example to test the plugin in action |
| media | Directory | Contains visual images of the project |
| requirements | Directory | Contains the requirement files for the plugin to work |
| src | Directory | Contains the plugin source files |
| src/ps_style.css | File | Contains the plugin stylesheet |
| src/ps_script.js | File | Contains the plugin source |