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 && ( )}