totp generator directive

This commit is contained in:
Kyle Spearrin 2017-07-07 00:13:26 -04:00
parent 8a90f562ef
commit ed13644a02
7 changed files with 243 additions and 4 deletions

View File

@ -0,0 +1,171 @@
angular
.module('bit.directives')
.directive('totp', function ($timeout, $q) {
return {
template: '<div class="totp{{(low ? \' low\' : \'\')}}" ng-if="code">' +
'<span class="totp-countdown"><span class="totp-sec">{{sec}}</span>' +
'<svg><g><circle class="totp-circle inner" r="12.6" cy="16" cx="16" style="stroke-dashoffset: {{dash}}px;"></circle>' +
'<circle class="totp-circle outer" r="14" cy="16" cx="16"></circle></g></svg></span>' +
'<span class="totp-code" id="totp-code">{{code}}</span>' +
'<a href="#" stop-click class="btn btn-link" ngclipboard ngclipboard-error="clipboardError(e)" ' +
'data-clipboard-text="{{code}}" uib-tooltip="Copy Code" tooltip-placement="right">' +
'<i class="fa fa-clipboard"></i></a>' +
'</div>',
restrict: 'A',
scope: {
key: '=totp'
},
link: function (scope) {
var interval = null;
var Totp = function () {
var b32Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
var leftpad = function (s, l, p) {
if (l + 1 >= s.length) {
s = Array(l + 1 - s.length).join(p) + s;
}
return s;
};
var dec2hex = function (d) {
return (d < 15.5 ? '0' : '') + Math.round(d).toString(16);
};
var hex2dec = function (s) {
return parseInt(s, 16);
};
var hex2bytes = function (s) {
var bytes = new Uint8Array(s.length / 2);
for (var i = 0; i < s.length; i += 2) {
bytes[i / 2] = parseInt(s.substr(i, 2), 16);
}
return bytes;
}
var buff2hex = function (buff) {
var bytes = new Uint8Array(buff);
var hex = [];
for (var i = 0; i < bytes.length; i++) {
hex.push((bytes[i] >>> 4).toString(16));
hex.push((bytes[i] & 0xF).toString(16));
}
return hex.join('');
}
var b32tohex = function (s) {
var bits = '';
var hex = '';
for (var i = 0; i < s.length; i++) {
var val = b32Chars.indexOf(s.charAt(i).toUpperCase());
bits += leftpad(val.toString(2), 5, '0');
}
for (var i = 0; i + 4 <= bits.length; i += 4) {
var chunk = bits.substr(i, 4);
hex = hex + parseInt(chunk, 2).toString(16);
}
return hex;
};
var b32tobytes = function (s) {
return hex2bytes(b32tohex(s));
};
var sign = function (keyBytes, timeBytes) {
return window.crypto.subtle.importKey('raw', keyBytes,
{ name: 'HMAC', hash: { name: 'SHA-1' } }, false, ['sign']).then(function (key) {
return window.crypto.subtle.sign({ name: 'HMAC' }, key, timeBytes);
}).then(function (signature) {
return buff2hex(signature);
}).catch(function (err) {
return null;
});
};
this.getCode = function (keyb32) {
var epoch = Math.round(new Date().getTime() / 1000.0);
var timeHex = leftpad(dec2hex(Math.floor(epoch / 30)), 16, '0');
var timeBytes = hex2bytes(timeHex);
var keyBytes = b32tobytes(keyb32);
if (!keyBytes.length || !timeBytes.length) {
return $q(function (resolve, reject) {
resolve(null);
});
}
return sign(keyBytes, timeBytes).then(function (hashHex) {
if (!hashHex) {
return null;
}
var offset = hex2dec(hashHex.substring(hashHex.length - 1));
var otp = (hex2dec(hashHex.substr(offset * 2, 8)) & hex2dec('7fffffff')) + '';
otp = (otp).substr(otp.length - 6, 6);
return otp;
});
};
}
var totp = new Totp();
var updateCode = function (scope) {
totp.getCode(scope.key).then(function (code) {
$timeout(function () {
if (code) {
scope.code = code.substring(0, 3) + ' ' + code.substring(3);
}
else {
scope.code = null;
if (interval) {
clearInterval(interval);
}
}
});
});
};
var tick = function (scope) {
$timeout(function () {
var epoch = Math.round(new Date().getTime() / 1000.0);
var mod = (epoch % 30);
var sec = 30 - mod;
scope.sec = sec;
scope.dash = (2.62 * mod).toFixed(2);
scope.low = sec <= 7;
if (epoch % 30 == 0) {
updateCode(scope);
}
});
};
scope.$watch('key', function () {
if (!scope.key) {
scope.code = null;
if (interval) {
clearInterval(interval);
}
return;
}
updateCode(scope);
tick(scope);
if (interval) {
clearInterval(interval);
}
interval = setInterval(function () {
tick(scope);
}, 1000);
});
scope.clipboardError = function (e) {
alert('Your web browser does not support easy clipboard copying.');
};
},
};
});

View File

@ -2,7 +2,7 @@
.module('bit.vault')
.controller('vaultAddLoginController', function ($scope, apiService, $uibModalInstance, cryptoService, cipherService,
passwordService, selectedFolder, $analytics, checkedFavorite, $rootScope) {
passwordService, selectedFolder, $analytics, checkedFavorite, $rootScope, authService) {
$analytics.eventTrack('vaultAddLoginController', { category: 'Modal' });
$scope.folders = $rootScope.vaultFolders;
$scope.login = {
@ -10,6 +10,10 @@
favorite: checkedFavorite === true
};
authService.getUserProfile().then(function (profile) {
$scope.premium = profile.premium;
});
$scope.savePromise = null;
$scope.save = function (model) {
var login = cipherService.encryptLogin(model);

View File

@ -2,12 +2,16 @@
.module('bit.vault')
.controller('vaultEditLoginController', function ($scope, apiService, $uibModalInstance, cryptoService, cipherService,
passwordService, loginId, $analytics, $rootScope) {
passwordService, loginId, $analytics, $rootScope, authService) {
$analytics.eventTrack('vaultEditLoginController', { category: 'Modal' });
$scope.folders = $rootScope.vaultFolders;
$scope.login = {};
$scope.readOnly = false;
authService.getUserProfile().then(function (profile) {
$scope.premium = profile.premium;
});
apiService.logins.get({ id: loginId }, function (login) {
$scope.login = cipherService.decryptLogin(login);
$scope.readOnly = !login.Edit;

View File

@ -88,7 +88,8 @@
</div>
</div>
<div class="col-md-6">
<label class="invisible hidden-sm" for="verification-code">Verification Code</label>
<div totp="login.totp" id="verification-code" ng-if="premium"></div>
</div>
</div>
<div class="form-group" show-errors>

View File

@ -100,7 +100,8 @@
</div>
</div>
<div class="col-md-6">
<label class="invisible hidden-sm hidden-xs" for="verification-code">Verification Code</label>
<div totp="login.totp" id="verification-code" ng-if="premium"></div>
</div>
</div>
<div class="form-group" show-errors>

View File

@ -123,6 +123,7 @@
<script src="app/directives/letterAvatarDirective.js"></script>
<script src="app/directives/stopClickDirective.js"></script>
<script src="app/directives/stopPropDirective.js"></script>
<script src="app/directives/totpDirective.js"></script>
<script src="app/filters/filtersModule.js"></script>
<script src="app/filters/enumNameFilter.js"></script>

View File

@ -624,3 +624,60 @@ h1, h2, h3, h4, h5, h6 {
font-size: 85%;
font-weight: normal;
}
.totp {
margin-bottom: 10px;
.totp-code {
font-family: @font-family-monospace;
font-size: 1.2em;
}
.totp-countdown {
margin-right: 11px;
display: inline-block;
vertical-align: -50%;
user-select: none;
.totp-sec {
font-size: 0.85em;
position: absolute;
line-height: 32px;
width: 32px;
text-align: center;
}
svg {
width: 32px;
height: 32px;
transform: rotate(-90deg);
}
.totp-circle {
stroke: @brand-primary;
fill: none;
&.inner {
stroke-width: 3;
stroke-dasharray: 78.6;
stroke-dashoffset: 20px;
}
&.outer {
stroke-width: 2;
stroke-dasharray: 88;
stroke-dashoffset: 0px;
}
}
}
&.low {
.totp-sec, .totp-code {
color: @red;
}
.totp-circle {
stroke: @red;
}
}
}