diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 65bf60c3bd89..6cb4235c58c8 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1135,4 +1135,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 4ed1c7b099741c82e2b0411b95f6468e72be6c76 -COCOAPODS: 1.12.1 +COCOAPODS: 1.12.0 diff --git a/src/components/withWindowDimensions.js b/src/components/withWindowDimensions.js index 14ca3572c482..674a153f7e10 100644 --- a/src/components/withWindowDimensions.js +++ b/src/components/withWindowDimensions.js @@ -14,6 +14,9 @@ const windowDimensionsPropTypes = { // Height of the window windowHeight: PropTypes.number.isRequired, + // Is the window width extra narrow, like on a Fold mobile device? + isExtraSmallScreenWidth: PropTypes.bool.isRequired, + // Is the window width narrow, like on a mobile device? isSmallScreenWidth: PropTypes.bool.isRequired, @@ -75,6 +78,7 @@ class WindowDimensionsProvider extends React.Component { return ( {(insets) => { + const isExtraSmallScreenWidth = this.state.windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint; const isSmallScreenWidth = this.state.windowWidth <= variables.mobileResponsiveWidthBreakpoint; const isMediumScreenWidth = !isSmallScreenWidth && this.state.windowWidth <= variables.tabletResponsiveWidthBreakpoint; const isLargeScreenWidth = !isSmallScreenWidth && !isMediumScreenWidth; @@ -83,6 +87,7 @@ class WindowDimensionsProvider extends React.Component { value={{ windowHeight: this.state.windowHeight + getWindowHeightAdjustment(insets), windowWidth: this.state.windowWidth, + isExtraSmallScreenWidth, isSmallScreenWidth, isMediumScreenWidth, isLargeScreenWidth, diff --git a/src/languages/en.js b/src/languages/en.js index 77638749d904..8bfb80d1d22d 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -26,7 +26,7 @@ export default { zoom: 'Zoom', password: 'Password', magicCode: 'Magic code', - twoFactorCode: 'Two factor code', + twoFactorCode: 'Two-factor code', workspaces: 'Workspaces', profile: 'Profile', payments: 'Payments', @@ -195,7 +195,7 @@ export default { requestNewCode: 'You can also', requestNewCodeLink: 'request a new code here', successfulNewCodeRequest: 'Code requested. Please check your device.', - tfaRequiredTitle: 'Two factor authentication\nrequired', + tfaRequiredTitle: 'Two-factor authentication\nrequired', tfaRequiredDescription: 'Please enter the two-factor authentication code\nwhere you are trying to sign in.', }, moneyRequestConfirmationList: { @@ -534,7 +534,7 @@ export default { stepCodes: 'Recovery codes', keepCodesSafe: 'Keep these recovery codes safe!', codesLoseAccess: - 'If you lose access to your authenticator app and don’t have these codes, you will lose access to your account. \n\nNote: Setting up two factor authentication will log you out of all other active sessions.', + 'If you lose access to your authenticator app and don’t have these codes, you will lose access to your account. \n\nNote: Setting up two-factor authentication will log you out of all other active sessions.', stepVerify: 'Verify', scanCode: 'Scan the QR code using your', authenticatorApp: 'authenticator app', @@ -549,8 +549,8 @@ export default { }, twoFactorAuthForm: { error: { - pleaseFillTwoFactorAuth: 'Please enter your two factor code', - incorrect2fa: 'Incorrect two factor authentication code. Please try again.', + pleaseFillTwoFactorAuth: 'Please enter your two-factor code', + incorrect2fa: 'Incorrect two-factor authentication code. Please try again.', }, }, passwordConfirmationScreen: { @@ -693,20 +693,20 @@ export default { error: { pleaseFillMagicCode: 'Please enter your magic code', incorrectMagicCode: 'Incorrect magic code.', - pleaseFillTwoFactorAuth: 'Please enter your two factor code', + pleaseFillTwoFactorAuth: 'Please enter your two-factor code', }, }, passwordForm: { pleaseFillOutAllFields: 'Please fill out all fields', pleaseFillPassword: 'Please enter your password', - pleaseFillTwoFactorAuth: 'Please enter your two factor code', - enterYourTwoFactorAuthenticationCodeToContinue: 'Enter your two factor authentication code to continue', + pleaseFillTwoFactorAuth: 'Please enter your two-factor code', + enterYourTwoFactorAuthenticationCodeToContinue: 'Enter your two-factor authentication code to continue', forgot: 'Forgot?', requiredWhen2FAEnabled: 'Required when 2FA is enabled', error: { incorrectPassword: 'Incorrect password. Please try again.', incorrectLoginOrPassword: 'Incorrect login or password. Please try again.', - incorrect2fa: 'Incorrect two factor authentication code. Please try again.', + incorrect2fa: 'Incorrect two-factor authentication code. Please try again.', twoFactorAuthenticationEnabled: 'You have 2FA enabled on this account. Please sign in using your email or phone number.', invalidLoginOrPassword: 'Invalid login or password. Please try again or reset your password.', unableToResetPassword: diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index ab8010f1b347..7b2a5b0d6df1 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -41,7 +41,7 @@ const propTypes = { /** User's account who is setting up bank account */ account: PropTypes.shape({ - /** If user has Two factor authentication enabled */ + /** If user has two-factor authentication enabled */ requiresTwoFactorAuth: PropTypes.bool, }), }; diff --git a/src/pages/ValidateLoginPage/index.website.js b/src/pages/ValidateLoginPage/index.website.js index 24a736086357..89cdcef836ab 100644 --- a/src/pages/ValidateLoginPage/index.website.js +++ b/src/pages/ValidateLoginPage/index.website.js @@ -117,20 +117,21 @@ class ValidateLoginPage extends Component { } render() { - const isTfaRequired = lodashGet(this.props, 'account.requiresTwoFactorAuth', false); + const is2FARequired = lodashGet(this.props, 'account.requiresTwoFactorAuth', false); const isSignedIn = Boolean(lodashGet(this.props, 'session.authToken', null)); + const currentAuthState = this.getAutoAuthState(); return ( <> - {this.getAutoAuthState() === CONST.AUTO_AUTH_STATE.FAILED && } - {this.getAutoAuthState() === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && (!isTfaRequired || isSignedIn) && } - {this.getAutoAuthState() === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && isTfaRequired && !isSignedIn && } - {this.getAutoAuthState() === CONST.AUTO_AUTH_STATE.NOT_STARTED && ( + {currentAuthState === CONST.AUTO_AUTH_STATE.FAILED && } + {currentAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && is2FARequired && !isSignedIn && } + {currentAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED && isSignedIn && } + {currentAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED && !isSignedIn && ( )} - {this.getAutoAuthState() === CONST.AUTO_AUTH_STATE.SIGNING_IN && } + {currentAuthState === CONST.AUTO_AUTH_STATE.SIGNING_IN && } ); } diff --git a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js b/src/pages/settings/Security/TwoFactorAuth/CodesPage.js index 915d2534fa0d..83465fd34b3b 100644 --- a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js +++ b/src/pages/settings/Security/TwoFactorAuth/CodesPage.js @@ -1,6 +1,7 @@ import React, {useEffect, useState} from 'react'; import {withOnyx} from 'react-native-onyx'; import {ActivityIndicator, View} from 'react-native'; +import {ScrollView} from 'react-native-gesture-handler'; import _ from 'underscore'; import PropTypes from 'prop-types'; import HeaderWithCloseButton from '../../../../components/HeaderWithCloseButton'; @@ -11,6 +12,7 @@ import compose from '../../../../libs/compose'; import ROUTES from '../../../../ROUTES'; import FullPageOfflineBlockingView from '../../../../components/BlockingViews/FullPageOfflineBlockingView'; import * as Illustrations from '../../../../components/Icon/Illustrations'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions'; import styles from '../../../../styles/styles'; import FixedFooter from '../../../../components/FixedFooter'; import Button from '../../../../components/Button'; @@ -24,6 +26,7 @@ import * as TwoFactorAuthActions from '../../../../libs/actions/TwoFactorAuthAct const propTypes = { ...withLocalizePropTypes, + ...windowDimensionsPropTypes, account: PropTypes.shape({ /** User recovery codes for setting up 2-FA */ recoveryCodes: PropTypes.string, @@ -64,65 +67,67 @@ function CodesPage(props) { onCloseButtonPress={() => Navigation.dismissModal(true)} /> -
- - {props.translate('twoFactorAuth.codesLoseAccess')} - - - {props.account.isLoading ? ( - - - - ) : ( - <> - - {Boolean(props.account.recoveryCodes) && - _.map(props.account.recoveryCodes.split(', '), (code) => ( - - {code} - - ))} + +
+ + {props.translate('twoFactorAuth.codesLoseAccess')} + + + {props.account.isLoading ? ( + + - -
- -
+ +