").append(x.parseHTML(e)).find(r):e)}).complete(n&&function(e,t){s.each(n,o||[e.responseText,t,e])}),this},x.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){x.fn[t]=function(e){return this.on(t,e)}}),x.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:Xt,type:"GET",isLocal:Qt.test(_t[1]),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":on,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":x.parseJSON,"text xml":x.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?ln(ln(e,x.ajaxSettings),t):ln(x.ajaxSettings,e)},ajaxPrefilter:an(nn),ajaxTransport:an(rn),ajax:function(e,t){"object"==typeof e&&(t=e,e=undefined),t=t||{};var n,r,i,o,s,a,u,l,c=x.ajaxSetup({},t),f=c.context||c,p=c.context&&(f.nodeType||f.jquery)?x(f):x.event,h=x.Deferred(),d=x.Callbacks("once memory"),g=c.statusCode||{},m={},y={},v=0,b="canceled",T={readyState:0,getResponseHeader:function(e){var t;if(2===v){if(!o){o={};while(t=Jt.exec(i))o[t[1].toLowerCase()]=t[2]}t=o[e.toLowerCase()]}return null==t?null:t},getAllResponseHeaders:function(){return 2===v?i:null},setRequestHeader:function(e,t){var n=e.toLowerCase();return v||(e=y[n]=y[n]||e,m[e]=t),this},overrideMimeType:function(e){return v||(c.mimeType=e),this},statusCode:function(e){var t;if(e)if(2>v)for(t in e)g[t]=[g[t],e[t]];else T.always(e[T.status]);return this},abort:function(e){var t=e||b;return n&&n.abort(t),k(0,t),this}};if(h.promise(T).complete=d.add,T.success=T.done,T.error=T.fail,c.url=((e||c.url||Xt)+"").replace(Vt,"").replace(Zt,_t[1]+"//"),c.type=t.method||t.type||c.method||c.type,c.dataTypes=x.trim(c.dataType||"*").toLowerCase().match(w)||[""],null==c.crossDomain&&(a=en.exec(c.url.toLowerCase()),c.crossDomain=!(!a||a[1]===_t[1]&&a[2]===_t[2]&&(a[3]||("http:"===a[1]?"80":"443"))===(_t[3]||("http:"===_t[1]?"80":"443")))),c.data&&c.processData&&"string"!=typeof c.data&&(c.data=x.param(c.data,c.traditional)),un(nn,c,t,T),2===v)return T;u=c.global,u&&0===x.active++&&x.event.trigger("ajaxStart"),c.type=c.type.toUpperCase(),c.hasContent=!Kt.test(c.type),r=c.url,c.hasContent||(c.data&&(r=c.url+=(Yt.test(r)?"&":"?")+c.data,delete c.data),c.cache===!1&&(c.url=Gt.test(r)?r.replace(Gt,"$1_="+Ut++):r+(Yt.test(r)?"&":"?")+"_="+Ut++)),c.ifModified&&(x.lastModified[r]&&T.setRequestHeader("If-Modified-Since",x.lastModified[r]),x.etag[r]&&T.setRequestHeader("If-None-Match",x.etag[r])),(c.data&&c.hasContent&&c.contentType!==!1||t.contentType)&&T.setRequestHeader("Content-Type",c.contentType),T.setRequestHeader("Accept",c.dataTypes[0]&&c.accepts[c.dataTypes[0]]?c.accepts[c.dataTypes[0]]+("*"!==c.dataTypes[0]?", "+on+"; q=0.01":""):c.accepts["*"]);for(l in c.headers)T.setRequestHeader(l,c.headers[l]);if(c.beforeSend&&(c.beforeSend.call(f,T,c)===!1||2===v))return T.abort();b="abort";for(l in{success:1,error:1,complete:1})T[l](c[l]);if(n=un(rn,c,t,T)){T.readyState=1,u&&p.trigger("ajaxSend",[T,c]),c.async&&c.timeout>0&&(s=setTimeout(function(){T.abort("timeout")},c.timeout));try{v=1,n.send(m,k)}catch(C){if(!(2>v))throw C;k(-1,C)}}else k(-1,"No Transport");function k(e,t,o,a){var l,m,y,b,w,C=t;2!==v&&(v=2,s&&clearTimeout(s),n=undefined,i=a||"",T.readyState=e>0?4:0,l=e>=200&&300>e||304===e,o&&(b=cn(c,T,o)),b=fn(c,b,T,l),l?(c.ifModified&&(w=T.getResponseHeader("Last-Modified"),w&&(x.lastModified[r]=w),w=T.getResponseHeader("etag"),w&&(x.etag[r]=w)),204===e?C="nocontent":304===e?C="notmodified":(C=b.state,m=b.data,y=b.error,l=!y)):(y=C,(e||!C)&&(C="error",0>e&&(e=0))),T.status=e,T.statusText=(t||C)+"",l?h.resolveWith(f,[m,C,T]):h.rejectWith(f,[T,C,y]),T.statusCode(g),g=undefined,u&&p.trigger(l?"ajaxSuccess":"ajaxError",[T,c,l?m:y]),d.fireWith(f,[T,C]),u&&(p.trigger("ajaxComplete",[T,c]),--x.active||x.event.trigger("ajaxStop")))}return T},getJSON:function(e,t,n){return x.get(e,t,n,"json")},getScript:function(e,t){return x.get(e,undefined,t,"script")}}),x.each(["get","post"],function(e,t){x[t]=function(e,n,r,i){return x.isFunction(n)&&(i=i||r,r=n,n=undefined),x.ajax({url:e,type:t,dataType:i,data:n,success:r})}});function cn(e,t,n){var r,i,o,s,a=e.contents,u=e.dataTypes;while("*"===u[0])u.shift(),r===undefined&&(r=e.mimeType||t.getResponseHeader("Content-Type"));if(r)for(i in a)if(a[i]&&a[i].test(r)){u.unshift(i);break}if(u[0]in n)o=u[0];else{for(i in n){if(!u[0]||e.converters[i+" "+u[0]]){o=i;break}s||(s=i)}o=o||s}return o?(o!==u[0]&&u.unshift(o),n[o]):undefined}function fn(e,t,n,r){var i,o,s,a,u,l={},c=e.dataTypes.slice();if(c[1])for(s in e.converters)l[s.toLowerCase()]=e.converters[s];o=c.shift();while(o)if(e.responseFields[o]&&(n[e.responseFields[o]]=t),!u&&r&&e.dataFilter&&(t=e.dataFilter(t,e.dataType)),u=o,o=c.shift())if("*"===o)o=u;else if("*"!==u&&u!==o){if(s=l[u+" "+o]||l["* "+o],!s)for(i in l)if(a=i.split(" "),a[1]===o&&(s=l[u+" "+a[0]]||l["* "+a[0]])){s===!0?s=l[i]:l[i]!==!0&&(o=a[0],c.unshift(a[1]));break}if(s!==!0)if(s&&e["throws"])t=s(t);else try{t=s(t)}catch(f){return{state:"parsererror",error:s?f:"No conversion from "+u+" to "+o}}}return{state:"success",data:t}}x.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/(?:java|ecma)script/},converters:{"text script":function(e){return x.globalEval(e),e}}}),x.ajaxPrefilter("script",function(e){e.cache===undefined&&(e.cache=!1),e.crossDomain&&(e.type="GET")}),x.ajaxTransport("script",function(e){if(e.crossDomain){var t,n;return{send:function(r,i){t=x("
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/phone.js b/phone.js
new file mode 100644
index 0000000..f3c9d2d
--- /dev/null
+++ b/phone.js
@@ -0,0 +1,113 @@
+(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;
+ }
+
+ /*
+ 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/style.css b/style.css
new file mode 100644
index 0000000..a8f1ee7
--- /dev/null
+++ b/style.css
@@ -0,0 +1,205 @@
+.col-xs-6 {
+ text-align: center;
+}
+
+.authenticator {
+ z-index: 2;
+ font-size: 32px;
+ line-height: 1.0556;
+ font-weight: 100;
+ letter-spacing: .023em;
+ text-align: center;
+ font-style: normal;
+ font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
+}
+
+.left {
+ margin-top: 170px;
+ padding: 0 0 0 15%;
+}
+
+.qrcode {
+ z-index: 2;
+}
+
+.scan {
+ z-index: 2;
+ font-size: 13px;
+ line-height: 1.0556;
+ font-weight: 200;
+ letter-spacing: .023em;
+ font-style: normal;
+ font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
+}
+
+.verify {
+ z-index: 2;
+ font-size: 13px;
+ line-height: 1.0556;
+ font-weight: 200;
+ letter-spacing: .023em;
+ font-style: normal;
+ font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
+ margin-top: 20px;
+}
+
+.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;
+}
+
+input {
+ margin: 10px 10px 5px 0;
+ width: 165px;
+ padding: 5px 20px;
+ border-radius: 10px;
+ font-size: 16px;
+ line-height: 1.0556;
+ font-weight: 200;
+ letter-spacing: .023em;
+ font-style: normal;
+ font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
+}
+
+.btn {
+ background: -webkit-linear-gradient(#6D99ED, #7464ED);
+ color: white;
+ border-radius: 5px;
+ font-size: 18px;
+ border: none;
+ padding: 5px 20px;
+ vertical-align: inherit;
+}
+
+.btn:hover {
+ color: #fff;
+}
+
+.right {
+ margin-top:265px;
+ position: relative;
+}
+
+.iPhone {
+ max-width: 400px;
+ position: absolute;
+ top: -250px;
+ left: 17%;
+}
+
+.iframe {
+ width: 265px;
+ height: 450px;
+ border: none !important;
+ z-index: 2;
+}
+
+.logo {
+ background-image: url("daplie-logo.png");
+ background-repeat: no-repeat;
+ background-size: 200px 50px;
+ width: 200px;
+ height: 50px;
+ margin: 50px auto 0 auto;
+ line-height: 1.0556;
+ text-align: center;
+ z-index: 2;
+}
+
+.uppercase {
+ text-transform: uppercase;
+}
+
+.token-issuer {
+ margin-top: 50px;
+ z-index: 2;
+ font-size: 12px;
+ 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;
+}
+
+.account-name {
+ margin-top: 80px;
+ z-index: 2;
+ font-size: 18px;
+ 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-bottom: 10px;
+}
+
+.token-phone {
+ margin-top: 20px;
+ z-index: 2;
+ font-size: 48px;
+ line-height: 1.0556;
+ font-weight: 100;
+ letter-spacing: .043em;
+ text-align: center;
+ font-style: normal;
+ font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
+}
+
+.countdown {
+ text-align: center;
+ margin-top: 40px;
+}
+
+.bottom {
+ margin-top: 220px;
+}
+
+.wide {
+ width: 340px;
+}
+
+.console {
+ z-index: 2;
+ text-align: center;
+ font-size: 32px;
+ line-height: 1.0556;
+ font-weight: 100;
+ letter-spacing: .023em;
+ font-style: normal;
+ font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
+}
+
+hr {
+ border: 0;
+ height: 1px;
+ background: #333;
+ background-image: linear-gradient(to right, #ccc, #333, #ccc);
+}
+
+.iframe-container {
+ max-width: 400px;
+ position: absolute;
+ top: -120px;
+ left: 17%;
+ width: 400px;
+ height: 600px;
+}
+
+.fade {
+ opacity: 0;
+}
+
+.in {
+ opacity: 1;
+ transition: opacity .5s ease-in-out;
+ -moz-transition: opacity .5s ease-in-out;
+ -webkit-transition: opacity .5s ease-in-out;
+}
diff --git a/test.html b/test.html
index 9f0f85b..2d10bb7 100644
--- a/test.html
+++ b/test.html
@@ -1,42 +1,79 @@
-
BOTP Test
+
Authenticator - Daplie, Inc
-
+
+
+
+
-
-
Authenticator Test
+
+
+
+
+
Authenticator Test
+
+
+
+
+
+
+
+
+
-
-
-
-
-
20-byte (160-bit) Base32 Key:
-
xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx
-
otpauth://totp/company:user?secret=xxxx
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/test.js b/test.js
index 96bed44..184b925 100644
--- a/test.js
+++ b/test.js
@@ -1,7 +1,14 @@
// forgive the suckiness, but whatever
(function (exports) {
-'use strict';
+ 'use strict';
+ window.addEventListener("load", function () {
+
+ window.document.body.className += " in";
+
+ });
+
+var defaultKey = 'hxdm vjec jjws rb3h wizr 4ifu gftm xboz';
var key;
var Authenticator = exports.Authenticator;
var $ = function (x) {
@@ -10,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;
@@ -19,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);
@@ -78,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
+