mirror of
https://github.com/privacyguides/privacyguides.org.git
synced 2024-10-01 01:35:57 -04:00
Merge pull request #13 from alexbooker/master
Moved password generation to the client
This commit is contained in:
Burung Hantu
commit
312f56aee4
265
password.html
Normal file
265
password.html
Normal file
@ -0,0 +1,265 @@
|
|||||||
|
<!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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</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.
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
<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">
|
||||||
|
<button class="btn btn-default" id="generate-password-button" type="button">
|
||||||
|
<span class="glyphicon glyphicon-refresh"></span>
|
||||||
|
Generate Another
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Password Length:</label>
|
||||||
|
<select id="password-length" class="form-control">
|
||||||
|
<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>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group collapse" id="advancedOptions">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="include-uppercase-chars-checkbox" checked> Upper-case
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="include-lowercase-chars-checkbox" checked> Lower-case
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="include-numbers-checkbox" checked> Numbers
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<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
|
||||||
|
</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>
|
||||||
|
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 special = ".,-/#!$%^&*;:{}=-_`~()]";
|
||||||
|
var candidates = '';
|
||||||
|
if (options.includeUppercaseChars) {
|
||||||
|
candidates += uppercase;
|
||||||
|
}
|
||||||
|
if (options.includeLowercaseChars) {
|
||||||
|
candidates += lowercase;
|
||||||
|
}
|
||||||
|
if (options.includeNumbers) {
|
||||||
|
candidates += numbers;
|
||||||
|
}
|
||||||
|
if (options.includeSpecialChars) {
|
||||||
|
candidates += special;
|
||||||
|
}
|
||||||
|
var password = "";
|
||||||
|
for (var i = 0; i < options.passwordLength; i++) {
|
||||||
|
var randomNum = generateRandomNum(candidates.length);
|
||||||
|
password += candidates.substring(randomNum, randomNum + 1);
|
||||||
|
}
|
||||||
|
return password;
|
||||||
|
};
|
||||||
|
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"),
|
||||||
|
includeNumbers: $("#include-numbers-checkbox").is(":checked"),
|
||||||
|
includeSpecialChars: $("#include-special-chars-checkbox").is(":checked"),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
function outputGeneratedPassword() {
|
||||||
|
var password;
|
||||||
|
try {
|
||||||
|
password = passwordGenerator.generatePassword(getOptions());
|
||||||
|
} catch (error) {
|
||||||
|
$("#unsupported-browser-alert").show();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
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");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$("#password-input").val(password);
|
||||||
|
}
|
||||||
|
$(function() {
|
||||||
|
outputGeneratedPassword();
|
||||||
|
$("#generate-password-button").click(outputGeneratedPassword);
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user