diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js
index 34ec29fcaa9a..78633db86ac0 100755
--- 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 (
<>
@@ -183,6 +184,7 @@ class LoginForm extends React.Component {
autoCorrect={false}
keyboardType={CONST.KEYBOARD_TYPE.EMAIL_ADDRESS}
errorText={formErrorText}
+ hasError={hasError}
/>
{!_.isEmpty(this.props.account.success) && (
diff --git a/src/pages/signin/PasswordForm.js b/src/pages/signin/PasswordForm.js
index 56e21f0fffa2..cc99614ac001 100755
--- 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 (
<>
@@ -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}
/>
- {this.props.account.requiresTwoFactorAuth && (
+ {isTwoFactorAuthRequired && (
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}
/>
)}
- {Boolean(this.props.account) && !_.isEmpty(this.props.account.errors) && (
+ {hasServerError && (
)}
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index 95dad7429475..04f6c6f6c9d1 100755
--- 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}
/>
) : (
@@ -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
/>
@@ -245,7 +248,7 @@ class BaseValidateCodeForm extends React.Component {
)}
- {Boolean(this.props.account) && !_.isEmpty(this.props.account.errors) && (
+ {hasError && (
)}