2015-08-14 08:27:14 -04:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > Generate Password< / title >
< link href = "css/bootstrap.min.css" rel = "stylesheet" >
< style >
.container {
margin: 30px;
max-width: 600px;
}
2015-08-14 09:27:22 -04:00
.form-container {
background-color: #F8F8F8;
border: 1px #F0F0F0 solid;
padding: 10px;
}
2015-08-14 08:27:14 -04:00
< / style >
< / head >
< body >
< div class = "container" >
< h1 >
< a href = "https://www.privacytools.io" >
< img src = "img/layout/logo.png" alt = "privacytools.io" class = "img-responsive" >
< / a >
< / h1 >
< h1 > Secure Password Generator< / h1 >
2015-08-14 09:27:22 -04:00
< div class = "form-container clearfix " >
< div class = "form-group" >
< label > Secure Password:< / label >
< div class = "input-group" >
< input type = "text" class = "form-control" id = "password-input" readonly >
< span class = "input-group-btn" >
2015-08-14 11:35:54 -04:00
< button class = "btn btn-default" id = "generate-password-button" type = "button" > < span class = "glyphicon glyphicon-refresh" > < / span > Generate Another< / button >
2015-08-14 09:27:22 -04:00
< / span >
< / div >
< / div >
< div class = "form-group" >
< label > Password Length:< / label >
2015-08-14 11:35:54 -04:00
< select id = "password-length" class = "form-control" >
2015-08-14 12:48:30 -04: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 >
< option value = "32" > 32< / option >
< 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 >
< option value = "64" > 64< / option >
< 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 >
< option value = "100" > 100< / option >
2015-08-14 09:27:22 -04:00
< / select >
< / div >
< div class = "form-group collapse" id = "advancedOptions" >
< label >
2015-08-14 11:35:54 -04:00
< input type = "checkbox" id = "include-uppercase-chars-checkbox" checked >
2015-08-14 09:27:22 -04:00
Upper-case
< / label >
< label >
2015-08-14 11:35:54 -04:00
< input type = "checkbox" id = "include-lowercase-chars-checkbox" checked >
2015-08-14 09:27:22 -04:00
Lower-case
< / label >
< label >
2015-08-14 11:35:54 -04:00
< input type = "checkbox" id = "include-digits-checkbox" checked >
2015-08-14 09:27:22 -04:00
Digits
< / label >
< label >
2015-08-14 11:35:54 -04:00
< input type = "checkbox" id = "include-special-chars-checkbox" >
2015-08-14 09:27:22 -04:00
Special
< / label >
< / div >
< a class = "btn btn-default pull-right" data-toggle = "collapse" href = "#advancedOptions" >
< span class = "glyphicon glyphicon-menu-hamburger" > < / span > Advanced Options
< / a >
< / div >
2015-08-14 08:27:14 -04:00
< / div >
2015-08-14 09:27:22 -04:00
< script src = "js/jquery-1.11.2.min.js" > < / script >
< script src = "js/bootstrap.min.js" > < / script >
2015-08-14 11:35:54 -04:00
< script src = "js/passwordGenerator.js" > < / script >
2015-08-14 09:27:22 -04:00
< script >
2015-08-14 11:35:54 -04:00
(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());
2015-08-14 11:39:06 -04:00
if (password === '') {
2015-08-14 11:40:10 -04:00
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");
2015-08-14 11:39:06 -04:00
return;
}
2015-08-14 11:35:54 -04:00
$("#password-input").val(password);
}
$(function() {
outputGeneratedPassword();
$("#generate-password-button").click(outputGeneratedPassword);
});
}());
2015-08-14 09:27:22 -04:00
< / script >
2015-08-14 08:27:14 -04:00
< / body >
< / html >
