Merge pull request Expensify#15573 from Expensify/rocio-CodeSent

Update feedback message when the link to get a magic code is resent
Logaqm · Mar 1, 2023 · 7f74d55 · 7f74d55
2 parents bbe5c1d + 90df45e
commit 7f74d55
Showing 1 changed file with 18 additions and 8 deletions.
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -70,6 +70,7 @@ class BaseValidateCodeForm extends React.Component {
             formError: {},
             validateCode: props.credentials.validateCode || '',
             twoFactorAuthCode: '',
+            linkSent: false,
         };
     }
 
@@ -131,6 +132,9 @@ class BaseValidateCodeForm extends React.Component {
         }
         this.setState({formError: {}});
         User.resendValidateCode(this.props.credentials.login, true);
+
+        // Give feedback to the user to let them know the email was sent so they don't spam the button.
+        this.setState({linkSent: true});
     }
 
     /**
@@ -212,15 +216,21 @@ class BaseValidateCodeForm extends React.Component {
                             autoFocus
                         />
                         <View style={[styles.changeExpensifyLoginLinkContainer]}>
-                            <TouchableOpacity
-                                style={[styles.mt2]}
-                                onPress={this.resendValidateCode}
-                                underlayColor={themeColors.componentBG}
-                            >
-                                <Text style={[styles.link]}>
-                                    {this.props.translate('validateCodeForm.magicCodeNotReceived')}
+                            {this.state.linkSent ? (
+                                <Text style={[styles.mt2]}>
+                                    {this.props.account.message}
                                 </Text>
-                            </TouchableOpacity>
+                            ) : (
+                                <TouchableOpacity
+                                    style={[styles.mt2]}
+                                    onPress={this.resendValidateCode}
+                                    underlayColor={themeColors.componentBG}
+                                >
+                                    <Text style={[styles.link]}>
+                                        {this.props.translate('validateCodeForm.magicCodeNotReceived')}
+                                    </Text>
+                                </TouchableOpacity>
+                            )}
                         </View>
                     </View>
                 )}