Merge pull request #22151 from tienifr/fix/20848-enable-2fa-button

fix: 20848 enable 2fa button in verify page
Expensify · Jul 6, 2023 · ab0bd83 · ab0bd83
2 parents 0d82167 + fd2e29a
commit ab0bd83
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 8 deletions.
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js
@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useState, forwardRef, useImperativeHandle} from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import MagicCodeInput from '../../../../../components/MagicCodeInput';
@@ -31,6 +31,7 @@ const defaultProps = {
 function BaseTwoFactorAuthForm(props) {
     const [formError, setFormError] = useState({});
     const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
+    const inputRef = React.useRef(null);
 
     /**
      * Handle text input and clear formError upon text change
@@ -53,6 +54,9 @@ function BaseTwoFactorAuthForm(props) {
      * Check that all the form fields are valid, then trigger the submit callback
      */
     const validateAndSubmitForm = useCallback(() => {
+        if (inputRef.current) {
+            inputRef.current.blur();
+        }
         if (!twoFactorAuthCode.trim()) {
             setFormError({twoFactorAuthCode: 'twoFactorAuthForm.error.pleaseFillTwoFactorAuth'});
             return;
@@ -67,6 +71,12 @@ function BaseTwoFactorAuthForm(props) {
         Session.validateTwoFactorAuth(twoFactorAuthCode);
     }, [twoFactorAuthCode]);
 
+    useImperativeHandle(props.innerRef, () => ({
+        validateAndSubmitForm() {
+            validateAndSubmitForm();
+        },
+    }));
+
     return (
         <MagicCodeInput
             autoComplete={props.autoComplete}
@@ -78,6 +88,7 @@ function BaseTwoFactorAuthForm(props) {
             onChangeText={onTextInput}
             onFulfill={validateAndSubmitForm}
             errorText={formError.twoFactorAuthCode ? props.translate(formError.twoFactorAuthCode) : ErrorUtils.getLatestErrorMessage(props.account)}
+            ref={inputRef}
         />
     );
 }
@@ -90,4 +101,12 @@ export default compose(
     withOnyx({
         account: {key: ONYXKEYS.ACCOUNT},
     }),
-)(BaseTwoFactorAuthForm);
+)(
+    forwardRef((props, ref) => (
+        <BaseTwoFactorAuthForm
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            innerRef={ref}
+        />
+    )),
+);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js
@@ -1,10 +1,29 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
 
-function TwoFactorAuthForm() {
-    return <BaseTwoFactorAuthForm autoComplete="sms-otp" />;
+const propTypes = {
+    /**
+     * A ref to forward to the Pressable
+     */
+    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+};
+
+const defaultProps = {
+    innerRef: () => {},
+};
+
+function TwoFactorAuthForm(props) {
+    return (
+        <BaseTwoFactorAuthForm
+            ref={props.innerRef}
+            autoComplete="sms-otp"
+        />
+    );
 }
 
+TwoFactorAuthForm.propTypes = propTypes;
+TwoFactorAuthForm.defaultProps = defaultProps;
 TwoFactorAuthForm.displayName = 'TwoFactorAuthForm';
 
 export default TwoFactorAuthForm;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js
@@ -1,10 +1,29 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
 
-function TwoFactorAuthForm() {
-    return <BaseTwoFactorAuthForm autoComplete="one-time-code" />;
+const propTypes = {
+    /**
+     * A ref to forward to the Pressable
+     */
+    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+};
+
+const defaultProps = {
+    innerRef: () => {},
+};
+
+function TwoFactorAuthForm(props) {
+    return (
+        <BaseTwoFactorAuthForm
+            ref={props.innerRef}
+            autoComplete="one-time-code"
+        />
+    );
 }
 
+TwoFactorAuthForm.propTypes = propTypes;
+TwoFactorAuthForm.defaultProps = defaultProps;
 TwoFactorAuthForm.displayName = 'TwoFactorAuthForm';
 
 export default TwoFactorAuthForm;
diff --git a/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js b/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js
@@ -55,6 +55,8 @@ const defaultProps = {
 };
 
 function VerifyPage(props) {
+    const formRef = React.useRef(null);
+
     useEffect(() => {
         Session.clearAccountMessages();
     }, []);
@@ -139,15 +141,20 @@ function VerifyPage(props) {
                         <Text style={styles.mt11}>{props.translate('twoFactorAuth.enterCode')}</Text>
                     </View>
                     <View style={[styles.mt3, styles.mh5]}>
-                        <TwoFactorAuthForm />
+                        <TwoFactorAuthForm innerRef={formRef} />
                     </View>
                 </ScrollView>
                 <FixedFooter style={[styles.mtAuto, styles.pt2]}>
                     <Button
                         success
                         text={props.translate('common.next')}
-                        isDisabled
                         isLoading={props.account.isLoading}
+                        onPress={() => {
+                            if (!formRef.current) {
+                                return;
+                            }
+                            formRef.current.validateAndSubmitForm();
+                        }}
                     />
                 </FixedFooter>
             </FullPageOfflineBlockingView>