fix: prevent un-authorized access to workspace pages

src/components/AutoEmailLink.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import {CONST} from 'expensify-common/lib/CONST';
+import Text from './Text';
+import TextLink from './TextLink';
+import styles from '../styles/styles';
+
+const propTypes = {
+    text: PropTypes.string.isRequired,
+    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+};
+
+const defaultProps = {
+    style: [],
+};
+
+/*
+ * This is a "utility component", that does this:
+ *     - Checks if a text contains any email. If it does, render it as a mailto: link
+ *     - Else just render it inside `Text` component
+ */
+
+const AutoEmailLink = (props) => (
+    <Text style={props.style}>
+        {_.map(props.text.split(CONST.REG_EXP.EXTRACT_EMAIL), (str, index) => {
+            if (CONST.REG_EXP.EMAIL.test(str)) {
+                return (
+                    <TextLink
+                        key={`${index}-${str}`}
+                        href={`mailto:${str}`}
+                        style={styles.link}
+                    >
+                        {str}
+                    </TextLink>
+                );
+            }
+
+            return (
+                <Text
+                    style={props.style}
+                    key={`${index}-${str}`}
+                >
+                    {str}
+                </Text>
+            );
+        })}
+    </Text>
+);
+
+AutoEmailLink.displayName = 'AutoEmailLink';
+AutoEmailLink.propTypes = propTypes;
+AutoEmailLink.defaultProps = defaultProps;
+export default AutoEmailLink;

src/components/BlockingViews/BlockingView.js

@@ -8,6 +8,7 @@ import Text from '../Text';
 import themeColors from '../../styles/themes/default';
 import TextLink from '../TextLink';
 import Navigation from '../../libs/Navigation/Navigation';
+import AutoEmailLink from '../AutoEmailLink';
 
 const propTypes = {
     /** Expensicon for the page */
@@ -56,7 +57,10 @@ const BlockingView = (props) => (
             height={props.iconHeight}
         />
         <Text style={[styles.notFoundTextHeader]}>{props.title}</Text>
-        <Text style={[styles.textAlignCenter]}>{props.subtitle}</Text>
+        <AutoEmailLink
+            style={[styles.textAlignCenter]}
+            text={props.subtitle}
+        />
         {props.shouldShowLink ? (
             <TextLink
                 onPress={props.onLinkPress}

src/languages/en.js

@@ -1073,6 +1073,7 @@ export default {
             growlMessageOnDeleteError: 'This workspace cannot be deleted right now because reports are actively being processed',
             unavailable: 'Unavailable workspace',
             memberNotFound: 'Member not found. To invite a new member to the workspace, please use the Invite button above.',
+            notAuthorized: `You do not have access to this page. Are you trying to join the workspace? Please reach out to the owner of this workspace so they can add you as a member! Something else? Reach out to ${CONST.EMAIL.CONCIERGE}`,
             goToRoom: ({roomName}) => `Go to ${roomName} room`,
         },
         emptyWorkspace: {

src/languages/es.js

@@ -1078,6 +1078,7 @@ export default {
             growlMessageOnDeleteError: 'No se puede eliminar el espacio de trabajo porque tiene informes que están siendo procesados',
             unavailable: 'Espacio de trabajo no disponible',
             memberNotFound: 'Miembro no encontrado. Para invitar a un nuevo miembro al espacio de trabajo, por favor, utiliza el botón Invitar que está arriba.',
+            notAuthorized: `No tienes acceso a esta página. ¿Estás tratando de unirte al espacio de trabajo? Comunícate con el propietario de este espacio de trabajo para que pueda agregarte como miembro. ¿Necesitas algo más? Comunícate con ${CONST.EMAIL.CONCIERGE}`,
             goToRoom: ({roomName}) => `Ir a la sala ${roomName}`,
         },
         emptyWorkspace: {

src/pages/workspace/WorkspaceInitialPage.js

@@ -163,8 +163,9 @@ const WorkspaceInitialPage = (props) => {
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView
-                    shouldShow={_.isEmpty(policy)}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
+                    shouldShow={_.isEmpty(props.policy) || !Policy.isPolicyOwner(props.policy)}
+                    subtitleKey={_.isEmpty(props.policy) ? undefined : 'workspace.common.notAuthorized'}
                 >
                     <HeaderWithBackButton
                         title={props.translate('workspace.common.workspace')}

src/pages/workspace/WorkspacePageWithSections.js

@@ -6,6 +6,7 @@ import lodashGet from 'lodash/get';
 import _ from 'underscore';
 import styles from '../../styles/styles';
 import Navigation from '../../libs/Navigation/Navigation';
+import * as Policy from '../../libs/actions/Policy';
 import compose from '../../libs/compose';
 import ROUTES from '../../ROUTES';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
@@ -115,8 +116,9 @@ class WorkspacePageWithSections extends React.Component {
                 shouldEnablePickerAvoiding={false}
             >
                 <FullPageNotFoundView
-                    shouldShow={_.isEmpty(this.props.policy)}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
+                    shouldShow={_.isEmpty(this.props.policy) || !Policy.isPolicyOwner(this.props.policy)}
+                    subtitleKey={_.isEmpty(this.props.policy) ? undefined : 'workspace.common.notAuthorized'}
                 >
                     <HeaderWithBackButton
                         title={this.props.headerText}