switch to an updated OTP lib and add support for custom OTP digits and period values

Signed-off-by: binsky <timo@binsky.org>

Gruntfile.js

@@ -227,6 +227,7 @@ module.exports = function (grunt) {
 					'js/vendor/download.js',
 					'js/vendor/ui-sortable/sortable.js', 'js/lib/promise.js',
 					'js/lib/crypto_wrap.js',
+					'js/lib/otpauth.umd.js',
 					'js/app/app.js',
 					'js/app/filters/*.js',
 					'js/app/services/*.js',
@@ -269,6 +270,7 @@ module.exports = function (grunt) {
 						'js/vendor/papa-parse/papaparse.min.js',
 						'js/lib/promise.js',
 						'js/lib/crypto_wrap.js',
+						'js/lib/otpauth.umd.js',
 						'js/app/app.js',
 						'js/app/filters/*.js',
 						'js/app/services/*.js',

controller/translationcontroller.php

@@ -173,6 +173,8 @@ class TranslationController extends ApiController {
 			'current.qr' => $this->trans->t('Current OTP settings'),
 			'issuer' => $this->trans->t('Issuer'),
 			'secret' => $this->trans->t('Secret'),
+			'digits' => $this->trans->t('Digits'),
+			'period' => $this->trans->t('Period'),
 
 
 			// templates/views/partials/edit_credential/password.html

js/app/controllers/edit_credential.js

@@ -289,7 +289,10 @@
 						label: decodeURIComponent(label),
 						qr_uri: QRCode,
 						issuer: uri.searchParams.get('issuer'),
-						secret: uri.searchParams.get('secret')
+						secret: uri.searchParams.get('secret'),
+						algorithm: uri.searchParams.get('algorithm') ? uri.searchParams.get('algorithm') : "SHA1",
+						period: uri.searchParams.get('period') ? parseInt(uri.searchParams.get('period')) : 30,
+						digits: uri.searchParams.get('digits') ? parseInt(uri.searchParams.get('digits')) : 6,
 					};
 					$scope.$digest();
 				};

js/app/directives/otp.js

@@ -30,94 +30,71 @@
 	 * # passwordGen
 	 */
 	angular.module('passmanApp')
-		.directive('otpGenerator', ['$compile', '$timeout',
+		.directive('otpGenerator', ['$compile', '$interval',
-			function ($compile, $timeout) {
+			function ($compile, $interval) {
-				function dec2hex (s) {
+				function mergeDefaultOTPConfig(otp) {
-					return (s < 15.5 ? '0' : '') + Math.round(s).toString(16);
+					const defaults = {
-				}
+						algorithm: "SHA1",
+						period: 30,
+						digits: 6,
+					};
 
-				function hex2dec (s) {
+					for (const key in defaults) {
-					return parseInt(s, 16);
+						if (otp[key] === undefined || otp[key] == null) {
-				}
+							otp[key] = defaults[key];
-
+						}
-				function base32tohex (base32) {
-					if (!base32) {
-						return;
 					}
-					var base32chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567";
-					var bits = "";
-					var hex = "";
-					var i;
-					for (i = 0; i < base32.length; i++) {
-						var val = base32chars.indexOf(base32.charAt(i).toUpperCase());
-						bits += leftpad(val.toString(2), 5, '0');
-					}
-
-					for (i = 0; i + 4 <= bits.length; i += 4) {
-						var chunk = bits.slice(i, i + 4);
-						hex = hex + parseInt(chunk, 2).toString(16);
-					}
-					return hex.length % 2 ? hex + "0" : hex;
-
-				}
-
-				function leftpad (str, len, pad) {
-					if (len + 1 >= str.length) {
-						str = Array(len + 1 - str.length).join(pad) + str;
-					}
-					return str;
 				}
 
 				return {
 					restrict: 'A',
-					template: '<span class="otp_generator"><span credential-field value="otp" secret="\'true\'"></span> <span ng-bind="timeleft"></span></span>',
+					template: '<span class="otp_generator"><span credential-field value="token" secret="\'true\'"></span> <span ng-bind="timeleft"></span></span>',
 					transclude: false,
 					scope: {
-						secret: '='
+						otp: '='
 					},
 					replace: true,
 					link: function (scope) {
-						scope.otp = null;
+						scope.token = null;
 						scope.timeleft = null;
 						scope.timer = null;
 						var updateOtp = function () {
-							if (!scope.secret) {
+							if (!scope.otp || !scope.otp.secret || scope.otp.secret === "") {
 								return;
 							}
-							var key = base32tohex(scope.secret);
+							if (scope.otp.secret.includes(' ')) {
-							var epoch = Math.round(new Date().getTime() / 1000.0);
+								scope.otp.secret = scope.otp.secret.replaceAll(' ', '');
-							var time = leftpad(dec2hex(Math.floor(epoch / 30)), 16, '0');
+							}
-							/** global: jsSHA */
+							mergeDefaultOTPConfig(scope.otp);
-							var hmacObj = new jsSHA(time, 'HEX');
+							var totp = new OTPAuth.TOTP({
-							var hmac = hmacObj.getHMAC(key, 'HEX', 'SHA-1', "HEX");
+								issuer: scope.otp.issuer,
-							var offset = hex2dec(hmac.substring(hmac.length - 1));
+								label: scope.otp.label,
-							var otp = (hex2dec(hmac.slice(offset * 2, offset * 2 + 8)) & hex2dec('7fffffff')) + '';
+								algorithm: scope.otp.algorithm,
-							otp = (otp).slice(-6);
+								digits: scope.otp.digits,
-							scope.otp = otp;
+								period: scope.otp.period,
-
+								secret: scope.otp.secret
+							});
+							scope.token = totp.generate();
 						};
 
 						var timer = function () {
-							var epoch = Math.round(new Date().getTime() / 1000.0);
+							if (scope.otp) {
-							var countDown = 30 - (epoch % 30);
+								var epoch = Math.round(new Date().getTime() / 1000.0);
-							if (epoch % 30 === 0) updateOtp();
+								scope.timeleft = scope.otp.period - (epoch % scope.otp.period);
-							scope.timeleft = countDown;
+								if (epoch % scope.otp.period === 1) updateOtp();
-							scope.timer = $timeout(timer, 1000);
+							}
-
 						};
-						scope.$watch("secret", function (n) {
+						scope.$watch("otp", function (n) {
 							if (n) {
-								$timeout.cancel(scope.timer);
+								$interval.cancel(scope.timer);
 								updateOtp();
-								timer();
+								scope.timer = $interval(timer, 1000);
-							} else {
-								$timeout.cancel(scope.timer);
 							}
 						}, true);
 						scope.$on(
 							"$destroy",
 							function () {
-								$timeout.cancel(scope.timer);
+								$interval.cancel(scope.timer);
 							}
 						);
 					}

templates/main.php

@@ -30,6 +30,7 @@ script('passman', 'vendor/ui-sortable/sortable');
 script('passman', 'vendor/papa-parse/papaparse.min');
 script('passman', 'lib/promise');
 script('passman', 'lib/crypto_wrap');
+script('passman', 'lib/otpauth.umd');
 
 
 script('passman', 'app/app');

templates/public_share.php

@@ -119,7 +119,7 @@ style('passman', 'public-page');
 						</td>
 						<td>
 					<span otp-generator
-						  secret="shared_credential.otp.secret"></span>
+						  otp="shared_credential.otp"></span>
 						</td>
 					</tr>
 					<tr ng-show="shared_credential.email">

templates/views/credential_revisions.html

@@ -63,7 +63,7 @@
 			<div class="row" ng-show="selectedRevision.credential_data.otp.secret">
 				<div class="col-xs-4 col-md-3 col-lg-3">{{'otp' | translate}}</div>
 				<div class="col-xs-8 col-md-9 col-lg-9"><span otp-generator
-															  secret="selectedRevision.credential_data.otp.secret"></span></div>
+															  otp="selectedRevision.credential_data.otp"></span></div>
 			</div>
 
 
@@ -166,7 +166,7 @@
 				</td>
 				<td>
 					<span otp-generator
-						  secret="selectedRevision.credential_data.otp.secret"></span>
+						  otp="selectedRevision.credential_data.otp"></span>
 				</td>
 			</tr>
 			<tr ng-show="selectedRevision.credential_data.email">

templates/views/partials/credential_template.html

@@ -29,7 +29,7 @@
 	<div class="row" ng-show="credential.otp.secret">
 		<div class="col-xs-4 col-md-3 col-lg-3">{{'otp' | translate}}</div>
 		<div class="col-xs-8 col-md-9 col-lg-9">
-			<span otp-generator secret="credential.otp.secret"></span>
+			<span otp-generator otp="credential.otp"></span>
 		</div>
 	</div>
 
@@ -107,4 +107,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</div>

templates/views/partials/forms/edit_credential/otp.html

@@ -8,8 +8,7 @@
 			</select>
 		</div>
 		<div class="col-xs-6 nopadding">
-			<input type="file" qrread on-read="parseQR(qrdata)"
+			<input type="file" qrread class="input_secret"
-				   class="input_secret"
 				   on-read="parseQR(qrdata)" ng-show="otpType === 'qrcode'"/>
 			<input type="text" ng-model="storedCredential.otp.secret" ng-show="otpType === 'secret'">
 		</div>
@@ -39,6 +38,18 @@
 				<td>{{ 'issuer' | translate}}: </td>
 				<td>{{storedCredential.otp.issuer}}</td>
 			</tr>
+			<tr ng-show="storedCredential.otp.digits && storedCredential.otp.secret">
+				<td>{{ 'digits' | translate}}: </td>
+				<td>
+					<input type="number" ng-model="storedCredential.otp.digits" min="6" style="-moz-appearance: initial; -webkit-appearance: initial;">
+				</td>
+			</tr>
+			<tr ng-show="storedCredential.otp.digits && storedCredential.otp.secret">
+				<td>{{ 'period' | translate}}: </td>
+				<td>
+					<input type="number" ng-model="storedCredential.otp.period" min="30" style="-moz-appearance: initial; -webkit-appearance: initial;">
+				</td>
+			</tr>
 			<tr ng-show="storedCredential.otp.secret">
 				<td>{{ 'secret' | translate}}: </td>
 				<td>{{storedCredential.otp.secret}}</td>
@@ -46,9 +57,9 @@
 			<tr ng-show="storedCredential.otp.secret">
 				<td>{{ 'otp' | translate}}: </td>
 				<td><span otp-generator
-						  secret="storedCredential.otp.secret"></span>
+						  otp="storedCredential.otp"></span>
 				</td>
 			</tr>
 		</table>
 	</div>
-</div>
+</div>