forked from twngo/privacytools-zh
-
Notifications
You must be signed in to change notification settings - Fork 0
/
password.html
261 lines (256 loc) · 9.86 KB
/
password.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>安全的密碼產生器 | Privacy Tools</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>安全的密碼產生器</h1>
<noscript>
<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> <strong>等等</strong> 目前看起來你取消了JavaScript功能。不幸的是，如果不啟動它，這個工具就不能使用。</div>
</noscript>
<div class="alert alert-danger unsupported-browser-alert" id="unsupported-browser-alert">
<p>
<span class="glyphicon glyphicon-warning-sign"></span> <strong>等一下</strong> 看來你似乎正在使用一個<em>未支援的瀏覧器</em> (可能是Internet
Explorer吧...) 不幸的是, 除非進行瀏覧器升級否則這個工具無法使用，抱歉造成不便。
</p>
</div>
<div class="alert alert-info" role="alert">
<p>利用這個線上工具來產生安全而隨機的密碼。可使用的字符組都是方便使用者 -沒有不明確難辨的字元如： i, l, 1, o, 0, 等等. 密碼產生器是在客戶端所完成，這表示沒人可以取用你在此所產生的密碼。 </p>
</div>
<div class="form-container clearfix ">
<div class="form-group">
<label>安全的密碼:</label>
<div class="input-group">
<input type="text" class="form-control" id="password-input" onclick="this.focus();this.select()" readonly>
<span class="input-group-btn">
<button class="btn btn-default" id="generate-password-button" type="button">
<span class="glyphicon glyphicon-refresh"></span>
再產生另一個密碼
</button>
</span>
</div>
</div>
<div class="form-group">
<label>密碼長度:</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"selected>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> 英文大寫
</label>
<label>
<input type="checkbox" id="include-lowercase-chars-checkbox" checked> 英文小寫
</label>
<label>
<input type="checkbox" id="include-numbers-checkbox" checked> 阿拉伯數字
</label>
<label>
<input type="checkbox" id="include-special-chars-checkbox">特殊符號
</label>
</div>
<a class="btn btn-default pull-right" data-toggle="collapse" href="#advancedOptions">
<span class="glyphicon glyphicon-menu-hamburger"></span>
進階選項
</a>
</div>
<p>本專案原始碼: <a href="https://github.com/privacytoolsIO/privacytools.io/blob/master/password.html" 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 = "ABCDEFGHJKMNPQRSTUVWXYZ";
var lowercase = "abcdefghjkmnpqrstuvwxyz";
var numbers = "23456789";
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("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");
return;
}
$("#password-input").val(password);
}
$(function() {
outputGeneratedPassword();
$("#generate-password-button").click(outputGeneratedPassword);
});
})();
</script>
</body>
</html>