Add unlink secondary login flow

src/ROUTES.js

@@ -117,6 +117,7 @@ export default {
     VALIDATE_LOGIN: 'v/:accountID/:validateCode',
     GET_ASSISTANCE: 'get-assistance/:taskID',
     getGetAssistanceRoute: taskID => `get-assistance/${taskID}`,
+    UNLINK_LOGIN: 'u/:accountID/:validateCode',
 
     // This is a special validation URL that will take the user to /workspace/new after validation. This is used
     // when linking users from e.com in order to share a session in this app.

src/languages/en.js

@@ -672,7 +672,13 @@ export default {
         linkHasBeenResent: 'Link has been re-sent',
         weSentYouMagicSignInLink: ({login, loginType}) => `I've sent a magic sign-in link to ${login}. Please check your ${loginType} to sign in.`,
         resendLink: 'Resend link',
-        validationCodeFailedMessage: 'It looks like there was an error with your validation link or it has expired.',
+    },
+    unlinkLoginForm: {
+        toValidateLogin: ({primaryLogin, secondaryLogin}) => `To validate ${secondaryLogin}, please resend the magic code from the Account Settings of ${primaryLogin}.`,
+        noLongerHaveAccess: ({primaryLogin}) => `If you no longer have access to ${primaryLogin}, please unlink your accounts.`,
+        unlink: 'Unlink',
+        linkSent: 'Link sent!',
+        succesfullyUnlinkedLogin: 'Secondary login successfully unlinked!',
     },
     detailsPage: {
         localTime: 'Local time',

src/languages/es.js

@@ -671,7 +671,13 @@ export default {
         linkHasBeenResent: 'El enlace se ha reenviado',
         weSentYouMagicSignInLink: ({login, loginType}) => `Te he enviado un hiperenlace mágico para iniciar sesión a ${login}. Por favor, revisa tu ${loginType}`,
         resendLink: 'Reenviar enlace',
-        validationCodeFailedMessage: 'Parece que hubo un error con el enlace de validación o ha caducado.',
+    },
+    unlinkLoginForm: {
+        toValidateLogin: ({primaryLogin, secondaryLogin}) => `Para validar ${secondaryLogin}, reenvía el código mágico desde la Configuración de la cuenta de ${primaryLogin}.`,
+        noLongerHaveAccess: ({primaryLogin}) => `Si ya no tienes acceso a ${primaryLogin} por favor, desvincula las cuentas.`,
+        unlink: 'Desvincular',
+        linkSent: '¡Enlace enviado!',
+        succesfullyUnlinkedLogin: '¡Nombre de usuario secundario desvinculado correctamente!',
     },
     detailsPage: {
         localTime: 'Hora local',

src/libs/Navigation/AppNavigator/PublicScreens.js

@@ -6,6 +6,7 @@ import ValidateLoginPage from '../../../pages/ValidateLoginPage';
 import LogInWithShortLivedAuthTokenPage from '../../../pages/LogInWithShortLivedAuthTokenPage';
 import SCREENS from '../../../SCREENS';
 import defaultScreenOptions from './defaultScreenOptions';
+import UnlinkLoginPage from '../../../pages/UnlinkLoginPage';
 
 const RootStack = createStackNavigator();
 
@@ -26,6 +27,11 @@ const PublicScreens = () => (
             options={defaultScreenOptions}
             component={ValidateLoginPage}
         />
+        <RootStack.Screen
+            name="UnlinkLogin"
+            options={defaultScreenOptions}
+            component={UnlinkLoginPage}
+        />
         <RootStack.Screen
             name="SetPassword"
             options={defaultScreenOptions}

src/libs/Navigation/linkingConfig.js

@@ -27,6 +27,7 @@ export default {
             // Main Routes
             SetPassword: ROUTES.SET_PASSWORD_WITH_VALIDATE_CODE,
             ValidateLogin: ROUTES.VALIDATE_LOGIN,
+            UnlinkLogin: ROUTES.UNLINK_LOGIN,
             [SCREENS.TRANSITION_FROM_OLD_DOT]: ROUTES.TRANSITION_FROM_OLD_DOT,
             Concierge: ROUTES.CONCIERGE,
 

src/libs/actions/Session/index.js

@@ -187,6 +187,7 @@ function beginSignIn(login) {
             value: {
                 ...CONST.DEFAULT_ACCOUNT_DATA,
                 isLoading: true,
+                message: null,
             },
         },
     ];
@@ -646,6 +647,73 @@ function authenticatePusher(socketID, channelName, callback) {
     });
 }
 
+/**
+ * Request a new validation link / magic code to unlink an unvalidated secondary login from a primary login
+ */
+function requestUnlinkValidationLink() {
+    const optimisticData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.ACCOUNT,
+        value: {
+            isLoading: true,
+            errors: null,
+            message: null,
+        },
+    }];
+    const successData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.ACCOUNT,
+        value: {
+            isLoading: false,
+            message: Localize.translateLocal('unlinkLoginForm.linkSent'),
+        },
+    }];
+    const failureData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.ACCOUNT,
+        value: {
+            isLoading: false,
+        },
+    }];
+
+    API.write('RequestUnlinkValidationLink', {email: credentials.login}, {optimisticData, successData, failureData});
+}
+
+function unlinkLogin(accountID, validateCode) {
+    const optimisticData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.ACCOUNT,
+        value: {
+            ...CONST.DEFAULT_ACCOUNT_DATA,
+            isLoading: true,
+        },
+    }];
+    const successData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.ACCOUNT,
+        value: {
+            isLoading: false,
+            message: Localize.translateLocal('unlinkLoginForm.succesfullyUnlinkedLogin'),
+        },
+    },
+    {
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.CREDENTIALS,
+        value: {
+            login: '',
+        },
+    }];
+    const failureData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.ACCOUNT,
+        value: {
+            isLoading: false,
+        },
+    }];
+
+    API.write('UnlinkLogin', {accountID, validateCode}, {optimisticData, successData, failureData});
+}
+
 export {
     beginSignIn,
     updatePasswordAndSignin,
@@ -662,6 +730,8 @@ export {
     resendLinkWithValidateCode,
     resetPassword,
     resendResetPassword,
+    requestUnlinkValidationLink,
+    unlinkLogin,
     clearSignInData,
     clearAccountMessages,
     authenticatePusher,

src/pages/UnlinkLoginPage.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import lodashGet from 'lodash/get';
+import {
+    propTypes as validateLinkPropTypes,
+    defaultProps as validateLinkDefaultProps,
+} from './ValidateLoginPage/validateLinkPropTypes';
+import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator';
+import Navigation from '../libs/Navigation/Navigation';
+import * as Session from '../libs/actions/Session';
+import ROUTES from '../ROUTES';
+
+const propTypes = {
+    /** The accountID and validateCode are passed via the URL */
+    route: validateLinkPropTypes,
+};
+
+const defaultProps = {
+    route: validateLinkDefaultProps,
+};
+
+const UnlinkLoginPage = (props) => {
+    const accountID = lodashGet(props.route.params, 'accountID', '');
+    const validateCode = lodashGet(props.route.params, 'validateCode', '');
+
+    Session.unlinkLogin(accountID, validateCode);
+    Navigation.navigate(ROUTES.HOME);
+    return <FullScreenLoadingIndicator />;
+};
+
+UnlinkLoginPage.propTypes = propTypes;
+UnlinkLoginPage.defaultProps = defaultProps;
+UnlinkLoginPage.displayName = 'UnlinkLoginPage';
+
+export default UnlinkLoginPage;

src/pages/signin/LoginForm.js

@@ -193,10 +193,10 @@ class LoginForm extends React.Component {
                         {this.props.account.success}
                     </Text>
                 )}
-                {!_.isEmpty(this.props.closeAccount.success) && (
+                {!_.isEmpty(this.props.closeAccount.success || this.props.account.message) && (
 
                     // DotIndicatorMessage mostly expects onyxData errors, so we need to mock an object so that the messages looks similar to prop.account.errors
-                    <DotIndicatorMessage style={[styles.mv2]} type="success" messages={{0: this.props.closeAccount.success}} />
+                    <DotIndicatorMessage style={[styles.mv2]} type="success" messages={{0: this.props.closeAccount.success || this.props.account.message}} />
                 )}
                 { // We need to unmount the submit button when the component is not visible so that the Enter button
                   // key handler gets unsubscribed and does not conflict with the Password Form

src/pages/signin/SignInPage.js

@@ -16,6 +16,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import Performance from '../../libs/Performance';
 import * as App from '../../libs/actions/App';
 import Permissions from '../../libs/Permissions';
+import UnlinkLoginForm from './UnlinkLoginForm';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
 import * as Localize from '../../libs/Localize';
 
@@ -29,6 +30,9 @@ const propTypes = {
 
         /** Whether the account is validated */
         validated: PropTypes.bool,
+
+        /** The primaryLogin associated with the account */
+        primaryLogin: PropTypes.string,
     }),
 
     /** List of betas available to current user */
@@ -65,31 +69,46 @@ class SignInPage extends Component {
         // - AND a validateCode has not been cached with sign in link
         const showLoginForm = !this.props.credentials.login && !this.props.credentials.validateCode;
 
+        // Show the unlink form if
+        // - A login has been entered
+        // - AND the login is not the primary login
+        // - AND the login is not validated
+        const showUnlinkLoginForm = this.props.credentials.login
+            && this.props.account.primaryLogin
+            && this.props.account.primaryLogin !== this.props.credentials.login
+            && !this.props.account.validated;
+
         // Show the old password form if
         // - A login has been entered
         // - AND an account exists and is validated for this login
         // - AND a password hasn't been entered yet
         // - AND haven't forgotten password
+        // - AND the login isn't an unvalidated secondary login
         // - AND the user is NOT on the passwordless beta
         const showPasswordForm = Boolean(this.props.credentials.login)
             && this.props.account.validated
             && !this.props.credentials.password
             && !this.props.account.forgotPassword
+            && !showUnlinkLoginForm
             && !Permissions.canUsePasswordlessLogins(this.props.betas);
 
         // Show the new magic code / validate code form if
         // - A login has been entered or a validateCode has been cached from sign in link
+        // - AND the login isn't an unvalidated secondary login
         // - AND the user is on the 'passwordless' beta
         const showValidateCodeForm = (this.props.credentials.login
             || this.props.credentials.validateCode)
+            && !showUnlinkLoginForm
             && Permissions.canUsePasswordlessLogins(this.props.betas);
 
         // Show the resend validation link form if
         // - A login has been entered
         // - AND is not validated or password is forgotten
+        // - AND the login isn't an unvalidated secondary login
         // - AND user is not on 'passwordless' beta
         const showResendValidationForm = Boolean(this.props.credentials.login)
             && (!this.props.account.validated || this.props.account.forgotPassword)
+            && !showUnlinkLoginForm
             && !Permissions.canUsePasswordlessLogins(this.props.betas);
 
         let welcomeHeader = '';
@@ -121,6 +140,8 @@ class SignInPage extends Component {
             welcomeText = this.props.isSmallScreenWidth
                 ? `${this.props.translate('welcomeText.welcomeBack')} ${this.props.translate('welcomeText.enterPassword')}`
                 : this.props.translate('welcomeText.enterPassword');
+        } else if (showUnlinkLoginForm) {
+            welcomeHeader = this.props.isSmallScreenWidth ? this.props.translate('login.hero.header') : this.props.translate('welcomeText.welcomeBack');
         } else if (!showResendValidationForm) {
             welcomeHeader = this.props.isSmallScreenWidth ? this.props.translate('login.hero.header') : this.props.translate('welcomeText.getStarted');
             welcomeText = this.props.isSmallScreenWidth ? this.props.translate('welcomeText.getStarted') : '';
@@ -131,8 +152,8 @@ class SignInPage extends Component {
                 <SignInPageLayout
                     welcomeHeader={welcomeHeader}
                     welcomeText={welcomeText}
-                    shouldShowWelcomeHeader={(showLoginForm || showPasswordForm || showValidateCodeForm || !showResendValidationForm) || !this.props.isSmallScreenWidth}
-                    shouldShowWelcomeText={showLoginForm || showPasswordForm || showValidateCodeForm || !showResendValidationForm}
+                    shouldShowWelcomeHeader={(showLoginForm || showPasswordForm || showValidateCodeForm || showUnlinkLoginForm) || !this.props.isSmallScreenWidth}
+                    shouldShowWelcomeText={showLoginForm || showPasswordForm || showValidateCodeForm}
                 >
                     {/* 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. */}
@@ -143,6 +164,7 @@ class SignInPage extends Component {
                         <PasswordForm isVisible={showPasswordForm} />
                     )}
                     {showResendValidationForm && <ResendValidationForm />}
+                    {showUnlinkLoginForm && <UnlinkLoginForm />}
                 </SignInPageLayout>
             </SafeAreaView>
         );