UserIndex: display account joined date when available

app/soapbox/components/account.js

@@ -6,7 +6,9 @@ import { FormattedMessage } from 'react-intl';
 import Avatar from './avatar';
 import DisplayName from './display_name';
 import Permalink from './permalink';
+import Icon from './icon';
 import IconButton from './icon_button';
+import RelativeTimestamp from './relative_timestamp';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
@@ -41,6 +43,7 @@ class Account extends ImmutablePureComponent {
     actionIcon: PropTypes.string,
     actionTitle: PropTypes.string,
     onActionClick: PropTypes.func,
+    withDate: PropTypes.bool,
   };
 
   handleFollow = () => {
@@ -68,7 +71,7 @@ class Account extends ImmutablePureComponent {
   }
 
   render() {
-    const { account, intl, hidden, onActionClick, actionIcon, actionTitle, me } = this.props;
+    const { account, intl, hidden, onActionClick, actionIcon, actionTitle, me, withDate } = this.props;
 
     if (!account) {
       return <div />;
@@ -136,6 +139,11 @@ class Account extends ImmutablePureComponent {
             {buttons}
           </div>
         </div>
+
+        {withDate && (<div className='account__joined-at'>
+          <Icon id='calendar' />
+          <RelativeTimestamp timestamp={account.get('created_at')} />
+        </div>)}
       </div>
     );
   }

app/soapbox/features/admin/user_index.js

@@ -117,7 +117,7 @@ class UserIndex extends ImmutablePureComponent {
           emptyMessage={intl.formatMessage(messages.empty)}
         >
           {accountIds.map(id =>
-            <AccountContainer key={id} id={id} withNote={false} />,
+            <AccountContainer key={id} id={id} withDate />,
           )}
         </ScrollableList>
       </Column>

app/soapbox/reducers/accounts.js

@@ -138,6 +138,7 @@ const buildAccount = adminUser => fromJS({
   header_static: '',
   emojis: [],
   fields: [],
+  created_at: adminUser.get('created_at'),
   pleroma: {
     is_active: adminUser.get('is_active'),
     is_confirmed: adminUser.get('is_confirmed'),

app/styles/accounts.scss

@@ -516,3 +516,12 @@ a .account__avatar {
     opacity: 1;
   }
 }
+
+.account__joined-at {
+  padding: 3px 2px 0 48px;
+  font-size: 14px;
+
+  i.fa-calendar {
+    padding-right: 5px;
+  }
+}