https://github.com/the-djmaze/snappymail/issues/236#issuecomment-1041465503

plugins/two-factor-auth/index.php

@@ -7,9 +7,9 @@ class TwoFactorAuthPlugin extends \RainLoop\Plugins\AbstractPlugin
 {
 	const
 		NAME     = 'Two Factor Authentication',
-		VERSION  = '2.12',
+		VERSION  = '2.12.3',
 		RELEASE  = '2022-02-16',
-		REQUIRED = '2.12.0',
+		REQUIRED = '2.12.3',
 		CATEGORY = 'Login',
 		DESCRIPTION = 'Provides support for TOTP 2FA';
 
@@ -117,6 +117,15 @@ class TwoFactorAuthPlugin extends \RainLoop\Plugins\AbstractPlugin
 		$aResult = $this->getTwoFactorInfo($oAccount);
 		unset($aResult['BackupCodes']);
 
+		$name = \rawurlencode($oAccount->Email());
+//		$issuer = \rawurlencode(\RainLoop\API::Config()->Get('webmail', 'title', 'SnappyMail'));
+		$QR = \SnappyMail\QRCode::getMinimumQRCode(
+//			"otpauth://totp/{$issuer}:{$name}?secret={$aResult['Secret']}&issuer={$issuer}",
+			"otpauth://totp/{$name}?secret={$aResult['Secret']}",
+			\SnappyMail\QRCode::ERROR_CORRECT_LEVEL_M
+		);
+		$aResult['QRCode'] = $QR->__toString();
+
 		return $this->jsonResponse(__FUNCTION__, $aResult);
 	}
 

plugins/two-factor-auth/js/TwoFactorAuthSettings.js

@@ -45,9 +45,8 @@ class TwoFactorAuthSettings
 		this.twoFactorTested = ko.observable(false);
 
 		this.viewSecret = ko.observable('');
+		this.viewQRCode = ko.observable('');
 		this.viewBackupCodes = ko.observable('');
-		this.viewUrlTitle = ko.observable('');
-		this.viewUrl = ko.observable('');
 
 		this.viewEnable_ = ko.observable(false);
 
@@ -102,9 +101,8 @@ class TwoFactorAuthSettings
 
 	hideSecret() {
 		this.viewSecret('');
+		this.viewQRCode('');
 		this.viewBackupCodes('');
-		this.viewUrlTitle('');
-		this.viewUrl('');
 	}
 
 	createTwoFactor() {
@@ -121,10 +119,7 @@ class TwoFactorAuthSettings
 	}
 
 	clearTwoFactor() {
-		this.viewSecret('');
-		this.viewBackupCodes('');
-		this.viewUrlTitle('');
-		this.viewUrl('');
+		this.hideSecret();
 
 		this.twoFactorTested(false);
 
@@ -134,11 +129,7 @@ class TwoFactorAuthSettings
 
 	onShow(bLock) {
 		this.lock(!!bLock);
-
-		this.viewSecret('');
-		this.viewBackupCodes('');
-		this.viewUrlTitle('');
-		this.viewUrl('');
+		this.hideSecret('');
 	}
 
 	onHide() {
@@ -162,11 +153,7 @@ class TwoFactorAuthSettings
 			this.viewEnable_(false);
 			this.twoFactorStatus(false);
 			this.twoFactorTested(false);
-
-			this.viewSecret('');
-			this.viewBackupCodes('');
-			this.viewUrlTitle('');
-			this.viewUrl('');
+			this.hideSecret('');
 		} else {
 			this.viewUser(pString(oData.Result.User));
 			this.viewEnable_(!!oData.Result.Enable);
@@ -174,10 +161,8 @@ class TwoFactorAuthSettings
 			this.twoFactorTested(!!oData.Result.Tested);
 
 			this.viewSecret(pString(oData.Result.Secret));
+			this.viewQRCode(oData.Result.QRCode);
 			this.viewBackupCodes(pString(oData.Result.BackupCodes).replace(/[\s]+/g, '  '));
-
-			this.viewUrlTitle(pString(oData.Result.UrlTitle));
-			this.viewUrl(null/*qr.toDataURL({ level: 'M', size: 8, value: this.getQr() })*/);
 		}
 	}
 
@@ -186,12 +171,10 @@ class TwoFactorAuthSettings
 
 		if (iError) {
 			this.viewSecret('');
-			this.viewUrlTitle('');
-			this.viewUrl('');
+			this.viewQRCode('');
 		} else {
 			this.viewSecret(pString(data.Result.Secret));
-			this.viewUrlTitle(pString(data.Result.UrlTitle));
-			this.viewUrl(null/*qr.toDataURL({ level: 'M', size: 6, value: this.getQr() })*/);
+			this.viewQRCode(pString(data.Result.QRCode));
 		}
 	}
 

plugins/two-factor-auth/templates/TwoFactorAuthSettings.html

@@ -52,9 +52,7 @@
 				<blockquote>
 					<p class="muted width100-on-mobile" style="width: 550px" data-i18n="POPUPS_TWO_FACTOR_CFG/TWO_FACTOR_SECRET_DESC"></p>
 				</blockquote>
-				<!-- ko if: '' !== viewUrl() -->
-				<img style="margin-left: -7px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2P8DwQACgAD/il4QJ8AAAAASUVORK5CYII=" data-bind="attr: {'src': viewUrl}" />
-				<!-- /ko -->
+				<pre data-bind="text: viewQRCode" style="line-height:1;letter-spacing:-1px"></pre>
 			</div>
 		</div>
 		<div class="control-group" data-bind="visible: '' !== viewBackupCodes()">