account-info: Add display of user email to profile

Add prop showEmail to AccountDetails component.  When showEmail is true,
Account details will attempt to display the user email if available.

Tested in iOS simulator 15.2 using using the chat.zulip.org
server and the recurse.zulipchat.com server.

Fixes: #5400

Author: daleshort

src/account-info/AccountDetails.js

@@ -13,6 +13,7 @@ import ComponentList from '../common/ComponentList';
 import ZulipText from '../common/ZulipText';
 import { getUserStatus } from '../user-statuses/userStatusesModel';
 import PresenceStatusIndicator from '../common/PresenceStatusIndicator';
+import { getDisplayEmailForUser } from '../selectors';
 
 const componentStyles = createStyleSheet({
   componentListItem: {
@@ -31,19 +32,25 @@ const componentStyles = createStyleSheet({
   statusText: {
     textAlign: 'center',
   },
+  boldText: {
+    fontWeight: 'bold',
+  },
 });
 
 type Props = $ReadOnly<{|
   user: UserOrBot,
+  showEmail: boolean,
 |}>;
 
 export default function AccountDetails(props: Props): Node {
-  const { user } = props;
+  const { user, showEmail } = props;
 
   const userStatusText = useSelector(state => getUserStatus(state, props.user.user_id).status_text);
   const userStatusEmoji = useSelector(
     state => getUserStatus(state, props.user.user_id).status_emoji,
   );
+  const realm = useSelector(state => state.realm);
+  const displayEmail = getDisplayEmailForUser(realm, user);
 
   return (
     <ComponentList outerSpacing itemStyle={componentStyles.componentListItem}>
@@ -59,10 +66,19 @@ export default function AccountDetails(props: Props): Node {
         />
         <ZulipText
           selectable
-          style={[styles.largerText, styles.halfMarginRight]}
+          style={[styles.largerText, componentStyles.boldText, styles.halfMarginRight]}
           text={user.full_name}
         />
       </View>
+      {displayEmail !== null && showEmail && (
+        <View>
+          <ZulipText
+            selectable
+            style={[styles.largerText, styles.halfMarginRight]}
+            text={displayEmail}
+          />
+        </View>
+      )}
       <View style={componentStyles.statusWrapper}>
         {userStatusEmoji && (
           <Emoji

src/account-info/AccountDetailsScreen.js

@@ -74,7 +74,7 @@ export default function AccountDetailsScreen(props: Props): Node {
 
   return (
     <Screen title={title}>
-      <AccountDetails user={user} />
+      <AccountDetails user={user} showEmail />
       <View style={styles.itemWrapper}>
         <ActivityText style={globalStyles.largerText} user={user} />
       </View>

src/account-info/ProfileScreen.js

@@ -131,7 +131,7 @@ export default function ProfileScreen(props: Props): Node {
     <SafeAreaView mode="padding" edges={['top']} style={{ flex: 1 }}>
       <OfflineNoticePlaceholder />
       <ScrollView>
-        <AccountDetails user={ownUser} />
+        <AccountDetails user={ownUser} showEmail={false} />
         <AwayStatusSwitch />
         <View style={styles.buttonRow}>
           <SetStatusButton />