Password Generator jQuery Plugin with Multi Language Support

>
 
— Generate Password Button >

=“text-center”>
<button type=“button” class=“btn btn-default btn-primary btn-lg” id=“generate” lang=“en”>Generate Password>

>

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

‘).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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Top