feat: add 2-factor authentication

ios/Podfile.lock

@@ -1014,7 +1014,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   Airship: c70eed50e429f97f5adb285423c7291fb7a032ae
   AirshipFrameworkProxy: 2eefb77bb77b5120b0f48814b0d44439aa3ad415
-  boost: a7c83b31436843459a1961bfd74b96033dc77234
+  boost: 57d2868c099736d80fcd648bf211b4431e51a558
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: ff54429f0110d3c722630a98096ba689c39f6d5f
@@ -1057,7 +1057,7 @@ SPEC CHECKSUMS:
   Permission-LocationWhenInUse: 3ba99e45c852763f730eabecec2870c2382b7bd4
   Plaid: 7d340abeadb46c7aa1a91f896c5b22395a31fcf2
   PromisesObjC: 09985d6d70fbe7878040aa746d78236e6946d2ef
-  RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda
+  RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: e9e7b8b45aa9bedb2fdad71740adf07a7265b9be
   RCTTypeSafety: 9ae0e9206625e995f0df4d5b9ddc94411929fb30
   React: a71c8e1380f07e01de721ccd52bcf9c03e81867d
@@ -1129,4 +1129,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: cd132e281e9e3d7e6ec2c99c08e6ec32b37886f8
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.12.0

package.json

@@ -126,6 +126,7 @@
     "react-native-webview": "^11.17.2",
     "react-pdf": "5.7.2",
     "react-plaid-link": "3.3.2",
+    "react-qr-code": "^2.0.11",
     "react-web-config": "^1.0.0",
     "save": "^2.4.0",
     "semver": "^7.3.8",

src/ROUTES.js

@@ -54,6 +54,11 @@ export default {
     SETTINGS_CONTACT_METHOD_DETAILS: `${SETTINGS_CONTACT_METHODS}/:contactMethod/details`,
     getEditContactMethodRoute: contactMethod => `${SETTINGS_CONTACT_METHODS}/${encodeURIComponent(contactMethod)}/details`,
     SETTINGS_NEW_CONTACT_METHOD: `${SETTINGS_CONTACT_METHODS}/new`,
+    SETTINGS_TWO_FACTOR_IS_ENABLED: 'settings/security/two-factor-auth/enabled',
+    SETTINGS_TWO_FACTOR_DISABLE: 'settings/security/two-factor-auth/disable',
+    SETTINGS_TWO_FACTOR_CODES: 'settings/security/two-factor-auth/codes',
+    SETTINGS_TWO_FACTOR_VERIFY: 'settings/security/two-factor-auth/verify',
+    SETTINGS_TWO_FACTOR_SUCCESS: 'settings/security/two-factor-auth/success',
     NEW_GROUP: 'new/group',
     NEW_CHAT: 'new/chat',
     NEW_TASK,

src/components/TextFileLink/index.android.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import RNFetchBlob from 'react-native-blob-util';
+import * as FileUtils from '../../libs/fileDownload/FileUtils';
+
+const propTypes = {
+    fileName: PropTypes.string,
+    textContent: PropTypes.string,
+    children: PropTypes.func,
+};
+
+const defaultProps = {
+    fileName: '',
+    textContent: '',
+    children: () => {},
+};
+
+const TextFileLink = (props) => {
+    const downloadFile = () => {
+        const dir = RNFetchBlob.fs.dirs.DocumentDir;
+        const path = `${dir}/${props.fileName}.txt`;
+
+        RNFetchBlob.fs.writeFile(path, props.textContent, 'utf8')
+            .then(() => {
+                RNFetchBlob.MediaCollection.copyToMediaStore({
+                    name: props.fileName,
+                    parentFolder: '', // subdirectory in the Media Store, empty goes to 'Downloads'
+                    mimeType: 'text/plain',
+                },
+                'Download',
+                path)
+                    .then(() => {
+                        FileUtils.showSuccessAlert();
+                    })
+                    .catch(() => {
+                        FileUtils.showGeneralErrorAlert();
+                    })
+                    .finally(() => {
+                        RNFetchBlob.fs.unlink(path);
+                    });
+            });
+    };
+
+    return props.children(downloadFile);
+};
+
+TextFileLink.defaultProps = defaultProps;
+TextFileLink.propTypes = propTypes;
+TextFileLink.displayName = 'TextFileLink';
+export default TextFileLink;

src/components/TextFileLink/index.ios.js

@@ -0,0 +1,41 @@
+import {Share} from 'react-native';
+import PropTypes from 'prop-types';
+import RNFetchBlob from 'react-native-blob-util';
+import * as FileUtils from '../../libs/fileDownload/FileUtils';
+
+const propTypes = {
+    fileName: PropTypes.string,
+    textContent: PropTypes.string,
+    children: PropTypes.func,
+};
+
+const defaultProps = {
+    fileName: '',
+    textContent: '',
+    children: () => {},
+};
+
+const TextFileLink = (props) => {
+    const downloadFile = () => {
+        const dir = RNFetchBlob.fs.dirs.DocumentDir;
+        const path = `${dir}/${props.fileName}.txt`;
+
+        RNFetchBlob.fs.writeFile(path, props.textContent, 'utf8')
+            .then(() => {
+                Share.share({url: path, title: props.fileName})
+                    .catch(() => {
+                        FileUtils.showGeneralErrorAlert();
+                    })
+                    .finally(() => {
+                        RNFetchBlob.fs.unlink(path);
+                    });
+            });
+    };
+
+    return props.children(downloadFile);
+};
+
+TextFileLink.defaultProps = defaultProps;
+TextFileLink.propTypes = propTypes;
+TextFileLink.displayName = 'TextFileLink';
+export default TextFileLink;

src/components/TextFileLink/index.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    fileName: PropTypes.string,
+    textContent: PropTypes.string,
+    children: PropTypes.func,
+};
+
+const defaultProps = {
+    fileName: '',
+    textContent: '',
+    children: () => {},
+};
+
+const TextFileLink = (props) => {
+    const downloadFile = () => {
+        const blob = new Blob([props.textContent], {type: 'text/plain'});
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.download = `${props.fileName}.txt`;
+        link.href = url;
+        link.click();
+    };
+
+    return props.children(downloadFile);
+};
+
+TextFileLink.defaultProps = defaultProps;
+TextFileLink.propTypes = propTypes;
+TextFileLink.displayName = 'TextFileLink';
+export default TextFileLink;

src/languages/en.js

@@ -8,6 +8,7 @@ export default {
         yes: 'Yes',
         no: 'No',
         ok: 'OK',
+        buttonConfirm: 'Got it',
         attachment: 'Attachment',
         to: 'To',
         optional: 'Optional',
@@ -24,6 +25,7 @@ export default {
         zoom: 'Zoom',
         password: 'Password',
         magicCode: 'Magic code',
+        twoFactorCode: 'Two factor code',
         workspaces: 'Workspaces',
         profile: 'Profile',
         payments: 'Payments',
@@ -477,10 +479,36 @@ export default {
             newPassword: 'Your password must have at least 8 characters, 1 capital letter, 1 lowercase letter, and 1 number.',
         },
     },
+    twoFactorAuth: {
+        headerTitle: 'Two-factor authentication',
+        twoFactorAuthEnabled: 'Two-factor authentication enabled',
+        whatIsTwoFactorAuth: 'Two-factor authentication (2FA) helps keep your account safe. When logging in, you’ll need to enter a code generated by your preferred authenticator app.',
+        disableTwoFactorAuth: 'Disable two-factor authentication',
+        disableTwoFactorAuthConfirmation: 'Two-factor authentication keeps your account more secure. Are you sure you want to disable it?',
+        disabled: 'Two-factor authentication is now disabled',
+        noAuthenticatorApp: 'You’ll no longer require an authenticator app to log into Expensify.',
+        stepCodes: 'Step 1: 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.',
+        stepVerify: 'Step 2: Verify',
+        scanCode: 'Scan the QR code using your',
+        authenticatorApp: 'authenticator app',
+        addKey: 'Or add this secret key to your authenticator app:',
+        enterCode: 'Then enter the six digit code generated from your authenticator app.',
+        stepSuccess: 'Step 3: Finished',
+        enabled: 'Two-factor authentication is now enabled!',
+        congrats: 'Congrats, now you’ve got that extra security.',
+
+    },
+    twoFactorAuthForm: {
+        error: {
+            pleaseFillTwoFactorAuth: 'Please enter your two factor code',
+            incorrect2fa: 'Incorrect two factor authentication code. Please try again.',
+        },
+    },
     passwordConfirmationScreen: {
         passwordUpdated: 'Password updated!',
         allSet: 'You’re all set. Keep your new password safe.',
-        gotIt: 'Got it',
     },
     addPayPalMePage: {
         enterYourUsernameToGetPaidViaPayPal: 'Get paid back via PayPal.',
@@ -607,7 +635,6 @@ export default {
     validateCodeForm: {
         magicCodeNotReceived: "Didn't receive a magic code?",
         enterAuthenticatorCode: 'Please enter your authenticator code',
-        twoFactorCode: 'Two factor code',
         requiredWhen2FAEnabled: 'Required when 2FA is enabled',
         codeSent: 'Magic code sent!',
         error: {
@@ -622,7 +649,6 @@ export default {
         pleaseFillTwoFactorAuth: 'Please enter your two factor code',
         enterYourTwoFactorAuthenticationCodeToContinue: 'Enter your two factor authentication code to continue',
         forgot: 'Forgot?',
-        twoFactorCode: 'Two factor code',
         requiredWhen2FAEnabled: 'Required when 2FA is enabled',
         error: {
             incorrectPassword: 'Incorrect password. Please try again.',
@@ -721,7 +747,6 @@ export default {
         validateAccountError: 'In order to finish setting up your bank account, you must validate your account. Please check your email to validate your account, and return here to finish up!',
         hasPhoneLoginError: 'To add a verified bank account please ensure your primary login is a valid email and try again. You can add your phone number as a secondary login.',
         hasBeenThrottledError: 'There was an error adding your bank account. Please wait a few minutes and try again.',
-        buttonConfirm: 'Got it',
         error: {
             noBankAccountAvailable: 'Sorry, no bank account is available',
             noBankAccountSelected: 'Please choose an account',

src/languages/es.js

@@ -7,6 +7,7 @@ export default {
         yes: 'Sí',
         no: 'No',
         ok: 'OK',
+        buttonConfirm: 'Ok, entendido',
         attachment: 'Archivo adjunto',
         to: 'A',
         optional: 'Opcional',
@@ -23,6 +24,7 @@ export default {
         zoom: 'Zoom',
         password: 'Contraseña',
         magicCode: 'Código mágico',
+        twoFactorCode: 'Autenticación de 2 factores',
         workspaces: 'Espacios de trabajo',
         profile: 'Perfil',
         payments: 'Pagos',
@@ -476,10 +478,35 @@ export default {
             newPassword: 'Su contraseña debe tener al menos 8 caracteres, 1 letra mayúscula, 1 letra minúscula y 1 número.',
         },
     },
+    twoFactorAuth: {
+        headerTitle: 'Autenticación de 2 factores',
+        twoFactorAuthEnabled: 'Autenticación de dos factores habilitada',
+        whatIsTwoFactorAuth: 'La autenticación de dos factores (2FA) ayuda a mantener su cuenta segura. Al iniciar sesión, deberá ingresar un código generado por su aplicación de autenticación preferida.',
+        disableTwoFactorAuth: 'Deshabilitar la autenticación de dos factores',
+        disableTwoFactorAuthConfirmation: 'La autenticación de dos factores mantiene su cuenta más segura. ¿Estás seguro de que quieres desactivarlo?',
+        disabled: 'La autenticación de dos factores ahora está deshabilitada',
+        noAuthenticatorApp: 'Ya no necesitará una aplicación de autenticación para iniciar sesión en Expensify.',
+        stepCodes: 'Paso 1: Códigos de recuperación',
+        keepCodesSafe: '¡Mantenga estos códigos de recuperación seguros!',
+        codesLoseAccess: 'Si pierde el acceso a su aplicación de autenticación y no tiene estos códigos, perderá el acceso a su cuenta. \n\nNota: Configurar la autenticación de dos factores cerrará la sesión de todas las demás sesiones activas.',
+        stepVerify: 'Paso 2: Verificar',
+        scanCode: 'Escanea el código QR con tu',
+        authenticatorApp: 'aplicación de autenticación',
+        addKey: 'O agregue esta clave secreta a su aplicación de autenticación:',
+        enterCode: 'Luego ingrese el código de seis dígitos generado desde su aplicación de autenticación.',
+        stepSuccess: 'Paso 3: Terminado',
+        enabled: '¡La autenticación de dos factores ahora está habilitada!',
+        congrats: 'Felicidades, ahora tienes esa seguridad adicional.',
+    },
+    twoFactorAuthForm: {
+        error: {
+            pleaseFillTwoFactorAuth: 'Por favor, introduce tu código 2 factores',
+            incorrect2fa: 'Código de autenticación de 2 factores incorrecto. Por favor, inténtalo de nuevo',
+        },
+    },
     passwordConfirmationScreen: {
         passwordUpdated: 'Contraseña actualizada!',
         allSet: 'Todo está listo. Guarda tu contraseña en un lugar seguro.',
-        gotIt: 'Ok, entendido',
     },
     addPayPalMePage: {
         enterYourUsernameToGetPaidViaPayPal: 'Recibe pagos vía PayPal.',
@@ -606,7 +633,6 @@ export default {
     validateCodeForm: {
         magicCodeNotReceived: '¿No recibiste un código mágico?',
         enterAuthenticatorCode: 'Por favor, introduce el código de autenticador',
-        twoFactorCode: 'Autenticación de 2 factores',
         requiredWhen2FAEnabled: 'Obligatorio cuando A2F está habilitado',
         codeSent: '¡Código mágico enviado!',
         error: {
@@ -621,7 +647,6 @@ export default {
         pleaseFillTwoFactorAuth: 'Por favor, introduce tu código 2 factores',
         enterYourTwoFactorAuthenticationCodeToContinue: 'Introduce el código de autenticación de dos factores para continuar',
         forgot: '¿Has olvidado la contraseña?',
-        twoFactorCode: 'Autenticación de 2 factores',
         requiredWhen2FAEnabled: 'Obligatorio cuando A2F está habilitado',
         error: {
             incorrectPassword: 'Contraseña incorrecta. Por favor, inténtalo de nuevo.',
@@ -720,7 +745,6 @@ export default {
         validateAccountError: 'Para terminar de configurar tu cuenta bancaria, debes validar tu cuenta de Expensify. Por favor, revisa tu correo electrónico para validar tu cuenta y vuelve aquí para continuar.',
         hasPhoneLoginError: 'Para agregar una cuenta bancaria verificada, asegúrate de que tu nombre de usuario principal sea un correo electrónico válido y vuelve a intentarlo. Puedes agregar tu número de teléfono como nombre de usuario secundario.',
         hasBeenThrottledError: 'Se produjo un error al intentar agregar tu cuenta bancaria. Por favor, espera unos minutos e inténtalo de nuevo.',
-        buttonConfirm: 'OK',
         error: {
             noBankAccountAvailable: 'Lo sentimos, no hay ninguna cuenta bancaria disponible',
             noBankAccountSelected: 'Por favor, elige una cuenta bancaria',