control disabling and showing from higher component

RocketChat · Aug 20, 2024 · c9edf9e · c9edf9e
1 parent 0b3d6f3
commit c9edf9e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git 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 => {
 						</FormProvider>
 					)}
 					<Accordion>
-						{(twoFactorTOTP || twoFactorByEmailEnabled) && twoFactorEnabled && (
+						{(twoFactorTOTP || showEmailTwoFactor) && twoFactorEnabled && (
 							<Accordion.Item title={t('Two Factor Authentication')}>
 								{twoFactorTOTP && <TwoFactorTOTP />}
-								{twoFactorByEmailEnabled && <TwoFactorEmail />}
+								{showEmailTwoFactor && <TwoFactorEmail />}
 							</Accordion.Item>
 						)}
 						{e2eEnabled && (

diff --git 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<typeof Box>) => {
 	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<typeof Box>) => {
 		await disable2faAction();
 	}, [disable2faAction]);
 
-	if (!isAllowed) {
-		return null;
-	}
-
 	return (
 		<Box display='flex' flexDirection='column' alignItems='flex-start' mbs={16} {...props}>
 			<Margins blockEnd={8}>