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>
    
• 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