diff --git a/assets/images/simple-illustrations/simple-illustration__shield.svg b/assets/images/simple-illustrations/simple-illustration__shield.svg
new file mode 100644
index 0000000000000..5d56b9c3acb20
--- /dev/null
+++ b/assets/images/simple-illustrations/simple-illustration__shield.svg
@@ -0,0 +1,77 @@
+
+
+
diff --git a/src/components/Icon/Illustrations.js b/src/components/Icon/Illustrations.js
index db66607171852..329e9f2b028f0 100644
--- a/src/components/Icon/Illustrations.js
+++ b/src/components/Icon/Illustrations.js
@@ -18,6 +18,7 @@ import RocketOrange from '../../../assets/images/product-illustrations/rocket--o
import TadaYellow from '../../../assets/images/product-illustrations/tada--yellow.svg';
import TadaBlue from '../../../assets/images/product-illustrations/tada--blue.svg';
import GpsTrackOrange from '../../../assets/images/product-illustrations/gps-track--orange.svg';
+import ShieldYellow from '../../../assets/images/simple-illustrations/simple-illustration__shield.svg';
import MoneyReceipts from '../../../assets/images/simple-illustrations/simple-illustration__money-receipts.svg';
import PinkBill from '../../../assets/images/simple-illustrations/simple-illustration__bill.svg';
import CreditCardsNew from '../../../assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
@@ -56,6 +57,7 @@ export {
TadaYellow,
TadaBlue,
GpsTrackOrange,
+ ShieldYellow,
MoneyReceipts,
PinkBill,
CreditCardsNew,
diff --git a/src/languages/en.js b/src/languages/en.js
index 69ae592a7b3b6..dddf50173b615 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -827,6 +827,9 @@ export default {
letsChatCTA: 'Yes, let\'s chat',
letsChatText: 'Thanks for doing that. We need your help verifying a few pieces of information, but we can work this out quickly over chat. Ready?',
letsChatTitle: 'Let\'s chat!',
+ enable2FATitle: 'Prevent fraud, enable two-factor authentication!',
+ enable2FAText: 'We take your security seriously, so please set up two-factor authentication for your account now. That will allow us to dispute Expensify Card digital transactions, and will reduce your risk for fraud.',
+ secureYourAccount: 'Secure your account',
},
beneficialOwnersStep: {
additionalInformation: 'Additional information',
diff --git a/src/languages/es.js b/src/languages/es.js
index 8b1ac18ef8e46..ef5bf45b1a10f 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -829,6 +829,9 @@ export default {
letsChatCTA: 'Sí, vamos a chatear',
letsChatText: 'Gracias. Necesitamos tu ayuda para verificar la información, pero podemos hacerlo rápidamente a través del chat. ¿Estás listo?',
letsChatTitle: '¡Vamos a chatear!',
+ enable2FATitle: 'Evita fraudes, activa la autenticación de dos factores!',
+ enable2FAText: 'Tu seguridad es importante para nosotros, por favor configura ahora la autenticación de dos factores. Eso nos permitirá disputar las transacciones de la Tarjeta Expensify y reducirá tu riesgo de fraude.',
+ secureYourAccount: 'Asegura tu cuenta',
},
beneficialOwnersStep: {
additionalInformation: 'Información adicional',
diff --git a/src/pages/LogOutPreviousUserPage.js b/src/pages/LogOutPreviousUserPage.js
index d9d36602721dd..843930b14e8a0 100644
--- a/src/pages/LogOutPreviousUserPage.js
+++ b/src/pages/LogOutPreviousUserPage.js
@@ -22,9 +22,21 @@ class LogOutPreviousUserPage extends Component {
.then((transitionURL) => {
const sessionEmail = lodashGet(this.props.session, 'email', '');
const isLoggingInAsNewUser = SessionUtils.isLoggingInAsNewUser(transitionURL, sessionEmail);
+
if (isLoggingInAsNewUser) {
Session.signOutAndRedirectToSignIn();
}
+
+ // We need to signin and fetch a new authToken, if a user was already authenticated in NewDot, and was redirected to OldDot
+ // and their authToken stored in Onyx becomes invalid.
+ // This workflow is triggered while setting up VBBA. User is redirected from NewDot to OldDot to set up 2FA, and then redirected back to NewDot
+ // On Enabling 2FA, authToken stored in Onyx becomes expired and hence we need to fetch new authToken
+ const shouldForceLogin = lodashGet(this.props, 'route.params.shouldForceLogin', '') === 'true';
+ if (shouldForceLogin) {
+ const email = lodashGet(this.props, 'route.params.email', '');
+ const shortLivedAuthToken = lodashGet(this.props, 'route.params.shortLivedAuthToken', '');
+ Session.signInWithShortLivedAuthToken(email, shortLivedAuthToken);
+ }
});
}
diff --git a/src/pages/ReimbursementAccount/Enable2FAPrompt.js b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
new file mode 100644
index 0000000000000..51c62b8957c1b
--- /dev/null
+++ b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import {View} from 'react-native';
+import Text from '../../components/Text';
+import styles from '../../styles/styles';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import * as Expensicons from '../../components/Icon/Expensicons';
+import * as Illustrations from '../../components/Icon/Illustrations';
+import Section from '../../components/Section';
+import * as Link from '../../libs/actions/Link';
+import ROUTES from '../../ROUTES';
+import themeColors from '../../styles/themes/default';
+
+const propTypes = {
+ ...withLocalizePropTypes,
+};
+const Enable2FAPrompt = props => (
+ {
+ Link.openOldDotLink(encodeURI(`settings?param={"section":"account","action":"enableTwoFactorAuth","exitTo":"${ROUTES.getBankAccountRoute()}","isFromNewDot":"true"}`));
+ },
+ icon: Expensicons.Shield,
+ shouldShowRightIcon: true,
+ iconRight: Expensicons.NewWindow,
+ iconFill: themeColors.success,
+ wrapperStyle: [styles.cardMenuItem],
+ },
+ ]}
+ >
+
+
+ {props.translate('validationStep.enable2FAText')}
+
+
+
+);
+
+Enable2FAPrompt.propTypes = propTypes;
+Enable2FAPrompt.displayName = 'Enable2FAPrompt';
+
+export default withLocalize(Enable2FAPrompt);
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 282c1c0fa9746..ea3d5a93c1158 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -1,11 +1,13 @@
import lodashGet from 'lodash/get';
import React from 'react';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
import Str from 'expensify-common/lib/str';
import _ from 'underscore';
import PropTypes from 'prop-types';
import styles from '../../styles/styles';
import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import compose from '../../libs/compose';
import * as BankAccounts from '../../libs/actions/BankAccounts';
import * as Report from '../../libs/actions/Report';
import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
@@ -25,6 +27,7 @@ import Section from '../../components/Section';
import CONST from '../../CONST';
import Button from '../../components/Button';
import MenuItem from '../../components/MenuItem';
+import Enable2FAPrompt from './Enable2FAPrompt';
const propTypes = {
...withLocalizePropTypes,
@@ -33,6 +36,19 @@ const propTypes = {
reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes.isRequired,
onBackButtonPress: PropTypes.func.isRequired,
+
+ /** User's account who is setting up bank account */
+ account: PropTypes.shape({
+
+ /** If user has Two factor authentication enabled */
+ requiresTwoFactorAuth: PropTypes.bool,
+ }),
+};
+
+const defaultProps = {
+ account: {
+ requiresTwoFactorAuth: false,
+ },
};
class ValidationStep extends React.Component {
@@ -109,6 +125,7 @@ class ValidationStep extends React.Component {
const maxAttemptsReached = lodashGet(this.props.reimbursementAccount, 'maxAttemptsReached');
const isVerifying = !maxAttemptsReached && state === BankAccount.STATE.VERIFYING;
+ const requiresTwoFactorAuth = lodashGet(this.props, 'account.requiresTwoFactorAuth');
return (
@@ -152,7 +169,7 @@ class ValidationStep extends React.Component {
{this.props.translate('validationStep.descriptionCTA')}
-
+
+ {!requiresTwoFactorAuth && (
+
+
+
+ )}
)}
{isVerifying && (
-
+
-
+ {!requiresTwoFactorAuth && (
+
+ )}
+
)}
);
@@ -212,5 +237,13 @@ class ValidationStep extends React.Component {
}
ValidationStep.propTypes = propTypes;
-
-export default withLocalize(ValidationStep);
+ValidationStep.defaultProps = defaultProps;
+
+export default compose(
+ withLocalize,
+ withOnyx({
+ account: {
+ key: ONYXKEYS.ACCOUNT,
+ },
+ }),
+)(ValidationStep);