From 35ee76cebb523c21703b31a2cf4347e984490a95 Mon Sep 17 00:00:00 2001
From: Classic298 <27028174+Classic298@users.noreply.github.com>
Date: Fri, 23 Oct 2026 03:58:07 +0200
Subject: [PATCH] fix: multi-factor authentication section shows while MFA is
 off (#32980)

Every user saw a "Multi-factor authentication" section under Account, reading "Authenticator not configured" and "Managed by your administrator.", although MFA is off by default and there is nothing to set up. The section now only shows when MFA applies to the signed-in user, so everyone who has to use an authenticator still sees it.

Refs #32830
---
 .../components/chat/Settings/Account.svelte   |   2 +-
 .../chat/Settings/Account/Mfa.svelte          | 139 +++++++++---------
 2 files changed, 74 insertions(+), 67 deletions(-)

diff --git a/src/lib/components/chat/Settings/Account.svelte b/src/lib/components/chat/Settings/Account.svelte
index 940585b567..4d74da04ac 100644
--- a/src/lib/components/chat/Settings/Account.svelte
+++ b/src/lib/components/chat/Settings/Account.svelte
@@ -385,7 +385,7 @@
 			</UserSettingSection>
 		{/if}
 
-		<UserSettingSection title={$i18n.t('Multi-factor authentication')}><Mfa /></UserSettingSection>
+		<Mfa />
 
 		{#if canUseApiKeys({ user: $user, config: $config })}
 			<UserSettingSection title={$i18n.t('settings.personal.account.sections.apiKeys.title')}>
diff --git a/src/lib/components/chat/Settings/Account/Mfa.svelte b/src/lib/components/chat/Settings/Account/Mfa.svelte
index de71c8e3c3..32f37e7538 100644
--- a/src/lib/components/chat/Settings/Account/Mfa.svelte
+++ b/src/lib/components/chat/Settings/Account/Mfa.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import UserSettingRow from '../UserSettingRow.svelte';
+	import UserSettingSection from '../UserSettingSection.svelte';
 	import { onMount, getContext } from 'svelte';
 	import { mfaRequest } from '$lib/apis/auths/mfa';
 	import type { MfaManagementFlow } from '$lib/components/auth/MfaManagement.svelte';
@@ -52,70 +53,76 @@
 	};
 </script>
 
-<div class="space-y-2.5 text-xs">
-	{#if status}
-		<UserSettingRow let:labelId>
-			<span slot="label"
-				>{status.enabled
-					? $i18n.t('Authenticator configured')
-					: $i18n.t('Authenticator not configured')}</span
-			>
-			{#if status.required && status.enabled}<button
-					id={`${labelId}-control`}
-					type="button"
-					class={actionButtonClass}
-					on:click={() => {
-						show = !show;
-					}}>{show ? $i18n.t('Hide') : $i18n.t('Manage')}</button
-				>{/if}
-		</UserSettingRow>
-		<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
-			{status.enabled
-				? $i18n.t('{{COUNT}} recovery codes remaining', { COUNT: status.recovery_codes_remaining })
-				: $i18n.t('Managed by your administrator.')}
-		</p>
-		{#if show && status.required && status.enabled}
-			<div class="w-full sm:max-w-md space-y-2.5 py-1">
-				<p class="text-[0.6875rem] leading-4 text-gray-400 dark:text-gray-500">
-					{$i18n.t('Verify with a fresh code. Changes sign out all devices.')}
-				</p>
-				<label class="block text-gray-600 dark:text-gray-400"
-					>{recovery ? $i18n.t('Recovery code') : $i18n.t('Authenticator code')}<input
-						class="mt-1 h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
-						autocomplete="one-time-code"
-						bind:value={code}
-						maxlength={recovery ? 128 : 6}
-						inputmode={recovery ? 'text' : 'numeric'}
-					/></label
-				>
-				<label class="flex items-center gap-2 text-[0.6875rem] text-gray-500"
-					><input
-						class="size-3 rounded-sm"
-						type="checkbox"
-						bind:checked={recovery}
-						on:change={() => {
-							code = '';
-						}}
-					/>{$i18n.t('Use a recovery code')}</label
-				>
-				<div class="flex flex-wrap gap-4">
-					<button
-						type="button"
-						class={actionButtonClass}
-						disabled={busy || !code}
-						on:click={() => manage(true)}>{$i18n.t('Replace authenticator')}</button
-					><button
-						type="button"
-						class={actionButtonClass}
-						disabled={busy || !code}
-						on:click={() => manage(false)}>{$i18n.t('Generate recovery codes')}</button
+{#if status?.required || error}
+	<UserSettingSection title={$i18n.t('Multi-factor authentication')}>
+		<div class="space-y-2.5 text-xs">
+			{#if status}
+				<UserSettingRow let:labelId>
+					<span slot="label"
+						>{status.enabled
+							? $i18n.t('Authenticator configured')
+							: $i18n.t('Authenticator not configured')}</span
 					>
-				</div>
-			</div>
-		{/if}
-	{/if}
-	{#if error}<p role="alert" class="text-[0.6875rem] text-red-500">{error}</p>{/if}
-	{#if reauthenticate}<button type="button" class={actionButtonClass} on:click={signIn}
-			>{$i18n.t('Sign in again')}</button
-		>{/if}
-</div>
+					{#if status.required && status.enabled}<button
+							id={`${labelId}-control`}
+							type="button"
+							class={actionButtonClass}
+							on:click={() => {
+								show = !show;
+							}}>{show ? $i18n.t('Hide') : $i18n.t('Manage')}</button
+						>{/if}
+				</UserSettingRow>
+				<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
+					{status.enabled
+						? $i18n.t('{{COUNT}} recovery codes remaining', {
+								COUNT: status.recovery_codes_remaining
+							})
+						: $i18n.t('Managed by your administrator.')}
+				</p>
+				{#if show && status.required && status.enabled}
+					<div class="w-full sm:max-w-md space-y-2.5 py-1">
+						<p class="text-[0.6875rem] leading-4 text-gray-400 dark:text-gray-500">
+							{$i18n.t('Verify with a fresh code. Changes sign out all devices.')}
+						</p>
+						<label class="block text-gray-600 dark:text-gray-400"
+							>{recovery ? $i18n.t('Recovery code') : $i18n.t('Authenticator code')}<input
+								class="mt-1 h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500"
+								autocomplete="one-time-code"
+								bind:value={code}
+								maxlength={recovery ? 128 : 6}
+								inputmode={recovery ? 'text' : 'numeric'}
+							/></label
+						>
+						<label class="flex items-center gap-2 text-[0.6875rem] text-gray-500"
+							><input
+								class="size-3 rounded-sm"
+								type="checkbox"
+								bind:checked={recovery}
+								on:change={() => {
+									code = '';
+								}}
+							/>{$i18n.t('Use a recovery code')}</label
+						>
+						<div class="flex flex-wrap gap-4">
+							<button
+								type="button"
+								class={actionButtonClass}
+								disabled={busy || !code}
+								on:click={() => manage(true)}>{$i18n.t('Replace authenticator')}</button
+							><button
+								type="button"
+								class={actionButtonClass}
+								disabled={busy || !code}
+								on:click={() => manage(false)}>{$i18n.t('Generate recovery codes')}</button
+							>
+						</div>
+					</div>
+				{/if}
+			{/if}
+			{#if error}<p role="alert" class="text-[0.6875rem] text-red-500">{error}</p>{/if}
+			{#if reauthenticate}<button type="button" class={actionButtonClass} on:click={signIn}
+					>{$i18n.t('Sign in again')}</button
+				>{/if}
+		</div>
+	</UserSettingSection>
+{/if}