Add mobile QR code screen
Project: http://git-wip-us.apache.org/repos/asf/incubator-milagro-mfa-js-client/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-milagro-mfa-js-client/commit/f6fe492f Tree: http://git-wip-us.apache.org/repos/asf/incubator-milagro-mfa-js-client/tree/f6fe492f Diff: http://git-wip-us.apache.org/repos/asf/incubator-milagro-mfa-js-client/diff/f6fe492f Branch: refs/heads/master Commit: f6fe492f267c8681a6db1329dee2210710ddcbe4 Parents: e849f80 Author: Boyan Bakov <[email protected]> Authored: Fri May 27 18:28:42 2016 +0300 Committer: Boyan Bakov <[email protected]> Committed: Mon May 30 13:31:12 2016 +0300 ---------------------------------------------------------------------- browser/bower.json | 2 +- browser/js/mpin.js | 69 ++++++++++++++++++-- browser/themes/milagro/sass/_template.scss | 7 ++ .../themes/milagro/views/mobile-qr.handlebars | 33 ++++++++++ 4 files changed, 105 insertions(+), 6 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-milagro-mfa-js-client/blob/f6fe492f/browser/bower.json ---------------------------------------------------------------------- diff --git a/browser/bower.json b/browser/bower.json index 2d4f014..80e55f4 100644 --- a/browser/bower.json +++ b/browser/bower.json @@ -7,7 +7,7 @@ ], "dependencies": { "milagro-crypto": "https://github.com/miracl/milagro-crypto.git#1.0.0";, - "milagro-mfa-js-lib": "https://github.com/miracl/milagro-mfa-js-lib.git#1.0.0";, + "milagro-mfa-js-lib": "https://github.com/miracl/milagro-mfa-js-lib.git#1.1.0";, "qrcodejs": "0.1.0", "handlebars": "~3.0.3" }, http://git-wip-us.apache.org/repos/asf/incubator-milagro-mfa-js-client/blob/f6fe492f/browser/js/mpin.js ---------------------------------------------------------------------- diff --git a/browser/js/mpin.js b/browser/js/mpin.js index 5b89da0..acf8429 100644 --- a/browser/js/mpin.js +++ b/browser/js/mpin.js @@ -21,10 +21,9 @@ var mpin = mpin || {}; (function () { "use strict"; - var lang = {}, hlp = {}, loader, MPIN_URL_BASE, IMAGES_PATH, CSS_FILENAME, TEMPLATE_NAME; + var lang = {}, hlp = {}, loader, MPIN_URL_BASE, IMAGES_PATH, CSS_FILENAME; MPIN_URL_BASE = "%URL_BASE%"; - TEMPLATE_NAME = "%TEMPLATE_NAME%"; - IMAGES_PATH = MPIN_URL_BASE + "/images/" + TEMPLATE_NAME + "/"; + IMAGES_PATH = MPIN_URL_BASE + "/images/"; CSS_FILENAME = "main.css"; @@ -439,7 +438,6 @@ var mpin = mpin || {}; this.mpinLib.cancelMobileAuth(); }; - // Access NUMBER mpin.prototype.renderMobile = function () { var callbacks = {}, self = this; @@ -454,6 +452,43 @@ var mpin = mpin || {}; self.clrInterval.call(self); self.renderHome.call(self, evt); }; + + callbacks.mpin_action_setup = function () { + self.clrInterval.call(self); + if (self.opts.mobileConfigURL) { + self.renderMobileConfig.call(self); + } else { + self.renderMobileSetup.call(self); + } + }; + + callbacks.mpin_desktop = function () { + self.clrInterval.call(self); + self.renderDesktop.call(self); + }; + + this.render("mobile-qr", callbacks, {mobileOnly: !this.opts.mobileOnly}); + + setTimeout(function () { + self.getQrParams.call(self); + }, 0); + }; + + // Access NUMBER + mpin.prototype.renderMobileAN = function () { + var callbacks = {}, self = this; + + this.clrInterval(); + + if (this.opts.requestOTP === "1") { + this.renderMobileSetup(); + return; + } + + callbacks.mpin_home = function (evt) { + self.clrInterval.call(self); + self.renderHome.call(self, evt); + }; callbacks.mpin_action_setup = function () { self.clrInterval.call(self); if (self.opts.mobileConfigURL) { @@ -488,6 +523,8 @@ var mpin = mpin || {}; }, 0); }; + + mpin.prototype.renderHelp = function (tmplName, callbacks, tmplData) { var k, self = this; tmplData = tmplData || {}; @@ -984,6 +1021,27 @@ var mpin = mpin || {}; this.clrInterval.call(this); }; + mpin.prototype.getQrParams = function () { + var self = this; + this.mpinLib.getQrUrl("", function (err, data) { + var qrElem, expireAfter; + if (err) { + self.error(4010); + } + + var qrElem = document.getElementById("mp_qrcode"); + new QRCode(qrElem, { + text: data.qrUrl, + width: 158, + height: 158 + }); + + expireAfter = data.ttlSeconds; + + self._getAccess.call(self, expireAfter); + }); + }; + mpin.prototype.getAccessNumber = function () { var self = this, drawTimer, timerEl, timer2d, totalSec, timerExpire, expire; @@ -1335,7 +1393,7 @@ var mpin = mpin || {}; }; mpin.prototype.renderSetupDone = function () { var callbacks = {}, self = this, userId; - userId = this.readIdentity() || this.identity; + userId = this.readIdentity() || this.identity; callbacks.mpin_home = function () { self.renderHome.call(self); }; @@ -2302,6 +2360,7 @@ var mpin = mpin || {}; "signin_btn_mobile1": "Sign in with Smartphone", "signin_mobile_btn_text": "Sign in with your Smartphone", "signin_mobile_header": "Sign in with your phone", + "scan_mobile_header": "Scan with the M-Pin app", "signin_mobile_btn_text2": "Sign in with phone", "signin_button_mobile": "Sign in with Phone", "signin_btn_mobile2": "(This is a PUBLIC device I DO NOT trust)", http://git-wip-us.apache.org/repos/asf/incubator-milagro-mfa-js-client/blob/f6fe492f/browser/themes/milagro/sass/_template.scss ---------------------------------------------------------------------- diff --git a/browser/themes/milagro/sass/_template.scss b/browser/themes/milagro/sass/_template.scss index e956bb0..d9dfd9d 100644 --- a/browser/themes/milagro/sass/_template.scss +++ b/browser/themes/milagro/sass/_template.scss @@ -367,6 +367,13 @@ $BGCOLOR6: #ef984a; @mixin buttons-box() { padding: 5% 5%; z-index: 99; + + .qrCodeArea { + width: 160px; + height: 160px; + display: block; + margin: 0 auto 20px; + } } @mixin mpin-input-field () { http://git-wip-us.apache.org/repos/asf/incubator-milagro-mfa-js-client/blob/f6fe492f/browser/themes/milagro/views/mobile-qr.handlebars ---------------------------------------------------------------------- diff --git a/browser/themes/milagro/views/mobile-qr.handlebars b/browser/themes/milagro/views/mobile-qr.handlebars new file mode 100644 index 0000000..8109e1d --- /dev/null +++ b/browser/themes/milagro/views/mobile-qr.handlebars @@ -0,0 +1,33 @@ +<div class="mpinHeader mpMobileColor"> + <div class="mpinLogo"></div> + <div class="mpinHome mpPointer" id="mpin_home"></div> +</div> + +<div class="mpinHeaderBig mpPaddTop10 mpPaddBot10 mpMobColor"> + {{txt "scan_mobile_header"}} +</div> + +<div class="mpinMain mpNoHeight"> + <div class="mpinBtnBox mpNoPadding"> + + <span id="mp_qrcode" class="qrCodeArea"> + </span> + + <div class="mpinButton mpinMobileBtn mpinBtnClick" id="mpin_action_setup"> + {{txt "mobile_button_setup"}} + </div> + + {{#if data.mobileOnly }} + <div class="mpinButton mpinButtonDark mpinBtnClick" id="mpin_desktop"> + {{txt "mobile_button_signin2"}} + </div> + {{/if}} + + </div> +</div> + + +<div class="mpinFooter mpMobileFooter"> + <div class="mpinPowered"></div> + <div class="mpinHelpHub"></div> +</div> \ No newline at end of file
