Merge pull request #27385 from Selyatin/fix-sign-in-not-working-when-…

…not-using-leader-tab

Show notification instead of login page when user has another tab open - #26161

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.",

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.',

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);