now functional

countdown.js

@@ -1,11 +1,113 @@
-var countdown = $("#countdown").countdown360({
+(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')
+        console.log('done');
+        run();
       }
     });
-countdown.start();
+
+    // 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));

jquery.countdown.js

@@ -55,15 +55,16 @@
         }
     },
 
-    start: function () {
+    start: function (date) {
-      this.startedAt = new 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),
+      var secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime())/1000);
-          endAngle = (Math.PI*3.5) - (((Math.PI*2)/this.settings.seconds) * secondsElapsed);
+      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) {

phone.html

@@ -1,11 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Authenticator - Daplie, Inc</title>
+    <meta charset="UTF-8">
+    <!--meta name="viewport" content="width=device-width, user-scalable=no" /-->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https://chart.googleapis.com/ data:; child-src 'self'; object-src 'none'">
     <link rel="stylesheet" type="text/css" href="style.css">
-<script src="jquery-2.0.0.min.js" type="text/javascript"></script>
+  </head>
-<script src="jquery.countdown.js" type="text/javascript"></script>
+  <body class="fade">
     <div class="phone-screen">
       <div class="logo"></div>
-  <div class="token-issuer uppercase">your token is:</div>
+      <div class="token-issuer uppercase">your <span class="js-issuer">Company</span> token is:</div>
-  <div class="token-phone"> 123 456 </div>
+      <div class="token-phone"> <span class="js-token">--- ---</span> </div>
-  <div id="countdown" class="countdown"></div>
+      <div class="js-countdown countdown"></div>
-  <script src="countdown.js" type="text/javascript"></script>
+      <div class="js-account-name account-name">123@abc.xyz</div>
-  <div class="account-name">john@example.com</div> 
     </div>
+
+    <!-- extremely lightweight shim for hex conversion -->
+    <script src="bower_components/unibabel/index.js"></script>
+    <script src="bower_components/unibabel/unibabel.hex.js"></script>
+
+    <!-- base32 conversion (and binary string for forge) (works standalone from the above) -->
+    <script src="bower_components/unibabel/unibabel.base32.js"></script>
+
+    <!-- forge.hmac -->
+    <script src="bower_components/forge/js/util.js"></script>
+    <script src="bower_components/forge/js/sha1.js"></script>
+    <script src="bower_components/forge/js/hmac.js"></script>
+
+    <!-- forge.random.getBytes -->
+    <script src="bower_components/forge/js/sha256.js"></script>
+    <script src="bower_components/forge/js/cipher.js"></script>
+    <script src="bower_components/forge/js/cipherModes.js"></script>
+    <script src="bower_components/forge/js/aes.js"></script>
+    <script src="bower_components/forge/js/prng.js"></script>
+    <script src="bower_components/forge/js/random.js"></script>
+
+    <!-- botp.totp -->
+    <script src="bower_components/botp/sha1-hmac.js"></script>
+    <script src="bower_components/botp/index.js"></script>
+
+    <!-- Authenticator -->
+    <script src="authenticator.js"></script>
+
+    <script src="jquery-2.0.0.min.js" type="text/javascript"></script>
+    <script src="jquery.countdown.js" type="text/javascript"></script>
+
+    <!-- The Magic -->
+    <script src="countdown.js" type="text/javascript"></script>
+  </body>
+</html>

style.css

@@ -14,7 +14,7 @@
 }
 
 .left {
-    margin-top: 18%;
+    margin-top: 170px;
     padding: 0 0 0 15%;
 }
 
@@ -82,7 +82,7 @@ input {
 }
 
 .right {
-    margin-top:25%;
+    margin-top:265px;
     position: relative;
 }
 

test.html

@@ -3,7 +3,8 @@
   <head>
     <title>Authenticator - Daplie, Inc</title>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <!--meta name="viewport" content="width=device-width, user-scalable=no" /-->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https://chart.googleapis.com/ data:; child-src 'self'; object-src 'none'">
     <link rel="stylesheet" type="text/css" href="bootstrap-v3.3.5.min.css">
     <link rel="stylesheet" type="text/css" href="style.css">
   </head>
@@ -25,10 +26,10 @@
         </div>
 
         <div class="col-xs-6 right">
-          <div class="iframe-container">
-            <iframe class="iframe" src="phone.html"></iframe>
-          </div>
           <img class="iPhone" src="iPhoneMockup.png" />
+          <div class="iframe-container">
+            <iframe class="js-otp-iframe iframe" src="phone.html"></iframe>
+          </div>
         </div>
       </div>
     </div>
@@ -55,7 +56,7 @@
             <div class="form-group">
               <label class="col-sm-3 control-label">Key:</label>
               <div class="col-sm-9">
-                <input type="text" class="js-key base-key-input wide" value="xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx">
+                <input type="text" class="js-key base-key-input wide">
               </div>
             </div>
             <div class="form-group">
@@ -64,9 +65,9 @@
               </div>
             </div>
             <div class="form-group">
-              <label class="col-sm-3 control-label">URL:</label>
+              <label class="col-sm-3 control-label">URI:</label>
               <div class="col-sm-9">
-                <p class="js-otpauth">otpauth://totp/company:user?secret=xxxx</p>
+                <p class="js-otpauth">otpauth://totp/company:user?secret=xxxx&amp;issuer=company</p>
               </div>
             </div>
           </form>

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-otpauth').innerHTML = otpauth; // only safe to inject because I created it
-    $('.js-key').innerHTML = key; // 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