Signin rhp

src/ROUTES.js

@@ -207,4 +207,5 @@ export default {
             isSubReportPageRoute: pathSegments.length > 2,
         };
     },
+    SIGN_IN_MODAL: 'sign-in-modal',
 };

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -48,6 +48,11 @@ Onyx.connect({
         }
 
         currentAccountID = val.accountID;
+        if (Navigation.isActiveRoute(ROUTES.SIGN_IN_MODAL)) {
+            // This means sign in in RHP was successful, so we can dismiss the modal and subscribe to user events
+            Navigation.dismissModal();
+            User.subscribeToUserEvents();
+        }
     },
 });
 

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -739,6 +739,16 @@ const EditRequestStackNavigator = createModalStackNavigator([
     },
 ]);
 
+const SignInModalStackNavigator = createModalStackNavigator([
+    {
+        getComponent: () => {
+            const SignInModal = require('../../../pages/signin/SignInModal').default;
+            return SignInModal;
+        },
+        name: 'SignIn_Root',
+    },
+]);
+
 export {
     MoneyRequestModalStackNavigator,
     SplitDetailsModalStackNavigator,
@@ -760,4 +770,5 @@ export {
     WalletStatementStackNavigator,
     FlagCommentStackNavigator,
     EditRequestStackNavigator,
+    SignInModalStackNavigator,
 };

src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js

@@ -93,6 +93,10 @@ function RightModalNavigator() {
                 name="EditRequest"
                 component={ModalStackNavigators.EditRequestStackNavigator}
             />
+            <Stack.Screen
+                name="SignIn"
+                component={ModalStackNavigators.SignInModalStackNavigator}
+            />
         </Stack.Navigator>
     );
 }

src/libs/Navigation/linkingConfig.js

@@ -369,6 +369,11 @@ export default {
                             EditRequest_Currency: ROUTES.EDIT_CURRENCY_REQUEST,
                         },
                     },
+                    SignIn: {
+                        screens: {
+                            SignIn_Root: ROUTES.SIGN_IN_MODAL,
+                        },
+                    },
                 },
             },
         },

src/libs/actions/Session/index.js

@@ -89,11 +89,13 @@ function isAnonymousUser() {
 }
 
 function signOutAndRedirectToSignIn() {
-    hideContextMenu(false);
-    signOut();
-    redirectToSignIn();
     Log.info('Redirecting to Sign In because signOut() was called');
-    if (isAnonymousUser()) {
+    hideContextMenu(false);
+    if (!isAnonymousUser()) {
+        signOut();
+        redirectToSignIn();
+    } else {
+        Navigation.navigate(ROUTES.SIGN_IN_MODAL);
         Linking.getInitialURL().then((url) => {
             const reportID = ReportUtils.getReportIDFromLink(url);
             if (reportID) {

src/pages/signin/SignInModal.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import SignInPage from './SignInPage';
+import ScreenWrapper from '../../components/ScreenWrapper';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
+import Navigation from '../../libs/Navigation/Navigation';
+import styles from '../../styles/styles';
+import * as Session from '../../libs/actions/Session';
+
+const propTypes = {};
+
+const defaultProps = {};
+
+function SignInModal() {
+    if (!Session.isAnonymousUser()) {
+        // Sign in in RHP is only for anonymous users
+        Navigation.isNavigationReady().then(() => {
+            Navigation.dismissModal();
+        });
+    }
+    return (
+        <ScreenWrapper
+            style={[styles.highlightBG]}
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton onBackButtonPress={() => Navigation.goBack()} />
+            <SignInPage isInModal />
+        </ScreenWrapper>
+    );
+}
+
+SignInModal.propTypes = propTypes;
+SignInModal.defaultProps = defaultProps;
+SignInModal.displayName = 'SignInModal';
+
+export default SignInModal;

src/pages/signin/SignInPage.js

@@ -46,13 +46,17 @@ const propTypes = {
         validateCode: PropTypes.string,
     }),
 
+    /** Whether or not the sign in page is being rendered in the RHP modal */
+    isInModal: PropTypes.bool,
+
     /** Override the green headline copy */
     customHeadline: PropTypes.string,
 };
 
 const defaultProps = {
     account: {},
     credentials: {},
+    isInModal: false,
     customHeadline: '',
 };
 
@@ -81,9 +85,10 @@ function getRenderOptions({hasLogin, hasValidateCode, hasAccount, isPrimaryLogin
     };
 }
 
-function SignInPage({credentials, account, customHeadline}) {
+function SignInPage({credentials, account, isInModal, customHeadline}) {
     const {translate, formatPhoneNumber} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
+    const shouldShowSmallScreen = isSmallScreenWidth || isInModal;
     const safeAreaInsets = useSafeAreaInsets();
 
     useEffect(() => Performance.measureTTI(), []);
@@ -119,19 +124,19 @@ function SignInPage({credentials, account, customHeadline}) {
             // replacing spaces with "hard spaces" to prevent breaking the number
             const userLoginToDisplay = Str.isSMSLogin(userLogin) ? formatPhoneNumber(userLogin).replace(/ /g, '\u00A0') : userLogin;
             if (account.validated) {
-                welcomeHeader = isSmallScreenWidth ? '' : translate('welcomeText.welcomeBack');
-                welcomeText = isSmallScreenWidth
+                welcomeHeader = shouldShowSmallScreen ? '' : translate('welcomeText.welcomeBack');
+                welcomeText = shouldShowSmallScreen
                     ? `${translate('welcomeText.welcomeBack')} ${translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay})}`
                     : translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay});
             } else {
-                welcomeHeader = isSmallScreenWidth ? '' : translate('welcomeText.welcome');
-                welcomeText = isSmallScreenWidth
+                welcomeHeader = shouldShowSmallScreen ? '' : translate('welcomeText.welcome');
+                welcomeText = shouldShowSmallScreen
                     ? `${translate('welcomeText.welcome')} ${translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay})}`
                     : translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay});
             }
         }
     } else if (shouldShowUnlinkLoginForm || shouldShowEmailDeliveryFailurePage) {
-        welcomeHeader = isSmallScreenWidth ? headerText : translate('welcomeText.welcomeBack');
+        welcomeHeader = shouldShowSmallScreen ? headerText : translate('welcomeText.welcomeBack');
 
         // Don't show any welcome text if we're showing the user the email delivery failed view
         if (shouldShowEmailDeliveryFailurePage) {
@@ -148,8 +153,9 @@ function SignInPage({credentials, account, customHeadline}) {
             <SignInPageLayout
                 welcomeHeader={welcomeHeader}
                 welcomeText={welcomeText}
-                shouldShowWelcomeHeader={shouldShowWelcomeHeader || !isSmallScreenWidth}
+                shouldShowWelcomeHeader={shouldShowWelcomeHeader || !isSmallScreenWidth || !isInModal}
                 shouldShowWelcomeText={shouldShowWelcomeText}
+                isInModal={isInModal}
                 customHeadline={customHeadline}
             >
                 {/* LoginForm must use the isVisible prop. This keeps it mounted, but visually hidden

src/pages/signin/SignInPageLayout/index.js

@@ -35,6 +35,9 @@ const propTypes = {
     /** Whether to show welcome header on a particular page */
     shouldShowWelcomeHeader: PropTypes.bool.isRequired,
 
+    /** Whether or not the sign in page is being rendered in the RHP modal */
+    isInModal: PropTypes.bool.isRequired,
+
     /** Override the green headline copy */
     customHeadline: PropTypes.string,
 
@@ -51,11 +54,12 @@ function SignInPageLayout(props) {
     const prevPreferredLocale = usePrevious(props.preferredLocale);
     let containerStyles = [styles.flex1, styles.signInPageInner];
     let contentContainerStyles = [styles.flex1, styles.flexRow];
+    const shouldShowSmallScreen = props.isSmallScreenWidth || props.isInModal;
 
     // To scroll on both mobile and web, we need to set the container height manually
     const containerHeight = props.windowHeight - props.insets.top - props.insets.bottom;
 
-    if (props.isSmallScreenWidth) {
+    if (shouldShowSmallScreen) {
         containerStyles = [styles.flex1];
         contentContainerStyles = [styles.flex1, styles.flexColumn];
     }
@@ -77,7 +81,7 @@ function SignInPageLayout(props) {
 
     return (
         <View style={containerStyles}>
-            {!props.isSmallScreenWidth ? (
+            {!shouldShowSmallScreen ? (
                 <View style={contentContainerStyles}>
                     <SignInPageContent
                         welcomeHeader={props.welcomeHeader}