added simple client-side password generator

This commit is contained in:
Alex Booker 2015-08-14 16:35:54 +01:00
parent 0cac76a14a
commit 1ee8ae89b1
2 changed files with 57 additions and 10 deletions

29
js/passwordGenerator.js Normal file
View File

@ -0,0 +1,29 @@
var passwordGenerator = (function() {
return {
generatePassword: function (options) {
var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXTZ";
var lowercase = "abcdefghiklmnopqrstuvwxyz";
var numbers = "0123456789";
var punct = ".,-/#!$%^&*;:{}=-_`~()]";
var candidates = '';
if (options.includeUppercaseChars) {
candidates += uppercase;
}
if (options.includeLowercaseChars) {
candidates += lowercase;
}
if (options.includeNumbers) {
candidates += numbers;
}
if (options.includePunctuationChars) {
candidates += punct;
}
var result = "";
for (var i = 0; i < options.passwordLength; i++) {
var randomNum = Math.floor(Math.random() * candidates.length);
result += candidates.substring(randomNum, randomNum + 1);
}
return result;
}
};
})();

View File

@ -30,31 +30,31 @@
<div class="input-group">
<input type="text" class="form-control" id="password-input" readonly>
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-refresh"></span> Generate Another</button>
<button class="btn btn-default" id="generate-password-button" type="button"><span class="glyphicon glyphicon-refresh"></span> Generate Another</button>
</span>
</div>
</div>
<div class="form-group">
<label>Password Length:</label>
<select class="form-control">
<option value="">4</option>
<select id="password-length" class="form-control">
<option value="4">4</option>
</select>
</div>
<div class="form-group collapse" id="advancedOptions">
<label>
<input type="checkbox" checked>
<input type="checkbox" id="include-uppercase-chars-checkbox" checked>
Upper-case
</label>
<label>
<input type="checkbox" checked>
<input type="checkbox" id="include-lowercase-chars-checkbox" checked>
Lower-case
</label>
<label>
<input type="checkbox" checked>
<input type="checkbox" id="include-digits-checkbox" checked>
Digits
</label>
<label>
<input type="checkbox">
<input type="checkbox" id="include-special-chars-checkbox">
Special
</label>
</div>
@ -65,10 +65,28 @@
</div>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/passwordGenerator.js"></script>
<script>
(function() {
'use strict';
function getOptions() {
return {
passwordLength: $("#password-length").val(),
includeUppercaseChars: $("#include-uppercase-chars-checkbox").is(":checked"),
includeLowercaseChars: $("#include-lowercase-chars-checkbox").is(":checked"),
includeNumbers: $("#include-digits-checkbox").is(":checked"),
includePunctuationChars: $("#include-special-chars-checkbox").is(":checked"),
}
};
function outputGeneratedPassword() {
var password = passwordGenerator.generatePassword(getOptions());
$("#password-input").val(password);
}
$(function() {
$("#password-input").val("Password123");
outputGeneratedPassword();
$("#generate-password-button").click(outputGeneratedPassword);
});
}());
</script>
</body>
</html>