show qr code for first otp login

frappe/auth.py

@@ -127,7 +127,6 @@ class LoginManager:
 
 				if user_info.two_factor_setup:
 					frappe.local.response['verification'] = {'setup_completed':True}
-					raise frappe.RequestToken
 					otp_secret = frappe.db.get_default(self.user + '_otpsecret')
 				else:
 					import os

frappe/hooks.py

@@ -40,7 +40,8 @@ app_include_css = [
 ]
 
 web_include_js = [
-	"website_script.js"
+	"website_script.js",
+	"assets/js/qrious.min.js"
 ]
 
 bootstrap = "assets/frappe/css/bootstrap.css"

frappe/public/build.json

@@ -22,6 +22,9 @@
 		"website/js/website.js",
 		"public/js/frappe/misc/rating_icons.html"
 	],
+	"js/qrious.min.js": [
+		"public/js/frappe/qrious.min.js"
+	],
 	"js/dialog.min.js": [
 		"public/js/frappe/dom.js",
 		"public/js/frappe/ui/modal.html",

frappe/templates/includes/login/login.js

@@ -157,12 +157,36 @@ login.login_handlers = (function() {
 	var login_handlers = {
 		200: function(data) {
 			console.log(data);
-			if(data.token) {
+			if(data.verification) {
 				login.set_indicator("{{ _("Success") }}", 'green');
-				$('.login-content').empty().append($('<div>').html('<form class="form-verify"><div class="page-card-head">\
+				$('.login-content').empty().append($('<div>').attr({'id':'otp_div'}).html('<form class="form-verify"><div class="page-card-head">\
 					<span class="indicator blue" data-text="Verification">Verification</span></div>\
 					<input type="text" id="login_token" class="form-control" placeholder="Verification Code" required="" autofocus="">\
 					<button class="btn btn-sm btn-primary btn-block" id="verify_token">Verify</button></form>'));
+				if (!data.verification.setup_completed){
+					var qrcode = $('<div>').attr('id','qrcode_div');
+					var direction = $('<div>').attr('id','qr_info').text('Scan QR Code and enter the resulting code displayed');
+					var qrcanvas = $('<canvas>');
+					qrcanvas.attr('id','qrcanvass');
+					qrcode.append(direction);
+					qrcode.append(qrcanvas);
+					$('#otp_div').prepend(qrcode)
+					qr = new QRious({
+								element: document.getElementById('qrcanvass'),
+								value: data.verification.totp_uri,
+							    background: 'white', // background color
+							    foreground: 'black', // foreground color
+							    level: 'L', // Error correction level of the QR code
+							    mime: 'image/png', // MIME type used to render
+							    size: 200
+							});
+				} else {
+					var qrcode = $('<div>').attr('id','qrcode_div');
+					var direction = $('<div>').attr('id','qr_info').text('Enter the code displayed in otp app under the appropriate account');
+					direction.attr('style','padding-bottom:10px;');
+					qrcode.append(direction);
+					$('#otp_div').prepend(qrcode)					
+				}
 				document.cookie = "tmp_id="+data.tmp_id;
 				verify_token();
 				return false;