— 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'; $(' |
$(‘
‘).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.