Merge pull request #17168 from suphero/16874

Update login flow error handling
Expensify · Apr 18, 2023 · dc6d46f · dc6d46f
2 parents f4e142d + 9ff2014
commit dc6d46f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js
@@ -166,6 +166,7 @@ class LoginForm extends React.Component {
     render() {
         const formErrorText = this.state.formError ? this.props.translate(this.state.formError) : '';
         const serverErrorText = ErrorUtils.getLatestErrorMessage(this.props.account);
+        const hasError = !_.isEmpty(serverErrorText);
         return (
             <>
                 <View accessibilityLabel={this.props.translate('loginForm.loginForm')} style={[styles.mt3]}>
@@ -183,6 +184,7 @@ class LoginForm extends React.Component {
                         autoCorrect={false}
                         keyboardType={CONST.KEYBOARD_TYPE.EMAIL_ADDRESS}
                         errorText={formErrorText}
+                        hasError={hasError}
                     />
                 </View>
                 {!_.isEmpty(this.props.account.success) && (

diff --git a/src/pages/signin/PasswordForm.js b/src/pages/signin/PasswordForm.js
@@ -168,6 +168,12 @@ class PasswordForm extends React.Component {
     }
 
     render() {
+        const isTwoFactorAuthRequired = Boolean(this.props.account.requiresTwoFactorAuth);
+        const hasServerError = Boolean(this.props.account) && !_.isEmpty(this.props.account.errors);
+
+        // When the 2FA required flag is set, user has already passed/completed the password field
+        const passwordFieldHasError = !isTwoFactorAuthRequired && hasServerError;
+        const twoFactorFieldHasError = isTwoFactorAuthRequired && hasServerError;
         return (
             <>
                 <View style={[styles.mv3]}>
@@ -184,6 +190,7 @@ class PasswordForm extends React.Component {
                         onSubmitEditing={this.validateAndSubmitForm}
                         blurOnSubmit={false}
                         errorText={this.state.formError.password ? this.props.translate(this.state.formError.password) : ''}
+                        hasError={passwordFieldHasError}
                     />
                     <View style={[styles.changeExpensifyLoginLinkContainer]}>
                         <TouchableOpacity
@@ -197,7 +204,7 @@ class PasswordForm extends React.Component {
                     </View>
                 </View>
 
-                {this.props.account.requiresTwoFactorAuth && (
+                {isTwoFactorAuthRequired && (
                     <View style={[styles.mv3]}>
                         <TextInput
                             ref={el => this.input2FA = el}
@@ -211,11 +218,12 @@ class PasswordForm extends React.Component {
                             blurOnSubmit={false}
                             maxLength={CONST.TFA_CODE_LENGTH}
                             errorText={this.state.formError.twoFactorAuthCode ? this.props.translate(this.state.formError.twoFactorAuthCode) : ''}
+                            hasError={twoFactorFieldHasError}
                         />
                     </View>
                 )}
 
-                {Boolean(this.props.account) && !_.isEmpty(this.props.account.errors) && (
+                {hasServerError && (
                     <FormHelpMessage message={ErrorUtils.getLatestErrorMessage(this.props.account)} />
                 )}
                 <View>

diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -189,6 +189,7 @@ class BaseValidateCodeForm extends React.Component {
     }
 
     render() {
+        const hasError = Boolean(this.props.account) && !_.isEmpty(this.props.account.errors);
         return (
             <>
                 {/* At this point, if we know the account requires 2FA we already successfully authenticated */}
@@ -206,6 +207,7 @@ class BaseValidateCodeForm extends React.Component {
                             blurOnSubmit={false}
                             maxLength={CONST.TFA_CODE_LENGTH}
                             errorText={this.state.formError.twoFactorAuthCode ? this.props.translate(this.state.formError.twoFactorAuthCode) : ''}
+                            hasError={hasError}
                         />
                     </View>
                 ) : (
@@ -223,6 +225,7 @@ class BaseValidateCodeForm extends React.Component {
                             blurOnSubmit={false}
                             keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                             errorText={this.state.formError.validateCode ? this.props.translate(this.state.formError.validateCode) : ''}
+                            hasError={hasError}
                             autoFocus
                         />
                         <View style={[styles.changeExpensifyLoginLinkContainer]}>
@@ -245,7 +248,7 @@ class BaseValidateCodeForm extends React.Component {
                     </View>
                 )}
 
-                {Boolean(this.props.account) && !_.isEmpty(this.props.account.errors) && (
+                {hasError && (
                     <FormHelpMessage message={ErrorUtils.getLatestErrorMessage(this.props.account)} />
                 )}
                 <View>