Password Generator jQuery Plugin with Multi Language Support

by Posted on

Are you looking for string password generator script in jquery then you are landed on right place here I am going to share awesome jQuery password generator plugin which help you implement random password generator script on your web app so that you can suggest some strong password to your user.


Libraries

Include following JS+CSS libraries on page.

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



HTML

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>
 
<!-- Generate Password Button -->
<div class="text-center">
  <button type="button" class="btn btn-default btn-primary btn-lg" id="generate" lang="en">Generate Password</button>
</div>



JS

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');
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by clicface. Visit their official github repository for more information and follow for future updates.


Published by admin