Multi-language Strong Password Generator With jQuery

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.

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 += '[email protected]#$%^&*()=+[]{};:,.<>/?';
    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');
});

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

  • Publication date: 08.04.2018
  • Source