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" >
< option value = "4" > 4< / 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 >
