Get 2FA plugin somesort of working

plugins/two-factor-auth/index.php

@@ -1,8 +1,4 @@
 <?php
-/*
-$this->DefaultResponse(__FUNCTION__,
-$this->FalseResponse(__FUNCTION__);
-*/
 
 use \RainLoop\Exceptions\ClientException;
 
@@ -14,21 +10,18 @@ class TwoFactorAuthPlugin extends \RainLoop\Plugins\AbstractPlugin
 		RELEASE  = '2021-07-22',
 		REQUIRED = '2.5.4',
 		CATEGORY = 'Login',
-		DESCRIPTION = 'This plugin allows you to to have TOTP';
+		DESCRIPTION = 'This plugin allows you to have TOTP 2FA';
 
-	// \RainLoop\Notifications\
 	const
 		AccountTwoFactorAuthRequired = 120,
-		AccountTwoFactorAuthError = 121,
-
-		Capa_TWO_FACTOR = 'TWO_FACTOR',
-		Capa_TWO_FACTOR_FORCE = 'TWO_FACTOR_FORCE';
+		AccountTwoFactorAuthError = 121;
 
 	public function Init() : void
 	{
 		$this->UseLangs(true);
 
 //		$this->addCss('style.less');
+		$this->addJs('js/TwoFactorAuthLogin.js');
 		$this->addJs('js/TwoFactorAuthSettings.js');
 
 		$this->addHook('login.success', 'DoLogin');
@@ -44,73 +37,39 @@ class TwoFactorAuthPlugin extends \RainLoop\Plugins\AbstractPlugin
 		$this->addTemplate('templates/PopupsTwoFactorAuthTest.html');
 	}
 
-	public function configMapping() : array
-	{
-		return [
-			\RainLoop\Plugins\Property::NewInstance('allow_two_factor_auth')
-				->SetLabel('TAB_SECURITY/LABEL_ALLOW_TWO_STEP')
-				->SetType(\RainLoop\Enumerations\PluginPropertyType::BOOL),
-			\RainLoop\Plugins\Property::NewInstance('force_two_factor_auth')
-				->SetLabel('TAB_SECURITY/LABEL_FORCE_TWO_STEP')
-				->SetType(\RainLoop\Enumerations\PluginPropertyType::BOOL)
-		];
-	}
-
 	public function DoLogin(\RainLoop\Model\Account $oAccount)
 	{
-		// Stripped from \RainLoop\Actions::LoginProcess
 		if ($this->TwoFactorAuthProvider($oAccount)) {
 			$aData = $this->getTwoFactorInfo($oAccount);
 			if ($aData && isset($aData['IsSet'], $aData['Enable']) && !empty($aData['Secret']) && $aData['IsSet'] && $aData['Enable']) {
-				$sSecretHash = \md5(APP_SALT . $aData['Secret'] . Utils::Fingerprint());
-				$sSecretCookieHash = Utils::GetCookie(self::AUTH_TFA_SIGN_ME_TOKEN_KEY, '');
+				$sCode = \trim($this->jsonParam('totp_code', ''));
+				if (empty($sCode)) {
+					$this->Logger()->Write('TFA: Required Code for ' . $oAccount->ParentEmailHelper() . ' account.');
 
-				if (empty($sSecretCookieHash) || $sSecretHash !== $sSecretCookieHash) {
-					$sAdditionalCode = \trim($this->jsonParam('AdditionalCode', ''));
-					if (empty($sAdditionalCode)) {
-						$this->Logger()->Write('TFA: Required Code for ' . $oAccount->ParentEmailHelper() . ' account.');
+					throw new ClientException(static::AccountTwoFactorAuthRequired);
+				} else {
+					$this->Logger()->Write('TFA: Verify Code for ' . $oAccount->ParentEmailHelper() . ' account.');
 
-						throw new Exceptions\ClientException(Notifications::AccountTwoFactorAuthRequired);
-					} else {
-						$this->Logger()->Write('TFA: Verify Code for ' . $oAccount->ParentEmailHelper() . ' account.');
+					$bUseBackupCode = false;
+					if (6 < \strlen($sCode) && !empty($aData['BackupCodes'])) {
+						$aBackupCodes = \explode(' ', \trim(\preg_replace('/[^\d]+/', ' ', $aData['BackupCodes'])));
+						$bUseBackupCode = \in_array($sCode, $aBackupCodes);
 
-						$bUseBackupCode = false;
-						if (6 < \strlen($sAdditionalCode) && !empty($aData['BackupCodes'])) {
-							$aBackupCodes = \explode(' ', \trim(\preg_replace('/[^\d]+/', ' ', $aData['BackupCodes'])));
-							$bUseBackupCode = \in_array($sAdditionalCode, $aBackupCodes);
-
-							if ($bUseBackupCode) {
-								$this->removeBackupCodeFromTwoFactorInfo($oAccount->ParentEmailHelper(), $sAdditionalCode);
-							}
+						if ($bUseBackupCode) {
+							$this->removeBackupCodeFromTwoFactorInfo($oAccount->ParentEmailHelper(), $sCode);
 						}
+					}
 
-						if (!$bUseBackupCode && !$this->TwoFactorAuthProvider($oAccount)->VerifyCode($aData['Secret'], $sAdditionalCode)) {
-							$this->Manager()->Actions()->loginErrorDelay();
+					if (!$bUseBackupCode && !$this->TwoFactorAuthProvider($oAccount)->VerifyCode($aData['Secret'], $sCode)) {
+						$this->Manager()->Actions()->loginErrorDelay();
 
-							$this->Manager()->Actions()->LoggerAuthHelper($oAccount);
+						$this->Manager()->Actions()->LoggerAuthHelper($oAccount);
 
-							throw new Exceptions\ClientException(Notifications::AccountTwoFactorAuthError);
-						}
-
-						// $bAdditionalCodeSignMe
-//						if ('1' === (string) $this->Manager()->Actions()->GetActionParam('AdditionalCodeSignMe', '0')) {
-						if ('1' === (string) $this->jsonParam('AdditionalCodeSignMe', '0')) {
-							Utils::SetCookie(self::AUTH_TFA_SIGN_ME_TOKEN_KEY, $sSecretHash,
-								\time() + 60 * 60 * 24 * 14);
-						}
+						throw new ClientException(static::AccountTwoFactorAuthError);
 					}
 				}
 			}
 		}
-/*
-		// Stripped from \RainLoop\Actions\User::DoLogin
-		if (Notifications::AccountTwoFactorAuthRequired === $oException->getCode())
-		{
-			return $this->DefaultResponse(__FUNCTION__, true, array(
-				'TwoFactorAuth' => true
-			));
-		}
-*/
 	}
 
 	public function DoGetTwoFactorInfo() : array
@@ -118,10 +77,10 @@ class TwoFactorAuthPlugin extends \RainLoop\Plugins\AbstractPlugin
 		$oAccount = $this->getAccountFromToken();
 
 		if (!$this->TwoFactorAuthProvider($oAccount)) {
-			return $this->FalseResponse(__FUNCTION__);
+			return $this->jsonResponse(__FUNCTION__, false);
 		}
 
-		return $this->DefaultResponse(__FUNCTION__, $this->getTwoFactorInfo($oAccount, true));
+		return $this->jsonResponse(__FUNCTION__, $this->getTwoFactorInfo($oAccount, true));
 	}
 
 	public function DoCreateTwoFactorSecret() : array
@@ -129,7 +88,7 @@ class TwoFactorAuthPlugin extends \RainLoop\Plugins\AbstractPlugin
 		$oAccount = $this->getAccountFromToken();
 
 		if (!$this->TwoFactorAuthProvider($oAccount)) {
-			return $this->FalseResponse(__FUNCTION__);
+			return $this->jsonResponse(__FUNCTION__, false);
 		}
 
 		$sEmail = $oAccount->ParentEmailHelper();
@@ -153,9 +112,9 @@ class TwoFactorAuthPlugin extends \RainLoop\Plugins\AbstractPlugin
 			))
 		);
 
-		$this->Manager()->Actions()->requestSleep();
+//		$this->Manager()->Actions()->requestSleep();
 
-		return $this->DefaultResponse(__FUNCTION__, $this->getTwoFactorInfo($oAccount));
+		return $this->jsonResponse(__FUNCTION__, $this->getTwoFactorInfo($oAccount));
 	}
 
 	public function DoShowTwoFactorSecret() : array
@@ -163,13 +122,13 @@ class TwoFactorAuthPlugin extends \RainLoop\Plugins\AbstractPlugin
 		$oAccount = $this->getAccountFromToken();
 
 		if (!$this->TwoFactorAuthProvider($oAccount)) {
-			return $this->FalseResponse(__FUNCTION__);
+			return $this->jsonResponse(__FUNCTION__, false);
 		}
 
 		$aResult = $this->getTwoFactorInfo($oAccount);
 		unset($aResult['BackupCodes']);
 
-		return $this->DefaultResponse(__FUNCTION__, $aResult);
+		return $this->jsonResponse(__FUNCTION__, $aResult);
 	}
 
 	public function DoEnableTwoFactor() : array
@@ -177,7 +136,7 @@ class TwoFactorAuthPlugin extends \RainLoop\Plugins\AbstractPlugin
 		$oAccount = $this->getAccountFromToken();
 
 		if (!$this->TwoFactorAuthProvider($oAccount)) {
-			return $this->FalseResponse(__FUNCTION__);
+			return $this->jsonResponse(__FUNCTION__, false);
 		}
 
 //		$this->Manager()->Actions()->setSettingsFromParams($oSettings, 'EnableTwoFactor', 'bool');
@@ -205,7 +164,7 @@ class TwoFactorAuthPlugin extends \RainLoop\Plugins\AbstractPlugin
 			);
 		}
 
-		return $this->DefaultResponse(__FUNCTION__, $bResult);
+		return $this->jsonResponse(__FUNCTION__, $bResult);
 	}
 
 	public function DoVerifyTwoFactorCode() : array
@@ -213,7 +172,7 @@ class TwoFactorAuthPlugin extends \RainLoop\Plugins\AbstractPlugin
 		$oAccount = $this->getAccountFromToken();
 
 		if (!$this->TwoFactorAuthProvider($oAccount)) {
-			return $this->FalseResponse(__FUNCTION__);
+			return $this->jsonResponse(__FUNCTION__, false);
 		}
 
 		$sCode = \trim($this->jsonParam('Code', ''));
@@ -226,9 +185,9 @@ class TwoFactorAuthPlugin extends \RainLoop\Plugins\AbstractPlugin
 //			$this->TwoFactorAuthProvider($oAccount)->VerifyCode($sSecret, $sCode)
 //		));
 
-		$this->Manager()->Actions()->requestSleep();
+//		$this->Manager()->Actions()->requestSleep();
 
-		return $this->DefaultResponse(__FUNCTION__,
+		return $this->jsonResponse(__FUNCTION__,
 			$this->TwoFactorAuthProvider($oAccount)->VerifyCode($sSecret, $sCode));
 	}
 
@@ -237,7 +196,7 @@ class TwoFactorAuthPlugin extends \RainLoop\Plugins\AbstractPlugin
 		$oAccount = $this->getAccountFromToken();
 
 		if (!$this->TwoFactorAuthProvider($oAccount)) {
-			return $this->FalseResponse(__FUNCTION__);
+			return $this->jsonResponse(__FUNCTION__, false);
 		}
 
 		$this->StorageProvider()->Clear($oAccount,
@@ -245,7 +204,7 @@ class TwoFactorAuthPlugin extends \RainLoop\Plugins\AbstractPlugin
 			'two_factor'
 		);
 
-		return $this->DefaultResponse(__FUNCTION__, $this->getTwoFactorInfo($oAccount, true));
+		return $this->jsonResponse(__FUNCTION__, $this->getTwoFactorInfo($oAccount, true));
 	}
 
 	protected function Logger() : \RainLoop\Providers\TwoFactorAuth
@@ -264,10 +223,7 @@ class TwoFactorAuthPlugin extends \RainLoop\Plugins\AbstractPlugin
 	private $oTwoFactorAuthProvider;
 	protected function TwoFactorAuthProvider(\RainLoop\Model\Account $oAccount) : ?TwoFactorAuthInterface
 	{
-//		if ($this->Config()->Get('plugin', 'allow_two_factor_auth', 0))
-//		if ($this->Config()->Get('plugin', 'force_two_factor_auth', 0))
-
-		if (!$this->oTwoFactorAuthProvider && $this->Manager()->Actions()->GetCapa(false, static::Capa_TWO_FACTOR, $oAccount)) {
+		if (!$this->oTwoFactorAuthProvider) {
 			require __DIR__ . '/providers/interface.php';
 			require __DIR__ . '/providers/totp.php';
 			$this->oTwoFactorAuthProvider = new TwoFactorAuthTotp();

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

@@ -0,0 +1,23 @@
+
+(rl => {
+
+	rl && addEventListener('rl-view-model', e => {
+		if (e.detail && 'Login' === e.detail.viewModelTemplateID) {
+			const container = e.detail.viewModelDom.querySelector('#plugin-Login-BottomControlGroup'),
+				placeholder = 'LOGIN/LABEL_VERIFICATION_CODE';
+			if (container) {
+				container.append(Element.fromHTML('<div class="controls">'
+					+ '<div class="input-append">'
+						+ '<input name="totp_code" type="text" class="input-block-level inputIcon"'
+						+ ' pattern="[0-9]*" inputmode="numeric"'
+						+ ' autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false"'
+						+ ' data-bind="textInput: totp, disable: submitRequest" data-i18n="[placeholder]'+placeholder
+						+ '" placeholder="'+rl.i18n(placeholder)+'">'
+						+ '<i class="add-on fontastic">🔑</i>'
+					+ '</div>'
+				+ '</div>'));
+			}
+		}
+	});
+
+})(window.rl);

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

@@ -5,11 +5,6 @@ import { trigger as translatorTrigger } from 'Common/Translator';
 (rl => { if (rl) {
 
 const
-	Capa = {
-		TwoFactor: 'TWO_FACTOR',
-		TwoFactorForce: 'TWO_FACTOR_FORCE',
-	},
-
 	pString = value => null != value ? '' + value : '',
 
 	Remote = new class {
@@ -56,10 +51,8 @@ class TwoFactorAuthSettings
 
 		this.viewEnable_ = ko.observable(false);
 
-		this.capaTwoFactor = rl.settings.capa(Capa.TwoFactor);
-
 		const fn = iError => iError && this.viewEnable_(false);
-		this.addComputables({
+		Object.entries({
 			viewEnable: {
 				read: this.viewEnable_,
 				write: (value) => {
@@ -92,12 +85,16 @@ class TwoFactorAuthSettings
 			},
 
 			twoFactorAllowedEnable: () => this.viewEnable() || this.twoFactorTested()
-		});
+		}).forEach(([key, fn]) => this[key] = ko.computed(fn));
 
 		this.onResult = this.onResult.bind(this);
 		this.onShowSecretResult = this.onShowSecretResult.bind(this);
 	}
 
+	configureTwoFactor() {
+//		showScreenPopup(require('View/Popup/TwoFactorConfiguration'));
+	}
+
 	showSecret() {
 		this.secreting(true);
 		rl.pluginRemoteRequest(this.onShowSecretResult, 'ShowTwoFactorSecret');
@@ -180,7 +177,7 @@ class TwoFactorAuthSettings
 			this.viewBackupCodes(pString(oData.Result.BackupCodes).replace(/[\s]+/g, '  '));
 
 			this.viewUrlTitle(pString(oData.Result.UrlTitle));
-			this.viewUrl(qr.toDataURL({ level: 'M', size: 8, value: this.getQr() }));
+			this.viewUrl(null/*qr.toDataURL({ level: 'M', size: 8, value: this.getQr() })*/);
 		}
 	}
 
@@ -194,15 +191,13 @@ class TwoFactorAuthSettings
 		} else {
 			this.viewSecret(pString(data.Result.Secret));
 			this.viewUrlTitle(pString(data.Result.UrlTitle));
-			this.viewUrl(qr.toDataURL({ level: 'M', size: 6, value: this.getQr() }));
+			this.viewUrl(null/*qr.toDataURL({ level: 'M', size: 6, value: this.getQr() })*/);
 		}
 	}
 
 	onBuild() {
-		if (this.capaTwoFactor) {
-			this.processing(true);
-			rl.pluginRemoteRequest(this.onResult, 'GetTwoFactorInfo');
-		}
+		this.processing(true);
+		rl.pluginRemoteRequest(this.onResult, 'GetTwoFactorInfo');
 	}
 }
 

plugins/two-factor-auth/langs/de_DE.ini

@@ -1,6 +1,3 @@
-[TAB_SECURITY]
-LABEL_ALLOW_TWO_STEP = "Zwei-Faktor-Authentifizierung erlauben"
-LABEL_FORCE_TWO_STEP = "Zwei-Faktor-Authentifizierung erzwingen"
 [POPUPS_TWO_FACTOR_CFG]
 LEGEND_TWO_FACTOR_AUTH = "Zwei-Faktor-Authentifizierung"
 LABEL_ENABLE_TWO_FACTOR = "Zwei-Faktor-Authentifizierung aktivieren"

plugins/two-factor-auth/langs/en.ini

@@ -1,6 +1,3 @@
-[TAB_SECURITY]
-LABEL_ALLOW_TWO_STEP = "Allow 2-Step Verification"
-LABEL_FORCE_TWO_STEP = "Enforce 2-Step Verification"
 [POPUPS_TWO_FACTOR_TEST]
 TITLE_TEST_CODE = "2-Step verification test"
 LABEL_CODE = "Code"

plugins/two-factor-auth/langs/es_ES.ini

@@ -1,6 +1,3 @@
-[TAB_SECURITY]
-LABEL_ALLOW_TWO_STEP = "Activar la verificación de 2 pasos"
-LABEL_FORCE_TWO_STEP = "Forzar la Autenticación en 2 pasos"
 [POPUPS_TWO_FACTOR_TEST]
 TITLE_TEST_CODE = "Prueba de verificación de 2 pasos"
 LABEL_CODE = "Código"

plugins/two-factor-auth/langs/fr_FR.ini

@@ -1,6 +1,3 @@
-[TAB_SECURITY]
-LABEL_ALLOW_TWO_STEP = "Autoriser l'authentification en deux étapes"
-LABEL_FORCE_TWO_STEP = "Forcer l'authentification en deux étapes"
 [POPUPS_TWO_FACTOR_CFG]
 LEGEND_TWO_FACTOR_AUTH = "Authentification en deux étapes"
 LABEL_ENABLE_TWO_FACTOR = "Activer l'authentification en deux étapes"

plugins/two-factor-auth/langs/hu-HU.ini

@@ -1,6 +1,3 @@
-[TAB_SECURITY]
-LABEL_ALLOW_TWO_STEP = "2 lépcsős hitelesítés engedélyezése"
-LABEL_FORCE_TWO_STEP = "2 lépcsős hitelesítés kényszerítése"
 [POPUPS_TWO_FACTOR_CFG]
 LEGEND_TWO_FACTOR_AUTH = "2 lépcsős hitelesítés"
 LABEL_ENABLE_TWO_FACTOR = "2 lépcsős hitelesítés engedélyezése"

plugins/two-factor-auth/langs/nl_NL.ini

@@ -1,6 +1,3 @@
-[TAB_SECURITY]
-LABEL_ALLOW_TWO_STEP = "2-Stap verificatie toestaan"
-LABEL_FORCE_TWO_STEP = "2-Stap verificatie afdwingen"
 [POPUPS_TWO_FACTOR_CFG]
 LEGEND_TWO_FACTOR_AUTH = "2-Stap verificatie"
 LABEL_ENABLE_TWO_FACTOR = "Gebruik 2-Stap verificatie"

plugins/two-factor-auth/langs/sv-SE.ini

@@ -1,6 +1,3 @@
-[TAB_SECURITY]
-LABEL_ALLOW_TWO_STEP = "Låt 2-tvåstegsverifiering"
-LABEL_FORCE_TWO_STEP = "Driva 2-tvåstegsverifiering"
 [POPUPS_TWO_FACTOR_CFG]
 LEGEND_TWO_FACTOR_AUTH = "Tvåstegsverifiering (TOTP)"
 LABEL_ENABLE_TWO_FACTOR = "Aktivera tvåstegsverifiering"

plugins/two-factor-auth/langs/zh_CN.ini

@@ -1,6 +1,3 @@
-[TAB_SECURITY]
-LABEL_ALLOW_TWO_STEP = "允许两步验证"
-LABEL_FORCE_TWO_STEP = "强制使用两步验证"
 [POPUPS_TWO_FACTOR_CFG]
 LEGEND_TWO_FACTOR_AUTH = "两步验证 (TOTP)"
 LABEL_ENABLE_TWO_FACTOR = "启用两步验证"

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

@@ -1,109 +1,94 @@
 <div class="b-settings-two-factor">
-	<div class="form-horizontal" data-bind="visible: capaAutoLogout">
+	<div class="form-horizontal">
 		<div class="legend" data-i18n="POPUPS_TWO_FACTOR_CFG/LEGEND_TWO_FACTOR_AUTH"></div>
-		<div class="control-group" data-bind="visible: capaTwoFactor">
-			<label class="control-label"></label>
-			<div class="controls">
-				<i class="fontastic">🔒</i>
-				&nbsp;
-				<span class="g-ui-link" tabindex="0" data-i18n="SETTINGS_SECURITY/LABEL_CONFIGURE_TWO_FACTOR" data-bind="click: configureTwoFactor, onSpace: configureTwoFactor, onEnter: configureTwoFactor"></span>
+		<div class="form-horizontal">
+			<div class="control-group" data-bind="visible: twoFactorStatus">
+				<div class="controls">
+					<div style="display: inline-block" data-bind="attr:{title: viewTwoFactorEnableTooltip}">
+						<div data-bind="component: {
+							name: 'Checkbox',
+							params: {
+								label: 'POPUPS_TWO_FACTOR_CFG/LABEL_ENABLE_TWO_FACTOR',
+								enable: twoFactorAllowedEnable,
+								value: viewEnable,
+								inline: true
+							}
+						}"></div>
+					</div>
+					&nbsp;&nbsp;&nbsp;
+					<span class="g-ui-link" data-bind="click: testTwoFactor, visible: twoFactorStatus"
+						data-i18n="POPUPS_TWO_FACTOR_CFG/LINK_TEST"></span>
+				</div>
 			</div>
-		</div>
-	</div>
-	<div>
-		<div class="modal-header">
-			<button type="button" class="close" data-bind="visible: viewEnable() || !lock(), command: cancelCommand">×</button>
-			<h3 data-i18n="POPUPS_TWO_FACTOR_CFG/LEGEND_TWO_FACTOR_AUTH"></h3>
-		</div>
-		<div class="modal-body">
-			<div class="form-horizontal" data-bind="visible: capaTwoFactor" style="margin-top: 10px;">
-				<div class="control-group" data-bind="visible: twoFactorStatus">
-					<div class="controls">
-						<div style="display: inline-block" data-bind="attr:{title: viewTwoFactorEnableTooltip}">
-							<div data-bind="component: {
-								name: 'Checkbox',
-								params: {
-									label: 'POPUPS_TWO_FACTOR_CFG/LABEL_ENABLE_TWO_FACTOR',
-									enable: twoFactorAllowedEnable,
-									value: viewEnable,
-									inline: true
-								}
-							}"></div>
-						</div>
-						&nbsp;&nbsp;&nbsp;
-						<span class="g-ui-link" data-bind="click: testTwoFactor, visible: twoFactorStatus"
-							data-i18n="POPUPS_TWO_FACTOR_CFG/LINK_TEST"></span>
-					</div>
-				</div>
-				<div class="control-group">
-					<label class="control-label">
-						<span data-i18n="POPUPS_TWO_FACTOR_CFG/LABEL_TWO_FACTOR_USER"></span>
-					</label>
-					<div class="controls" style="padding-top: 5px;">
-						<strong><span data-bind="text: viewUser"></span></strong>
-						<div style="padding-top: 15px;" data-bind="visible: lock">
-							<blockquote>
-								<p class="muted width100-on-mobile" style="width: 550px" data-i18n="POPUPS_TWO_FACTOR_CFG/TWO_FACTOR_REQUIRE_DESC"></p>
-							</blockquote>
-						</div>
-					</div>
-				</div>
-				<div class="control-group" data-bind="visible: '' === viewSecret() && twoFactorStatus() && !clearing()">
-					<div class="controls" style="padding-top: 5px;">
-						<strong data-bind="visible: secreting">...</strong>
-						<span class="g-ui-link" data-bind="click: showSecret, visible: !secreting()"
-							data-i18n="POPUPS_TWO_FACTOR_CFG/BUTTON_SHOW_SECRET"></span>
-					</div>
-				</div>
-				<div class="control-group" data-bind="visible: '' !== viewSecret()">
-					<label class="control-label">
-						<span data-i18n="POPUPS_TWO_FACTOR_CFG/LABEL_TWO_FACTOR_SECRET"></span>
-					</label>
-					<div class="controls" style="padding-top: 5px;">
-						<strong data-bind="text: viewSecret"></strong>
-						&nbsp;&nbsp;
-						<span class="g-ui-link" data-bind="click: hideSecret" data-i18n="POPUPS_TWO_FACTOR_CFG/BUTTON_HIDE_SECRET"></span>
-						<br />
-						<br />
+			<div class="control-group">
+				<label class="control-label">
+					<span data-i18n="POPUPS_TWO_FACTOR_CFG/LABEL_TWO_FACTOR_USER"></span>
+				</label>
+				<div class="controls" style="padding-top: 5px;">
+					<strong><span data-bind="text: viewUser"></span></strong>
+					<div style="padding-top: 15px;" data-bind="visible: lock">
 						<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 -->
-					</div>
-				</div>
-				<div class="control-group" data-bind="visible: '' !== viewBackupCodes()">
-					<label class="control-label">
-						<span data-i18n="POPUPS_TWO_FACTOR_CFG/LABEL_TWO_FACTOR_BACKUP_CODES"></span>
-					</label>
-					<div class="controls" style="padding-top: 5px;">
-						<pre data-bind="text: viewBackupCodes" style="width: 230px; word-break: break-word;"></pre>
-						<br />
-						<blockquote>
-							<p class="muted width100-on-mobile" style="width: 550px" data-i18n="POPUPS_TWO_FACTOR_CFG/TWO_FACTOR_BACKUP_CODES_DESC"></p>
+							<p class="muted width100-on-mobile" style="width: 550px" data-i18n="POPUPS_TWO_FACTOR_CFG/TWO_FACTOR_REQUIRE_DESC"></p>
 						</blockquote>
 					</div>
 				</div>
 			</div>
+			<div class="control-group" data-bind="visible: '' === viewSecret() && twoFactorStatus() && !clearing()">
+				<div class="controls" style="padding-top: 5px;">
+					<strong data-bind="visible: secreting">...</strong>
+					<span class="g-ui-link" data-bind="click: showSecret, visible: !secreting()"
+						data-i18n="POPUPS_TWO_FACTOR_CFG/BUTTON_SHOW_SECRET"></span>
+				</div>
+			</div>
+			<div class="control-group" data-bind="visible: '' !== viewSecret()">
+				<label class="control-label">
+					<span data-i18n="POPUPS_TWO_FACTOR_CFG/LABEL_TWO_FACTOR_SECRET"></span>
+				</label>
+				<div class="controls" style="padding-top: 5px;">
+					<strong data-bind="text: viewSecret"></strong>
+					&nbsp;&nbsp;
+					<span class="g-ui-link" data-bind="click: hideSecret" data-i18n="POPUPS_TWO_FACTOR_CFG/BUTTON_HIDE_SECRET"></span>
+					<br />
+					<br />
+					<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 -->
+				</div>
+			</div>
+			<div class="control-group" data-bind="visible: '' !== viewBackupCodes()">
+				<label class="control-label">
+					<span data-i18n="POPUPS_TWO_FACTOR_CFG/LABEL_TWO_FACTOR_BACKUP_CODES"></span>
+				</label>
+				<div class="controls" style="padding-top: 5px;">
+					<pre data-bind="text: viewBackupCodes" style="width: 230px; word-break: break-word;"></pre>
+					<br />
+					<blockquote>
+						<p class="muted width100-on-mobile" style="width: 550px" data-i18n="POPUPS_TWO_FACTOR_CFG/TWO_FACTOR_BACKUP_CODES_DESC"></p>
+					</blockquote>
+				</div>
+			</div>
 		</div>
-		<div class="modal-footer">
-			<a class="btn pull-left" data-bind="visible: lock, click: logout">
-				<i class="fontastic">⏻</i>
-				<span data-i18n="GLOBAL/LOGOUT"></span>
-			</a>
-			<a class="btn btn-danger" data-bind="click: clearTwoFactor, visible: twoFactorStatus">
-				<i class="fontastic" data-bind="css: {'icon-spinner': clearing()}">✖</i>
-				<span data-i18n="GLOBAL/CLEAR"></span>
-			</a>
-			<a class="btn" data-bind="click: createTwoFactor, visible: !twoFactorStatus()">
-				<i class="fontastic" data-bind="css: {'icon-spinner': processing()}">▶</i>
-				<span data-i18n="POPUPS_TWO_FACTOR_CFG/BUTTON_ACTIVATE"></span>
-			</a>
-			<a class="btn" data-bind="command: cancelCommand, visible: viewEnable() || !lock()">
-				<i class="icon-ok" ></i>
-				<span data-i18n="GLOBAL/DONE"></span>
-			</a>
-		</div>
+
+		<a class="btn pull-left" data-bind="visible: lock, click: logout">
+			<i class="fontastic">⏻</i>
+			<span data-i18n="GLOBAL/LOGOUT"></span>
+		</a>
+		<a class="btn btn-danger" data-bind="click: clearTwoFactor, visible: twoFactorStatus">
+			<i class="fontastic" data-bind="css: {'icon-spinner': clearing()}">✖</i>
+			<span data-i18n="GLOBAL/CLEAR"></span>
+		</a>
+		<a class="btn" data-bind="click: createTwoFactor, visible: !twoFactorStatus()">
+			<i class="fontastic" data-bind="css: {'icon-spinner': processing()}">▶</i>
+			<span data-i18n="POPUPS_TWO_FACTOR_CFG/BUTTON_ACTIVATE"></span>
+		</a>
+<!--
+		<a class="btn" data-bind="command: cancelCommand, visible: viewEnable() || !lock()">
+			<i class="icon-ok" ></i>
+			<span data-i18n="GLOBAL/DONE"></span>
+		</a>
+-->
 	</div>
 </div>