diff --git a/apps/meteor/client/views/account/security/AccountSecurityPage.tsx b/apps/meteor/client/views/account/security/AccountSecurityPage.tsx index 536ba8a04ef79..4a722a20b92f6 100644 --- a/apps/meteor/client/views/account/security/AccountSecurityPage.tsx +++ b/apps/meteor/client/views/account/security/AccountSecurityPage.tsx @@ -1,6 +1,6 @@ import { Box, Accordion, ButtonGroup, Button } from '@rocket.chat/fuselage'; import { useUniqueId } from '@rocket.chat/fuselage-hooks'; -import { useSetting, useTranslation } from '@rocket.chat/ui-contexts'; +import { useSetting, useTranslation, useUser } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; import { FormProvider, useForm } from 'react-hook-form'; @@ -15,6 +15,11 @@ const passwordDefaultValues = { password: '', confirmationPassword: '' }; const AccountSecurityPage = (): ReactElement => { const t = useTranslation(); + const user = useUser(); + + const isEmail2FAAvailableForOAuth = useSetting('Accounts_twoFactorAuthentication_email_available_for_oAuth_users'); + const isOAuthUser = user?.isOAuthUser; + const isEmail2FAAllowed = !isOAuthUser || isEmail2FAAvailableForOAuth; const methods = useForm({ defaultValues: passwordDefaultValues, @@ -30,6 +35,7 @@ const AccountSecurityPage = (): ReactElement => { const twoFactorByEmailEnabled = useSetting('Accounts_TwoFactorAuthentication_By_Email_Enabled'); const e2eEnabled = useSetting('E2E_Enable'); const allowPasswordChange = useSetting('Accounts_AllowPasswordChange'); + const showEmailTwoFactor = twoFactorByEmailEnabled && isEmail2FAAllowed; const passwordFormId = useUniqueId(); @@ -48,10 +54,10 @@ const AccountSecurityPage = (): ReactElement => { )} - {(twoFactorTOTP || twoFactorByEmailEnabled) && twoFactorEnabled && ( + {(twoFactorTOTP || showEmailTwoFactor) && twoFactorEnabled && ( {twoFactorTOTP && } - {twoFactorByEmailEnabled && } + {showEmailTwoFactor && } )} {e2eEnabled && ( diff --git a/apps/meteor/client/views/account/security/TwoFactorEmail.tsx b/apps/meteor/client/views/account/security/TwoFactorEmail.tsx index 25e8b781095cf..3654d17b5dec9 100644 --- a/apps/meteor/client/views/account/security/TwoFactorEmail.tsx +++ b/apps/meteor/client/views/account/security/TwoFactorEmail.tsx @@ -1,5 +1,5 @@ import { Box, Button, Margins } from '@rocket.chat/fuselage'; -import { useUser, useTranslation, useSetting } from '@rocket.chat/ui-contexts'; +import { useUser, useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React, { useCallback } from 'react'; @@ -9,10 +9,7 @@ const TwoFactorEmail = (props: ComponentProps) => { const t = useTranslation(); const user = useUser(); - const isEmail2FAAvailableForOAuth = useSetting('Accounts_twoFactorAuthentication_email_available_for_oAuth_users'); - const isOAuthUser = user?.isOAuthUser; const isEnabled = user?.services?.email2fa?.enabled; - const isAllowed = !isOAuthUser || isEmail2FAAvailableForOAuth; const enable2faAction = useEndpointAction('POST', '/v1/users.2fa.enableEmail', { successMessage: t('Two-factor_authentication_enabled'), @@ -28,10 +25,6 @@ const TwoFactorEmail = (props: ComponentProps) => { await disable2faAction(); }, [disable2faAction]); - if (!isAllowed) { - return null; - } - return (