add "joined" profile field

src/components/user_card/user_card.js

@@ -332,6 +332,18 @@ export default {
         )
       )
     },
+    formattedBirthday() {
+      const browserLocale = localeService.internalToBrowserLocale(
+        this.$i18n.locale,
+      )
+      return (
+        this.user.created_at &&
+        new Date(Date.parse(this.user.created_at)).toLocaleDateString(
+          browserLocale,
+          { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' },
+        )
+      )
+    },
 
     // Editable stuff
     avatarImgSrc() {

src/components/user_card/user_card.scss

@@ -413,6 +413,10 @@
       text-overflow: ellipsis;
       overflow: hidden;
       margin: 0;
+
+      .svg-inline--fa {
+        color: var(--text);
+      }
     }
 
     dd, dt {

src/components/user_card/user_card.vue

@@ -546,39 +546,61 @@
           <dt>{{ $t('user_card.followers') }}</dt>
         </dl>
       </span>
-      <template v-if="!hideBio">
+      <span
-        <div
+        v-if="!hideUserStats"
-          v-if="user.birthday && !editable"
+        class="user-stats"
-          class="birthday"
+      >
-        >
+        <template v-if="!hideBio">
-          <FAIcon
+          <dl
-            class="fa-old-padding"
+            v-if="user.birthday && !editable"
-            icon="birthday-cake"
+            class="user-count"
-          />
-          {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
-        </div>
-        <div
-          v-else-if="editable"
-          class="birthday"
-        >
-          <div>
-            <Checkbox v-model="newShowBirthday">
-              {{ $t('settings.birthday.show_birthday') }}
-            </Checkbox>
-          </div>
-          <FAIcon
-            class="fa-old-padding"
-            icon="birthday-cake"
-          />
-          {{ $t('settings.birthday.label') }}
-          <input
-            id="birthday"
-            v-model="newBirthday"
-            type="date"
-            class="input birthday-input"
           >
-        </div>
+            <dd>
-      </template>
+              <FAIcon
+                class="fa-old-padding"
+                icon="birthday-cake"
+              />
+            </dd>
+            {{ ' ' }}
+            <dt>
+              {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
+            </dt>
+          </dl>
+          <div
+            v-else-if="editable"
+            class="birthday"
+          >
+            <div>
+              <Checkbox v-model="newShowBirthday">
+                {{ $t('settings.birthday.show_birthday') }}
+              </Checkbox>
+            </div>
+            <FAIcon
+              class="fa-old-padding"
+              icon="birthday-cake"
+            />
+            {{ $t('settings.birthday.label') }}
+            <input
+              id="birthday"
+              v-model="newBirthday"
+              type="date"
+              class="input birthday-input"
+            >
+          </div>
+        </template>
+        <dl
+          v-if="!editable"
+          class="user-count"
+        >
+          <dd>
+            {{ $t('user_card.joined') }}
+          </dd>
+          {{ ' ' }}
+          <dt>
+            {{ formattedBirthday }}
+          </dt>
+        </dl>
+      </span>
     </div>
     <template v-if="editable">
       <h3>{{ $t('settings.profile_other') }}</h3>

src/i18n/en.json

@@ -1714,6 +1714,7 @@
     "bot": "Bot",
     "group": "Group",
     "birthday": "Born {birthday}",
+    "joined": "Joined",
     "admin_menu": {
       "moderation": "Moderation",
       "grant_admin": "Grant Admin",