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"> <div class="input-group">
<input type="text" class="form-control" id="password-input" readonly> <input type="text" class="form-control" id="password-input" readonly>
<span class="input-group-btn"> <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> </span>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Password Length:</label> <label>Password Length:</label>
<select class="form-control"> <select id="password-length" class="form-control">
<option value="">4</option> <option value="4">4</option>
</select> </select>
</div> </div>
<div class="form-group collapse" id="advancedOptions"> <div class="form-group collapse" id="advancedOptions">
<label> <label>
<input type="checkbox" checked> <input type="checkbox" id="include-uppercase-chars-checkbox" checked>
Upper-case Upper-case
</label> </label>
<label> <label>
<input type="checkbox" checked> <input type="checkbox" id="include-lowercase-chars-checkbox" checked>
Lower-case Lower-case
</label> </label>
<label> <label>
<input type="checkbox" checked> <input type="checkbox" id="include-digits-checkbox" checked>
Digits Digits
</label> </label>
<label> <label>
<input type="checkbox"> <input type="checkbox" id="include-special-chars-checkbox">
Special Special
</label> </label>
</div> </div>
@ -65,10 +65,28 @@
</div> </div>
<script src="js/jquery-1.11.2.min.js"></script> <script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
<script src="js/passwordGenerator.js"></script>
<script> <script>
$(function() { (function() {
$("#password-input").val("Password123"); '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() {
outputGeneratedPassword();
$("#generate-password-button").click(outputGeneratedPassword);
});
}());
</script> </script>
</body> </body>
</html> </html>