digitarald - Web Craftsman Harald Kirschner - Internet Consultant & Contractor

Showcase “Mnemonic Password Generator”

Generates easy to remember mnemonic passwords fast and simple.

The Action Happens Here

About “Mnemonic Passwords”:

One common mnemonic for remembering lists consists of an easily remembered word, phrase, or rhyme whose first letters are associated with the list items. Though easy to derive, they are often not as powerful as the classical systems because they do not make use of visualization techniques. The idea lends itself well to memorizing hard-to-break passwords as well.

JavaScript & MooTools

/**
 * Namespace and the function for better reusability
 */
var Generator = {};
 
Generator.generateMnemonic = function(length, num_length, mixcase) {
	var ret = '';
	var vowels = 'aeioe';
	var consonants = 'bcdfghklmnpqrstvwxzy';
	if (mixcase) {
		vowels += vowels.toUpperCase();
		consonants += consonants.toUpperCase();
	}
	vowels = vowels.split('');
	consonants = consonants.split('');
 
	for(var i = 0; i < length / 2; i++) {
		ret += vowels.getRandom();
		ret += consonants.getRandom();
	}
 
	if (!num_length) return ret;
 
	var pos = $random(2, length - 2 - num_length);
	return ret.substr(0, pos) + $random(Math.pow(10, num_length - 1), Math.pow(10, num_length) - 1) + ret.substr(pos + num_length);
};
 
/**
 * In this closure event we add all the behaviour to the form elements
 */
window.addEvent('domready', function() {
 
	/**
	 * Observer class can handle one or multiple form elements. It fires the given callback
	 * when the values changed. It can check periodical (good for multiple elements) or
	 * event based (good for text-input elements)
	 */
	var observe = new Observer('#generator-length, #generator-num_length, #generator-mixcase, #generator-amount', function(values) {
 
		/**
		 * Map values from Observer (ordered like the id-selector)
		 */
		var length = values[0].toInt();
		var num_length = values[1].toInt();
		var mixcase = values[2].toInt();
		var amount = values[3].toInt();
 
		// Fill passwords in a loop
		var words = [];
		for (var i = 0; i < amount; i++) {
			words.push(Generator.generateMnemonic(length, num_length, mixcase) );
		}
 
		// Get the output area
		var output = $('generator-output');
 
		// Output it and highlight it so users will notice the update
		output.value = words.join("\n");
		output.getParent().highlight('#ff8', '#fff');
 
	}, {
		periodical: 1000 // interval in ms
	});
 
	// To fill in the first values
	observe.fire();
 
});
 

XHTML Markup

<fieldset id="generator">
	<label>
		<span>What password length:</span>
		<input name="length" id="generator-length" value="8" class="text short" />
	</label>
	<label>
		<span>How many numbers inside:</span>
		<select name="num_length" id="generator-num_length">
			<option value="">No Numbers</option>
			<option value="1">1</option>
			<option value="2" selected="selected">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
	</label>
	<label>
		<span>Only lowercase or mixed:</span>
		<select name="mixcase" id="generator-mixcase">
			<option value="0">lower</option>
			<option value="1">MiXEd</option>
		</select>
	</label>
	<label>
		<span>How many passwords:</span>
		<select name="amount" id="generator-amount">
			<option value="1" selected="selected">1</option>
			<option value="5">5</option>
			<option value="10">10</option>
			<option value="50">50</option>
			<option value="100">100</option>
		</select>
	</label>
	<label>
		<span>Your passwords:</span>
		<textarea name="output" id="generator-output" class="short" readonly="readonly"></textarea>
	</label>
</fieldset>

CSS Stylesheet

input.short
{
	width:				3em;
}
textarea.short
{
	width:				150px;
	height:				175px;
}

This example and the accompanying sources/assets are © 2008-2009 by Harald Kirschner and available under The MIT License. For debugging and profiling the scripts and their markup download Firefox and use addons like Firebug and Web Developer Toolbar.

1 Comment

Please use the support forums for discussing the project, asking questions or posting bug-fixes!