v1.0.8

README.md

@@ -2,7 +2,7 @@
 
 Two- / Multi- Factor Authenication (2FA / MFA) for browser JavaScript
 
-<!-- [![](http://i.imgur.com/sdvMdbo.png)](https://daplie.github.io/browser-authenticator/) -->
+<!-- [![](http://i.imgur.com/sdvMdbo.png)](https://authenticator.ppl.family/) -->
 ![](https://blog.authy.com/assets/posts/authenticator.png)
 
 There are a number of apps that various websites use to give you 6-digit codes to increase security when you log in:
@@ -22,7 +22,8 @@ to provide codes that are exactly compatible with all other *Authenticator* apps
 Demo
 ====
 
-[Live Demo](https://daplie.github.io/browser-authenticator/) at <https://daplie.github.io/browser-authenticator/>
+[Live Demo](https://authenticator.ppl.family/)
+at <https://authenticator.ppl.family/>
 
 You may also be interested in [Node Authenticator](https://git.coolaj86.com/coolaj86/node-authenticator.js) over at <https://git.coolaj86.com/coolaj86/node-authenticator.js>
 
@@ -172,3 +173,11 @@ The window is set to +/- 1, meaning each token is valid for a total of 90 second
 (-30 seconds, +0 seconds, and +30 seconds)
 to account for time drift (which should be very rare for mobile devices)
 and humans who are handicapped or otherwise struggle with quick fine motor skills (like my grandma).
+
+
+Install WebApp
+--------------
+
+```bash
+git clone --depth 1 https://git.coolaj86.com/coolaj86/browser-authenticator.js.git
+```

authenticator.js

@@ -5,7 +5,14 @@ var Authenticator = exports.Authenticator || exports;
 var Unibabel = window.Unibabel; // || require('unibabel');
 var totp = window.totp; // || require('notp').totp;
 
-if (!window.crypto) {
+function loadForge() {
+  var script = document.createElement('script');
+  script.src = '/demo/bower_components/forge/dist/forge.min.js';
+  script.addEventListener('load', collectRandom);
+  document.body.appendChild(script);
+}
+
+function collectRandom() {
   document.addEventListener('mousemove', function (event) {
     var ev = event || window.event;
 
@@ -14,6 +21,14 @@ if (!window.crypto) {
   });
 }
 
+if (!window.crypto) {
+  if (!window.forge) {
+    loadForge();
+  } else {
+    collectRandom();
+  }
+}
+
 // Generate a key
 function generateOtpKey() {
   // 20 cryptographically random binary bytes (160-bit key)

bower.json

@@ -1,7 +1,6 @@
 {
   "name": "authenticator",
-  "version": "1.0.6",
-  "homepage": "https://github.com/Daplie/browser-authenticator",
+  "homepage": "https://git.coolaj86.com/coolaj86/browser-authenticator.js",
   "authors": [
     "AJ ONeal <awesome@coolaj86.com>"
   ],

demo/demo.js

@@ -50,6 +50,7 @@ function generate(ke) {
     var src = 'https://chart.googleapis.com/chart?chs=166x166&chld=L|0&cht=qr&chl=' + encodeURIComponent(otpauth);
 
     $('.js-otpauth').innerHTML = otpauth; // only safe to inject because I created it
+    $('.js-otpauth').href = otpauth;
     $('img.js-qrcode').src = src;
     $('.js-otp-iframe').src = 'demo/phone.html?otpuri=' + encodeURIComponent(otpauth);
 

demo/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 338.63 338.63"><defs><style>.a{fill:#5b2c98;}.b{fill:#fff;}</style></defs><title>ppl-circle-</title><circle class="a" cx="169.31" cy="169.31" r="150"/><path class="b" d="M146.9,135.45a32.24,32.24,0,0,0-6.06-10.22,29,29,0,0,0-9.22-6.9A26.69,26.69,0,0,0,120,115.78a24.92,24.92,0,0,0-12.61,3.14,25.46,25.46,0,0,0-8.91,8.63v-10.7H84.55v87.61h15.93V168.21a23.17,23.17,0,0,0,8.56,8.85,24.5,24.5,0,0,0,12.83,3.27,24.16,24.16,0,0,0,10.94-2.5,26.31,26.31,0,0,0,8.62-6.89,32.55,32.55,0,0,0,5.65-10.34,39.2,39.2,0,0,0,2-12.72A35.4,35.4,0,0,0,146.9,135.45Zm-30.12,32.69c-10.09,0-18.28-8.7-18.28-19.43a20.19,20.19,0,0,1,2-8.77v-.15a14,14,0,0,1,2.43-4.16,19.11,19.11,0,0,1,3.63-3.33,16.49,16.49,0,0,1,4.4-2.2,15.12,15.12,0,0,1,4.63-.77h.07c.37,0,.76,0,1.14,0,10.1,0,18.28,8.7,18.28,19.42S126.88,168.14,116.78,168.14Z"/><path class="b" d="M222.27,135.45a32.24,32.24,0,0,0-6.06-10.22,29,29,0,0,0-9.22-6.9,26.69,26.69,0,0,0-11.64-2.55,24.92,24.92,0,0,0-12.61,3.14,25.54,25.54,0,0,0-8.91,8.63v-10.7H159.92v87.61h15.93V168.21a23.24,23.24,0,0,0,8.56,8.85,24.52,24.52,0,0,0,12.84,3.27,24.22,24.22,0,0,0,10.94-2.5,26.27,26.27,0,0,0,8.61-6.89,32.55,32.55,0,0,0,5.65-10.34,39.47,39.47,0,0,0,2-12.72A35.4,35.4,0,0,0,222.27,135.45Zm-31.6,32.69c-10.09,0-18.28-8.7-18.28-19.43s8.19-19.42,18.28-19.42a18,18,0,0,1,2.09.13h.09a15.77,15.77,0,0,1,4.93,1.32,17.08,17.08,0,0,1,4.51,3l.37.34A19.86,19.86,0,0,1,209,148.71C209,159.44,200.76,168.14,190.67,168.14Z"/><path class="b" d="M263.94,164.76a20.11,20.11,0,0,1-3.27,1.18,11.85,11.85,0,0,1-3.16.48,6,6,0,0,1-4.75-1.9,7.84,7.84,0,0,1-1.66-5.35V92.36H235.17v72.4q0,7.37,4.1,11.35t11.59,4a41.31,41.31,0,0,0,7.73-.83,30.52,30.52,0,0,0,7.49-2.38Z"/><path class="b" d="M208,229.74c-15.45,8.56-32.81,12.13-49.22,12.13S125,238.3,109.54,229.74l-5.24,12.84c16.41,10,33.53,15.69,54.45,15.69s38.05-5.71,54.45-15.69Z"/></svg>

demo/phone.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Authenticator - Daplie, Inc</title>
+    <title>Authenticator</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'">

demo/style.css

@@ -108,12 +108,12 @@ input {
 }
 
 .logo {
-    background-image: url("daplie-logo.png");
+    background-image: url("logo.svg");
     background-repeat: no-repeat;
-    background-size: 200px 50px;
-    width: 200px;
-    height: 50px;
-    margin: 50px auto 0 auto;
+    background-size: 75px 75px;
+    width: 75px;
+    height: 75px;
+    margin: 25px auto 0 auto;
     line-height: 1.0556;
     text-align: center;
     z-index: 2;
@@ -124,7 +124,7 @@ input {
 }
 
 .token-issuer {
-    margin-top: 50px;
+    margin-top: 25px;
     z-index: 2;
     font-size: 12px;
     line-height: 1.0556;

index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Authenticator - Daplie, Inc</title>
+    <title>Authenticator</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://camo.githubusercontent.com/ https://chart.googleapis.com/ data:; child-src 'self'; object-src 'none'">
@@ -73,7 +73,7 @@
             <div class="form-group">
               <label class="col-sm-3 control-label">URI:</label>
               <div class="col-sm-9">
-                <p class="js-otpauth">otpauth://totp/company:user?secret=xxxx&amp;issuer=company</p>
+                <a class="js-otpauth">otpauth://totp/company:user?secret=xxxx&amp;issuer=company</a>
               </div>
             </div>
           </form>
@@ -83,7 +83,7 @@
     </div>
 
     <!-- github banner -->
-    <a href="https://github.com/Daplie/browser-authenticator"><img class="github-banner" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
+    <a href="https://git.coolaj86.com/coolaj86/browser-authenticator.js"><img class="github-banner" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me with Git" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
 
     <!-- extremely lightweight shim for hex conversion -->
     <script src="demo/bower_components/unibabel/index.js"></script>
@@ -93,7 +93,9 @@
     <script src="demo/bower_components/unibabel/unibabel.base32.js"></script>
 
     <!-- forge.* -->
+    <!--[if lt IE 11]>
     <script src="demo/bower_components/forge/dist/forge.min.js"></script>
+    <![endif]-->
 
     <!-- botp.totp -->
     <script src="demo/bower_components/botp/sha1-hmac.js"></script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-authenticator",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Two- / Multi- Factor Authenication (2FA / MFA / OTP) for browser JavaScript",
   "main": "authenticator.js",
   "homepage": "https://git.coolaj86.com/coolaj86/browser-authenticator.js",

test.html

@@ -1,6 +1,6 @@
 <html>
   <head>
-    <meta http-equiv="refresh" content="0;https://daplie.github.io/browser-authenticator/">
+    <meta http-equiv="refresh" content="0;https://authenticator.ppl.family/">
   </head>
   </body>
     Redirecting...