Skip to content
This repository was archived by the owner on May 6, 2022. It is now read-only.

Commit d543929

Browse files
DefeloDefelo
committed
add master password animation
1 parent 1d7037c commit d543929

File tree

1 file changed

+35
-28
lines changed

1 file changed

+35
-28
lines changed

‎index.html

+35-28
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
<html>
33
<head>
44
<title>PassSHAfe</title>
5-
<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
5+
<link href="bootstrap/bootstrap.min.css" rel="stylesheet">
66
<script src="jquery.min.js"></script>
77
<script src="bootstrap/bootstrap.min.js"></script>
88

9-
<link rel="stylesheet" href="snackbar.css">
9+
<link href="snackbar.css" rel="stylesheet">
1010
<script src="passshafe.js"></script>
1111
<script>
1212
function showSnackbar(text) {
@@ -82,24 +82,33 @@
8282
return digestToColor(digest);
8383
}
8484

85-
function updateCanvas() {
85+
function updateCanvas(step) {
8686
let ctx = $("#canvas")[0].getContext("2d");
8787
const WIDTH = 200 / 5;
8888
const HEIGHT = 200 / 5;
8989
const COLOURS = 256;
9090
for (let row = 0; row < 5; row++) {
9191
for (let col = 0; col < 3; col++) {
92-
let pw = stringToAscii($("#masterkey").val()).concat([row, col]);
93-
let revpw = pw.reverse();
94-
let digest = hmac(hmac(revpw, pw), hmac(pw, revpw));
95-
let num = 0;
96-
for (let i = 0; i < 32; i++)
97-
num += expmod(256, i, COLOURS) * digest[31 - i];
98-
ctx.fillStyle = colorForNum(num % COLOURS);
92+
if (3 * Math.abs(row - 2) + (row % 2 === 1 ? col : (2 - col)) > step) {
93+
ctx.fillStyle = "#eeeeee";
94+
} else {
95+
let pw = stringToAscii($("#masterkey").val()).concat([row, col]);
96+
let revpw = pw.reverse();
97+
let digest = hmac(hmac(revpw, pw), hmac(pw, revpw));
98+
let num = 0;
99+
for (let i = 0; i < 32; i++)
100+
num += expmod(256, i, COLOURS) * digest[31 - i];
101+
ctx.fillStyle = colorForNum(num % COLOURS);
102+
}
99103
ctx.fillRect(col * WIDTH, row * HEIGHT, WIDTH, HEIGHT);
100104
ctx.fillRect((4 - col) * WIDTH, row * HEIGHT, WIDTH, HEIGHT);
101105
}
102106
}
107+
if (step < 9)
108+
canvasTimer = setTimeout(function () {
109+
canvasTimer = undefined;
110+
updateCanvas(step + 1);
111+
}, 100);
103112
}
104113

105114
$(function () {
@@ -136,8 +145,7 @@
136145
if ($("#masterkey").prop("type") === "password") {
137146
$("#masterkey").prop("type", "text");
138147
$("#mishow")[0].classList.replace("glyphicon-eye-close", "glyphicon-eye-open");
139-
}
140-
else {
148+
} else {
141149
$("#masterkey").prop("type", "password");
142150
$("#mishow")[0].classList.replace("glyphicon-eye-open", "glyphicon-eye-close");
143151
}
@@ -147,8 +155,7 @@
147155
if ($("#genpw").prop("type") === "password") {
148156
$("#genpw").prop("type", "text");
149157
$("#gishow")[0].classList.replace("glyphicon-eye-close", "glyphicon-eye-open");
150-
}
151-
else {
158+
} else {
152159
$("#genpw").prop("type", "password");
153160
$("#gishow")[0].classList.replace("glyphicon-eye-open", "glyphicon-eye-close");
154161
}
@@ -166,8 +173,8 @@
166173
clearTimeout(canvasTimer);
167174
canvasTimer = setTimeout(function () {
168175
canvasTimer = undefined;
169-
updateCanvas();
170-
}, 1000);
176+
updateCanvas(0);
177+
}, 100);
171178
});
172179
});
173180
</script>
@@ -207,30 +214,30 @@
207214
<div class="col-xs-8">
208215
<div class="input-group">
209216
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
210-
<input id="account" type="text" class="form-control"
211-
placeholder="Account Identifier">
217+
<input class="form-control" id="account" placeholder="Account Identifier"
218+
type="text">
212219
</div>
213220
</div>
214221
<div class="col-xs-4">
215222
<div class="input-group">
216223
<span class="input-group-addon"><i class="glyphicon glyphicon-cog"></i></span>
217-
<input id="pwlength" type="number" class="form-control"
218-
placeholder="Password Length" min="1" max="256" value="24">
224+
<input class="form-control" id="pwlength" max="256"
225+
min="1" placeholder="Password Length" type="number" value="24">
219226
</div>
220227
</div>
221228
</div>
222229
<div class="input-group">
223230
<span class="input-group-addon"><i class="glyphicon glyphicon-random"></i></span>
224-
<input id="genpw" class="form-control" type="text" placeholder="Generated Password"
225-
readonly>
231+
<input class="form-control" id="genpw" placeholder="Generated Password" readonly
232+
type="text">
226233
<div class="input-group-btn">
227234
<button class="btn btn-default" id="genpwshow">
228-
<i id="gishow" class="glyphicon glyphicon-eye-open"></i>
235+
<i class="glyphicon glyphicon-eye-open" id="gishow"></i>
229236
</button>
230237
</div>
231238
</div>
232239
<div class="input-group btn-block form-group" style="margin-top: 12px">
233-
<button id="copy" class="btn btn-primary btn-block">Copy Password to Clipboard</button>
240+
<button class="btn btn-primary btn-block" id="copy">Copy Password to Clipboard</button>
234241
</div>
235242
</div>
236243
</div>
@@ -248,14 +255,14 @@
248255
<h4 class="modal-title">Enter your Master Password</h4>
249256
</div>
250257
<div class="modal-body">
251-
<canvas class="center-block" style="margin-bottom: 7px" id="canvas" width="200"
252-
height="200"></canvas>
258+
<canvas class="center-block" height="200" id="canvas" style="margin-bottom: 7px"
259+
width="200"></canvas>
253260
<div class="input-group">
254261
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
255-
<input class="form-control" type="password" placeholder="Master Password" id="masterkey">
262+
<input class="form-control" id="masterkey" placeholder="Master Password" type="password">
256263
<div class="input-group-btn">
257264
<button class="btn btn-default" id="masterkeyshow">
258-
<i id="mishow" class="glyphicon glyphicon-eye-close"></i>
265+
<i class="glyphicon glyphicon-eye-close" id="mishow"></i>
259266
</button>
260267
</div>
261268
</div>

0 commit comments

Comments
 (0)