-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
162 lines (138 loc) · 5.9 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Besgen</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="external/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="external/bootstrap.min.js"></script>
<!-- CryptoJS library: https://code.google.com/p/crypto-js/ -->
<!-- <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/hmac-sha256.js"></script>-->
<script src="external/hmac-sha256.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1 class="text-center text-primary">Welcome to Besgen!</h1>
<h2 class="text-center text-success">your password, your secret.</h2>
<form name="myForm" class="form-horizontal" action="javascript:generate();" method="post">
<div class="form-group">
<label for="input1" class="col-md-5 control-label text-success">keyword1</label>
<div class="col-md-2">
<input type="password" class="form-control" id="input1" placeholder="my_ultimate" autofocus>
</div>
</div>
<div class="form-group">
<label for="input2" class="col-md-5 control-label text-info">keyword2</label>
<div class="col-md-2">
<input type="password" class="form-control" id="input2" placeholder="passw0rd">
</div>
</div>
<div class="form-group">
<label for="input3" class="col-md-5 control-label text-warning">keyword3</label>
<div class="col-md-2">
<input type="password" class="form-control" id="input3" placeholder="twitter">
</div>
</div>
<div class="form-group">
<div class="col-md-5">
</div>
<div class="col-md-1 text-left">
<button type="submit" class="btn btn-danger">Generate</button>
</div>
</div>
<div class="col-md-5">
</div>
<div class="col-md-2 text-left text-warning" id="generated">
</div>
</form>
<script>
/**
* Generate a password upon form is submitted.
*/
function generate() {
$(document).ready(function(){
var input1 = $("#input1").val();
var input2 = $("#input2").val();
var input3 = $("#input3").val();
var message = (input1 + "_" + input2 + "_" + input3).toLowerCase();
var hash = CryptoJS.HmacSHA256(message, "your password, your secret");
var password = hash.toString(CryptoJS.enc.Hex);
password = password.substring(0, 7).toLowerCase() +
password.substring(7, 14).toUpperCase();
if (!copyTextToClipboard(password)) {
$("#generated").html("only for 5 seconds: " + password);
} else {
$("#generated").html("Ring is in your hands.");
}
// Remove the password after 5 seconds.
setTimeout(function(){
$("#generated").html('')
}, 5000);
});
};
/**
* Copy {@param text} to clipboard if possible. Copied from:
* http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
*/
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
//
// *** This styling is an extra step which is likely not required. ***
//
// Why is it here? To ensure:
// 1. the element is able to have focus and selection.
// 2. if element was to flash render it has minimal visual impact.
// 3. less flakyness with selection and copying which **might** occur if
// the textarea element is not visible.
//
// The likelihood is the element won't even render, not even a flash,
// so some of these are just precautions. However in IE the element
// is visible whilst the popup box asking the user for permission for
// the web page to copy to the clipboard.
//
// Place in top-left corner of screen regardless of scroll position.
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
// Ensure it has a small width and height. Setting to 1px / 1em
// doesn't work as this gives a negative w/h on some browsers.
textArea.style.width = '2em';
textArea.style.height = '2em';
// We don't need padding, reducing the size if it does flash render.
textArea.style.padding = 0;
// Clean up any borders.
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
// Avoid flash of white box if rendered for any reason.
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'true' : 'false';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
document.body.removeChild(textArea);
return successful;
}
</script>
</body>
</html>