mirror of
https://github.com/privacyguides/privacyguides.org
synced 2024-11-10 13:13:35 +01:00
bundled passwordGenerator.js and password.html
This commit is contained in:
Alex Booker
parent
b46a16ff92
commit
97f89b7ba2
@ -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
|
||||
};
|
||||
})();
|
||||
106
password.html
106
password.html
@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Generate Password</title>
|
||||
@ -9,17 +10,20 @@
|
||||
margin: 30px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background-color: #F8F8F8;
|
||||
border: 1px #F0F0F0 solid;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.unsupported-browser-alert {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>
|
||||
@ -29,15 +33,20 @@
|
||||
</h1>
|
||||
<h1>Secure Password Generator</h1>
|
||||
<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>
|
||||
<div class="alert alert-danger unsupported-browser-alert" id="unsupported-browser-alert">
|
||||
<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>
|
||||
</div>
|
||||
<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 class="form-container clearfix ">
|
||||
<div class="form-group">
|
||||
@ -45,7 +54,10 @@
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="password-input" readonly>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@ -146,67 +158,115 @@
|
||||
<option value="97">97</option>
|
||||
<option value="98">98</option>
|
||||
<option value="99">99</option>
|
||||
<option value="100"> 100</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group collapse" id="advancedOptions">
|
||||
<label>
|
||||
<input type="checkbox" id="include-uppercase-chars-checkbox" checked>
|
||||
Upper-case
|
||||
<input type="checkbox" id="include-uppercase-chars-checkbox" checked> Upper-case
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="include-lowercase-chars-checkbox" checked>
|
||||
Lower-case
|
||||
<input type="checkbox" id="include-lowercase-chars-checkbox" checked> Lower-case
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="include-digits-checkbox" checked>
|
||||
Digits
|
||||
<input type="checkbox" id="include-digits-checkbox" checked> Digits
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="include-special-chars-checkbox">
|
||||
Special
|
||||
<input type="checkbox" id="include-special-chars-checkbox"> Special
|
||||
</label>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<p>Source Code: <a href="https://github.com/privacytoolsIO/privacytools.io" target="_blank">GitHub</a>
|
||||
</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>
|
||||
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() {
|
||||
'use strict';
|
||||
|
||||
function getOptions() {
|
||||
return {
|
||||
passwordLength: $("#password-length").val(),
|
||||
includeUppercaseChars: $("#include-uppercase-chars-checkbox").is(":checked"),
|
||||
includeLowercaseChars: $("#include-lowercase-chars-checkbox").is(":checked"),
|
||||
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"),
|
||||
includePunctuationChars: $("#include-special-chars-checkbox").is(
|
||||
":checked"),
|
||||
}
|
||||
};
|
||||
|
||||
function outputGeneratedPassword() {
|
||||
var password;
|
||||
try {
|
||||
password = passwordGenerator.generatePassword(getOptions());
|
||||
}
|
||||
catch (error) {
|
||||
} catch (error) {
|
||||
return $("#unsupported-browser-alert").show();
|
||||
}
|
||||
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;
|
||||
}
|
||||
$("#password-input").val(password);
|
||||
}
|
||||
$(function() {
|
||||
outputGeneratedPassword();
|
||||
$("#generate-password-button").click(outputGeneratedPassword);
|
||||
outputGeneratedPassword();
|
||||
$("#generate-password-button").click(outputGeneratedPassword);
|
||||
});
|
||||
}());
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user