From e999d1e37a3b458a94b3102d28f5720606a786c0 Mon Sep 17 00:00:00 2001 From: AJ ONeal Date: Mon, 26 Oct 2015 13:48:33 -0700 Subject: [PATCH] now functional --- countdown.js | 122 ++++++++++++++++++++++++++++++++++++++++---- jquery.countdown.js | 21 +++++--- phone.html | 63 +++++++++++++++++++---- style.css | 20 ++++---- test.html | 13 ++--- test.js | 36 +++++++------ 6 files changed, 214 insertions(+), 61 deletions(-) diff --git a/countdown.js b/countdown.js index 3ee3748..f3c9d2d 100644 --- a/countdown.js +++ b/countdown.js @@ -1,11 +1,113 @@ -var countdown = $("#countdown").countdown360({ - radius: 30, - seconds: 30, - fontColor: '#000', - autostart: false, - onComplete: function() { - console.log('done') +(function (exports) { + 'use strict'; + + $('body').addClass('in'); + + var Authenticator = exports.Authenticator; + + function parseQuery(search) { + + var args = search.substring(1).split('&'); + + var argsParsed = {}; + + var i, arg, kvp, key, value; + + for (i=0; i < args.length; i++) { + + arg = args[i]; + + if (-1 === arg.indexOf('=')) { + + argsParsed[decodeURIComponent(arg).trim()] = true; + } + else { + + kvp = arg.split('='); + + key = decodeURIComponent(kvp[0]).trim(); + + value = decodeURIComponent(kvp[1]).trim(); + + argsParsed[key] = value; + } + } + + return argsParsed; } -}); -countdown.start(); -console.log('countdown360 ', countdown); \ No newline at end of file + + /* + function parseQuery(search) { + var args = search.substring(1).split('&'); + var argsParsed = {}; + var i; + + console.log('parse args', args); + for (i = 0; i < args.length; i++) { + var arg = args[i]; + + if (-1 === arg.indexOf('=')) { + argsParsed[decodeURIComponent(arg).trim()] = true; + } + else { + var kvp = arg.split('='); + argsParsed[decodeURIComponent(kvp[0]).trim()] = decodeURIComponent(kvp[1]).trim(); + } + } + + return argsParsed; + } + */ + + function run() { + var countdown = $(".js-countdown").countdown360({ + radius: 30, + seconds: 30, + fontColor: '#000', + autostart: false, + onComplete: function() { + console.log('done'); + run(); + } + }); + + // TODO change to token start time, regardless of the time the app began + countdown.start(new Date()); + console.log('countdown360 ', countdown); + console.log(document.location.search); + + var otpauth = parseQuery(document.location.search).otpuri; + var otplink = document.createElement('a'); + var otp; + var meta; + var issuer; + var accountName; + + otplink.href = otpauth; + otp = parseQuery(otplink.search); + + meta = otplink.pathname.replace(/.*\/totp\//, '').split(':'); + // TODO throw if otp.issuer !== decodeURI(meta[0]) + if (meta.length > 1) { + issuer = otp.issuer || decodeURI(meta[0]); + accountName = decodeURI(meta[1]); + } + else { + issuer = otp.issuer; + accountName = decodeURI(meta[0]); + } + + console.log('otpuri', otpauth); + console.log('otplink', otplink); + console.log('otplink.search', otplink.search); + console.log('otp', otp); + + $('.js-issuer').text(issuer); + $('.js-account-name').text(accountName); + Authenticator.generateToken(otp.secret).then(function (token) { + $('.js-token').text(token.replace(/(\d{3})/g, '$1 ').trim()); + }); + } + + run(); +}(window)); diff --git a/jquery.countdown.js b/jquery.countdown.js index f5b9b72..4847e7d 100644 --- a/jquery.countdown.js +++ b/jquery.countdown.js @@ -29,7 +29,7 @@ Plugin.prototype = { getTimeRemaining: function() { - + var timeRemaining = this._secondsLeft(this.getElapsedTime()); return timeRemaining; }, @@ -55,15 +55,16 @@ } }, - start: function () { - this.startedAt = new Date(); + start: function (date) { + this.updateInterval = 25; + this.startedAt = date || new Date(); this._drawCountdownShape(Math.PI*3.5, true); this._drawCountdownLabel(0); - this.interval = setInterval(jQuery.proxy(this._draw, this), 1000); + this._interval = setInterval(jQuery.proxy(this._draw, this), this.updateInterval); }, stop: function (cb) { - clearInterval(this.interval); + clearInterval(this._interval); if (cb) { cb(); } }, @@ -135,8 +136,14 @@ }, _draw: function () { - var secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime())/1000), - endAngle = (Math.PI*3.5) - (((Math.PI*2)/this.settings.seconds) * secondsElapsed); + var secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime())/1000); + var milisecondsElapsed = Math.round((Date.now() - this.startedAt.getTime())); + var whole = (Math.PI*2)/(this.settings.seconds * 1000); + var parts = milisecondsElapsed; + var endAngle = (Math.PI*3.5) + - ( (whole) * parts); + //console.log('endAngle', endAngle); + this._clearRect(); this._drawCountdownShape(Math.PI*3.5, false); if (secondsElapsed < this.settings.seconds) { diff --git a/phone.html b/phone.html index 1248d96..becaaa1 100644 --- a/phone.html +++ b/phone.html @@ -1,11 +1,52 @@ - - - -
- -
your token is:
-
123 456
-
- - -
\ No newline at end of file + + + + Authenticator - Daplie, Inc + + + + + + +
+ +
your Company token is:
+
--- ---
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/style.css b/style.css index d367572..a8f1ee7 100644 --- a/style.css +++ b/style.css @@ -14,7 +14,7 @@ } .left { - margin-top: 18%; + margin-top: 170px; padding: 0 0 0 15%; } @@ -45,13 +45,13 @@ .token-label { font-size: 14px; - line-height: 1.0556; - font-weight: 200; - letter-spacing: .023em; - text-align: center; - font-style: normal; - font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif; - margin-left: -100px; + line-height: 1.0556; + font-weight: 200; + letter-spacing: .023em; + text-align: center; + font-style: normal; + font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif; + margin-left: -100px; } input { @@ -82,7 +82,7 @@ input { } .right { - margin-top:25%; + margin-top:265px; position: relative; } @@ -202,4 +202,4 @@ hr { transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out; -} \ No newline at end of file +} diff --git a/test.html b/test.html index edce037..2d10bb7 100644 --- a/test.html +++ b/test.html @@ -3,7 +3,8 @@ Authenticator - Daplie, Inc - + + @@ -25,10 +26,10 @@
+
- +
-
@@ -55,7 +56,7 @@
- +
@@ -64,9 +65,9 @@
- +
-

otpauth://totp/company:user?secret=xxxx

+

otpauth://totp/company:user?secret=xxxx&issuer=company

diff --git a/test.js b/test.js index 41f3b52..184b925 100644 --- a/test.js +++ b/test.js @@ -8,6 +8,7 @@ }); +var defaultKey = 'hxdm vjec jjws rb3h wizr 4ifu gftm xboz'; var key; var Authenticator = exports.Authenticator; var $ = function (x) { @@ -16,7 +17,19 @@ var $ = function (x) { function generate(ke) { Authenticator.generateKey().then(function (k) { - key = ke || k; + var $keyEl = $('.js-key'); + if (ke) { + key = ke; + } + else if ($keyEl.value) { + key = $keyEl.value; + $keyEl.placeholder = key; + $keyEl.value = ''; + } + else { + key = k; + $keyEl.placeholder = key; + } var companyName = $('.js-company-name').value; var userAccount = $('.js-user-account').value; @@ -25,25 +38,13 @@ function generate(ke) { + encodeURI(companyName) + ':' + encodeURI(userAccount) + '?secret=' + key.replace(/\s+/g, '').toUpperCase() ; - /* - var otpauth = encodeURI('otpauth://totp/' - + companyName + ':' + userAccount - + '?secret=') + key.replace(/\s+/g, '').toUpperCase() - ; - */ - // TODO figure out the right escaping - /* - var otpauth = 'otpauth://totp/' - + companyName + ':' + userAccount - + '?secret=' + key.replace(/\s+/g, '').toUpperCase() - ; - */ // obviously don't use this in production, but it's not so bad for the demo + // (hmm... no one has ever said those words and regretted them... TODO XXX generate QR locally) var src = 'https://chart.googleapis.com/chart?chs=166x166&chld=L|0&cht=qr&chl=' + encodeURIComponent(otpauth); - $('.js-otpauth').innerHTML = otpauth; // safe to inject because I created it - $('.js-key').innerHTML = key; // safe to inject because I created it + $('.js-otpauth').innerHTML = otpauth; // only safe to inject because I created it $('img.js-qrcode').src = src; + $('.js-otp-iframe').src = 'phone.html?otpuri=' + encodeURIComponent(otpauth); Authenticator.generateToken(key).then(function (token) { console.log('token', token); @@ -84,7 +85,8 @@ $('.js-generate').addEventListener('click', function () { $('.js-company-name').value = 'ACME Co'; $('.js-user-account').value = 'john@example.com'; -generate('hxdm vjec jjws rb3h wizr 4ifu gftm xboz'); +$('.js-key').placeholder = defaultKey; +generate(defaultKey); }( 'undefined' !== typeof window ? window : module.exports