Merge branch 'design' into gh-pages
This commit is contained in:
commit
ba4f458756
File diff suppressed because one or more lines are too long
Binary file not shown.
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
After Width: | Height: | Size: 274 KiB |
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,173 @@
|
|||
;(function ($, window, document, undefined) {
|
||||
var pluginName = "countdown360",
|
||||
defaults = {
|
||||
radius: 15.5, // radius of arc
|
||||
strokeStyle: "#9990F0", // the color of the stroke
|
||||
strokeWidth: 2, // the stroke width, dynamically calulated if omitted in options
|
||||
fillStyle: "#FFFFFF", // the fill color
|
||||
fontColor: "#477050", // the font color
|
||||
fontFamily: "Helvetica Neue", // the font family
|
||||
fontSize: 28, // the font size, dynamically calulated if omitted in options
|
||||
fontWeight: 100, // the font weight
|
||||
autostart: true, // start the countdown automatically
|
||||
seconds: 30, // the number of seconds to count down
|
||||
label: ["second", "seconds"], // the label to use or false if none
|
||||
startOverAfterAdding: true, // Start the timer over after time is added with addSeconds
|
||||
onComplete: function () {}
|
||||
};
|
||||
|
||||
function Plugin(element, options) {
|
||||
this.element = element;
|
||||
this.settings = $.extend({}, defaults, options);
|
||||
if (!this.settings.fontSize) { this.settings.fontSize = this.settings.radius/1.2; }
|
||||
if (!this.settings.strokeWidth) { this.settings.strokeWidth = this.settings.radius/4; }
|
||||
this._defaults = defaults;
|
||||
this._name = pluginName;
|
||||
this._init();
|
||||
}
|
||||
|
||||
Plugin.prototype = {
|
||||
getTimeRemaining: function()
|
||||
{
|
||||
|
||||
var timeRemaining = this._secondsLeft(this.getElapsedTime());
|
||||
return timeRemaining;
|
||||
},
|
||||
getElapsedTime: function()
|
||||
{
|
||||
return Math.round((new Date().getTime() - this.startedAt.getTime())/1000);
|
||||
},
|
||||
extendTimer: function (value) {
|
||||
var seconds = parseInt(value),
|
||||
secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime())/1000);
|
||||
if ((this._secondsLeft(secondsElapsed) + seconds) <= this.settings.seconds) {
|
||||
this.startedAt.setSeconds(this.startedAt.getSeconds() + parseInt(value));
|
||||
}
|
||||
},
|
||||
|
||||
addSeconds: function (value) {
|
||||
var secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime())/1000);
|
||||
if (this.settings.startOverAfterAdding) {
|
||||
this.settings.seconds = this._secondsLeft(secondsElapsed) + parseInt(value);
|
||||
this.start();
|
||||
} else {
|
||||
this.settings.seconds += parseInt(value);
|
||||
}
|
||||
},
|
||||
|
||||
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), this.updateInterval);
|
||||
},
|
||||
|
||||
stop: function (cb) {
|
||||
clearInterval(this._interval);
|
||||
if (cb) { cb(); }
|
||||
},
|
||||
|
||||
_init: function () {
|
||||
this.settings.width = (this.settings.radius * 2) + (this.settings.strokeWidth * 2);
|
||||
this.settings.height = this.settings.width;
|
||||
this.settings.arcX = this.settings.radius + this.settings.strokeWidth;
|
||||
this.settings.arcY = this.settings.arcX;
|
||||
this._initPen(this._getCanvas());
|
||||
if (this.settings.autostart) { this.start(); }
|
||||
},
|
||||
|
||||
_getCanvas: function () {
|
||||
var $canvas = $("<canvas id=\"countdown360_" + $(this.element).attr("id") + "\" width=\"" +
|
||||
this.settings.width + "\" height=\"" +
|
||||
this.settings.height + "\">" +
|
||||
"<span id=\"countdown-text\" role=\"status\" aria-live=\"assertive\"></span></canvas>");
|
||||
$(this.element).prepend($canvas[0]);
|
||||
return $canvas[0];
|
||||
},
|
||||
|
||||
_initPen: function (canvas) {
|
||||
this.pen = canvas.getContext("2d");
|
||||
this.pen.lineWidth = this.settings.strokeWidth;
|
||||
this.pen.strokeStyle = this.settings.strokeStyle;
|
||||
this.pen.fillStyle = this.settings.fillStyle;
|
||||
this.pen.textAlign = "center";
|
||||
this.pen.textBaseline = "middle";
|
||||
this.ariaText = $(canvas).children("#countdown-text");
|
||||
this._clearRect();
|
||||
},
|
||||
|
||||
_clearRect: function () {
|
||||
this.pen.clearRect(0, 0, this.settings.width, this.settings.height);
|
||||
},
|
||||
|
||||
_secondsLeft: function(secondsElapsed) {
|
||||
return this.settings.seconds - secondsElapsed;
|
||||
},
|
||||
|
||||
_drawCountdownLabel: function (secondsElapsed) {
|
||||
this.ariaText.text(secondsLeft);
|
||||
this.pen.font = this.settings.fontWeight + " " + this.settings.fontSize + "px " + this.settings.fontFamily;
|
||||
var secondsLeft = this._secondsLeft(secondsElapsed),
|
||||
label = secondsLeft === 1 ? this.settings.label[0] : this.settings.label[1],
|
||||
drawLabel = this.settings.label && this.settings.label.length === 2,
|
||||
x = this.settings.width/2;
|
||||
if (drawLabel) {
|
||||
y = this.settings.height/2 - (this.settings.fontSize/6.2);
|
||||
} else {
|
||||
y = this.settings.height/2;
|
||||
}
|
||||
this.pen.fillStyle = this.settings.fillStyle;
|
||||
this.pen.fillText(secondsLeft + 1, x, y);
|
||||
this.pen.fillStyle = this.settings.fontColor;
|
||||
this.pen.fillText(secondsLeft, x, y);
|
||||
if (drawLabel) {
|
||||
this.pen.font = "normal small-caps " + (this.settings.fontSize/3) + "px " + this.settings.fontFamily;
|
||||
this.pen.fillText(label, this.settings.width/2, this.settings.height/2 + (this.settings.fontSize/2.2));
|
||||
}
|
||||
},
|
||||
|
||||
_drawCountdownShape: function (endAngle, drawStroke) {
|
||||
this.pen.fillStyle = this.settings.fillStyle;
|
||||
this.pen.beginPath();
|
||||
this.pen.arc(this.settings.arcX, this.settings.arcY, this.settings.radius, Math.PI*1.5, endAngle, false);
|
||||
this.pen.fill();
|
||||
if (drawStroke) { this.pen.stroke(); }
|
||||
},
|
||||
|
||||
_draw: function () {
|
||||
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) {
|
||||
this._drawCountdownShape(endAngle, true);
|
||||
this._drawCountdownLabel(secondsElapsed);
|
||||
} else {
|
||||
this._drawCountdownLabel(this.settings.seconds);
|
||||
this.stop();
|
||||
this.settings.onComplete();
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$.fn[pluginName] = function (options) {
|
||||
var plugin;
|
||||
this.each(function() {
|
||||
plugin = $.data(this, "plugin_" + pluginName);
|
||||
if (!plugin) {
|
||||
plugin = new Plugin(this, options);
|
||||
$.data(this, "plugin_" + pluginName, plugin);
|
||||
}
|
||||
});
|
||||
return plugin;
|
||||
};
|
||||
|
||||
})(jQuery, window, document);
|
|
@ -0,0 +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">
|
||||
</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="phone.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
|
@ -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));
|
|
@ -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;
|
||||
}
|
99
test.html
99
test.html
|
@ -1,42 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>BOTP Test</title>
|
||||
<title>Authenticator - Daplie, Inc</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
<!--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>
|
||||
<body>
|
||||
<h1>Authenticator Test</h1>
|
||||
<body class="fade">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-6 left">
|
||||
<h1 class="authenticator">Authenticator Test</h1>
|
||||
<img alt="qrcode" class="js-qrcode qrcode" width="166" height="166" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
|
||||
<div class="scan">
|
||||
Scan with <a href="https://www.authy.com/personal/mobile/" target="_blank">Authy App</a>
|
||||
</div>
|
||||
<div class="verify">
|
||||
<label class="token-label">Enter Verification Token:</label>
|
||||
<br />
|
||||
<input class="js-token token-input" type="text" placeholder="i.e. 123 456" />
|
||||
<button class="js-verify btn">Verify</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Test with the <a href="https://www.authy.com/personal/mobile/" target="_blank">Authy App</a>.
|
||||
<div class="col-xs-6 right">
|
||||
<img class="iPhone" src="iPhoneMockup.png" />
|
||||
<div class="iframe-container">
|
||||
<iframe class="js-otp-iframe iframe" src="phone.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div>
|
||||
<img alt="qrcode" class="js-qrcode" width="166" height="166" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
|
||||
<p>20-byte (160-bit) Base32 Key:</p>
|
||||
<h3 class="js-key">xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx</h3>
|
||||
<p class="js-otpauth">otpauth://totp/company:user?secret=xxxx</p>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div>
|
||||
<label>Company Name:</label>
|
||||
<input class="js-company-name" type="text" placeholder="Company Name" />
|
||||
|
||||
<label>User Account:</label>
|
||||
<input class="js-user-account" type="text" placeholder="User Account" />
|
||||
|
||||
<button class="js-generate">Regenerate</button>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div>
|
||||
<label>Verification Token:</label>
|
||||
<input class="js-token" type="text" placeholder="ex: 000 000" />
|
||||
|
||||
<button class="js-verify">Verify</button>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-3"></div>
|
||||
<div class="col-md-6 bottom">
|
||||
<form class="form-horizontal">
|
||||
<h1 class="console"> Console </h1>
|
||||
<hr />
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">Issuer:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="js-company-name issuer-input wide" placeholder="Company Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">Account:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="js-user-account issuer-input wide" placeholder="User Account">
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-offset-6 col-xs-6">
|
||||
<button type="button" class="btn btn-default js-generate regenerate">Regenerate</button>
|
||||
</div>
|
||||
</div>
|
||||
<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&issuer=company</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- extremely lightweight shim for hex conversion -->
|
||||
|
|
44
test.js
44
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
|
||||
|
|
Loading…
Reference in New Issue