Multi-language Strong Password Generator With jQuery

This is a multi-language password generate web app that dynamically generates strong random password strings using jQuery, zxcvbn.js, jQuery lang.js, Bootstrap framework and Bootstrap Toggle plugin.

How to use it:

1. Load jQuery library and other requried resources in the document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Bootstrap Toggle Plugin -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<!-- zxcvbn.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>

<!-- jQuery lang.js plugin -->
<script src="lib/jquery-lang.js"></script>

<!-- language file -->
<script src="langpack/fr.js"></script>

2. Create the html for the options of the password generator.

<div id="option_choice">
  <form action="#">
    <div class="my-3 p-3 bg-white rounded box-shadow">
      <div class="border-bottom pb-2 mb-2 border-gray">
        <table class="mytable">
          <tr>
            <td class="myfirsttd">
              <input type="number" name="length_chars_select" id="length_chars_select" min="3" max="120" value="12"/>
            </td>
            <td>
              <span lang="en">password character length</span>
            </td>
          </tr>
        </table>
      </div>
      <div class="border-bottom pb-2 mb-2 border-gray">
        <table class="mytable">
          <tr>
            <td class="myfirsttd">
              <input type="checkbox" data-toggle="toggle" name="alphalower_chars_checkbox" id="alphalower_chars_checkbox" checked="checked" />
            </td>
            <td>
              <span lang="en">string letters</span>
            </td>
            <td class="text-right">
              <span class="chars_example">[ a b c ... x y z ]</span>
            </td>
          </tr>
        </table>
      </div>
      <div class="border-bottom pb-2 mb-2 border-gray">
        <table class="mytable">
          <tr>
            <td class="myfirsttd">
              <input type="checkbox" data-toggle="toggle" name="alphaupper_chars_checkbox" id="alphaupper_chars_checkbox" checked="checked" />
            </td>
            <td>
              <span lang="en">capital letters</span>
            </td>
            <td class="text-right">
              <span class="chars_example">[ A B C ... X Y Z ]</span>
            </td>
          </tr>
        </table>
      </div>
      <div class="border-bottom pb-2 mb-2 border-gray">
        <table class="mytable">
          <tr>
            <td class="myfirsttd">
              <input type="checkbox" data-toggle="toggle" name="num_chars_checkbox" id="num_chars_checkbox" checked="checked" />
            </td>
            <td>
              <span lang="en">digits</span>
            </td>
            <td class="text-right">
              <span class="chars_example">[ 0 1 2 ... 7 8 9 ]</span>
            </td>
          </tr>
        </table>
      </div>
      <div class="border-bottom pb-2 mb-2 border-gray">
        <table class="mytable">
          <tr>
            <td class="myfirsttd">
              <input type="checkbox" data-toggle="toggle" name="hyphen_dash_underscore" id="hyphen_dash_underscore" />
            </td>
            <td>
              <span lang="en">hyphen, underscore</span>
            </td>
            <td class="text-right">
              <span class="chars_example">[ - _ ]</span>
            </td>
          </tr>
        </table>
      </div>
      <div class="border-bottom pb-2 mb-2 border-gray">
        <table class="mytable">
          <tr>
            <td class="myfirsttd">
              <input type="checkbox" data-toggle="toggle" name="special_chars_checkbox" id="special_chars_checkbox" />
            </td>
            <td>
              <span lang="en">special symbols</span>
            </td>
            <td class="text-right">
              <span class="chars_example">[  ~ ! @ ... &lt; &gt; ? ]</span>
            </td>
          </tr>
        </table>
      </div>
      <div class="pb-2 mb-2">
        <table class="mytable">
          <tr>
            <td>
              <input type="checkbox" data-toggle="toggle" name="ambiguous_chars_checkbox" id="ambiguous_chars_checkbox" />
            </td>
            <td>
              <span lang="en">ambiguous characters</span>
            </td>
            <td class="text-right">
              <span class="chars_example">[ i o 0 O I 1 l ]</span>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </form>
</div>

3. Create a button to generate a password.

<div class="text-center">
  <button type="button" class="btn btn-default btn-primary btn-lg" id="generate" lang="en">Generate Password</button>
</div>

4. The main JavaScript to activate the password generator.

(function($) {
  $.generateRandomPassword = function(length, AlphaLower, AlphaUpper, Num, HypenDashUnderscore, Special, Ambiguous) {
    length = typeof length !== 'undefined' ? length : 8;
    AlphaLower = typeof AlphaLower !== 'undefined' ? AlphaLower : true;
    AlphaUpper = typeof AlphaUpper !== 'undefined' ? AlphaUpper : true;
    Num = typeof Num !== 'undefined' ? Num : true;
    HypenDashUnderscore = typeof HypenDashUnderscore !== 'undefined' ? HypenDashUnderscore : false;
    Special = typeof Special !== 'undefined' ? Special : false;
    Ambiguous = typeof Ambiguous !== 'undefined' ? Ambiguous : false;
    var password = '';
    var chars = '';
    if (AlphaLower) chars += 'abcdefghjkmnpqrstuvwxyz';
    if (AlphaUpper) chars += 'ABCDEFGHJKLMNPQRSTUVWXYZ';
    if (Num) chars += '23456789';
    if (HypenDashUnderscore) chars += '-_';
    if (Special) chars += '~!@#$%^&*()=+[]{};:,.<>/?';
    if (AlphaLower && Ambiguous) chars += 'iol';
    if (AlphaLower && Ambiguous) chars += 'IO';
    if (Num && Ambiguous) chars += '01';
    if (!AlphaLower && !Num && Ambiguous) chars += 'iolIO01';
    if (chars == '') return window.lang.convert('Please make at least one selection');
    var list = chars.split('');
    var len = list.length, i = 0;
    do {
      i++;
      var index = Math.floor(Math.random() * len);
      password += list[index];
    } while(i < length);
    return password;
  };
})(jQuery);

$('form').on('submit', function(e) {
  e.preventDefault();
});

$(function() {
  $('#generate').click(function(event) {
    var pwd = $.generateRandomPassword(
      $("#length_chars_select").val(),
      $("#alphalower_chars_checkbox").is(":checked"),
      $("#alphaupper_chars_checkbox").is(":checked"),
      $("#num_chars_checkbox").is(":checked"),
      $("#hyphen_dash_underscore").is(":checked"),
      $("#special_chars_checkbox").is(":checked"),
      $("#ambiguous_chars_checkbox").is(":checked")
    );
    var score = zxcvbn(pwd).score;
    switch(score) {
      case 0:
      case 1:
        var color = '#C33';
      break;

      case 2:
        var color = '#F80';
      break;

      case 3:
        var color = '#FFEC20';
      break;

      case 4:
        var color = '#19ba20';
      break;

      default:
        var color = '#C33';
    }
    var image = 'img/' + score + '.jpg';
    $('<div class="password-meter"/>').css('background', color).insertAfter($(this).parent());
    $('<div class="password-string"/>').text(pwd).insertAfter($(this).parent());
    event.preventDefault();
  });

});

$( '.checkboxlist' ).on( 'click', 'input:checkbox', function () {
  $( this ).parent().toggleClass( 'checked_item', this.checked );
  $( this ).parent().toggleClass( 'unchecked_item' );
});

$('#alphalower_chars_checkbox').click( function() {
  $(this).addClass('active').siblings().removeClass('active');
});

Changelog:

2018-09-16

• Adding a copy to clipboard feature.

---

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