Secure Password Generator With Strength Indicator

What is a secure password? A secure password must be at least 8 characters long and contain a mix of upper and lower case letters, numbers and symbols. It's the simple rules that people have trouble with. 

So to prevent having really weak password (like "password" or "12345"), we'd like share you with an online secure password generator that will allow you to create a website/app password in just a couple clicks.

This online tool enables you to generate random password strings, in a completely secure manner. The generated password is as random as humanly possible and can be used for various application including but not limited to, identities and accounts created on the go or elsewhere.

It also comes with a password strength indicator that indicates the security strength of the currently generated password in a visual way.

See Also:

• 7 Best Secure Password Generator Tools In JavaScript
• 10 Best Password Strength Checkers In JavaScript

How to use it:

1. Create the HTML for the password generator.

<form action="#">

  <!-- Password Field -->
  <input type="text" id="pass-value" name="pass-value" value="" readonly>

  <!-- Generate Button -->
  <button type="button" id="btn-regenerate" title="Generate">
    Generate
  </button>

  <!-- Range Slider To Select Password Length -->
  <label for="customRange">
    Password Length (<span id="pass-length">16</span>)
  </label>
  <input type="range" min="2" max="100" value="16" id="pass-range" name="pass-range" />
  </div>

  <!-- Password Generator Options -->
  <input type="checkbox" class="form-check-input param-check" id="letters" name="letters" value="1" checked>
  <label class="form-check-label" for="letters">Letters (e.g. Aab)</label>

  <input type="checkbox" class="form-check-input param-check" id="numbers" name="numbers" value="1" checked>
  <label class="form-check-label" for="numbers">Numbers (e.g. 123)</label>

  <input type="checkbox" class="form-check-input param-check" id="symbols" name="symbols" value="1" checked>
  <label class="form-check-label" for="symbols">Symbols (e.g. @#?)</label>

  <input type="checkbox" class="form-check-input param-check" id="complex" name="complex" value="1">
  <label class="form-check-label" for="complex">Complex Characters (e.g. \'~)</label>

  <!-- Shuffle Button -->
  <button type="button" class="btn btn-dark btn-sm text-white" id="btn-shuffle" name="btn-shuffle">
    Shuffle
  </button>
  <label for="check2">Shuffle (e.g. a1B -> 1aB)</label>

  <!-- Copy Button -->
  <button type="button" data-clipboard-target="#pass-value" title="Copy">
    Copy Password <span id="generate-type"></span>
  </button>
  </div>

  <!-- Password Strength Indicator -->
  <img src="./assets/images/reactions/no-clue.png" id="emoji-reaction" width="75" height="75" alt="emoji reaction" />
  <h4 id="emoji-text"></h4>
  
</form>

2. Load the password generator's JavaScript after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/assets/js/script.js"></script>

3. Enable the Copy button to copy the generated password into the clipboard.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

var clipboard = new ClipboardJS('.copy-btn');

---

This awesome jQuery plugin is developed by akassama. For more Advanced Usages, please check the demo page or visit the official website.