feat(usernames): show in party header, profiles, inbox convo list

website/client/components/chat/chatCard.vue

@@ -11,7 +11,7 @@ div
       v-if="msg.user"
     )
       | {{msg.user}}
-      .svg-icon(v-html="tierIcon", v-if='showShowTierStyle')
+      .svg-icon(v-html="tierIcon")
     p.time
       span.mr-1(v-if="msg.username") @{{ msg.username }}
       span.mr-1(v-if="msg.username") •
@@ -101,6 +101,8 @@ div
       font-size: 14px;
       color: #4e4a57;
       text-align: left !important;
+      min-height: 0rem;
+      margin-bottom: -0.5rem;
     }
   }
 
@@ -227,12 +229,6 @@ export default {
       }
       return likeCount;
     },
-    showShowTierStyle () {
-      const message = this.msg;
-      const isContributor = Boolean(message.contributor && message.contributor.level);
-      const isNPC = Boolean(message.backer && message.backer.npc);
-      return isContributor || isNPC;
-    },
     tierIcon () {
       const message = this.msg;
       const isNPC = Boolean(message.backer && message.backer.npc);

website/client/components/memberDetails.vue

@@ -19,7 +19,10 @@
           | {{member.profile.name}}
           .is-buffed(v-if="isBuffed", v-b-tooltip.hover.bottom="$t('buffed')")
             .svg-icon(v-html="icons.buff")
-        span.small-text.character-level {{ characterLevel }}
+        .small-text.character-level
+          span.mr-1(v-if="member.auth && member.auth.local && member.auth.local.username") @{{ member.auth.local.username }}
+          span.mr-1(v-if="member.auth && member.auth.local && member.auth.local.username") •
+          span {{ characterLevel }}
     .progress-container(v-b-tooltip.hover.bottom="$t('health')")
       .svg-icon(v-html="icons.health")
       .progress

website/client/components/userMenu/inbox.vue

@@ -30,8 +30,11 @@
           .conversation(v-for='conversation in filtersConversations', @click='selectConversation(conversation.key)',
             :class="{active: selectedConversation.key === conversation.key}")
             div
-             span(:class="userLevelStyle(conversation)") {{conversation.name}}
+              h3(:class="userLevelStyle(conversation)") {{ conversation.name }}
-             span.timeago {{conversation.date | timeAgo}}
+                .svg-icon(v-html="tierIcon(conversation)")
+            .time
+              span.mr-1 @{{ conversation.username }} •
+              span {{ conversation.date | timeAgo }}
             div {{conversation.lastMessageText ? conversation.lastMessageText.substring(0, 30) : ''}}
       .col-8.messages.d-flex.flex-column.justify-content-between
         .empty-messages.text-center(v-if='!selectedConversation.key')
@@ -63,6 +66,7 @@
 
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/tiers.scss';
 
   .header-wrap {
     padding: 0.5em;
@@ -73,6 +77,16 @@
     }
   }
 
+  h3 {
+    margin: 0rem;
+
+    .svg-icon {
+      width: 10px;
+      display: inline-block;
+      margin-left: .5em;
+    }
+  }
+
   .envelope {
     color: $gray-400 !important;
     margin: 0;
@@ -180,11 +194,6 @@
   .conversation {
     padding: 1.5em;
     background: $white;
-    height: 80px;
-
-    .timeago {
-      margin-left: 1em;
-    }
   }
 
   .conversation.active {
@@ -194,6 +203,12 @@
   .conversation:hover {
     cursor: pointer;
   }
+
+  .time {
+    font-size: 12px;
+    color: $gray-200;
+    margin-bottom: 0.5rem;
+  }
 </style>
 
 <script>
@@ -207,9 +222,19 @@ import styleHelper from 'client/mixins/styleHelper';
 import toggleSwitch from 'client/components/ui/toggleSwitch';
 import axios from 'axios';
 
-import messageIcon from 'assets/svg/message.svg';
 import chatMessages from '../chat/chatMessages';
+import messageIcon from 'assets/svg/message.svg';
 import svgClose from 'assets/svg/close.svg';
+import tier1 from 'assets/svg/tier-1.svg';
+import tier2 from 'assets/svg/tier-2.svg';
+import tier3 from 'assets/svg/tier-3.svg';
+import tier4 from 'assets/svg/tier-4.svg';
+import tier5 from 'assets/svg/tier-5.svg';
+import tier6 from 'assets/svg/tier-6.svg';
+import tier7 from 'assets/svg/tier-7.svg';
+import tier8 from 'assets/svg/tier-mod.svg';
+import tier9 from 'assets/svg/tier-staff.svg';
+import tierNPC from 'assets/svg/tier-npc.svg';
 
 export default {
   mixins: [styleHelper],
@@ -252,6 +277,16 @@ export default {
       icons: Object.freeze({
         messageIcon,
         svgClose,
+        tier1,
+        tier2,
+        tier3,
+        tier4,
+        tier5,
+        tier6,
+        tier7,
+        tier8,
+        tier9,
+        tierNPC,
       }),
       displayCreate: true,
       selectedConversation: {},
@@ -279,6 +314,7 @@ export default {
           id: '',
           text: '',
           user: this.initiatedConversation.user,
+          username: this.initiatedConversation.username,
           uuid: this.initiatedConversation.uuid,
           timestamp: new Date(),
         }];
@@ -296,8 +332,12 @@ export default {
           if (newChat.sent) {
             newChat.toUUID = newChat.uuid;
             newChat.toUser = newChat.user;
+            newChat.toUserName = newChat.username;
+            newChat.toUserContributor = newChat.contributor;
+            newChat.toUserBacker = newChat.backer;
             newChat.uuid = this.user._id;
             newChat.user = this.user.profile.name;
+            newChat.username = this.user.auth.local.username;
             newChat.contributor = this.user.contributor;
             newChat.backer = this.user.backer;
           }
@@ -309,11 +349,14 @@ export default {
         if (!recentMessage.text) newChatModels.splice(newChatModels.length - 1, 1);
 
         const convoModel = {
-          name: recentMessage.toUser ? recentMessage.toUser : recentMessage.user, // Handles case where from user sent the only message or the to user sent the only message
+          backer: recentMessage.toUserBacker ? recentMessage.toUserBacker : recentMessage.backer,
+          contributor: recentMessage.toUserContributor ? recentMessage.toUserContributor : recentMessage.contributor,
           key: recentMessage.toUUID ? recentMessage.toUUID : recentMessage.uuid,
-          messages: newChatModels,
+          name: recentMessage.toUser ? recentMessage.toUser : recentMessage.user, // Handles case where from user sent the only message or the to user sent the only message
-          lastMessageText: recentMessage.text,
+          username: recentMessage.toUserName ? recentMessage.toUserName : recentMessage.username,
           date: recentMessage.timestamp,
+          lastMessageText: recentMessage.text,
+          messages: newChatModels,
         };
 
         convos.push(convoModel);
@@ -444,6 +487,13 @@ export default {
     close () {
       this.$root.$emit('bv::hide::modal', 'inbox-modal');
     },
+    tierIcon (message) {
+      const isNPC = Boolean(message.backer && message.backer.npc);
+      if (isNPC) {
+        return this.icons.tierNPC;
+      }
+      return this.icons[`tier${message.contributor.level}`];
+    },
   },
 };
 </script>

website/client/components/userMenu/profile.vue

@@ -40,11 +40,12 @@ div
     #userProfile.standard-page(v-show='selectedPage === "profile"', v-if='user.profile')
       .row
         .col-12.col-md-8
-          .header
+          .header.mb-3
             h1 {{user.profile.name}}
-            h4
+            div
-              strong {{ $t('userId') }}: 
+              strong(v-if='user.auth && user.auth.local && user.auth.local.username') @{{ user.auth.local.username }}
-              | {{user._id}}
+            div
+              strong(v-if='this.userLoggedIn.contributor.admin') {{ user._id }}
         .col-12.col-md-4
           button.btn.btn-secondary(v-if='user._id === userLoggedIn._id', @click='editing = !editing') {{ $t('edit') }}
       .row(v-if='!editing')
@@ -146,7 +147,7 @@ div
   #profile {
     .member-details {
       .character-name, small, .small-text {
-        color: #878190
+        color: #878190;
       }
     }
 
@@ -193,7 +194,7 @@ div
   .gift-icon {
     width: 14px;
     margin: auto;
-    color: #686274;
+    color: $gray-100;
   }
 
   .gift-icon {
@@ -202,12 +203,12 @@ div
 
   .remove-icon {
     width: 16px;
-    color: #686274;
+    color: $gray-100;
   }
 
   .positive-icon {
     width: 14px;
-    color: #686274;
+    color: $gray-100;
   }
 
   .photo img {
@@ -216,11 +217,12 @@ div
 
   .header {
     h1 {
-      color: #4f2a93;
+      color: $purple-200;
+      margin-bottom: 0rem;
     }
 
     h4 {
-      color: #686274;
+      color: $gray-100;
     }
   }
 

website/server/models/user/index.js

@@ -8,7 +8,7 @@ require('./methods');
 // A list of publicly accessible fields (not everything from preferences because there are also a lot of settings tha should remain private)
 export let publicFields = `preferences.size preferences.hair preferences.skin preferences.shirt
   preferences.chair preferences.costume preferences.sleep preferences.background preferences.tasks preferences.disableClasses profile stats
-  achievements party backer contributor auth.timestamps items inbox.optOut loginIncentives flags.classSelected`;
+  achievements party backer contributor auth.timestamps items inbox.optOut loginIncentives flags.classSelected auth.local.username`;
 
 // The minimum amount of data needed when populating multiple users
 export let nameFields = 'profile.name';