Merge branch 'release' into sabrecat/unsociable

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "habitica",
-  "version": "4.277.0",
+  "version": "4.277.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.277.0",
+  "version": "4.277.3",
   "main": "./website/server/index.js",
   "dependencies": {
     "@babel/core": "^7.22.5",

website/client/src/components/userMenu/profile.vue

@@ -1,68 +1,173 @@
 <template>
-  <div>
-    <div
-      v-if="!user && userLoaded"
-    >
-      <error404 />
-    </div>
-    <div
-      v-else-if="userLoaded"
-      class="profile"
-    >
-      <!-- HEADER -->
-      <div class="header">
-        <div class="profile-actions d-flex">
-        </div>
-        <div class="row">
-          <div class="">
-            <member-details
-              :member="user"
-              :class-badge-position="'hidden'"
-            />
-          </div>
+  <div
+    v-if="!user && userLoaded"
+  >
+    <error404 />
+  </div>
+  <div
+    v-else-if="userLoaded"
+    class="profile"
+  >
+    <div class="header">
+      <div class="profile-actions d-flex">
+        <router-link
+          :to="{ path: '/private-messages', query: { uuid: user._id } }"
+          replace
+        >
+          <button
+            v-b-tooltip.hover.left="$t('sendMessage')"
+            class="btn btn-secondary message-icon"
+          >
+            <div
+              v-once
+              class="svg-icon message-icon"
+              v-html="icons.message"
+            ></div>
+          </button>
+        </router-link>
+        <button
+          v-b-tooltip.hover.bottom="$t('sendGems')"
+          class="btn btn-secondary gift-icon"
+          @click="openSendGemsModal()"
+        >
+          <div
+            class="svg-icon gift-icon"
+            v-html="icons.gift"
+          ></div>
+        </button>
+        <button
+          v-if="user._id !== userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1"
+          v-b-tooltip.hover.right="$t('blockWarning')"
+          class="btn btn-secondary block-icon d-flex justify-content-center align-items-center"
+          @click="blockUser()"
+        >
+          <div
+            v-once
+            class="svg-icon block-icon"
+            v-html="icons.block"
+          ></div>
+        </button>
+        <button
+          v-if="user._id !== userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) !== -1"
+          v-b-tooltip.hover.right="$t('unblock')"
+          class="btn btn-secondary positive-icon"
+          @click="unblockUser()"
+        >
+          <div
+            class="svg-icon positive-icon"
+            v-html="icons.positive"
+          ></div>
+        </button>
+        <button
+          v-if="hasPermission(userLoggedIn, 'moderator')"
+          v-b-tooltip.hover.right="'Admin - Toggle Tools'"
+          class="btn btn-secondary positive-icon d-flex justify-content-center align-items-center"
+          @click="toggleAdminTools()"
+        >
+          <div
+            class="svg-icon positive-icon"
+            v-html="icons.staff"
+          ></div>
+        </button>
+      </div>
+      <div
+        v-if="hasPermission(userLoggedIn, 'moderator') && adminToolsLoaded"
+        class="row admin-profile-actions"
+      >
+        <div class="col-12 text-right">
+          <span
+            v-if="!hero.flags || (hero.flags && !hero.flags.chatShadowMuted)"
+            v-b-tooltip.hover.bottom="'Turn on Shadow Muting'"
+            class="admin-action"
+            @click="adminTurnOnShadowMuting()"
+          >shadow-mute</span>
+          <span
+            v-if="hero.flags && hero.flags.chatShadowMuted"
+            v-b-tooltip.hover.bottom="'Turn off Shadow Muting'"
+            class="admin-action"
+            @click="adminTurnOffShadowMuting()"
+          >un-shadow-mute</span>
+          <span
+            v-if="!hero.flags || (hero.flags && !hero.flags.chatRevoked)"
+            v-b-tooltip.hover.bottom="'Revoke Chat Privileges'"
+            class="admin-action"
+            @click="adminRevokeChat()"
+          >mute</span>
+          <span
+            v-if="hero.flags && hero.flags.chatRevoked"
+            v-b-tooltip.hover.bottom="'Reinstate Chat Privileges'"
+            class="admin-action"
+            @click="adminReinstateChat()"
+          >un-mute</span>
+          <span
+            v-if="!hero.auth.blocked"
+            v-b-tooltip.hover.bottom="'Ban User'"
+            class="admin-action"
+            @click="adminBlockUser()"
+          >ban</span>
+          <span
+            v-if="hero.auth.blocked"
+            v-b-tooltip.hover.bottom="'Un-Ban User'"
+            class="admin-action"
+            @click="adminUnblockUser()"
+          >un-ban</span>
+          <router-link
+            :to="{ name: 'adminPanelUser', params: { userIdentifier: userId } }"
+            replace
+          >
+            Admin Panel
+          </router-link>
         </div>
       </div>
-      <!-- STATE CHANGES -->
-      <div class="row state-pages">
-        <div class="text-center nav">
-          <div
-            class="nav-item"
-            :class="{active: selectedPage === 'profile'}"
-            @click="selectPage('profile')"
-          >
-            {{ $t('profile') }}
-          </div>
-          <div
-            class="nav-item"
-            :class="{active: selectedPage === 'stats'}"
-            @click="selectPage('stats')"
-          >
-            {{ $t('stats') }}
-          </div>
-          <div
-            class="nav-item"
-            :class="{active: selectedPage === 'achievements'}"
-            @click="selectPage('achievements')"
-          >
-            {{ $t('achievements') }}
-          </div>
+      <div class="row">
+        <div class="col-12">
+          <member-details :member="user" />
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="text-center nav">
+        <div
+          class="nav-item"
+          :class="{active: selectedPage === 'profile'}"
+          @click="selectPage('profile')"
+        >
+          {{ $t('profile') }}
+        </div>
+        <div
+          class="nav-item"
+          :class="{active: selectedPage === 'stats'}"
+          @click="selectPage('stats')"
+        >
+          {{ $t('stats') }}
+        </div>
+        <div
+          class="nav-item"
+          :class="{active: selectedPage === 'achievements'}"
+          @click="selectPage('achievements')"
+        >
+          {{ $t('achievements') }}
         </div>
       </div>
     </div>
-    <!-- SHOW PROFILE -->
     <div
       v-show="selectedPage === 'profile'"
       v-if="user.profile"
       id="userProfile"
-      class="standard-page "
+      class="standard-page"
     >
       <div class="row">
-        <div class="">
+        <div class="col-12 col-md-8">
           <div class="header mb-3">
-            <h1>{{ $t('about') }}</h1>
+            <h1>{{ user.profile.name }}</h1>
+            <div
+              v-if="user.auth && user.auth.local && user.auth.local.username"
+              class="name"
+            >
+              @{{ user.auth.local.username }}
+            </div>
           </div>
         </div>
-        <!-- EDIT BUTTON REPURPOSE FOR SEND MESSAGE/OTHER ACTIONS-->
         <div class="col-12 col-md-4">
           <button
             v-if="user._id === userLoggedIn._id"
@@ -74,13 +179,13 @@
           </button>
         </div>
       </div>
-      <!-- PROFILE STUFF -->
       <div
         v-if="!editing"
         class="row"
       >
-        <div class="">
+        <div class="col-12 col-md-8">
           <div class="about profile-section">
+            <h2>{{ $t('about') }}</h2>
             <p
               v-if="user.profile.blurb"
               v-markdown="user.profile.blurb"
@@ -101,8 +206,9 @@
             </p>
           </div>
         </div>
-        <div class="">
+        <div class="col-12 col-md-4">
           <div class="info profile-section">
+            <h2>{{ $t('info') }}</h2>
             <div class="info-item">
               <div class="info-item-label">
                 {{ $t('joined') }}:
@@ -146,13 +252,12 @@
           <!-- @TODO: Implement in V2 .social-->
         </div>
       </div>
-      <!-- EDITING PROFILE -->
       <div
         v-if="editing"
         class="row"
       >
         <h1>{{ $t('editProfile') }}</h1>
-        <div class="">
+        <div class="col-12">
           <div
             class="alert alert-info alert-sm"
             v-html="$t('communityGuidelinesWarning', managerEmail)"
@@ -187,9 +292,9 @@
             <!-- include ../../shared/formatting-help-->
           </div>
         </div>
-        <div class=" text-center">
+        <div class="col-12 text-center">
           <button
-            class="btn btn-primary"
+            class="btn btn-primary mr-2"
             @click="save()"
           >
             {{ $t("save") }}
@@ -203,22 +308,21 @@
         </div>
       </div>
     </div>
-    <!-- ACHIEVEMENTS -->
     <div
       v-show="selectedPage === 'achievements'"
       v-if="user.achievements"
       id="achievements"
-      class="standard-page container "
+      class="standard-page container"
     >
       <div
         v-for="(category, key) in achievements"
         :key="key"
         class="row category-row"
       >
-        <h3 class="text-center">
+        <h3 class="col-12 text-center mb-3">
           {{ $t(`${key}Achievs`) }}
         </h3>
-        <div class="">
+        <div class="col-12">
           <div class="row achievements-row justify-content-center">
             <div
               v-for="(achievement, achievKey) in achievementsCategory(key, category)"
@@ -274,14 +378,14 @@
           </div>
         </div>
       </div>
-      <hr class="">
+      <hr class="col-12">
       <div class="row">
         <div
           v-if="user.achievements.challenges"
-          class=""
+          class="col-12 col-md-6"
         >
           <div class="achievement-icon achievement-karaoke-2x"></div>
-          <h3 class="text-center">
+          <h3 class="text-center mt-2 mb-4">
             {{ $t('challengesWon') }}
           </h3>
           <div
@@ -294,10 +398,10 @@
         </div>
         <div
           v-if="user.achievements.quests"
-          class=""
+          class="col-12 col-md-6"
         >
           <div class="achievement-icon achievement-alien2x"></div>
-          <h3 class="text-center">
+          <h3 class="text-center mt-2 mb-4">
             {{ $t('questsCompleted') }}
           </h3>
           <div
@@ -316,48 +420,31 @@
         </div>
       </div>
     </div>
-    <!-- STATS -->
-    <div>
-      <profileStats
-        v-show="selectedPage === 'stats'"
-        v-if="user.preferences"
-        :user="user"
-        :show-allocation="showAllocation()"
-      />
-    </div>
+    <profileStats
+      v-show="selectedPage === 'stats'"
+      v-if="user.preferences"
+      :user="user"
+      :show-allocation="showAllocation()"
+    />
   </div>
 </template>
 
 <style lang="scss" >
   @import '~@/assets/scss/colors.scss';
 
-  #profile {
-    .modal-header{
-
-    }
-
-    .modal-body {
-      padding: 0;
-      border-radius: 12px;
-    }
-    .modal-content {
-      background: $gray-700;
-      padding: 0;
-
-    }
-  }
-
   .profile {
     .member-details {
-      margin-left: 24px;
-      background-color: $white;
-
-      &.character-name, small, .small-text {
-        color: $gray-50;
+      .character-name, small, .small-text {
+        color: #878190;
       }
     }
+
     .standard-page {
-      padding: 0px;
+      padding-bottom: 0rem;
+    }
+
+    .modal-content {
+      background: #f9f9f9;
     }
 
     .progress-container > .progress {
@@ -451,29 +538,22 @@
     }
   }
 
-  .state-pages {
-    background-color: $gray-700;
-
-  }
-
   .nav {
-    font-size: 0.875rem;
     width: 100%;
     font-weight: bold;
     min-height: 40px;
     justify-content: center;
-    padding-top: 16px;
   }
 
   .nav-item {
     display: inline-block;
-    margin: 0 8px 8px 6px;
-    color: $gray-50;
+    margin: 0 1.2em;
+    padding: 1em;
   }
 
   .nav-item:hover, .nav-item.active {
-    color: $purple-300;
-    border-bottom: 2px solid $purple-300;
+    color: #4f2a93;
+    border-bottom: 2px solid #4f2a93;
     cursor: pointer;
   }
 
@@ -577,8 +657,8 @@
   }
 
     .member-details {
-      small, .small-text {
-        color: $gray-10;
+      .character-name, small, .small-text {
+        color: #878190;
       }
 
       .progress-container > .progress {
@@ -593,11 +673,21 @@
       size: 16px;
       color: $gray-50;
     }
+    h2:after {
+      background-color: $gray-500;
+      content: "";
+      display: inline-block;
+      height: 1px;
+      position: relative;
+      vertical-align: middle;
+      width: 100%;
+    }
   }
 
   .info {
+
     .info-item {
-      color: $gray-50;
+      color: $gray-200;
       size: 14px;
       margin-bottom: 8px;
 

website/client/src/components/userMenu/profileStats.vue

@@ -120,27 +120,27 @@
         </h2>
         <div class="well pet-mount-well">
           <div class="pet-mount-well-image">
-            <div
-              class="box"
-              :class="{white: user.items.currentPet}"
-            >
               <div
-                class="Pet"
-                :class="`Pet-${user.items.currentPet}`"
-              ></div>
+                class="box"
+                :class="{white: user.items.currentPet}"
+              >
+                <div
+                  class="Pet"
+                  :class="`Pet-${user.items.currentPet}`"
+                ></div>
+              </div>
             </div>
-          </div>
-          <div class="pet-mount-well-text">
-            <div>{{ formatAnimal(user.items.currentPet, 'pet') }}</div>
-            <div>
-              <strong>{{ $t('petsFound') }}:</strong>
-              {{ totalCount(user.items.pets) }}
+            <div class="pet-mount-well-text">
+              <div>{{ formatAnimal(user.items.currentPet, 'pet') }}</div>
+              <div>
+                <strong>{{ $t('petsFound') }}:</strong>
+                {{ totalCount(user.items.pets) }}
+              </div>
+              <div>
+                <strong>{{ $t('beastMasterProgress') }}:</strong>
+                {{ beastMasterProgress(user.items.pets) }}
+              </div>
             </div>
-            <div>
-              <strong>{{ $t('beastMasterProgress') }}:</strong>
-              {{ beastMasterProgress(user.items.pets) }}
-            </div>
-          </div>
         </div>
       </div>
       <div class="stats-section-mounts col-12 col-md-6">
@@ -190,10 +190,14 @@
         class="col-12 col-md-6"
       >
         <div class="row col-12 stats-column">
-          <div
-            :id="`${stat}-information`"
-            class="col-12 col-md-4 attribute-label"
-          >
+          <div class="col-12 col-md-4 attribute-label">
+            <span
+              class="hint"
+              :popover-title="$t(statInfo.title)"
+              popover-placement="right"
+              :popover="$t(statInfo.popover)"
+              popover-trigger="mouseenter"
+            ></span>
             <div
               class="stat-title"
               :class="stat"
@@ -202,13 +206,6 @@
             </div>
             <strong class="number">{{ totalStatPoints(stat) | floorWholeNumber }}</strong>
           </div>
-          <b-popover
-            :target="`${stat}-information`"
-            triggers="hover focus"
-            placement="right"
-            :prevent-overflow="false"
-            :content="$t(statInfo.popover)"
-          />
           <div class="col-12 col-md-6">
             <ul class="bonus-stats">
               <li>
@@ -358,7 +355,7 @@ export default {
       },
 
       allocateStatsList: {
-        str: { title: 'allocateStr', popover: 'strText', allocatepop: 'allocateStrPop' },
+        str: { title: 'allocateStr', popover: 'strengthText', allocatepop: 'allocateStrPop' },
         int: { title: 'allocateInt', popover: 'intText', allocatepop: 'allocateIntPop' },
         con: { title: 'allocateCon', popover: 'conText', allocatepop: 'allocateConPop' },
         per: { title: 'allocatePer', popover: 'perText', allocatepop: 'allocatePerPop' },
@@ -367,7 +364,7 @@ export default {
       stats: {
         str: {
           title: 'strength',
-          popover: 'strText',
+          popover: 'strengthText',
         },
         int: {
           title: 'intelligence',

website/common/locales/en/groups.json

@@ -419,5 +419,5 @@
   "tavernDiscontinued": "The Tavern and Guilds have been discontinued",
   "tavernDiscontinuedDetail": "Due to a number of factors, including changes in how our player base interacts with Habitica, the resources necessary to maintain these spaces became disproportionate to the number of people participating in them and unsustainable over the long term.",
   "tavernDiscontinuedLinks": "Read more about the <a href='/static/faq/tavern-and-guilds'>Tavern and Guild Service Discontinuation</a> or head back to the <a href='/'>homepage</a>.",
-  "chatSunsetWarning": "⚠️ <strong>Habitica Guilds and Tavern chat will be discontinued on MM/DD/YYYY.</strong> <a href='/static/faq/tavern-and-guilds'>Click here</a> to read more about this change."
+  "chatSunsetWarning": "⚠️ <strong>Habitica Guilds and Tavern chat will be discontinued on 8/8/2023.</strong> <a href='/static/faq/tavern-and-guilds'>Click here</a> to read more about this change."
 }