Allow redirect to MagicLink after Invalid Validation Code

src/components/WelcomeText.js

@@ -21,7 +21,7 @@ const WelcomeText = (props) => {
     return (
         <>
             <Text style={[textSize, styles.textStrong, styles.mb1]}>
-                {props.translate('welcomeText.phrase1')}
+                {props.translate('welcomeText.welcome')}
             </Text>
             <Text style={[textSize]}>
                 {props.translate('welcomeText.phrase2')}

src/languages/en.js

@@ -136,10 +136,10 @@ export default {
     hello: 'Hello',
     phoneCountryCode: '1',
     welcomeText: {
-        phrase1: 'Welcome to the New Expensify! Enter your phone number or email to continue.',
+        welcome: 'Welcome to the New Expensify! Enter your phone number or email to continue.',
         phrase2: 'Money talks. And now that chat and payments are in one place, it\'s also easy.',
         phrase3: 'Your payments get to you as fast as you can get your point across.',
-        phrase4: 'Welcome back to the New Expensify! Please enter your password.',
+        welcomeBack: 'Welcome back to the New Expensify! Please enter your password.',
     },
     reportActionCompose: {
         addAction: 'Actions',
@@ -428,6 +428,7 @@ export default {
         linkHasBeenResent: 'Link has been re-sent',
         weSentYouMagicSignInLink: ({login}) => `We've sent a magic sign in link to ${login}. Check your Inbox and your Spam folder and wait 5-10 minutes before trying again.`,
         resendLink: 'Resend link',
+        validationCodeFailedMessage: 'It looks like there was an error with your validation link or it has expired.',
         unvalidatedAccount: 'This account exists but isn\'t validated, please check your inbox for your magic link.',
         newAccount: ({login, loginType}) => `Welcome ${login}, it's always great to see a new face around here! Please check your ${loginType} for a magic link to validate your account.`,
     },

src/languages/es.js

@@ -136,10 +136,10 @@ export default {
     hello: 'Hola',
     phoneCountryCode: '34',
     welcomeText: {
-        phrase1: 'Con el Nuevo Expensify, chat y pagos son lo mismo.',
+        welcome: 'Con el Nuevo Expensify, chat y pagos son lo mismo.',
         phrase2: 'El dinero habla. Y ahora que chat y pagos están en un mismo lugar, es también fácil.',
         phrase3: 'Tus pagos llegan tan rápido como tus mensajes.',
-        phrase4: '¡Bienvenido de vuelta al Nuevo Expensify! Por favor, introduce tu contraseña.',
+        welcomeBack: '¡Bienvenido de vuelta al Nuevo Expensify! Por favor, introduce tu contraseña.',
     },
     reportActionCompose: {
         addAction: 'Acción',
@@ -428,6 +428,7 @@ export default {
         linkHasBeenResent: 'El enlace se ha reenviado',
         weSentYouMagicSignInLink: ({login}) => `Hemos enviado un enlace mágico de inicio de sesión a ${login}. Verifica tu bandeja de entrada y tu carpeta de correo no deseado y espera de 5 a 10 minutos antes de intentarlo de nuevo.`,
         resendLink: 'Reenviar enlace',
+        validationCodeFailedMessage: 'Parece que hubo un error con el enlace de validación o ha caducado.',
         unvalidatedAccount: 'Esta cuenta existe pero no está validada, por favor busca el enlace mágico en tu bandeja de entrada',
         newAccount: ({login, loginType}) => `¡Bienvenido ${login}, es genial ver una cara nueva por aquí! En tu ${loginType} encontrarás un enlace para validar tu cuenta, por favor, revísalo`,
     },

src/libs/actions/Session/index.js

@@ -134,6 +134,7 @@ function fetchAccountDetails(login) {
                     validated: response.validated,
                     closed: response.isClosed,
                     forgotPassword: false,
+                    validateCodeExpired: false,
                 });
 
                 if (!response.accountExists) {
@@ -281,7 +282,7 @@ function resetPassword() {
     Onyx.merge(ONYXKEYS.ACCOUNT, {loading: true, forgotPassword: true});
     API.ResetPassword({email: credentials.login})
         .finally(() => {
-            Onyx.merge(ONYXKEYS.ACCOUNT, {loading: false});
+            Onyx.merge(ONYXKEYS.ACCOUNT, {loading: false, validateCodeExpired: false});
         });
 }
 
@@ -295,7 +296,7 @@ function resetPassword() {
  * @param {String} accountID
  */
 function setPassword(password, validateCode, accountID) {
-    Onyx.merge(ONYXKEYS.ACCOUNT, {...CONST.DEFAULT_ACCOUNT_DATA, loading: true});
+    Onyx.merge(ONYXKEYS.ACCOUNT, {...CONST.DEFAULT_ACCOUNT_DATA, loading: true, validateCodeExpired: false});
 
     API.SetPassword({
         password,
@@ -316,7 +317,16 @@ function setPassword(password, validateCode, accountID) {
                 return;
             }
 
-            Onyx.merge(ONYXKEYS.ACCOUNT, {error: Localize.translateLocal('setPasswordPage.accountNotValidated')});
+            const login = lodashGet(response, 'data.email', null);
+            Onyx.merge(ONYXKEYS.ACCOUNT, {
+                validated: true, accountExists: true, validateCodeExpired: true, error: Localize.translateLocal('setPasswordPage.accountNotValidated'),
+            });
+
+            // This login is set with email received from the API so that the resend link can work if the user has hit a direct URL
+            if (login) {
+                Onyx.merge(ONYXKEYS.CREDENTIALS, {login});
+            }
+            Navigation.navigate(ROUTES.HOME);
         })
         .finally(() => {
             Onyx.merge(ONYXKEYS.ACCOUNT, {loading: false});

src/pages/signin/ResendValidationForm.js

@@ -101,6 +101,8 @@ class ResendValidationForm extends React.Component {
             });
         } else if (isOldUnvalidatedAccount) {
             message = this.props.translate('resendValidationForm.unvalidatedAccount');
+        } else if (this.props.account.validateCodeExpired) {
+            message = this.props.translate('resendValidationForm.validationCodeFailedMessage');
         } else {
             message = this.props.translate('resendValidationForm.weSentYouMagicSignInLink', {
                 login,

src/pages/signin/SignInPage.js

@@ -4,6 +4,7 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
 import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
 import updateUnread from '../../libs/UnreadIndicatorUpdater/updateUnread/index';
@@ -59,9 +60,12 @@ class SignInPage extends Component {
         // - A login has not been entered yet
         const showLoginForm = !this.props.credentials.login;
 
+        const validateCodeExpired = lodashGet(this.props.account, 'validateCodeExpired', false);
+
         const validAccount = this.props.account.accountExists
             && this.props.account.validated
-            && !this.props.account.forgotPassword;
+            && !this.props.account.forgotPassword
+            && !validateCodeExpired;
 
         // Show the password form if
         // - A login has been entered
@@ -76,21 +80,23 @@ class SignInPage extends Component {
         // - A login has been entered
         // - AND a GitHub username has been entered OR they already have access to this app
         // - AND an account did not exist or is not validated for that login
-        const showResendValidationLinkForm = this.props.credentials.login && !validAccount;
+        const shouldShowResendValidationLinkForm = this.props.credentials.login && !validAccount;
 
-        const welcomeText = this.props.translate(`welcomeText.${showPasswordForm ? 'phrase4' : 'phrase1'}`);
+        const welcomeText = shouldShowResendValidationLinkForm
+            ? ''
+            : this.props.translate(`welcomeText.${showPasswordForm ? 'welcomeBack' : 'welcome'}`);
 
         return (
             <SafeAreaView style={[styles.signInPage]}>
                 <SignInPageLayout
                     welcomeText={welcomeText}
-                    shouldShowWelcomeText={showLoginForm || showPasswordForm || !showResendValidationLinkForm}
+                    shouldShowWelcomeText={showLoginForm || showPasswordForm || !shouldShowResendValidationLinkForm}
                 >
                     {/* LoginForm and PasswordForm must use the isVisible prop. This keeps them mounted, but visually hidden
                     so that password managers can access the values. Conditionally rendering these components will break this feature. */}
                     <LoginForm isVisible={showLoginForm} />
                     <PasswordForm isVisible={showPasswordForm} />
-                    {showResendValidationLinkForm && <ResendValidationForm />}
+                    {shouldShowResendValidationLinkForm && <ResendValidationForm />}
                 </SignInPageLayout>
             </SafeAreaView>
         );