more mfa cleanup, set the value in session if mfa is enabled and only allow enabling mfa after a test passed

3 files changed, 63 insertions, 123 deletions

diff --git a/Zotlabs/Module/Settings/Multifactor.php b/Zotlabs/Module/Settings/Multifactor.php
index e1d8e1c97..5ac47be09 100644
--- a/Zotlabs/Module/Settings/Multifactor.php
+++ b/Zotlabs/Module/Settings/Multifactor.php
@@ -18,6 +18,9 @@ class Multifactor {
 		}
 		$enable_mfa = isset($_POST['enable_mfa']) ? (int) $_POST['enable_mfa'] : false;
 		AConfig::Set($account['account_id'], 'system', 'mfa_enabled', $enable_mfa);
+		if ($enable_mfa) {
+			$_SESSION['2FA_VERIFIED'] = true;
+		}
 	}
 
 	public function get() {
@@ -48,10 +51,11 @@ class Multifactor {
 		return replace_macros(get_markup_template('totp_setup.tpl'),
 			[
 				'$form_security_token' => get_form_security_token("settings_mfa"),
-				'$title' => t('Multifactor Settings'),
+				'$title' => t(' Account Multifactor Settings'),
 				'$totp_setup_text' => t('Multi-Factor Authentication Setup'),
-				'$secret_text' => t('This is your generated secret. This may be used in some cases if the QR image cannot be read. Please save it.'),
+				'$secret_text' => t('This is your generated secret. It may be used in some cases if the QR image cannot be read. Please save it.'),
 				'$test_title' => t('Please enter the code from your authenticator'),
+				'$test_title_sub' => t('You will only be able to enable MFA if the test passes'),
 				'$qrcode' => (new QRCode())->render($uri),
 				'$uri' => $uri,
 				'$secret' => ($account['account_external'] ?? ''),
diff --git a/view/tpl/settings_account.tpl b/view/tpl/settings_account.tpl
index 2b942d694..b0076f380 100644
--- a/view/tpl/settings_account.tpl
+++ b/view/tpl/settings_account.tpl
@@ -17,6 +17,7 @@
 
 			<div class="settings-submit-wrapper" >
 				<button type="submit" name="submit" class="btn btn-primary">{{$submit}}</button>
+				<a href="/settings/multifactor" class="btn btn-outline-success">Configure MFA</a>
 			</div>
 			{{$account_settings}}
 		</div>
diff --git a/view/tpl/totp_setup.tpl b/view/tpl/totp_setup.tpl
index 6bf5885f7..4139e3552 100644
--- a/view/tpl/totp_setup.tpl
+++ b/view/tpl/totp_setup.tpl
@@ -1,130 +1,65 @@
 <div class="generic-content-wrapper">
-    <div class="section-title-wrapper">
-        <h2>{{$title}}</h2>
-    </div>
-
-        <div class="section-content-tools-wrapper">
-
-            {{if $secret}}
-            <div>
-                <div>{{$secret_text}}</div>
-                <br>
-                <div><strong>{{$secret}}</strong></div>
-            </div>
-            {{/if}}
-
-            <img src="{{$qrcode}}" alt="{{$uri}}" title="{{$uri}}">
-
-            <form action="#" id="totp-test-form" method="post" autocomplete="off" >
-                <div id="otp-test-wrapper">
-                    <div style="margin-top: 1rem">
-                        <label for="totp_test">{{$test_title}}</label>
-                    </div>
-                    <div style="margin-top: 1rem">
-                        <input title="{{$test_title}}" type="text" id="totp_test"
-                            style="width: 30%;"
-                            onkeydown="hitkey(event)"
-                            onfocus="totp_clear_code()"/>
-                    </div>
-                    <div style="margin-top: 1rem">
-                        <strong id="otptest_results"></strong>
-                    </div>
-                </div>
-                <div class="settings-submit-wrapper" >
-                    <button id="otp-test-submit" type="submit"
-                        name="submit" class="btn btn-primary" onclick="totp_test_code(); return false;">{{$test}}
-                    </button>
-                </div>
-            </form>
-
-
-            <form action="settings/multifactor" id="settings-mfa-form" method="post" autocomplete="off" >
-                <input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
-                {{include file="field_checkbox.tpl" field=$enable_mfa}}
-                <div class="settings-submit-wrapper" >
-                    <button id="otp-enable-submit" type="submit"
-                        name="submit" class="btn btn-primary">{{$submit}}
-                    </button>
-                </div>
-
-            </form>
-
-
-        </div>
-    </form>
+	<div class="section-title-wrapper">
+		<h2>{{$title}}</h2>
+	</div>
+	<div class="section-content-tools-wrapper">
+		{{if $secret}}
+		<div class="section-content-info-wrapper">
+			<div>{{$secret_text}}</div>
+			<div><strong>{{$secret}}</strong></div>
+		</div>
+		{{/if}}
+		<img src="{{$qrcode}}" alt="{{$uri}}" title="{{$uri}}">
+		<div id="mfa-test-wrapper" class="mb-3">
+			<form action="" id="totp-test-form" method="post" autocomplete="off" >
+				<div class="mb-3">
+					<label for="totp_test">{{$test_title}}</label>
+					<input type="text" id="totp_test" class="form-control" onfocus="totp_clear_code()"/>
+					<small class="text-muted">{{$test_title_sub}}</small>
+				</div>
+				<button id="otp-test-submit" type="submit" name="submit" class="btn btn-primary" onclick="totp_test_code(); return false;">
+					{{$test}}
+				</button>
+				<div class="">
+					<strong id="otptest_results"></strong>
+				</div>
+			</form>
+		</div>
+		<div id="mfa-submit-wrapper" class="{{if !$enable_mfa.2}}d-none{{/if}}">
+			<form action="settings/multifactor" method="post">
+				<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
+				{{include file="field_checkbox.tpl" field=$enable_mfa}}
+				<div class="settings-submit-wrapper" >
+					<button id="otp-enable-submit" type="b" name="submit" class="btn btn-primary">
+						{{$submit}}
+					</button>
+				</div>
+			</form>
+		</div>
+	</div>
 </div>
 
-<script type="text/javascript">
-
-$(window).on("load", function() {
-	totp_clear_code();
-});
-
-function totp_clear_code() {
-	var box = document.getElementById("totp_test");
-	box.value = "";
-	box.focus();
-	document.getElementById("otptest_results").innerHTML = "";
-}
+<script>
+	function totp_clear_code() {
+		let box = document.getElementById("totp_test");
+		box.value = "";
+		box.focus();
+		document.getElementById("otptest_results").innerHTML = "";
+	}
 
-function totp_test_code() {
-	$.post('/totp_check',
-		{totp_code: document.getElementById('totp_test').value},
-		function(data) {
-			document.getElementById("otptest_results").innerHTML =
-				(data['status']) ? '{{$test_pass}}' : '{{$test_fail}}';
-        });
-}
-function totp_generate_secret() {
-	$.post('/settings/totp',
-		{
-			set_secret: '1',
-			password: document.getElementById("totp_password").value
-			},
-		function(data) {
-			if (!data['auth']) {
-				var box = document.getElementById("totp_password");
-				box.value = "";
-				box.focus();
-				document.getElementById('totp_note').innerHTML =
-					"{{$note_password}}";
-				return;
+	function totp_test_code() {
+		$.post(
+			'totp_check',
+			{totp_code: document.getElementById('totp_test').value},
+			function(data) {
+				document.getElementById("otptest_results").innerHTML = data['status'] ? '{{$test_pass}}' : '{{$test_fail}}';
+				if (data['status']) {
+					let e = document.getElementById('mfa-submit-wrapper');
+					e.classList.remove('d-none');
 				}
-			var div = document.getElementById("password_form");
-			div.style.display = "none";
-			choose_message(true);
-			document.getElementById('totp_secret').innerHTML =
-				data['secret'];
-			document.getElementById('totp_qrcode').src =
-				"{{$qrcode_url}}" + (new Date()).getTime();
-			document.getElementById('totp_note').innerHTML =
-				"{{$note_scan}}";
-			totp_clear_code();
-        }
-    );
-}
-
-function go_generate(ev) {
-	if (ev.which == 13) {
-		totp_generate_secret();
-		ev.preventDefault();
-		ev.stopPropagation();
-	}
-}
-function hitkey(ev) {
-	if (ev.which == 13) {
-		totp_test_code();
-		ev.preventDefault();
-		ev.stopPropagation();
+			}
+		);
 	}
-}
-function expose_password() {
-	var div = document.getElementById("password_form");
-	div.style.display = "block";
-	var box = document.getElementById("totp_password");
-	box.value = "";
-	box.focus();
-}
 </script>