diff --git a/src/languages/en.ts b/src/languages/en.ts index 42dc255f51e9..1446d9f5dbb6 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -352,6 +352,8 @@ export default { phoneCountryCode: '1', welcomeText: { getStarted: 'Get started below.', + anotherLoginPageIsOpen: 'Another login page is open.', + anotherLoginPageIsOpenExplanation: "You've opened the login page in a separate tab, please login from that specific tab.", welcomeBack: 'Welcome back!', welcome: 'Welcome!', phrase2: "Money talks. And now that chat and payments are in one place, it's also easy.", diff --git a/src/languages/es.ts b/src/languages/es.ts index 0ef702ac7b73..3eaf94b86706 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -343,6 +343,8 @@ export default { phoneCountryCode: '34', welcomeText: { getStarted: 'Comience a continuación.', + anotherLoginPageIsOpen: 'Otra página de inicio de sesión está abierta.', + anotherLoginPageIsOpenExplanation: 'Ha abierto la página de inicio de sesión en una pestaña separada, inicie sesión desde esa pestaña específica.', welcomeBack: '¡Bienvenido de nuevo!', welcome: '¡Bienvenido!', phrase2: 'El dinero habla. Y ahora que chat y pagos están en un mismo lugar, es también fácil.', diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js index 290c528672d2..41fa724f580c 100644 --- a/src/pages/signin/SignInPage.js +++ b/src/pages/signin/SignInPage.js @@ -19,6 +19,7 @@ import * as StyleUtils from '../../styles/StyleUtils'; import useLocalize from '../../hooks/useLocalize'; import useWindowDimensions from '../../hooks/useWindowDimensions'; import Log from '../../libs/Log'; +import * as ActiveClientManager from '../../libs/ActiveClientManager'; const propTypes = { /** The details about the account that the user is signing in with */ @@ -46,6 +47,9 @@ const propTypes = { validateCode: PropTypes.string, }), + /** Active Clients connected to ONYX Database */ + activeClients: PropTypes.arrayOf(PropTypes.string), + /** Whether or not the sign in page is being rendered in the RHP modal */ isInModal: PropTypes.bool, }; @@ -54,6 +58,7 @@ const defaultProps = { account: {}, credentials: {}, isInModal: false, + activeClients: [], }; /** @@ -64,13 +69,13 @@ const defaultProps = { * @param {Boolean} hasEmailDeliveryFailure * @returns {Object} */ -function getRenderOptions({hasLogin, hasValidateCode, hasAccount, isPrimaryLogin, isAccountValidated, hasEmailDeliveryFailure}) { - const shouldShowLoginForm = !hasLogin && !hasValidateCode; +function getRenderOptions({hasLogin, hasValidateCode, hasAccount, isPrimaryLogin, isAccountValidated, hasEmailDeliveryFailure, isClientTheLeader}) { + const shouldShowLoginForm = isClientTheLeader && !hasLogin && !hasValidateCode; const shouldShowEmailDeliveryFailurePage = hasLogin && hasEmailDeliveryFailure; const isUnvalidatedSecondaryLogin = hasLogin && !isPrimaryLogin && !isAccountValidated && !hasEmailDeliveryFailure; const shouldShowValidateCodeForm = hasAccount && (hasLogin || hasValidateCode) && !isUnvalidatedSecondaryLogin && !hasEmailDeliveryFailure; const shouldShowWelcomeHeader = shouldShowLoginForm || shouldShowValidateCodeForm || isUnvalidatedSecondaryLogin; - const shouldShowWelcomeText = shouldShowLoginForm || shouldShowValidateCodeForm; + const shouldShowWelcomeText = shouldShowLoginForm || shouldShowValidateCodeForm || !isClientTheLeader; return { shouldShowLoginForm, shouldShowEmailDeliveryFailurePage, @@ -81,7 +86,7 @@ function getRenderOptions({hasLogin, hasValidateCode, hasAccount, isPrimaryLogin }; } -function SignInPage({credentials, account, isInModal}) { +function SignInPage({credentials, account, isInModal, activeClients}) { const {translate, formatPhoneNumber} = useLocalize(); const {isSmallScreenWidth} = useWindowDimensions(); const shouldShowSmallScreen = isSmallScreenWidth || isInModal; @@ -96,6 +101,8 @@ function SignInPage({credentials, account, isInModal}) { App.setLocale(Localize.getDevicePreferredLocale()); }, []); + const isClientTheLeader = activeClients && ActiveClientManager.isClientTheLeader(); + const {shouldShowLoginForm, shouldShowEmailDeliveryFailurePage, shouldShowUnlinkLoginForm, shouldShowValidateCodeForm, shouldShowWelcomeHeader, shouldShowWelcomeText} = getRenderOptions( { hasLogin: Boolean(credentials.login), @@ -104,13 +111,18 @@ function SignInPage({credentials, account, isInModal}) { isPrimaryLogin: !account.primaryLogin || account.primaryLogin === credentials.login, isAccountValidated: Boolean(account.validated), hasEmailDeliveryFailure: Boolean(account.hasEmailDeliveryFailure), + isClientTheLeader, }, ); let welcomeHeader = ''; let welcomeText = ''; const headerText = translate('login.hero.header'); - if (shouldShowLoginForm) { + + if (!isClientTheLeader) { + welcomeHeader = translate('welcomeText.anotherLoginPageIsOpen'); + welcomeText = translate('welcomeText.anotherLoginPageIsOpenExplanation'); + } else if (shouldShowLoginForm) { welcomeHeader = isSmallScreenWidth ? headerText : translate('welcomeText.getStarted'); welcomeText = isSmallScreenWidth ? translate('welcomeText.getStarted') : ''; } else if (shouldShowValidateCodeForm) { @@ -185,4 +197,12 @@ SignInPage.displayName = 'SignInPage'; export default withOnyx({ account: {key: ONYXKEYS.ACCOUNT}, credentials: {key: ONYXKEYS.CREDENTIALS}, + /** + This variable is only added to make sure the component is re-rendered + whenever the activeClients change, so that we call the + ActiveClientManager.isClientTheLeader function + everytime the leader client changes. + We use that function to prevent repeating code that checks which client is the leader. + */ + activeClients: {key: ONYXKEYS.ACTIVE_CLIENTS}, })(SignInPage);