displaying multiple provider ids

client/coral-admin/src/components/UserDetail.js

@@ -185,11 +185,24 @@ class UserDetail extends React.Component {
                 {new Date(user.created_at).toLocaleString()}
               </li>
 
-              {user.profiles.map(({ id }) => (
+              <li>
+                <Icon name="email" />
+                <span className={styles.userDetailItem}>
+                  {t('user_detail.email')}:
+                </span>
+                {user.email}{' '}
+                <ButtonCopyToClipboard
+                  className={styles.copyButton}
+                  icon="content_copy"
+                  copyText={user.email}
+                />
+              </li>
+
+              {user.profiles.map(({ provider, id }) => (
                 <li key={id}>
-                  <Icon name="email" />
+                  <Icon name="device_hub" />
                   <span className={styles.userDetailItem}>
-                    {t('user_detail.email')}:
+                    {capitalize(provider)} {t('user_detail.id')}:
                   </span>
                   {id}{' '}
                   <ButtonCopyToClipboard

client/coral-admin/src/containers/UserDetail.js

@@ -179,6 +179,7 @@ export const withUserDetailQuery = withQuery(
       id
       username
       created_at
+      email
       profiles {
         id
         provider

client/coral-admin/src/routes/Community/components/People.js

@@ -130,7 +130,14 @@ class People extends React.Component {
                             {user.username}
                           </button>
                           <span className={styles.email}>
-                            {user.profiles.map(({ id }) => id)}
+                            {user.email
+                              ? user.email
+                              : user.profiles.map(({ id }, i) => {
+                                  if (i === user.profiles.length - 1) {
+                                    return id;
+                                  }
+                                  return `${id}, `;
+                                })}
                           </span>
                         </td>
                         <td className="mdl-data-table__cell--non-numeric">

locales/en.yml

@@ -467,6 +467,7 @@ en:
     all: "All"
     rejected: "Rejected"
     user_history: "User History"
+    id: "ID"
   user_history:
     user_banned: "User banned"
     ban_removed: "Ban removed"