Password Generator jQuery Plugin with Multi Language Support

by

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.



HTML

Create the html for the options of the password generator.


  

    

      

        

          

            
              
            
            
              password character length
            
          

        

      

      

        

          

            
              
            
            
              string letters
            
            
              [ a b c ... x y z ]
            
          

        

      

      

        

          

            
              
            
            
              capital letters
            
            
              [ A B C ... X Y Z ]
            
          

        

      

      

        

          

            
              
            
            
              digits
            
            
              [ 0 1 2 ... 7 8 9 ]
            
          

        

      

      

        

          

            
              
            
            
              hyphen, underscore
            
            
              [ - _ ]
            
          

        

      

      

        

          

            
              
            
            
              special symbols
            
            
              [  ~ ! @ ... < > ? ]
            
          

        

      

      

        

          

            
              
            
            
              ambiguous characters
            
            
              [ i o 0 O I 1 l ]



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';
    $('
').css('background', color).insertAfter($(this).parent());
    $('
').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 Rohit