Change images

dist/key_exporter.js

@@ -12,22 +12,25 @@ $(document).ready(function () {
         var password = $('#password').val();
         var card = Verso.Card.parsePrivate(privateInfo);
 
-        if (!card) { 
+        if (!card) {
 			alert('Your private info is incorrect');
             //$('#errorMessages').val("test");
 
             return false;
         }
 
         try {
-		var encSeed = card.getEndpoints(password, undefined, function (eps) { 
+          var encSeed = card.getEndpoints(password, undefined, function (eps) {
             $('#privateKey').val(eps[0].getPrivateCheck());
-        }); 
-		} 
-		catch (err) {
-			alert('incorrect password');
-		} 
-
-
+            console.log(eps[0].getPrivateCheck());
+            jQuery('#qrcode').qrcode(eps[0].getPrivateCheck());
+        });
+    }
+    catch (err) {
+      console.log(err);
+      alert('incorrect password');
+    }
+
+
     });
-});
+});

src/index.html

@@ -52,7 +52,8 @@
       <!-- @include ../vendor/webqr/findpat.js -->
       <!-- @include ../vendor/webqr/alignpat.js -->
       <!-- @include ../vendor/webqr/databr.js -->
-
+      <!-- @include ../vendor/jquery-qrcode/qrcode.js -->
+      <!-- @include ../vendor/jquery-qrcode/jquery.qrcode.js -->
 
       <!-- @include ../dist/key_exporter.js -->
       <!-- @include ../dist/scanner.js -->
@@ -100,6 +101,8 @@ <h2>2. Private key</h2>
     <p>This is your WIF private key; you may import it in any other compatible wallet client.</p>
 
     <textarea id="privateKey"></textarea>
+    <div id="qrcode"></div><br/>
+<h4>This private key represented by a QR code has to be scanned in the procedure below</h4>
 
     <h2>3. Import in new wallet ( Android ) </h2>
 

src/key_exporter.js

@@ -12,22 +12,25 @@ $(document).ready(function () {
         var password = $('#password').val();
         var card = Verso.Card.parsePrivate(privateInfo);
 
-        if (!card) { 
+        if (!card) {
 			alert('Your private info is incorrect');
             //$('#errorMessages').val("test");
 
             return false;
         }
 
         try {
-		var encSeed = card.getEndpoints(password, undefined, function (eps) { 
+          var encSeed = card.getEndpoints(password, undefined, function (eps) {
             $('#privateKey').val(eps[0].getPrivateCheck());
-        }); 
-		} 
-		catch (err) {
-			alert('incorrect password');
-		} 
-
-
+            console.log(eps[0].getPrivateCheck());
+            jQuery('#qrcode').qrcode(eps[0].getPrivateCheck());
+        });
+    }
+    catch (err) {
+      console.log(err);
+      alert('incorrect password');
+    }
+
+
     });
-});
+});

vendor/jquery-qrcode/jquery.qrcode.js

@@ -0,0 +1,89 @@
+(function( $ ){
+	$.fn.qrcode = function(options) {
+		// if options is string, 
+		if( typeof options === 'string' ){
+			options	= { text: options };
+		}
+
+		// set default values
+		// typeNumber < 1 for automatic calculation
+		options	= $.extend( {}, {
+			render		: "canvas",
+			width		: 256,
+			height		: 256,
+			typeNumber	: -1,
+			correctLevel	: QRErrorCorrectLevel.H,
+                        background      : "#ffffff",
+                        foreground      : "#000000"
+		}, options);
+
+		var createCanvas	= function(){
+			// create the qrcode itself
+			var qrcode	= new QRCode(options.typeNumber, options.correctLevel);
+			qrcode.addData(options.text);
+			qrcode.make();
+
+			// create canvas element
+			var canvas	= document.createElement('canvas');
+			canvas.width	= options.width;
+			canvas.height	= options.height;
+			var ctx		= canvas.getContext('2d');
+
+			// compute tileW/tileH based on options.width/options.height
+			var tileW	= options.width  / qrcode.getModuleCount();
+			var tileH	= options.height / qrcode.getModuleCount();
+
+			// draw in the canvas
+			for( var row = 0; row < qrcode.getModuleCount(); row++ ){
+				for( var col = 0; col < qrcode.getModuleCount(); col++ ){
+					ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;
+					var w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));
+					var h = (Math.ceil((row+1)*tileW) - Math.floor(row*tileW));
+					ctx.fillRect(Math.round(col*tileW),Math.round(row*tileH), w, h);  
+				}	
+			}
+			// return just built canvas
+			return canvas;
+		}
+
+		// from Jon-Carlos Rivera (https://github.com/imbcmdth)
+		var createTable	= function(){
+			// create the qrcode itself
+			var qrcode	= new QRCode(options.typeNumber, options.correctLevel);
+			qrcode.addData(options.text);
+			qrcode.make();
+
+			// create table element
+			var $table	= $('<table></table>')
+				.css("width", options.width+"px")
+				.css("height", options.height+"px")
+				.css("border", "0px")
+				.css("border-collapse", "collapse")
+				.css('background-color', options.background);
+
+			// compute tileS percentage
+			var tileW	= options.width / qrcode.getModuleCount();
+			var tileH	= options.height / qrcode.getModuleCount();
+
+			// draw in the table
+			for(var row = 0; row < qrcode.getModuleCount(); row++ ){
+				var $row = $('<tr></tr>').css('height', tileH+"px").appendTo($table);
+
+				for(var col = 0; col < qrcode.getModuleCount(); col++ ){
+					$('<td></td>')
+						.css('width', tileW+"px")
+						.css('background-color', qrcode.isDark(row, col) ? options.foreground : options.background)
+						.appendTo($row);
+				}	
+			}
+			// return just built canvas
+			return $table;
+		}
+
+
+		return this.each(function(){
+			var element	= options.render == "canvas" ? createCanvas() : createTable();
+			$(element).appendTo(this);
+		});
+	};
+})( jQuery );