2015-08-14 13:27:14 +01:00
<!DOCTYPE html>
< html lang = "en" >
2015-08-16 09:02:17 +01:00
2015-08-14 13:27:14 +01:00
< head >
< meta charset = "UTF-8" >
2016-05-15 13:21:36 +10:00
< title > Secure Password Generator | Privacy Tools< / title >
2017-01-03 18:18:20 -06:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no" >
2015-08-14 13:27:14 +01:00
< link href = "css/bootstrap.min.css" rel = "stylesheet" >
< style >
.container {
margin: 30px;
max-width: 600px;
}
2015-08-16 09:02:17 +01:00
2015-08-14 14:27:22 +01:00
.form-container {
background-color: #F8F8F8;
border: 1px #F0F0F0 solid;
padding: 10px;
2015-08-15 09:07:56 +01:00
margin-bottom: 20px;
2015-08-14 14:27:22 +01:00
}
2015-08-16 09:02:17 +01:00
2015-08-15 10:15:19 +01:00
.unsupported-browser-alert {
display: none;
}
2015-08-14 13:27:14 +01:00
< / style >
< / head >
2015-08-16 09:02:17 +01:00
2015-08-14 13:27:14 +01:00
< body >
< div class = "container" >
< h1 >
2015-08-16 17:34:47 +08:00
< a href = "https://www.privacytools.io/" >
2015-08-14 13:27:14 +01:00
< img src = "img/layout/logo.png" alt = "privacytools.io" class = "img-responsive" >
< / a >
< / h1 >
< h1 > Secure Password Generator< / h1 >
2015-08-15 10:05:44 +01:00
< noscript >
2015-08-16 09:02:17 +01:00
< 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 >
2015-08-15 10:05:44 +01:00
< / noscript >
2015-08-15 10:15:19 +01:00
< div class = "alert alert-danger unsupported-browser-alert" id = "unsupported-browser-alert" >
< p >
2016-05-07 14:59:41 +10:00
< span class = "glyphicon glyphicon-warning-sign" > < / span > < strong > Hold on.< / strong > It looks like you are using an < em > unsupported browser< / em > (probably Internet
2015-08-16 09:02:17 +01:00
Explorer...) Unfortunately, this tool will not work until you upgrade your
browser. Sorry for any inconvenience caused.
2015-08-15 10:15:19 +01:00
< / p >
< / div >
2015-08-15 09:05:49 +01:00
< div class = "alert alert-info" role = "alert" >
2016-11-26 16:11:01 +01:00
< p > Use this online tool to generate a strong and random password. The available characters in each set are user friendly - there are no ambiguous characters such as i, l, 1, o, 0, etc. Password generation is done on the client-side meaning no one has access to the passwords you generate here. < / p >
2015-08-15 09:05:49 +01:00
< / div >
2015-08-14 14:27:22 +01:00
< div class = "form-container clearfix " >
< div class = "form-group" >
< label > Secure Password:< / label >
< div class = "input-group" >
2015-08-16 17:31:16 +08:00
< input type = "text" class = "form-control" id = "password-input" onclick = "this.focus();this.select()" readonly >
2015-08-14 14:27:22 +01:00
< span class = "input-group-btn" >
2015-08-16 09:02:17 +01:00
< button class = "btn btn-default" id = "generate-password-button" type = "button" >
< span class = "glyphicon glyphicon-refresh" > < / span >
Generate Another
< / button >
2015-08-14 14:27:22 +01:00
< / span >
< / div >
< / div >
< div class = "form-group" >
< label > Password Length:< / label >
2015-08-14 16:35:54 +01:00
< select id = "password-length" class = "form-control" >
2015-08-14 17:48:30 +01:00
< option value = "6" > 6< / option >
< option value = "7" > 7< / option >
< option value = "8" > 8< / option >
< option value = "9" > 9< / option >
< option value = "10" > 10< / option >
< option value = "11" > 11< / option >
< option value = "12" > 12< / option >
< option value = "13" > 13< / option >
< option value = "14" > 14< / option >
< option value = "15" > 15< / option >
< option value = "16" > 16< / option >
< option value = "17" > 17< / option >
< option value = "18" > 18< / option >
< option value = "19" > 19< / option >
< option value = "20" > 20< / option >
< option value = "21" > 21< / option >
< option value = "22" > 22< / option >
< option value = "23" > 23< / option >
< option value = "24" > 24< / option >
< option value = "25" > 25< / option >
< option value = "26" > 26< / option >
< option value = "27" > 27< / option >
< option value = "28" > 28< / option >
< option value = "29" > 29< / option >
< option value = "30" > 30< / option >
< option value = "31" > 31< / option >
2015-08-16 17:41:31 +08:00
< option value = "32" selected > 32< / option >
2015-08-14 17:48:30 +01:00
< option value = "33" > 33< / option >
< option value = "34" > 34< / option >
< option value = "35" > 35< / option >
< option value = "36" > 36< / option >
< option value = "37" > 37< / option >
< option value = "38" > 38< / option >
< option value = "39" > 39< / option >
< option value = "40" > 40< / option >
< option value = "41" > 41< / option >
< option value = "42" > 42< / option >
< option value = "43" > 43< / option >
< option value = "44" > 44< / option >
< option value = "45" > 45< / option >
< option value = "46" > 46< / option >
< option value = "47" > 47< / option >
< option value = "48" > 48< / option >
< option value = "49" > 49< / option >
< option value = "50" > 50< / option >
< option value = "51" > 51< / option >
< option value = "52" > 52< / option >
< option value = "53" > 53< / option >
< option value = "54" > 54< / option >
< option value = "55" > 55< / option >
< option value = "56" > 56< / option >
< option value = "57" > 57< / option >
< option value = "58" > 58< / option >
< option value = "59" > 59< / option >
< option value = "60" > 60< / option >
< option value = "61" > 61< / option >
< option value = "62" > 62< / option >
< option value = "63" > 63< / option >
2015-08-16 17:41:31 +08:00
< option value = "64" > 64< / option >
2015-08-14 17:48:30 +01:00
< option value = "65" > 65< / option >
< option value = "66" > 66< / option >
< option value = "67" > 67< / option >
< option value = "68" > 68< / option >
< option value = "69" > 69< / option >
< option value = "70" > 70< / option >
< option value = "71" > 71< / option >
< option value = "72" > 72< / option >
< option value = "73" > 73< / option >
< option value = "74" > 74< / option >
< option value = "75" > 75< / option >
< option value = "76" > 76< / option >
< option value = "77" > 77< / option >
< option value = "78" > 78< / option >
< option value = "79" > 79< / option >
< option value = "80" > 80< / option >
< option value = "81" > 81< / option >
< option value = "82" > 82< / option >
< option value = "83" > 83< / option >
< option value = "84" > 84< / option >
< option value = "85" > 85< / option >
< option value = "86" > 86< / option >
< option value = "87" > 87< / option >
< option value = "88" > 88< / option >
< option value = "89" > 89< / option >
< option value = "90" > 90< / option >
< option value = "91" > 91< / option >
< option value = "92" > 92< / option >
< option value = "93" > 93< / option >
< option value = "94" > 94< / option >
< option value = "95" > 95< / option >
< option value = "96" > 96< / option >
< option value = "97" > 97< / option >
< option value = "98" > 98< / option >
< option value = "99" > 99< / option >
2015-08-16 09:02:17 +01:00
< option value = "100" > 100< / option >
2015-08-14 14:27:22 +01:00
< / select >
< / div >
< div class = "form-group collapse" id = "advancedOptions" >
< label >
2015-08-16 09:02:17 +01:00
< input type = "checkbox" id = "include-uppercase-chars-checkbox" checked > Upper-case
2015-08-14 14:27:22 +01:00
< / label >
< label >
2015-08-16 09:02:17 +01:00
< input type = "checkbox" id = "include-lowercase-chars-checkbox" checked > Lower-case
2015-08-14 14:27:22 +01:00
< / label >
< label >
2015-08-16 09:06:16 +01:00
< input type = "checkbox" id = "include-numbers-checkbox" checked > Numbers
2015-08-14 14:27:22 +01:00
< / label >
< label >
2015-08-16 09:02:17 +01:00
< input type = "checkbox" id = "include-special-chars-checkbox" > Special
2015-08-14 14:27:22 +01:00
< / label >
< / div >
< a class = "btn btn-default pull-right" data-toggle = "collapse" href = "#advancedOptions" >
2015-08-16 09:02:17 +01:00
< span class = "glyphicon glyphicon-menu-hamburger" > < / span >
Advanced Options
2015-08-14 14:27:22 +01:00
< / a >
< / div >
2016-12-30 11:25:03 +08:00
< p > Source Code: < a href = "https://github.com/privacytoolsIO/privacytools.io/blob/master/password.html" target = "_blank" > GitHub< / a > < / p >
2015-08-14 13:27:14 +01:00
< / div >
2015-08-14 14:27:22 +01:00
< script src = "js/jquery-1.11.2.min.js" > < / script >
< script src = "js/bootstrap.min.js" > < / script >
< script >
2015-08-16 09:02:17 +01:00
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) {
2015-08-16 17:37:06 +08:00
var uppercase = "ABCDEFGHJKMNPQRSTUVWXYZ";
var lowercase = "abcdefghjkmnpqrstuvwxyz";
var numbers = "23456789";
var special = "!@#$%&*?";
2015-08-16 09:02:17 +01:00
var candidates = '';
if (options.includeUppercaseChars) {
candidates += uppercase;
}
if (options.includeLowercaseChars) {
candidates += lowercase;
}
if (options.includeNumbers) {
candidates += numbers;
}
2015-08-16 09:06:16 +01:00
if (options.includeSpecialChars) {
candidates += special;
2015-08-16 09:02:17 +01:00
}
2015-08-16 09:02:43 +01:00
var password = "";
2015-08-16 09:02:17 +01:00
for (var i = 0; i < options.passwordLength ; i + + ) {
var randomNum = generateRandomNum(candidates.length);
2015-08-16 09:02:43 +01:00
password += candidates.substring(randomNum, randomNum + 1);
2015-08-16 09:02:17 +01:00
}
2015-08-16 09:02:43 +01:00
return password;
2015-08-16 09:02:17 +01:00
};
return {
generatePassword: generatePassword
};
})();
2015-08-14 16:35:54 +01:00
(function() {
'use strict';
function getOptions() {
return {
passwordLength: $("#password-length").val(),
2015-08-16 09:02:43 +01:00
includeUppercaseChars: $("#include-uppercase-chars-checkbox").is(":checked"),
includeLowercaseChars: $("#include-lowercase-chars-checkbox").is(":checked"),
2015-08-16 09:06:16 +01:00
includeNumbers: $("#include-numbers-checkbox").is(":checked"),
includeSpecialChars: $("#include-special-chars-checkbox").is(":checked"),
2015-08-16 09:07:33 +01:00
};
}
2015-08-14 16:35:54 +01:00
function outputGeneratedPassword() {
2015-08-15 10:15:19 +01:00
var password;
try {
password = passwordGenerator.generatePassword(getOptions());
2015-08-16 09:02:17 +01:00
} catch (error) {
2015-08-16 09:07:33 +01:00
$("#unsupported-browser-alert").show();
return;
2015-08-15 10:15:19 +01:00
}
2015-08-14 16:39:06 +01:00
if (password === '') {
2016-05-07 14:59:41 +10:00
alert("Whoops. 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");
2015-08-14 16:39:06 +01:00
return;
}
2015-08-14 16:35:54 +01:00
$("#password-input").val(password);
}
$(function() {
2015-08-16 09:02:17 +01:00
outputGeneratedPassword();
$("#generate-password-button").click(outputGeneratedPassword);
2015-08-14 16:35:54 +01:00
});
2015-08-16 09:07:33 +01:00
})();
2015-08-14 14:27:22 +01:00
< / script >
2015-08-14 13:27:14 +01:00
< / body >
2015-08-16 09:02:17 +01:00
2015-08-14 13:27:14 +01:00
< / html >
