2015-08-14 13:27:14 +01: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 : 30 px ;
max-width : 600 px ;
}
2015-08-14 14:27:22 +01:00
. form-container {
background-color : #F8F8F8 ;
border : 1 px #F0F0F0 solid ;
padding : 10 px ;
}
2015-08-14 13:27:14 +01: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 14:27:22 +01: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 16:35:54 +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" >
< option value = "4" > 4</ option >
2015-08-14 14:27:22 +01:00
</ select >
</ div >
< div class = "form-group collapse" id = "advancedOptions" >
< label >
2015-08-14 16:35:54 +01:00
< input type = "checkbox" id = "include-uppercase-chars-checkbox" checked >
2015-08-14 14:27:22 +01:00
Upper-case
</ label >
< label >
2015-08-14 16:35:54 +01:00
< input type = "checkbox" id = "include-lowercase-chars-checkbox" checked >
2015-08-14 14:27:22 +01:00
Lower-case
</ label >
< label >
2015-08-14 16:35:54 +01:00
< input type = "checkbox" id = "include-digits-checkbox" checked >
2015-08-14 14:27:22 +01:00
Digits
</ label >
< label >
2015-08-14 16:35:54 +01:00
< input type = "checkbox" id = "include-special-chars-checkbox" >
2015-08-14 14:27:22 +01: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 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 >
2015-08-14 16:35:54 +01:00
< script src = "js/passwordGenerator.js" ></ script >
2015-08-14 14:27:22 +01:00
< script >
2015-08-14 16:35:54 +01: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 16:39:06 +01:00
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 and thent try again. Nice one" );
return ;
}
2015-08-14 16:35:54 +01:00
$ ( "#password-input" ). val ( password );
}
$ ( function () {
outputGeneratedPassword ();
$ ( "#generate-password-button" ). click ( outputGeneratedPassword );
});
}());
2015-08-14 14:27:22 +01:00
</ script >
2015-08-14 13:27:14 +01:00
</ body >
</ html >
