Merge pull request #22202 from Pujan92/fix/21568

Fix: 2FA "Disable Authentication" page comes up again if we navigate back to the page in Offline mode
Expensify · Jul 6, 2023 · 8def859 · 8def859
2 parents 11f613a + 3236d35
commit 8def859
Showing 1 changed file with 39 additions and 36 deletions.
diff --git a/src/pages/settings/Security/TwoFactorAuth/IsEnabledPage.js b/src/pages/settings/Security/TwoFactorAuth/IsEnabledPage.js
@@ -11,6 +11,7 @@ import * as Expensicons from '../../../../components/Icon/Expensicons';
 import themeColors from '../../../../styles/themes/default';
 import styles from '../../../../styles/styles';
 import ConfirmModal from '../../../../components/ConfirmModal';
+import FullPageOfflineBlockingView from '../../../../components/BlockingViews/FullPageOfflineBlockingView';
 
 const defaultProps = {};
 
@@ -23,43 +24,45 @@ function IsEnabledPage(props) {
                 title={props.translate('twoFactorAuth.headerTitle')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_SECURITY)}
             />
-            <ScrollView>
-                <Section
-                    title={props.translate('twoFactorAuth.twoFactorAuthEnabled')}
-                    icon={Illustrations.ShieldYellow}
-                    menuItems={[
-                        {
-                            title: props.translate('twoFactorAuth.disableTwoFactorAuth'),
-                            onPress: () => {
-                                setIsConfirmModalVisible(true);
+            <FullPageOfflineBlockingView>
+                <ScrollView>
+                    <Section
+                        title={props.translate('twoFactorAuth.twoFactorAuthEnabled')}
+                        icon={Illustrations.ShieldYellow}
+                        menuItems={[
+                            {
+                                title: props.translate('twoFactorAuth.disableTwoFactorAuth'),
+                                onPress: () => {
+                                    setIsConfirmModalVisible(true);
+                                },
+                                icon: Expensicons.Close,
+                                iconFill: themeColors.danger,
+                                wrapperStyle: [styles.cardMenuItem],
                             },
-                            icon: Expensicons.Close,
-                            iconFill: themeColors.danger,
-                            wrapperStyle: [styles.cardMenuItem],
-                        },
-                    ]}
-                    containerStyles={[styles.twoFactorAuthSection]}
-                >
-                    <View style={styles.mv3}>
-                        <Text style={styles.textLabel}>{props.translate('twoFactorAuth.whatIsTwoFactorAuth')}</Text>
-                    </View>
-                </Section>
-                <ConfirmModal
-                    title={props.translate('twoFactorAuth.disableTwoFactorAuth')}
-                    onConfirm={() => {
-                        setIsConfirmModalVisible(false);
-                        Navigation.navigate(ROUTES.SETTINGS_2FA_DISABLE);
-                    }}
-                    onCancel={() => setIsConfirmModalVisible(false)}
-                    onModalHide={() => setIsConfirmModalVisible(false)}
-                    isVisible={isConfirmModalVisible}
-                    prompt={props.translate('twoFactorAuth.disableTwoFactorAuthConfirmation')}
-                    confirmText={props.translate('twoFactorAuth.disable')}
-                    cancelText={props.translate('common.cancel')}
-                    shouldShowCancelButton
-                    danger
-                />
-            </ScrollView>
+                        ]}
+                        containerStyles={[styles.twoFactorAuthSection]}
+                    >
+                        <View style={styles.mv3}>
+                            <Text style={styles.textLabel}>{props.translate('twoFactorAuth.whatIsTwoFactorAuth')}</Text>
+                        </View>
+                    </Section>
+                    <ConfirmModal
+                        title={props.translate('twoFactorAuth.disableTwoFactorAuth')}
+                        onConfirm={() => {
+                            setIsConfirmModalVisible(false);
+                            Navigation.navigate(ROUTES.SETTINGS_2FA_DISABLE);
+                        }}
+                        onCancel={() => setIsConfirmModalVisible(false)}
+                        onModalHide={() => setIsConfirmModalVisible(false)}
+                        isVisible={isConfirmModalVisible}
+                        prompt={props.translate('twoFactorAuth.disableTwoFactorAuthConfirmation')}
+                        confirmText={props.translate('twoFactorAuth.disable')}
+                        cancelText={props.translate('common.cancel')}
+                        shouldShowCancelButton
+                        danger
+                    />
+                </ScrollView>
+            </FullPageOfflineBlockingView>
         </ScreenWrapper>
     );
 }