QR Code recognition integration, ‘Wallet Details’ layout update.

Gruntfile.js

@@ -23,6 +23,7 @@ module.exports = function (grunt) {
 					{ token: "//cryptojs.blockmodes.js", file: "./src/cryptojs.blockmodes.js" },
 					{ token: "//cryptojs.ripemd160.js", file: "./src/cryptojs.ripemd160.js" },
 					{ token: "//crypto-scrypt.js", file: "./src/crypto-scrypt.js" },
+					{ token: "//jsqrcode.js", file: "./src/jsqrcode.js" },
 					{ token: "//doge.js", file: "./src/doge.js" },
 					{ token: "//ellipticcurve.js", file: "./src/ellipticcurve.js" },
 					{ token: "//ninja.key.js", file: "./src/ninja.key.js" },

README

@@ -40,6 +40,8 @@ window.EllipticCurve	BSD License
 window.BigInteger   	BSD License
 window.QRCode       	MIT License
 window.Bitcoin      	MIT License
+jsqrcode            	Apache License, 2.0
+
 
 The WalletGenerator.net software is available under The MIT License (MIT)
 Copyright (c) 2014 WalletGenerator.net

src/index.html

@@ -6,17 +6,17 @@
 	<!--
 
 Notice of Copyrights and Licenses:
-
+---------------------------------------
 The WalletGenerator.net project, software and embedded resources are copyright WalletGenerator.net. 
 The WalletGenerator.net name and logo are not part of the open source license.
 
-	Portions of the all-in-one HTML document contain JavaScript codes that are the copyrights 
+Portions of the all-in-one HTML document contain JavaScript codes that are the copyrights of others.
-	of others. The individual copyrights are included throughout the document along with their 
+The individual copyrights are included throughout the document along with their licenses. Included
-	licenses. Included JavaScript libraries are separated with HTML script tags.
+JavaScript libraries are separated with HTML script tags.
 
 Summary of JavaScript functions with a redistributable license:
 JavaScript function 	License
-
+------------------- 	--------------
 Array.prototype.map 	Public Domain
 window.Crypto       	BSD License
 window.SecureRandom 	BSD License
@@ -24,25 +24,25 @@
 window.BigInteger   	BSD License
 window.QRCode       	MIT License
 window.Bitcoin      	MIT License
+jsqrcode            	Apache License, 2.0
+
 
 The WalletGenerator.net software is available under The MIT License (MIT)
 Copyright (c) 2014 WalletGenerator.net
 
-	Permission is hereby granted, free of charge, to any person obtaining a copy of this 
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and 
-	software and associated documentation files (the "Software"), to deal in the Software 
+associated documentation files (the "Software"), to deal in the Software without restriction, 
-	without restriction, including without limitation the rights to use, copy, modify, 
+including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
-	merge, publish, distribute, sublicense, and/or sell copies of the Software, and to 
+and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
-	permit persons to whom the Software is furnished to do so, subject to the following 
+subject to the following conditions:
-	conditions:
 
-	The above copyright notice and this permission notice shall be included in all copies 
+The above copyright notice and this permission notice shall be included in all copies or substantial
-	or substantial portions of the Software.
+portions of the Software.
 
-	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
-	INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-	PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-	HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-	OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
 SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 
@@ -107,6 +107,9 @@
 	</script>
 	<script type="text/javascript">
 //crypto-scrypt.js
+	</script>
+	<script type="text/javascript">
+//jsqrcode.js
 	</script>
 	<style type="text/css">
 //main.css
@@ -440,12 +443,35 @@
 
 			<div id="detailarea" class="walletarea">
 				<div id="detailcommands" class="commands">
-					<span><label id="detaillabelenterprivatekey" for="detailprivkey">Enter Private Key</label></span>
+
-					<input type="text" id="detailprivkey" value="" onfocus="this.select();" onkeypress="if (event.keyCode == 13) ninja.wallets.detailwallet.viewDetails();" />
+					<div class="row extra qrzone">
-					<span><input type="button" id="detailview" value="View Details" onclick="ninja.wallets.detailwallet.viewDetails();" /></span>
+						<span class="qrinput">
-					<span class="print"><input type="button" name="print" id="detailprint" value="Print" onclick="window.print();" /></span>
+						<label id="detaillabelenterprivatekey" for="detailprivkey">Enter Private Key</label>
-					<div class="row extra">
+						
-						<span><label id="detailkeyformats">Key Formats: WIF, WIFC, HEX, B64, B6, MINI, BIP38</label></span>
+							<span class="qrcodeinputwrapper">
+								<input type="text" id="detailprivkey" value="" placeholder="Enter a private key, or click the QR icon to scan" autocomplete="off" onFocus="this.select();" onKeyPress="if (event.keyCode == 13) ninja.wallets.detailwallet.viewDetails();" />
+								<img onClick="ninja.wallets.detailwallet.qrscanner.start()" />
+							</span>
+						
+						<input type="button" id="detailview" value="View Details" onclick="ninja.wallets.detailwallet.viewDetails();" />
+					</span>
+					<span class="print">
+						<input type="button" name="print" id="detailprint" value="Print" onclick="window.print();" />
+					</span>
+					</div>
+					
+					<div id="paperqrscanner">
+						<div class="background"></div>
+						<div id="mainbody" class="dialog instructionsarea">
+							<h2>Scan QR code using your camera</h2>
+							<div id="paperqrnotsupported" style="color: red" class="hide">Sorry, but your web browser does not support the HTML5 camera controls. Try using a recent version of Firefox (recommended), Chrome or Opera.</div>
+							<div id="paperqrpermissiondenied" style="color: red" class="hide">
+								<p>Permission denied. Your browser should display a message requesting access to your camera. Please click the "Allow" button to enable the camera.</p>
+							</div>
+							<div id="paperqrerror" style="color: red"></div>
+							<div id="paperqroutput"></div>
+							<button onClick="ninja.wallets.detailwallet.qrscanner.stop()">Cancel</button>
+						</div>
 					</div>
 					<div id="detailbip38commands">
 						<span><label id="detaillabelpassphrase">Enter BIP38 Passphrase</label> <input type="text" id="detailprivkeypassphrase" value="" onfocus="this.select();" onkeypress="if (event.keyCode == 13) ninja.wallets.detailwallet.viewDetails();" /></span>

src/main.css

@@ -194,10 +194,18 @@ body { font-family: Arial; background-image: url('images/diamonds.png'); height:
 .paperWalletText ul { margin: 0px; padding: 0px; }
 .paperWalletText li { line-height: 13px; margin-bottom: 5px; }
 
+.qrzone { margin: 20px 0px 20px 20px; }
+#detaillabelenterprivatekey { margin-right: 15px; }
+
+.qrcodeinputwrapper { position: relative; margin-right: 15px; }
+.qrcodeinputwrapper img { position: absolute; display: block; top: 3px; right: 20px; width: 16px; height: 16px;background: url("./images/qrcode.png"); cursor: pointer; padding: 0; }
+
 #bulkarea .body { padding: 5px 0 0 0; }
 #bulkarea .format { font-style: italic; font-size: 90%; }
 #bulktextarea { font-size: 90%; width: 98%; margin: 4px 0 0 0; }
 #brainarea .keyarea { visibility: hidden; min-height: 110px; }
+#detailarea span.qrinput { position: relative; padding: 10px; }
+#detailarea span.qrinput #detailprivkey { width: 420px; height: 20px; }
 #detailkeyarea { padding: 10px; }
 #detailarea { margin: 0; text-align: left; }
 #detailarea .notes { text-align: left; font-size: 80%; padding: 0 0 20px 0; }
@@ -217,6 +225,8 @@ body { font-family: Arial; background-image: url('images/diamonds.png'); height:
 #detailarea #detailqrcodeprivatecomp { position: relative; float: right; margin: 0 0 0 10px; padding: 13px 11px 11px 11px; }
 #detailpubkey { width: 590px; }
 #detailbip38commands { display: none; padding-top: 5px; }
+#paperqrscanner { position: absolute; display: none; width: 100%; height: 100%; top: 0; left: 0; z-index: 5000; vertical-aligh: middle; }
+#paperqrscanner.show { display: block; }
 #vanityarea { text-align: left; }
 #vanityarea .label { text-decoration: underline; }
 #vanityarea .output { font-family: monospace; font-size: 1.25em; display: block; }
@@ -235,6 +245,8 @@ body { font-family: Arial; background-image: url('images/diamonds.png'); height:
 #busyblock.busy { display: block; }
 .hide { display: none; }
 .show { display: block; }
+.dialog { z-index: 6000; position: relative; background: white; border: 2px solid #f7931a; width: 600px; margin: 150px auto; padding: 1em; }
+.dialog-narrow { width: 300px; }
 
 #currencyddl { margin: 20px; position: absolute; right: 0; top: 60px; width: 320px; font-size: 14px; }
 #currencyddl select { font-size: 14px; }
@@ -282,7 +294,7 @@ body { font-family: Arial; background-image: url('images/diamonds.png'); height:
 	#brainwarning {  }
 	#detailcommands { padding: 10px 0; }
 	#detailcommands span { padding: 0 10px; }
-	#detailprivkey { width: 250px; }
+	#detailprivkey { width: 300px; }
 	#detailprivkeypassphrase { width: 250px; }
 	.paper .commands { border: 1px solid #BFBFBF; }
 	#bulkstartindex { width: 35px; }

src/ninja.detailwallet.js

@@ -1,7 +1,53 @@
 ninja.wallets.detailwallet = {
+	qrscanner: {
+		scanner: null,
+
+		start: function() {
+			document.getElementById('paperqrscanner').className = 'show';
+			ninja.wallets.detailwallet.qrscanner.showError(null);
+			var supported = ninja.wallets.detailwallet.qrscanner.scanner.isSupported();
+			if (!supported) {
+				document.getElementById('paperqrnotsupported').className = '';
+			} else {
+				ninja.wallets.detailwallet.qrscanner.scanner.start();
+			}
+		},
+
+		stop: function() {
+			ninja.wallets.detailwallet.qrscanner.scanner.stop();
+			document.getElementById('paperqrscanner').className = '';
+		},
+
+		showError: function(error) {
+			if (error) {
+				if (error == 'PERMISSION_DENIED' || error == 'PermissionDeniedError') {
+					document.getElementById('paperqrerror').innerHTML = '';
+					document.getElementById('paperqrpermissiondenied').className = '';
+				} else {
+					document.getElementById('paperqrerror').innerHTML = error;
+					document.getElementById('paperqrpermissiondenied').className = 'hide';
+				}
+			} else {
+				document.getElementById('paperqrerror').innerHTML = '';
+				document.getElementById('paperqrpermissiondenied').className = 'hide';
+			}
+		}
+	},
+
 	open: function () {
 		document.getElementById("detailarea").style.display = "block";
 		document.getElementById("detailprivkey").focus();
+		if (!ninja.wallets.detailwallet.qrscanner.scanner) {
+			ninja.wallets.detailwallet.qrscanner.scanner = new QRCodeScanner(320, 240, 'paperqroutput', 
+				function(data) {
+					document.getElementById('detailprivkey').value = data;
+					document.getElementById('paperqrscanner').className = '';
+					ninja.wallets.detailwallet.viewDetails();
+				},
+				function(error) {
+					ninja.wallets.detailwallet.qrscanner.showError(error);
+				});
+		}
 	},
 
 	close: function () {