bundled passwordGenerator.js and password.html

This commit is contained in:
Alex Booker 2015-08-16 09:02:17 +01:00
parent b46a16ff92
commit 97f89b7ba2
2 changed files with 83 additions and 68 deletions

View File

@ -1,45 +0,0 @@
var passwordGenerator = (function() {
var generateRandomNum = function (max) {
var crypto = window.crypto || window.msCrypto;
if (!crypto) {
throw new Error('Unsupported browser.');
}
var array = new Uint8Array(1);
crypto.getRandomValues(array);
var range = max + 1;
var max_range = 256;
if (array[0] >= Math.floor(max_range / range) * range)
return generateRandomNum(max);
return (array[0] % range);
};
var 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 = generateRandomNum(candidates.length);
result += candidates.substring(randomNum, randomNum + 1);
}
return result;
};
return {
generatePassword: generatePassword
};
})();

View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Generate Password</title> <title>Generate Password</title>
@ -9,17 +10,20 @@
margin: 30px; margin: 30px;
max-width: 600px; max-width: 600px;
} }
.form-container { .form-container {
background-color: #F8F8F8; background-color: #F8F8F8;
border: 1px #F0F0F0 solid; border: 1px #F0F0F0 solid;
padding: 10px; padding: 10px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.unsupported-browser-alert { .unsupported-browser-alert {
display: none; display: none;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1> <h1>
@ -29,15 +33,20 @@
</h1> </h1>
<h1>Secure Password Generator</h1> <h1>Secure Password Generator</h1>
<noscript> <noscript>
<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> <strong>Hold on.</strong> It looks like you have disabled JavaScript. Unfortunately, this tool will not work until you enable it.</div> <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> <strong>Hold on.</strong> It looks like you have disabled JavaScript. Unfortunately, this tool will
not work until you enable it.</div>
</noscript> </noscript>
<div class="alert alert-danger unsupported-browser-alert" id="unsupported-browser-alert"> <div class="alert alert-danger unsupported-browser-alert" id="unsupported-browser-alert">
<p> <p>
<span class="glyphicon glyphicon-warning-sign"></span> <strong>Hold on.</strong> It looks like you are using an <em>unsuported browser</em> (probably Internet Explorer...) Unfortunately, this tool will not work until you upgrade your browser. Sorry for any inconvenience caused. <span class="glyphicon glyphicon-warning-sign"></span> <strong>Hold on.</strong> It looks like you are using an <em>unsuported browser</em> (probably Internet
Explorer...) Unfortunately, this tool will not work until you upgrade your
browser. Sorry for any inconvenience caused.
</p> </p>
</div> </div>
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
<p>Use this online tool to generate a strong and random password. Password generation is done on the client-side meaning no one has access to the passwords you generate here, <em>period</em>.</p> <p>Use this online tool to generate a strong and random password. Password generation
is done on the client-side meaning no one has access to the passwords you
generate here, <em>period</em>.</p>
</div> </div>
<div class="form-container clearfix "> <div class="form-container clearfix ">
<div class="form-group"> <div class="form-group">
@ -45,7 +54,10 @@
<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" id="generate-password-button" 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>
@ -146,67 +158,115 @@
<option value="97">97</option> <option value="97">97</option>
<option value="98">98</option> <option value="98">98</option>
<option value="99">99</option> <option value="99">99</option>
<option value="100"> 100</option> <option value="100">100</option>
</select> </select>
</div> </div>
<div class="form-group collapse" id="advancedOptions"> <div class="form-group collapse" id="advancedOptions">
<label> <label>
<input type="checkbox" id="include-uppercase-chars-checkbox" checked> <input type="checkbox" id="include-uppercase-chars-checkbox" checked> Upper-case
Upper-case
</label> </label>
<label> <label>
<input type="checkbox" id="include-lowercase-chars-checkbox" checked> <input type="checkbox" id="include-lowercase-chars-checkbox" checked> Lower-case
Lower-case
</label> </label>
<label> <label>
<input type="checkbox" id="include-digits-checkbox" checked> <input type="checkbox" id="include-digits-checkbox" checked> Digits
Digits
</label> </label>
<label> <label>
<input type="checkbox" id="include-special-chars-checkbox"> <input type="checkbox" id="include-special-chars-checkbox"> Special
Special
</label> </label>
</div> </div>
<a class="btn btn-default pull-right" data-toggle="collapse" href="#advancedOptions"> <a class="btn btn-default pull-right" data-toggle="collapse" href="#advancedOptions">
<span class="glyphicon glyphicon-menu-hamburger"></span> Advanced Options <span class="glyphicon glyphicon-menu-hamburger"></span>
Advanced Options
</a> </a>
</div> </div>
<p>Source Code: <a href="https://github.com/privacytoolsIO/privacytools.io" target="_blank">GitHub</a> <p>Source Code: <a href="https://github.com/privacytoolsIO/privacytools.io" target="_blank">GitHub</a>
</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>
var passwordGenerator = (function() {
var generateRandomNum = function(max) {
var crypto = window.crypto || window.msCrypto;
if (!crypto) {
throw new Error('Unsupported browser.');
}
// http://stackoverflow.com/a/18230432
var array = new Uint8Array(1);
crypto.getRandomValues(array);
var range = max + 1;
var max_range = 256;
if (array[0] >= Math.floor(max_range / range) * range)
return generateRandomNum(max);
return (array[0] % range);
};
var 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 = generateRandomNum(candidates.length);
result += candidates.substring(randomNum, randomNum + 1);
}
return result;
};
return {
generatePassword: generatePassword
};
})();
(function() { (function() {
'use strict'; 'use strict';
function getOptions() { function getOptions() {
return { return {
passwordLength: $("#password-length").val(), passwordLength: $("#password-length").val(),
includeUppercaseChars: $("#include-uppercase-chars-checkbox").is(":checked"), includeUppercaseChars: $("#include-uppercase-chars-checkbox").is(
includeLowercaseChars: $("#include-lowercase-chars-checkbox").is(":checked"), ":checked"),
includeLowercaseChars: $("#include-lowercase-chars-checkbox").is(
":checked"),
includeNumbers: $("#include-digits-checkbox").is(":checked"), includeNumbers: $("#include-digits-checkbox").is(":checked"),
includePunctuationChars: $("#include-special-chars-checkbox").is(":checked"), includePunctuationChars: $("#include-special-chars-checkbox").is(
":checked"),
} }
}; };
function outputGeneratedPassword() { function outputGeneratedPassword() {
var password; var password;
try { try {
password = passwordGenerator.generatePassword(getOptions()); password = passwordGenerator.generatePassword(getOptions());
} } catch (error) {
catch (error) {
return $("#unsupported-browser-alert").show(); return $("#unsupported-browser-alert").show();
} }
if (password === '') { if (password === '') {
alert("Whops. You unselected all the options. I don't know what characters you want. Click on the button entitled \"Advanced Options\" and enable some options then try again. Nice one"); alert(
"Whops. You unselected all the options. I don't know what characters you want. Click on the button entitled \"Advanced Options\" and enable some options then try again. Nice one"
);
return; return;
} }
$("#password-input").val(password); $("#password-input").val(password);
} }
$(function() { $(function() {
outputGeneratedPassword(); outputGeneratedPassword();
$("#generate-password-button").click(outputGeneratedPassword); $("#generate-password-button").click(outputGeneratedPassword);
}); });
}()); }());
</script> </script>
</body> </body>
</html> </html>