More fixes (#9006)

* Reset user when clicking profile nav

* Added editprofile

* Add scroll to conversations and scroll to bottom on messages

* Fixed profile click

* Added notification mixin

* Fixed challenge edit assignment

* Guild list item now returns summary

* Fixed tier icons

* Fixed quest invitaion check

* Fixed extra loading of party members in modals

* Removed background from avatar in tutorial

* Changed port back

* Fixed task adding

website/client/components/achievements/questInvitation.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  b-modal#quest-invitation(v-if='user.party.quest.key', :title="$t('questInvitation')", size='lg', :hide-footer="true")
+  b-modal#quest-invitation(v-if='user.party.quest.key && quests[user.party.quest.key]', :title="$t('questInvitation')", size='lg', :hide-footer="true")
     .modal-header
       h4 {{ $t('questInvitation') }}
         |&nbsp;{{quests[user.party.quest.key].text()}}

website/client/components/appHeader.vue

@@ -136,9 +136,9 @@ export default {
     },
     openPartyModal () {
       if (this.user.party._id) {
-        this.$store.state.groupId = this.user.party._id;
+        this.$store.state.memberModalOptions.groupId = this.user.party._id;
         // @TODO: do we need to fetch party?
-        this.$store.state.memberModalOptions.group = this.$store.state.party;
+        // this.$store.state.memberModalOptions.group = this.$store.state.party;
         this.$root.$emit('show::modal', 'members-modal');
         return;
       }

website/client/components/appMenu.vue

@@ -70,9 +70,9 @@ div
             span.small-text {{ $t('editAvatar') }}
           a.nav-link.dropdown-item(@click.prevent='showInbox()') {{ $t('messages') }}
           a.dropdown-item(@click='showAvatar("backgrounds", "2017")') {{ $t('backgrounds') }}
-          router-link.dropdown-item(:to="{name: 'stats'}") {{ $t('stats') }}
+          a.dropdown-item(@click='showProfile("stats")') {{ $t('stats') }}
-          router-link.dropdown-item(:to="{name: 'achievements'}") {{ $t('achievements') }}
+          a.dropdown-item(@click='showProfile("achievements")') {{ $t('achievements') }}
-          router-link.dropdown-item(:to="{name: 'profile'}") {{ $t('profile') }}
+          a.dropdown-item(@click='showProfile("profile")') {{ $t('profile') }}
           router-link.dropdown-item(:to="{name: 'site'}") {{ $t('settings') }}
           a.nav-link.dropdown-item(to="/", @click.prevent='logout()') {{ $t('logout') }}
 </template>
@@ -278,6 +278,10 @@ export default {
       this.$store.state.avatarEditorOptions.subpage = subpage;
       this.$root.$emit('show::modal', 'avatar-modal');
     },
+    showProfile (startingPage) {
+      this.$store.state.profileOptions.startingPage = startingPage;
+      this.$root.$emit('show::modal', 'profile');
+    },
     async getUserGroupPlans () {
       this.groupPlans = await this.$store.dispatch('guilds:getGroupPlans');
     },

website/client/components/challenges/challengeModal.vue

@@ -13,12 +13,12 @@
         label
           strong(v-once) {{$t('challengeSummary')}} *
         div.summary-count {{charactersRemaining}} {{ $t('charactersRemaining') }}
-        b-form-input.summary-textarea(type="text", textarea, :placeholder="$t('challengeSummaryPlaceholder')", v-model="workingChallenge.summary")
+        textarea.summary-textarea.form-control(:placeholder="$t('challengeSummaryPlaceholder')", v-model="workingChallenge.summary")
       .form-group
         label
           strong(v-once) {{$t('challengeDescription')}} *
         a.float-right {{ $t('markdownFormattingHelp') }}
-        b-form-input.description-textarea(type="text", textarea, :placeholder="$t('challengeDescriptionPlaceholder')", v-model="workingChallenge.description")
+        textarea.description-textarea.form-control(:placeholder="$t('challengeDescriptionPlaceholder')", v-model="workingChallenge.description")
       .form-group(v-if='creating')
         label
           strong(v-once) {{$t('challengeGuild')}} *
@@ -211,7 +211,22 @@ export default {
 
     return {
       creating: true,
-      workingChallenge: {},
+      workingChallenge: {
+        name: '',
+        summary: '',
+        description: '',
+        categories: [],
+        group: '',
+        dailys: [],
+        habits: [],
+        leader: '',
+        members: [],
+        official: false,
+        prize: 1,
+        rewards: [],
+        shortName: '',
+        todos: [],
+      },
       showCategorySelect: false,
       categoryOptions,
       categoriesHashByKey,
@@ -221,7 +236,7 @@ export default {
   async mounted () {
     this.$root.$on('shown::modal', () => {
       if (this.challenge) {
-        Object.assign(this.workingChallenge, this.challenge);
+        this.workingChallenge = Object.assign(this.workingChallenge, this.challenge);
         this.workingChallenge.categories = [];
 
         if (this.challenge.categories) {

website/client/components/chat/chatMessages.vue

@@ -20,7 +20,7 @@
         .card-block
             h3.leader(:class='userLevelStyle(cachedProfileData[msg.uuid])')
               | {{msg.user}}
-              .svg-icon(v-html="`icons.tier${cachedProfileData[msg.uuid].contributor.level}`", v-if='cachedProfileData[msg.uuid] && cachedProfileData[msg.uuid].contributor && cachedProfileData[msg.uuid].contributor.level')
+              .svg-icon(v-html="icons[`tier${cachedProfileData[msg.uuid].contributor.level}`]", v-if='cachedProfileData[msg.uuid] && cachedProfileData[msg.uuid].contributor && cachedProfileData[msg.uuid].contributor.level')
             p {{msg.timestamp | timeAgo}}
             .text(v-markdown='msg.text')
             hr
@@ -103,16 +103,18 @@
     color: #167e87;
   }
 
-  .moderator {
+  .tier8 {
     color: #277eab;
   }
 
-  .staff {
+  .tier10 {
     color: #6133b4;
   }
 
-  .npc {
+  .tier9 {
-    color: $black;
+    color: #77f4c7;
+    fill: #77f4c7;
+    stroke: #005737;
   }
   // End of tier colors
 
@@ -202,9 +204,9 @@ 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 tierMod from 'assets/svg/tier-mod.svg';
+import tier8 from 'assets/svg/tier-mod.svg';
-import tierNPC from 'assets/svg/tier-npc.svg';
+import tier9 from 'assets/svg/tier-npc.svg';
-import tierStaff from 'assets/svg/tier-staff.svg';
+import tier10 from 'assets/svg/tier-staff.svg';
 
 export default {
   props: ['chat', 'groupId', 'groupName', 'inbox'],
@@ -243,9 +245,9 @@ export default {
         tier5,
         tier6,
         tier7,
-        tierMod,
+        tier8,
-        tierNPC,
+        tier9,
-        tierStaff,
+        tier10,
       }),
       copyingMessage: {},
       currentDayDividerDisplay: moment().day(),

website/client/components/creatorIntro.vue

@@ -8,7 +8,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
   .section.avatar-section.row(:class='{"page-2": modalPage === 2}')
     .col-6.offset-3
       .user-creation-bg
-      avatar(:member='user')
+      avatar(:member='user', :avatarOnly='!editing')
 
   .section(v-if='modalPage === 2')
     // @TODO Implement in V2 .section.row
@@ -282,7 +282,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
           .next(v-once) {{$t('next')}}
           .next-arrow
         div(v-if='modalPage === 3', @click='done()')
-          button.btn.btn-primary.next(v-once) {{$t('done')}}
+          button.btn.btn-primary.next(v-once, v-if='!loading') {{$t('done')}}
 </template>
 
 <style>
@@ -808,6 +808,7 @@ export default {
     let backgroundShopSets = getBackgroundShopSets();
 
     return {
+      loading: false,
       backgroundShopSets,
       backgroundUpdate: new Date(),
       icons: Object.freeze({
@@ -895,6 +896,8 @@ export default {
       this.user.items.gear.equipped[key] = !this.user.items.gear.equipped[key];
     },
     async done () {
+      this.loading = true;
+
       let tasksToCreate = [];
       this.taskCategories.forEach(category => {
         tasksToCreate = tasksToCreate.concat(tasksByCategory[category]);
@@ -905,7 +908,7 @@ export default {
       let tasks = response.data.data;
       tasks.forEach(task => {
         this.$store.state.user.data.tasksOrder[`${task.type}s`].unshift(task._id);
-        Object.assign(this.$store.state.tasks.data[`${task.type}s`][0], task);
+        this.$store.state.tasks.data[`${task.type}s`].unshift(task);
       });
 
       this.$root.$emit('hide::modal', 'avatar-modal');

website/client/components/groups/membersModal.vue

@@ -118,11 +118,6 @@ export default {
     bDropdownItem,
     MemberDetails,
   },
-  mounted () {
-    this.$root.$on('shown::modal', () => {
-      this.getMembers();
-    });
-  },
   data () {
     return {
       sortOption: '',
@@ -157,6 +152,7 @@ export default {
   computed: {
     ...mapState({user: 'user.data'}),
     isLeader () {
+      if (!this.group.leader) return false;
       return this.user._id === this.group.leader || this.user._id === this.group.leader._id;
     },
     groupIsSubscribed () {
@@ -165,6 +161,9 @@ export default {
     group () {
       return this.$store.state.memberModalOptions.group;
     },
+    groupId () {
+      return this.$store.state.memberModalOptions.groupId || this.group._id;
+    },
     sortedMembers () {
       let sortedMembers = this.members;
       if (!this.sortOption) return sortedMembers;
@@ -185,9 +184,18 @@ export default {
       return this.members;
     },
   },
+  watch: {
+    groupId () {
+      // @TOOD: We might not need this since groupId is computed now
+      this.getMembers();
+    },
+    group () {
+      this.getMembers();
+    },
+  },
   methods: {
     async getMembers () {
-      let groupId = this.$store.state.memberModalOptions.groupId || this.group._id;
+      let groupId = this.groupId;
       if (groupId && groupId !== 'challenge') {
         let members = await this.$store.dispatch('members:getGroupMembers', {
           groupId,

website/client/components/groups/publicGuildItem.vue

@@ -13,7 +13,7 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
             .col-md-8
                 router-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
                   h3 {{ guild.name }}
-                p {{ guild.description }}
+                p {{ guild.summary }}
             .col-md-2.cta-container
               button.btn.btn-danger(v-if='isMember && displayLeave' @click='leave()', v-once) {{ $t('leave') }}
               button.btn.btn-success(v-if='!isMember'  @click='join()', v-once) {{ $t('join') }}

website/client/components/memberDetails.vue

@@ -222,6 +222,7 @@ export default {
     percent,
     showMemberModal (member) {
       this.$store.state.profileUser = member;
+      this.$store.state.profileOptions.startingPage = 'profile';
       this.$root.$emit('show::modal', 'profile');
     },
   },

website/client/components/notifications.vue

@@ -163,12 +163,6 @@ export default {
       if (this.user.stats.lvl === 0) return;
       this.hp(after - before, 'hp');
 
-      // @TODO: I am pretty sure we no long need this with $store
-      // this.$broadcast('syncPartyRequest', {
-      //   type: 'user_update',
-      //   user: this.user,
-      // });
-
       if (after < 0) this.playSound('Minus_Habit');
     },
     userExp (after, before) {

website/client/components/selectMembersModal.vue

@@ -105,11 +105,6 @@ export default {
     bDropdownItem,
     MemberDetails,
   },
-  mounted () {
-    this.$root.$on('shown::modal', () => {
-      this.getMembers();
-    });
-  },
   data () {
     return {
       sortOption: '',
@@ -161,10 +156,18 @@ export default {
 
       return this.members;
     },
+    groupId () {
+      return this.$store.state.groupId || this.group._id;
+    },
+  },
+  watch: {
+    groupId () {
+      this.getMembers();
+    },
   },
   methods: {
     async getMembers () {
-      let groupId = this.$store.state.groupId || this.group._id;
+      let groupId = this.groupId;
       if (groupId && groupId !== 'challenge') {
         let members = await this.$store.dispatch('members:getGroupMembers', {
           groupId,

website/client/components/userMenu/inbox.vue

@@ -23,13 +23,14 @@
           h4(v-once) {{$t('emptyMessagesLine1')}}
           p(v-once) {{$t('emptyMessagesLine2')}}
         .conversations(v-if='filtersConversations.length > 0')
-          .conversation(v-for='conversation in conversations', @click='selectConversation(conversation.key)', :class="{active: selectedConversation === conversation.key}")
+          .conversation(v-for='conversation in conversations', @click='selectConversation(conversation.key)',
+            :class="{active: selectedConversation === conversation.key}")
             div
              span(:class="userLevelStyle(conversation)") {{conversation.name}}
              span.timeago {{conversation.date | timeAgo}}
             div {{conversation.lastMessageText.substring(0, 30)}}
       .col-8.messages
-        chat-message.container-fluid.message-scroll(:chat.sync='activeChat', :inbox='true')
+        chat-message.container-fluid.message-scroll(:chat.sync='activeChat', :inbox='true', ref="chatscroll")
 
         // @TODO: Implement new message header here when we fix the above
 
@@ -113,6 +114,11 @@
     }
   }
 
+  .conversations {
+    max-height: 400px;
+    overflow: scroll;
+  }
+
   .conversation {
     padding: 1.5em;
     background: $white;
@@ -133,6 +139,7 @@
 </style>
 
 <script>
+import Vue from 'vue';
 import moment from 'moment';
 import filter from 'lodash/filter';
 // import sortBy from 'lodash/sortBy';
@@ -223,6 +230,10 @@ export default {
       //   return o.timestamp;
       // }]);
       this.$set(this, 'activeChat', activeChat);
+      Vue.nextTick(() => {
+        let chatscroll = this.$refs.chatscroll.$el;
+        chatscroll.scrollTop = chatscroll.scrollHeight;
+      });
     },
     sendPrivateMessage () {
       this.$store.dispatch('members:sendPrivateMessage', {
@@ -241,6 +252,11 @@ export default {
       this.conversations[this.selectedConversation].date = new Date();
 
       this.newMessage = '';
+
+      Vue.nextTick(() => {
+        let chatscroll = this.$refs.chatscroll.$el;
+        chatscroll.scrollTop = chatscroll.scrollHeight;
+      });
     },
   },
 };

website/client/components/userMenu/profile.vue

@@ -60,19 +60,20 @@ div
             label {{ $t('about') }}
             textarea.form-control(rows=5, :placeholder="$t('displayBlurbPlaceholder')", v-model='editingProfile.blurb')
             // include ../../shared/formatting-help
-          .form-group
+          //- .form-group
-            label Facebook
+          //-   label Facebook
-            input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.facebook')
+          //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.facebook')
-          .form-group
+          //- .form-group
-            label Instagram
+          //-   label Instagram
-            input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.instagram')
+          //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.instagram')
-          .form-group
+          //- .form-group
-            label Twitter
+          //-   label Twitter
-            input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.twitter')
+          //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.twitter')
 
-        .col-3.offset-6.text.center
+        .col-12.text-center
           button.btn.btn-primary(@click='save()') {{ $t("save") }}
           button.btn.btn-warning(@click='editing = false') {{ $t("cancel") }}
+
     .standard-page.container(v-show='selectedPage === "achievements"', v-if='user.achievements')
       .row(v-for='(category, key) in achievements')
         h2.col-12 {{ $t(key+'Achievs') }}
@@ -334,6 +335,7 @@ import { beastMasterProgress, mountMasterProgress } from '../../../common/script
 import statsComputed from  '../../../common/script/libs/statsComputed';
 import autoAllocate from '../../../common/script/fns/autoAllocate';
 import allocate from  '../../../common/script/ops/allocate';
+import notifications from 'client/mixins/notifications';
 
 import achievementsLib from '../../../common/script/libs/achievements';
 // @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
@@ -346,6 +348,7 @@ export default {
   components: {
     bModal,
   },
+  mixins: [notifications],
   data () {
     return {
       userIdToMessage: '',
@@ -430,6 +433,14 @@ export default {
 
       return classTexts[this.user.stats.class];
     },
+    startingPageOption () {
+      return this.$store.state.profileOptions.startingPage;
+    },
+  },
+  watch: {
+    startingPageOption () {
+      this.selectedPage = this.$store.state.profileOptions.startingPage;
+    },
   },
   methods: {
     sendMessage () {
@@ -443,8 +454,7 @@ export default {
         message: this.privateMessage,
         toUserId: this.userIdToMessage,
       });
-      alert(this.$t('messageSentAlert'));
+      this.text(this.$t('messageSentAlert'));
-      // @TODO: Notification.text(window.env.t('messageSentAlert'));
     },
     getProgressDisplay () {
       // let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
@@ -472,11 +482,14 @@ export default {
       each(this.editingProfile, (value, key) => {
         // Using toString because we need to compare two arrays (websites)
         let curVal = this.user.profile[key];
-        if (!curVal || this.editingProfile[key].toString() !== curVal.toString()) values[`profile.${key}`] = value;
+        if (!curVal || this.editingProfile[key].toString() !== curVal.toString()) {
+          values[`profile.${key}`] = value;
+          this.$set(this.userLoggedIn.profile, key, value);
+          this.$set(this.user.profile, key, value);
+        }
       });
 
-      // @TODO: dispatch
+      this.$store.dispatch('user:set', values);
-      // User.set(values);
 
       this.editing = false;
     },

website/client/components/userMenu/profilePage.vue

@@ -11,6 +11,7 @@ export default {
     profile,
   },
   mounted () {
+    this.$store.state.profileUser = {};
     this.$root.$emit('show::modal', 'profile');
   },
 };

website/client/store/index.js

@@ -98,6 +98,9 @@ export default function () {
         castingSpell: false,
         spellDrawOpen: true,
       },
+      profileOptions: {
+        startingPage: '',
+      },
       profileUser: {},
       upgradingGroup: {},
       notificationStore: [],

website/common/locales/en/settings.json

@@ -186,5 +186,6 @@
     "timezone": "Time Zone",
     "timezoneUTC": "Habitica uses the time zone set on your PC, which is: <strong><%= utc %></strong>",
     "timezoneInfo": "If that time zone is wrong, first reload this page using your browser's reload or refresh button to ensure that Habitica has the most recent information. If it is still wrong, adjust the time zone on your PC and then reload this page again.<br><br> <strong>If you use Habitica on other PCs or mobile devices, the time zone must be the same on them all.</strong> If your Dailies have been resetting at the wrong time, repeat this check on all other PCs and on a browser on your mobile devices.",
-    "push": "Push"
+    "push": "Push",
+    "about": "About"
 }