zervo/bitaddress.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a skip button for the seeding and a progress bar, to be styled

Browse source
This commit is contained in:
Michael Muré 2014-04-28 23:05:51 +02:00
parent 7d594df524
commit 42e9855a08
4 changed files with 226 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

199
index.html
View file

@ -5781,6 +5781,14 @@ body { font-family: Arial; background-image: url('images/diamonds.png'); height:
#seedpoolarea { display: none; } #seedpoolarea { display: none; }
#seedpooldisplay { font-family: monospace; font-size: 1em; width: 640px; padding: 15px 5px; word-wrap: break-word; } #seedpooldisplay { font-family: monospace; font-size: 1em; width: 640px; padding: 15px 5px; word-wrap: break-word; }
.seedpoint { width: 6px; height: 6px; display: block; border-radius: 3px; background-color: #80CF80; position: absolute; z-index: 10; } .seedpoint { width: 6px; height: 6px; display: block; border-radius: 3px; background-color: #80CF80; position: absolute; z-index: 10; }
#seedSkipper { font-size: 11px; text-align: center; line-height: 14px;}
#generate #mousemovelimit { font-size: 16px; color: #FFF; }
#rightArea { float: right; width: 170px; }
#progress-bar { width: 170px; background:#99c31b; position: relative; margin-bottom: 20px; }
#progress-bar-percentage { background:#ff952d; padding: 3px 0px; text-align: center; height: 18px; }
#progress-bar-percentage span { display: inline-block; position: absolute; width: 100%; left: 0; }
#generate { font-size: 13px; text-align: left; position: relative; padding: 20px; border: 1px solid #BFBFBF; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } #generate { font-size: 13px; text-align: left; position: relative; padding: 20px; border: 1px solid #BFBFBF; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#generate span { padding: 5px 5px 0 5px; } #generate span { padding: 5px 5px 0 5px; }
#generatekeyinput { position: relative; z-index: 20; } #generatekeyinput { position: relative; z-index: 20; }
@ -6098,6 +6106,17 @@ body { font-family: Arial; background-image: url('images/diamonds.png'); height:
<span id="generatelabelmovemouse">MOVE your mouse around to add some extra randomness... </span><span id="mousemovelimit"></span><br /> <span id="generatelabelmovemouse">MOVE your mouse around to add some extra randomness... </span><span id="mousemovelimit"></span><br />
<span id="generatelabelkeypress">OR type some random characters into this textbox</span> <input type="text" id="generatekeyinput" onkeypress="ninja.seeder.seedKeyPress(event);" /><br /> <span id="generatelabelkeypress">OR type some random characters into this textbox</span> <input type="text" id="generatekeyinput" onkeypress="ninja.seeder.seedKeyPress(event);" /><br />
<div id="seedpooldisplay"></div> <div id="seedpooldisplay"></div>
<div id="rightArea">
<div id="progress-bar" class="fullyRounded">
<div id="progress-bar-percentage" class="fullyRounded" style="width: 1%"><span id="mousemovelimit"> &nbsp; </span></div>
</div>
<div id="seedSkipper">
<a href="#" class="nicerButton" style="width: 100px;" onClick="ninja.seeder.seedCount = ninja.seeder.seedLimit; ninja.seeder.seed();">Skip &raquo;</a><br />
<p>You may skip this step if you do not plan to use the random key generator.</p>
</div>
</div>
<hr /> <hr />
@ -7011,100 +7030,108 @@ ninja.publicKey = {
}; };
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
ninja.seeder = { ninja.seeder = {
init: (function () { init: (function () {
document.getElementById("generatekeyinput").value = ""; document.getElementById("generatekeyinput").value = "";
})(), })(),
// number of mouse movements to wait for // number of mouse movements to wait for
seedLimit: (function () { seedLimit: (function () {
var num = Crypto.util.randomBytes(12)[11]; var num = Crypto.util.randomBytes(12)[11];
return 200 + Math.floor(num); return 200 + Math.floor(num);
})(), })(),
seedCount: 0, // counter seedCount: 0, // counter
lastInputTime: new Date().getTime(), lastInputTime: new Date().getTime(),
seedPoints: [], seedPoints: [],
// seed function exists to wait for mouse movement to add more entropy before generating an address // seed function exists to wait for mouse movement to add more entropy before generating an address
seed: function (evt) { seed: function (evt) {
if (!evt) var evt = window.event; if (!evt) var evt = window.event;
var timeStamp = new Date().getTime();
// seeding is over now we generate and display the address
if (ninja.seeder.seedCount == ninja.seeder.seedLimit) {
ninja.seeder.seedCount++;
ninja.wallets.singlewallet.open();
document.getElementById("generate").style.display = "none";
document.getElementById("menu").style.visibility = "visible";
ninja.seeder.removePoints();
}
// seed mouse position X and Y when mouse movements are greater than 40ms apart.
else if ((ninja.seeder.seedCount < ninja.seeder.seedLimit) && evt && (timeStamp - ninja.seeder.lastInputTime) > 40) {
SecureRandom.seedTime();
SecureRandom.seedInt16((evt.clientX * evt.clientY));
ninja.seeder.showPoint(evt.clientX, evt.clientY);
ninja.seeder.seedCount++;
ninja.seeder.lastInputTime = new Date().getTime();
ninja.seeder.showPool();
}
},
// seed function exists to wait for mouse movement to add more entropy before generating an address
seedKeyPress: function (evt) {
if (!evt) var evt = window.event;
// seeding is over now we generate and display the address
if (ninja.seeder.seedCount == ninja.seeder.seedLimit) {
ninja.seeder.seedCount++;
ninja.wallets.singlewallet.open();
document.getElementById("generate").style.display = "none";
document.getElementById("menu").style.visibility = "visible";
ninja.seeder.removePoints();
}
// seed key press character
else if ((ninja.seeder.seedCount < ninja.seeder.seedLimit) && evt.which) {
var timeStamp = new Date().getTime(); var timeStamp = new Date().getTime();
// seed a bunch (minimum seedLimit) of times // seeding is over now we generate and display the address
SecureRandom.seedTime(); if (ninja.seeder.seedCount == ninja.seeder.seedLimit) {
SecureRandom.seedInt8(evt.which); ninja.seeder.seedCount++;
var keyPressTimeDiff = timeStamp - ninja.seeder.lastInputTime; ninja.wallets.singlewallet.open();
SecureRandom.seedInt8(keyPressTimeDiff); document.getElementById("generate").style.display = "none";
ninja.seeder.seedCount++; document.getElementById("menu").style.visibility = "visible";
ninja.seeder.lastInputTime = new Date().getTime(); ninja.seeder.removePoints();
ninja.seeder.showPool(); }
} // seed mouse position X and Y when mouse movements are greater than 40ms apart.
}, else if ((ninja.seeder.seedCount < ninja.seeder.seedLimit) && evt && (timeStamp - ninja.seeder.lastInputTime) > 40) {
SecureRandom.seedTime();
SecureRandom.seedInt16((evt.clientX * evt.clientY));
ninja.seeder.showPoint(evt.clientX, evt.clientY);
ninja.seeder.seedCount++;
ninja.seeder.lastInputTime = new Date().getTime();
ninja.seeder.showPool();
}
},
showPool: function () { // seed function exists to wait for mouse movement to add more entropy before generating an address
var poolHex; seedKeyPress: function (evt) {
if (SecureRandom.poolCopyOnInit != null) { if (!evt) var evt = window.event;
poolHex = Crypto.util.bytesToHex(SecureRandom.poolCopyOnInit); // seeding is over now we generate and display the address
document.getElementById("seedpool").innerHTML = poolHex; if (ninja.seeder.seedCount == ninja.seeder.seedLimit) {
document.getElementById("seedpooldisplay").innerHTML = poolHex; ninja.seeder.seedCount++;
} ninja.wallets.singlewallet.open();
else { document.getElementById("generate").style.display = "none";
poolHex = Crypto.util.bytesToHex(SecureRandom.pool); document.getElementById("menu").style.visibility = "visible";
document.getElementById("seedpool").innerHTML = poolHex; ninja.seeder.removePoints();
document.getElementById("seedpooldisplay").innerHTML = poolHex; }
} // seed key press character
document.getElementById("mousemovelimit").innerHTML = (ninja.seeder.seedLimit - ninja.seeder.seedCount); else if ((ninja.seeder.seedCount < ninja.seeder.seedLimit) && evt.which) {
}, var timeStamp = new Date().getTime();
// seed a bunch (minimum seedLimit) of times
SecureRandom.seedTime();
SecureRandom.seedInt8(evt.which);
var keyPressTimeDiff = timeStamp - ninja.seeder.lastInputTime;
SecureRandom.seedInt8(keyPressTimeDiff);
ninja.seeder.seedCount++;
ninja.seeder.lastInputTime = new Date().getTime();
ninja.seeder.showPool();
}
},
showPoint: function (x, y) { showPool: function () {
var div = document.createElement("div"); var poolHex;
div.setAttribute("class", "seedpoint"); if (SecureRandom.poolCopyOnInit != null) {
div.style.top = y + "px"; poolHex = Crypto.util.bytesToHex(SecureRandom.poolCopyOnInit);
div.style.left = x + "px"; document.getElementById("seedpool").innerHTML = poolHex;
document.body.appendChild(div); document.getElementById("seedpooldisplay").innerHTML = poolHex;
ninja.seeder.seedPoints.push(div); }
}, else {
poolHex = Crypto.util.bytesToHex(SecureRandom.pool);
document.getElementById("seedpool").innerHTML = poolHex;
document.getElementById("seedpooldisplay").innerHTML = poolHex;
}
document.getElementById("mousemovelimit").innerHTML = (ninja.seeder.seedLimit - ninja.seeder.seedCount);
},
removePoints: function () { showPoint: function (x, y) {
for (var i = 0; i < ninja.seeder.seedPoints.length; i++) { var div = document.createElement("div");
document.body.removeChild(ninja.seeder.seedPoints[i]); div.setAttribute("class", "seedpoint");
div.style.top = y + "px";
div.style.left = x + "px";
// let's make the entropy 'points' grow and change color!
percentageComplete = ninja.seeder.seedCount / ninja.seeder.seedLimit;
document.getElementById("progress-bar-percentage").style.width=Math.ceil(percentageComplete*100)+"%";
// for some reason, appending these divs to an IOS device breaks clicking altogether (?)
if (navigator.platform != 'iPad' && navigator.platform != 'iPhone' && navigator.platform != 'iPod') {
document.body.appendChild(div);
}
ninja.seeder.seedPoints.push(div);
},
removePoints: function () {
for (var i = 0; i < ninja.seeder.seedPoints.length; i++) {
document.body.removeChild(ninja.seeder.seedPoints[i]);
}
ninja.seeder.seedPoints = [];
} }
ninja.seeder.seedPoints = []; };
}
};
ninja.qrCode = { ninja.qrCode = {
// determine which type number is big enough for the input text length // determine which type number is big enough for the input text length

11
src/index.html
View file

@ -156,6 +156,17 @@
<span id="generatelabelmovemouse">MOVE your mouse around to add some extra randomness... </span><span id="mousemovelimit"></span><br /> <span id="generatelabelmovemouse">MOVE your mouse around to add some extra randomness... </span><span id="mousemovelimit"></span><br />
<span id="generatelabelkeypress">OR type some random characters into this textbox</span> <input type="text" id="generatekeyinput" onkeypress="ninja.seeder.seedKeyPress(event);" /><br /> <span id="generatelabelkeypress">OR type some random characters into this textbox</span> <input type="text" id="generatekeyinput" onkeypress="ninja.seeder.seedKeyPress(event);" /><br />
<div id="seedpooldisplay"></div> <div id="seedpooldisplay"></div>
<div id="rightArea">
<div id="progress-bar" class="fullyRounded">
<div id="progress-bar-percentage" class="fullyRounded" style="width: 1%"><span id="mousemovelimit"> &nbsp; </span></div>
</div>
<div id="seedSkipper">
<a href="#" class="nicerButton" style="width: 100px;" onClick="ninja.seeder.seedCount = ninja.seeder.seedLimit; ninja.seeder.seed();">Skip &raquo;</a><br />
<p>You may skip this step if you do not plan to use the random key generator.</p>
</div>
</div>
<hr /> <hr />

8
src/main.css
View file

@ -28,6 +28,14 @@ body { font-family: Arial; background-image: url('images/diamonds.png'); height:
#seedpoolarea { display: none; } #seedpoolarea { display: none; }
#seedpooldisplay { font-family: monospace; font-size: 1em; width: 640px; padding: 15px 5px; word-wrap: break-word; } #seedpooldisplay { font-family: monospace; font-size: 1em; width: 640px; padding: 15px 5px; word-wrap: break-word; }
.seedpoint { width: 6px; height: 6px; display: block; border-radius: 3px; background-color: #80CF80; position: absolute; z-index: 10; } .seedpoint { width: 6px; height: 6px; display: block; border-radius: 3px; background-color: #80CF80; position: absolute; z-index: 10; }
#seedSkipper { font-size: 11px; text-align: center; line-height: 14px;}
#generate #mousemovelimit { font-size: 16px; color: #FFF; }
#rightArea { float: right; width: 170px; }
#progress-bar { width: 170px; background:#99c31b; position: relative; margin-bottom: 20px; }
#progress-bar-percentage { background:#ff952d; padding: 3px 0px; text-align: center; height: 18px; }
#progress-bar-percentage span { display: inline-block; position: absolute; width: 100%; left: 0; }
#generate { font-size: 13px; text-align: left; position: relative; padding: 20px; border: 1px solid #BFBFBF; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } #generate { font-size: 13px; text-align: left; position: relative; padding: 20px; border: 1px solid #BFBFBF; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#generate span { padding: 5px 5px 0 5px; } #generate span { padding: 5px 5px 0 5px; }
#generatekeyinput { position: relative; z-index: 20; } #generatekeyinput { position: relative; z-index: 20; }

180
src/ninja.misc.js
View file

@ -1,97 +1,105 @@
ninja.seeder = { ninja.seeder = {
init: (function () { init: (function () {
document.getElementById("generatekeyinput").value = ""; document.getElementById("generatekeyinput").value = "";
})(), })(),
// number of mouse movements to wait for // number of mouse movements to wait for
seedLimit: (function () { seedLimit: (function () {
var num = Crypto.util.randomBytes(12)[11]; var num = Crypto.util.randomBytes(12)[11];
return 200 + Math.floor(num); return 200 + Math.floor(num);
})(), })(),
seedCount: 0, // counter seedCount: 0, // counter
lastInputTime: new Date().getTime(), lastInputTime: new Date().getTime(),
seedPoints: [], seedPoints: [],
// seed function exists to wait for mouse movement to add more entropy before generating an address // seed function exists to wait for mouse movement to add more entropy before generating an address
seed: function (evt) { seed: function (evt) {
if (!evt) var evt = window.event; if (!evt) var evt = window.event;
var timeStamp = new Date().getTime();
// seeding is over now we generate and display the address
if (ninja.seeder.seedCount == ninja.seeder.seedLimit) {
ninja.seeder.seedCount++;
ninja.wallets.singlewallet.open();
document.getElementById("generate").style.display = "none";
document.getElementById("menu").style.visibility = "visible";
ninja.seeder.removePoints();
}
// seed mouse position X and Y when mouse movements are greater than 40ms apart.
else if ((ninja.seeder.seedCount < ninja.seeder.seedLimit) && evt && (timeStamp - ninja.seeder.lastInputTime) > 40) {
SecureRandom.seedTime();
SecureRandom.seedInt16((evt.clientX * evt.clientY));
ninja.seeder.showPoint(evt.clientX, evt.clientY);
ninja.seeder.seedCount++;
ninja.seeder.lastInputTime = new Date().getTime();
ninja.seeder.showPool();
}
},
// seed function exists to wait for mouse movement to add more entropy before generating an address
seedKeyPress: function (evt) {
if (!evt) var evt = window.event;
// seeding is over now we generate and display the address
if (ninja.seeder.seedCount == ninja.seeder.seedLimit) {
ninja.seeder.seedCount++;
ninja.wallets.singlewallet.open();
document.getElementById("generate").style.display = "none";
document.getElementById("menu").style.visibility = "visible";
ninja.seeder.removePoints();
}
// seed key press character
else if ((ninja.seeder.seedCount < ninja.seeder.seedLimit) && evt.which) {
var timeStamp = new Date().getTime(); var timeStamp = new Date().getTime();
// seed a bunch (minimum seedLimit) of times // seeding is over now we generate and display the address
SecureRandom.seedTime(); if (ninja.seeder.seedCount == ninja.seeder.seedLimit) {
SecureRandom.seedInt8(evt.which); ninja.seeder.seedCount++;
var keyPressTimeDiff = timeStamp - ninja.seeder.lastInputTime; ninja.wallets.singlewallet.open();
SecureRandom.seedInt8(keyPressTimeDiff); document.getElementById("generate").style.display = "none";
ninja.seeder.seedCount++; document.getElementById("menu").style.visibility = "visible";
ninja.seeder.lastInputTime = new Date().getTime(); ninja.seeder.removePoints();
ninja.seeder.showPool(); }
} // seed mouse position X and Y when mouse movements are greater than 40ms apart.
}, else if ((ninja.seeder.seedCount < ninja.seeder.seedLimit) && evt && (timeStamp - ninja.seeder.lastInputTime) > 40) {
SecureRandom.seedTime();
SecureRandom.seedInt16((evt.clientX * evt.clientY));
ninja.seeder.showPoint(evt.clientX, evt.clientY);
ninja.seeder.seedCount++;
ninja.seeder.lastInputTime = new Date().getTime();
ninja.seeder.showPool();
}
},
showPool: function () { // seed function exists to wait for mouse movement to add more entropy before generating an address
var poolHex; seedKeyPress: function (evt) {
if (SecureRandom.poolCopyOnInit != null) { if (!evt) var evt = window.event;
poolHex = Crypto.util.bytesToHex(SecureRandom.poolCopyOnInit); // seeding is over now we generate and display the address
document.getElementById("seedpool").innerHTML = poolHex; if (ninja.seeder.seedCount == ninja.seeder.seedLimit) {
document.getElementById("seedpooldisplay").innerHTML = poolHex; ninja.seeder.seedCount++;
} ninja.wallets.singlewallet.open();
else { document.getElementById("generate").style.display = "none";
poolHex = Crypto.util.bytesToHex(SecureRandom.pool); document.getElementById("menu").style.visibility = "visible";
document.getElementById("seedpool").innerHTML = poolHex; ninja.seeder.removePoints();
document.getElementById("seedpooldisplay").innerHTML = poolHex; }
} // seed key press character
document.getElementById("mousemovelimit").innerHTML = (ninja.seeder.seedLimit - ninja.seeder.seedCount); else if ((ninja.seeder.seedCount < ninja.seeder.seedLimit) && evt.which) {
}, var timeStamp = new Date().getTime();
// seed a bunch (minimum seedLimit) of times
SecureRandom.seedTime();
SecureRandom.seedInt8(evt.which);
var keyPressTimeDiff = timeStamp - ninja.seeder.lastInputTime;
SecureRandom.seedInt8(keyPressTimeDiff);
ninja.seeder.seedCount++;
ninja.seeder.lastInputTime = new Date().getTime();
ninja.seeder.showPool();
}
},
showPoint: function (x, y) { showPool: function () {
var div = document.createElement("div"); var poolHex;
div.setAttribute("class", "seedpoint"); if (SecureRandom.poolCopyOnInit != null) {
div.style.top = y + "px"; poolHex = Crypto.util.bytesToHex(SecureRandom.poolCopyOnInit);
div.style.left = x + "px"; document.getElementById("seedpool").innerHTML = poolHex;
document.body.appendChild(div); document.getElementById("seedpooldisplay").innerHTML = poolHex;
ninja.seeder.seedPoints.push(div); }
}, else {
poolHex = Crypto.util.bytesToHex(SecureRandom.pool);
document.getElementById("seedpool").innerHTML = poolHex;
document.getElementById("seedpooldisplay").innerHTML = poolHex;
}
document.getElementById("mousemovelimit").innerHTML = (ninja.seeder.seedLimit - ninja.seeder.seedCount);
},
removePoints: function () { showPoint: function (x, y) {
for (var i = 0; i < ninja.seeder.seedPoints.length; i++) { var div = document.createElement("div");
document.body.removeChild(ninja.seeder.seedPoints[i]); div.setAttribute("class", "seedpoint");
div.style.top = y + "px";
div.style.left = x + "px";
// let's make the entropy 'points' grow and change color!
percentageComplete = ninja.seeder.seedCount / ninja.seeder.seedLimit;
document.getElementById("progress-bar-percentage").style.width=Math.ceil(percentageComplete*100)+"%";
// for some reason, appending these divs to an IOS device breaks clicking altogether (?)
if (navigator.platform != 'iPad' && navigator.platform != 'iPhone' && navigator.platform != 'iPod') {
document.body.appendChild(div);
}
ninja.seeder.seedPoints.push(div);
},
removePoints: function () {
for (var i = 0; i < ninja.seeder.seedPoints.length; i++) {
document.body.removeChild(ninja.seeder.seedPoints[i]);
}
ninja.seeder.seedPoints = [];
} }
ninja.seeder.seedPoints = []; };
}
};
ninja.qrCode = { ninja.qrCode = {
// determine which type number is big enough for the input text length // determine which type number is big enough for the input text length