From f55d74a95dcf7e8b2210be6e1a7f661389863ee6 Mon Sep 17 00:00:00 2001
From: SabreCat <sabe@habitica.com>
Date: Fri, 15 Sep 2023 16:39:50 -0500
Subject: [PATCH] refactor(profiles): remove email feature also still more
 visual cleanup of profile modal

---
 .../client/src/components/memberDetails.vue   |  44 ++++---
 website/client/src/components/userLink.vue    |  35 +++++
 .../src/components/userMenu/profile.vue       | 120 ++++--------------
 website/server/controllers/api-v3/chat.js     |  27 +---
 .../libs/chatReporting/groupChatReporter.js   |  12 --
 .../libs/chatReporting/inboxChatReporter.js   |  14 +-
 .../libs/chatReporting/profileReporter.js     |  34 -----
 7 files changed, 84 insertions(+), 202 deletions(-)

diff --git a/website/client/src/components/memberDetails.vue b/website/client/src/components/memberDetails.vue
index e59ad25587..7311cb60af 100644
--- a/website/client/src/components/memberDetails.vue
+++ b/website/client/src/components/memberDetails.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="member-details"
-    :class="{ condensed, expanded, 'd-flex': isHeader, row: !isHeader, }"
+    class="member-details d-flex"
+    :class="{ condensed, expanded }"
     @click="showMemberModal(member)"
   >
-    <div class="avatar-container" :class="{ 'col-4': !isHeader }">
+    <div class="avatar-container">
       <avatar
         :member="member"
         :hide-class-badge="classBadgePosition !== 'under-avatar'"
@@ -15,14 +15,17 @@
     </div>
     <div
       class="member-stats"
-      :class="{'col-8': !expanded && !isHeader}"
+      :class="{ 'mt-2': !isHeader }"
     >
       <div class="d-flex align-items-center profile-first-row">
         <class-badge
           v-if="classBadgePosition === 'next-to-name'"
           :member-class="member.stats.class"
         />
-        <div class="d-flex flex-column profile-name-character">
+        <div
+          class="d-flex flex-column"
+          :class="{ 'ml-2': classBadgePosition === 'next-to-name' }"
+        >
           <h3 class="character-name">
             <span v-if="member.contributor && member.contributor.level > 0 && !disableNameStyling">
               <user-link
@@ -30,18 +33,22 @@
                 :name="member.profile.name"
                 :backer="member.backer"
                 :contributor="member.contributor"
+                :showBuffed="isBuffed"
+                :context="'profile'"
               />
             </span>
-            <span v-else>{{ member.profile.name }}</span>
-            <div
-              v-if="isBuffed"
-              v-b-tooltip.hover.bottom="$t('buffed')"
-              class="is-buffed"
-            >
+            <div v-else>
+              <span>{{ member.profile.name }}</span>
               <div
-                class="svg-icon"
-                v-html="icons.buff"
-              ></div>
+                v-if="isBuffed"
+                v-b-tooltip.hover.bottom="$t('buffed')"
+                class="is-buffed ml-2 mt-n1"
+              >
+                <div
+                  class="svg-icon"
+                  v-html="icons.buff"
+                ></div>
+              </div>
             </div>
           </h3>
           <div class="small-text character-level">
@@ -98,6 +105,10 @@
     }
   }
 
+  .standard-page .member-details {
+    padding-left: 24px;
+  }
+
   .member-stats {
     padding-left: 12px;
     padding-right: 24px;
@@ -114,10 +125,6 @@
     color: $header-color;
   }
 
-  .profile-name-character {
-    margin-left: 12px;
-  }
-
   .character-name {
     margin-bottom: 1px;
     color: $white;
@@ -133,7 +140,6 @@
     height: 20px;
     background: $header-dark-background;
     display: inline-block;
-    margin-left: 16px;
     vertical-align: middle;
     padding-top: 4px;
 
diff --git a/website/client/src/components/userLink.vue b/website/client/src/components/userLink.vue
index 1715a13893..3dbafe436f 100644
--- a/website/client/src/components/userLink.vue
+++ b/website/client/src/components/userLink.vue
@@ -9,8 +9,19 @@
     {{ displayName }}
     <div
       class="svg-icon icon-12"
+      :class="{ 'margin-bump': context === 'profile' }"
       v-html="tierIcon()"
     ></div>
+    <div
+      v-if="showBuffed"
+      v-b-tooltip.hover.bottom="$t('buffed')"
+      class="is-buffed ml-2 d-flex align-items-center"
+    >
+      <div
+        class="svg-icon m-auto"
+        v-html="icons.buff"
+      ></div>
+    </div>
   </router-link>
 </template>
 
@@ -39,7 +50,12 @@
 
     &[class*="tier"] .svg-icon {
       margin-top: 5px;
+
+      &.margin-bump {
+        margin-top: 7px;
+      }
     }
+
     &.npc .svg-icon {
       margin-top: 4px;
     }
@@ -52,6 +68,21 @@
       }
     }
   }
+
+  .is-buffed {
+    width: 20px;
+    height: 20px;
+    background: $header-dark-background;
+    display: inline-block;
+    margin-top: 2px;
+
+    .svg-icon {
+      display: block;
+      width: 10px;
+      height: 12px;
+      margin: 0 auto;
+    }
+  }
 </style>
 
 <script>
@@ -70,6 +101,7 @@ 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';
+import buffIcon from '@/assets/svg/buff.svg';
 
 export default {
   mixins: [styleHelper],
@@ -81,6 +113,8 @@ export default {
     'contributor',
     'hideTooltip',
     'smallerStyle',
+    'showBuffed',
+    'context',
   ],
   data () {
     return {
@@ -95,6 +129,7 @@ export default {
         tier8,
         tier9,
         tierNPC,
+        buff: buffIcon,
       }),
     };
   },
diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index 1f682ec290..8c6890dff6 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -7,19 +7,18 @@
     </div>
     <div
       v-else-if="userLoaded"
-      class="profile"
+      class="profile mt-n3"
     >
       <!-- HEADER -->
       <div class="header">
-        <div class="profile-actions d-flex">
-        </div>
-        <div class="row">
-          <div class="avatar">
-            <member-details
-              :member="user"
-              :class-badge-position="'hidden'"
-            />
-          </div>
+        <div
+          class="avatar mx-auto"
+        >
+          <member-details
+            :member="user"
+            :class-badge-position="'hidden'"
+            class="mx-4"
+          />
         </div>
       </div>
       <!-- PAGE STATE CHANGES -->
@@ -70,7 +69,7 @@
             <div class="about mb-0">
               <h2>{{ $t('about') }}</h2>
             </div>
-            <div class="flex-left>">
+            <div class="flex-left">
               <div class="about profile-section">
                 <p
                   v-if="user.profile.blurb"
@@ -94,7 +93,7 @@
               </p>
             </div>
           </div>
-          <div class="flex-right">
+          <div class="ml-auto">
             <button
               v-if="user._id === userLoggedIn._id"
               class="btn btn-primary flex-right edit-profile"
@@ -357,21 +356,6 @@
                   {{ nextIncentive }}
                 </div>
               </div>
-              <div class="info-item">
-                {{ getProgressDisplay() }}
-                <div class="progress">
-                  <div
-                    class="progress-bar"
-                    role="progressbar"
-                    :aria-valuenow="incentivesProgress"
-                    aria-valuemin="0"
-                    aria-valuemax="100"
-                    :style="{width: incentivesProgress + '%'}"
-                  >
-                    <span class="sr-only">{{ incentivesProgress }}% {{ $t('complete') }}</span>
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
         </div>
@@ -442,7 +426,7 @@
         <div
           v-for="(category, key) in achievements"
           :key="key"
-          class="row category-row"
+          class="row category-row d-flex flex-column"
         >
           <h3 class="text-center">
             {{ $t(`${key}Achievs`) }}
@@ -626,13 +610,10 @@
   .profile {
     .member-details {
       background-color: $white;
-      margin-left: 24px;
-    //       display: flex;
-    // justify-content: center;
+    }
 
     .avatar-container {
       padding-top: 16px;
-      margin-right: -60px;
     }
 
     .progress-container > .progress {
@@ -658,11 +639,12 @@
     .progress-container {
       margin-left: 4px;
       margin-top: 4px;
+
+      .small-text {
+        color: $gray-50;
+      }
     }
 
-    .small-text {
-      color: $gray-50;
-    }
 
     .character-name {
       color: $gray-50;
@@ -679,15 +661,15 @@
     }
   }
 
-  .profile-name-character {
-      margin-left: 4px !important;
-    }
-  }
 </style>
 
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
+  .avatar {
+    width: fit-content;
+  }
+
   .header {
     width: 100%;
   }
@@ -726,16 +708,6 @@
     }
   }
 
-  .profile-actions {
-    float: right;
-    margin-right: 16px;
-
-    button {
-      margin-right: 8px;
-      padding: 8px;
-    }
-  }
-
   .svg-icon {
     color: $gray-50 !important;
     display: block;
@@ -912,16 +884,6 @@
         float: right;
       }
     }
-
-    .progress {
-      border-radius: 1px;
-      height: 8px;
-
-      .progress-bar {
-        background-color: $green-10 !important;
-        border-radius: 1px;
-      }
-    }
   }
 
   .achievement {
@@ -1006,18 +968,6 @@
     }
   }
 
-  @media (max-width: 990px) {
-    .profile-actions {
-      flex-direction: column;
-    }
-    .profile-actions :not(:last-child) {
-      margin-bottom: 15px;
-    }
-    .profile-actions {
-      margin-right: 0;
-    }
-  }
-
   @media (max-width: 550px) {
     .member-details {
       flex-direction: column;
@@ -1132,9 +1082,6 @@ export default {
     costumeItems () {
       return this.user.items.gear.costume;
     },
-    incentivesProgress () {
-      return this.getIncentivesProgress();
-    },
     nextIncentive () {
       return this.getNextIncentive();
     },
@@ -1275,33 +1222,10 @@ export default {
         subSection: this.$t(this.startingPage),
       });
     },
-
-    getProgressDisplay () {
-      // let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
-      // if (!currentLoginDay) return this.$t('checkinReceivedAllRewardsMessage');
-      // let nextRewardAt = currentLoginDay.nextRewardAt;
-      // if (!nextRewardAt) return this.$t('moreIncentivesComingSoon');
-      // // if we are on a reward day, let's show progress relative to this
-      // if (currentLoginDay.reward) currentLoginDay.prevRewardKey = this.user.loginIncentives;
-      // if (!currentLoginDay.prevRewardKey) currentLoginDay.prevRewardKey = 0;
-      //
-      // let start = this.user.loginIncentives - currentLoginDay.prevRewardKey;
-      // let end = nextRewardAt - currentLoginDay.prevRewardKey;
-      // return `${this.$t('checkinProgressTitle')} ${start}/${end}`;
-    },
-
-    getIncentivesProgress () {
-      const currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
-      if (!currentLoginDay) return 0;
-      const previousRewardDay = currentLoginDay.prevRewardKey;
-      const { nextRewardAt } = currentLoginDay;
-      return ((this.user.loginIncentives - previousRewardDay)
-        / (nextRewardAt - previousRewardDay)) * 100;
-    },
     getNextIncentive () {
       const currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
       if (!currentLoginDay) return 0;
-      const previousRewardDay = currentLoginDay.prevRewardKey;
+      const previousRewardDay = currentLoginDay.prevRewardKey || 0;
       const { nextRewardAt } = currentLoginDay;
       return ((nextRewardAt - previousRewardDay));
     },
diff --git a/website/server/controllers/api-v3/chat.js b/website/server/controllers/api-v3/chat.js
index d964d310bb..02ec113f0e 100644
--- a/website/server/controllers/api-v3/chat.js
+++ b/website/server/controllers/api-v3/chat.js
@@ -14,7 +14,7 @@ import {
   NotAuthorized,
 } from '../../libs/errors';
 import { removeFromArray } from '../../libs/collectionManipulators';
-import { getUserInfo, getGroupUrl, sendTxn } from '../../libs/email';
+import { getUserInfo, getGroupUrl } from '../../libs/email';
 import * as slack from '../../libs/slack';
 import { chatReporterFactory } from '../../libs/chatReporting/chatReporterFactory';
 import { getAuthorEmailFromMessage } from '../../libs/chat';
@@ -28,7 +28,6 @@ import { getAnalyticsServiceByEnvironment } from '../../libs/analyticsService';
 const analytics = getAnalyticsServiceByEnvironment();
 
 const ACCOUNT_MIN_CHAT_AGE = Number(nconf.get('ACCOUNT_MIN_CHAT_AGE'));
-const FLAG_REPORT_EMAILS = nconf.get('FLAG_REPORT_EMAIL').split(',').map(email => ({ email, canSend: true }));
 
 /**
  * @apiDefine MessageNotFound
@@ -164,8 +163,6 @@ api.postChat = {
         { name: 'GROUP_URL', content: groupUrl },
       ];
 
-      sendTxn(FLAG_REPORT_EMAILS, 'slur-report-to-mods', report);
-
       // Slack the mods
       slack.sendSlurNotification({
         authorEmail,
@@ -241,8 +238,6 @@ api.postChat = {
         { name: 'GROUP_URL', content: groupUrl },
       ];
 
-      sendTxn(FLAG_REPORT_EMAILS, 'shadow-muted-post-report-to-mods', report);
-
       // Slack the mods
       slack.sendShadowMutedPostNotification({
         authorEmail,
@@ -447,26 +442,6 @@ api.clearChatFlags = {
     const authorEmail = getAuthorEmailFromMessage(message);
     const groupUrl = getGroupUrl(group);
 
-    sendTxn(FLAG_REPORT_EMAILS, 'unflag-report-to-mods', [
-      { name: 'MESSAGE_TIME', content: (new Date(message.timestamp)).toString() },
-      { name: 'MESSAGE_TEXT', content: message.text },
-
-      { name: 'ADMIN_USERNAME', content: user.profile.name },
-      { name: 'ADMIN_UUID', content: user._id },
-      { name: 'ADMIN_EMAIL', content: adminEmailContent },
-      { name: 'ADMIN_MODAL_URL', content: `/profile/${user._id}` },
-
-      { name: 'AUTHOR_USERNAME', content: message.user },
-      { name: 'AUTHOR_UUID', content: message.uuid },
-      { name: 'AUTHOR_EMAIL', content: authorEmail },
-      { name: 'AUTHOR_MODAL_URL', content: `/profile/${message.uuid}` },
-
-      { name: 'GROUP_NAME', content: group.name },
-      { name: 'GROUP_TYPE', content: group.type },
-      { name: 'GROUP_ID', content: group._id },
-      { name: 'GROUP_URL', content: groupUrl },
-    ]);
-
     res.respond(200, {});
   },
 };
diff --git a/website/server/libs/chatReporting/groupChatReporter.js b/website/server/libs/chatReporting/groupChatReporter.js
index 18caf90c9a..b6e09e0eb7 100644
--- a/website/server/libs/chatReporting/groupChatReporter.js
+++ b/website/server/libs/chatReporting/groupChatReporter.js
@@ -6,17 +6,12 @@ import {
   BadRequest,
   NotFound,
 } from '../errors';
-import { sendTxn } from '../email';
 import * as slack from '../slack';
 import { model as Group } from '../../models/group';
 import { chatModel as Chat } from '../../models/message';
 import apiError from '../apiError';
 
 const COMMUNITY_MANAGER_EMAIL = nconf.get('EMAILS_COMMUNITY_MANAGER_EMAIL');
-const FLAG_REPORT_EMAILS = nconf
-  .get('FLAG_REPORT_EMAIL')
-  .split(',')
-  .map(email => ({ email, canSend: true }));
 const USER_AGE_FOR_FLAGGING = 3; // accounts less than this many days old don't increment flagCount
 
 export default class GroupChatReporter extends ChatReporter {
@@ -51,13 +46,6 @@ export default class GroupChatReporter extends ChatReporter {
   }
 
   async notify (group, message, userComment, automatedComment = '') {
-    let emailVariables = await this.getMessageVariables(group, message);
-    emailVariables = emailVariables.concat([
-      { name: 'REPORTER_COMMENT', content: userComment || '' },
-    ]);
-
-    sendTxn(FLAG_REPORT_EMAILS, 'flag-report-to-mods-with-comments', emailVariables);
-
     slack.sendFlagNotification({
       authorEmail: this.authorEmail,
       flagger: this.user,
diff --git a/website/server/libs/chatReporting/inboxChatReporter.js b/website/server/libs/chatReporting/inboxChatReporter.js
index 94c6302cf4..8424a6a7d2 100644
--- a/website/server/libs/chatReporting/inboxChatReporter.js
+++ b/website/server/libs/chatReporting/inboxChatReporter.js
@@ -1,21 +1,16 @@
-import nconf from 'nconf';
 import { model as User } from '../../models/user';
 
 import ChatReporter from './chatReporter';
 import {
   BadRequest,
 } from '../errors';
-import { getUserInfo, sendTxn } from '../email';
+import { getUserInfo } from '../email';
 import * as slack from '../slack';
 import apiError from '../apiError';
 
 import * as inboxLib from '../inbox';
 import { getAuthorEmailFromMessage } from '../chat';
 
-const FLAG_REPORT_EMAILS = nconf.get('FLAG_REPORT_EMAIL')
-  .split(',')
-  .map(email => ({ email, canSend: true }));
-
 export default class InboxChatReporter extends ChatReporter {
   constructor (req, res) {
     super(req, res);
@@ -49,13 +44,6 @@ export default class InboxChatReporter extends ChatReporter {
       _id: 'N/A',
     };
 
-    let emailVariables = await this.getMessageVariables(group, message);
-    emailVariables = emailVariables.concat([
-      { name: 'REPORTER_COMMENT', content: userComment || '' },
-    ]);
-
-    sendTxn(FLAG_REPORT_EMAILS, 'flag-report-to-mods-with-comments', emailVariables);
-
     slack.sendInboxFlagNotification({
       messageUserEmail: this.messageUserEmail,
       flagger: this.user,
diff --git a/website/server/libs/chatReporting/profileReporter.js b/website/server/libs/chatReporting/profileReporter.js
index aa56846abd..008146dcf5 100644
--- a/website/server/libs/chatReporting/profileReporter.js
+++ b/website/server/libs/chatReporting/profileReporter.js
@@ -1,6 +1,4 @@
-import nconf from 'nconf';
 import { model as User } from '../../models/user';
-import { getUserInfo, sendTxn } from '../email';
 import * as slack from '../slack';
 
 import ChatReporter from './chatReporter';
@@ -9,10 +7,6 @@ import {
   NotFound,
 } from '../errors';
 
-const FLAG_REPORT_EMAILS = nconf.get('FLAG_REPORT_EMAIL')
-  .split(',')
-  .map(email => ({ email, canSend: true }));
-
 export default class ProfileReporter extends ChatReporter {
   constructor (req, res) {
     super(req, res);
@@ -44,27 +38,6 @@ export default class ProfileReporter extends ChatReporter {
     return { flaggedUser, comment, source };
   }
 
-  getEmailVariables (flaggedUser) {
-    const reportingUserData = {
-      user: this.user.profile.name,
-      username: this.user.auth.local.username,
-      uuid: this.user._id,
-      email: getUserInfo(this.user, ['email']).email,
-    };
-
-    const flaggedUserData = {
-      user: flaggedUser.profile.name,
-      username: flaggedUser.auth.local.username,
-      uuid: flaggedUser._id,
-      email: getUserInfo(flaggedUser, ['email']).email,
-    };
-
-    return [
-      ...this.createGenericAuthorVariables('REPORTER', reportingUserData),
-      ...this.createGenericAuthorVariables('FLAGGED', flaggedUserData),
-    ];
-  }
-
   async flagProfile (flaggedUser, comment, source) {
     const timestamp = new Date();
     // Log user ids that have flagged the account
@@ -83,13 +56,6 @@ export default class ProfileReporter extends ChatReporter {
   }
 
   notify (flaggedUser, comment, source) {
-    let emailVariables = this.getEmailVariables(flaggedUser);
-    emailVariables = emailVariables.concat([
-      { name: 'REPORTER_COMMENT', content: comment || '' },
-    ]);
-
-    sendTxn(FLAG_REPORT_EMAILS, 'profile-report-to-mods-with-comments', emailVariables);
-
     slack.sendProfileFlagNotification({
       reporter: this.user,
       flaggedUser,