now functional
This commit is contained in:
AJ ONeal
parent
30d47d62a6
commit
e999d1e37a
122
countdown.js
122
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);
|
||||
|
||||
/*
|
||||
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));
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
63
phone.html
63
phone.html
|
|
@ -1,11 +1,52 @@
|
|||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<script src="jquery-2.0.0.min.js" type="text/javascript"></script>
|
||||
<script src="jquery.countdown.js" type="text/javascript"></script>
|
||||
<div class="phone-screen">
|
||||
<div class="logo"></div>
|
||||
<div class="token-issuer uppercase">your token is:</div>
|
||||
<div class="token-phone"> 123 456 </div>
|
||||
<div id="countdown" class="countdown"></div>
|
||||
<script src="countdown.js" type="text/javascript"></script>
|
||||
<div class="account-name">john@example.com</div>
|
||||
</div>
|
||||
<!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">
|
||||
</head>
|
||||
<body class="fade">
|
||||
<div class="phone-screen">
|
||||
<div class="logo"></div>
|
||||
<div class="token-issuer uppercase">your <span class="js-issuer">Company</span> token is:</div>
|
||||
<div class="token-phone"> <span class="js-token">--- ---</span> </div>
|
||||
<div class="js-countdown countdown"></div>
|
||||
<div class="js-account-name account-name">123@abc.xyz</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>
|
||||
|
|
|
|||
18
style.css
18
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
13
test.html
13
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">
|
||||
<img class="iPhone" src="iPhoneMockup.png" />
|
||||
<div class="iframe-container">
|
||||
<iframe class="iframe" src="phone.html"></iframe>
|
||||
<iframe class="js-otp-iframe iframe" src="phone.html"></iframe>
|
||||
</div>
|
||||
<img class="iPhone" src="iPhoneMockup.png" />
|
||||
</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&issuer=company</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
36
test.js
36
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
|
||||
|
|
|
|||
Loading…
Reference in New Issue