From edcf8113deb29e7d8540130f096717c9278b02fd Mon Sep 17 00:00:00 2001
From: SabreCat <sabe@habitica.com>
Date: Wed, 6 Sep 2023 16:39:02 -0500
Subject: [PATCH] WIP(profile): dropdown draft

---
 .../components/members/reportMemberModal.vue  | 19 +++-
 .../src/components/userMenu/profile.vue       | 96 ++++++++++---------
 .../src/components/userMenu/profileModal.vue  |  9 +-
 website/common/locales/en/groups.json         |  2 +-
 4 files changed, 77 insertions(+), 49 deletions(-)

diff --git a/website/client/src/components/members/reportMemberModal.vue b/website/client/src/components/members/reportMemberModal.vue
index 6e405f83d6..23c51da78e 100644
--- a/website/client/src/components/members/reportMemberModal.vue
+++ b/website/client/src/components/members/reportMemberModal.vue
@@ -2,8 +2,8 @@
   <b-modal
     id="report-profile"
     :title="$t('reportPlayer')"
+    :hide-footer="!hasPermission(user, 'moderator')"
     size="md"
-    :hide-footer="true"
   >
     <div slot="modal-header">
       <h2 class="mt-2 mb-0"> {{ $t('reportPlayer') }} </h2>
@@ -41,10 +41,16 @@
         @click.prevent="close()"
       >{{ $t('cancel') }}</a>
     </div>
+    <div
+      slot="modal-footer"
+    >
+      <a class="mx-auto">Reset Flags</a>
+    </div>
   </b-modal>
 </template>
 
 <style lang="scss">
+  @import '~@/assets/scss/colors.scss';
   #report-profile {
     .modal-header {
       padding: 24px;
@@ -53,6 +59,17 @@
     .modal-body {
       padding: 0px 24px 24px 24px;
     }
+    .modal-footer {
+      display: flex;
+      justify-content: center;
+      border-top: none;
+      height: 48px;
+      background-color: rgba($red-500, 0.25);
+      margin-top: -8px;
+      a {
+        color: $maroon-50;
+      }
+    }
   }
 </style>
 
diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index 903b6f76f5..9b1bd4dbb7 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -67,7 +67,7 @@
           class="flex-container"
         >
           <div class="flex-left">
-            <div class="about profile-header">
+            <div class="about mb-0">
               <h2>{{ $t('about') }}</h2>
             </div>
             <div class="flex-left>">
@@ -156,6 +156,8 @@
                 <!-- REPORT PLAYER -->
                 <b-dropdown-item
                   class="selectListItem"
+                  :class="{ disabled: !canReport }"
+                  :disabled="!canReport"
                   @click="reportPlayer()"
                 >
                   <span class="with-icon">
@@ -243,7 +245,7 @@
                   <b-dropdown-item
                     v-if="!hero.auth.blocked"
                     class="selectListItem block-ban"
-                    @click="adminBlockUser()"
+                    @click.native.capture.stop="adminBlockUser()"
                   >
                     <span class="with-icon">
                       <span
@@ -259,7 +261,7 @@
                   <b-dropdown-item
                     v-else
                     class="selectListItem block-ban"
-                    @click="adminUnblockUser()"
+                    @click.native.capture.stop="adminUnblockUser()"
                   >
                     <span class="with-icon">
                       <span
@@ -276,7 +278,7 @@
                   <!-- SHADOW MUTE PLAYER WITH TOGGLE -->
                   <b-dropdown-item
                     class="selectListItem"
-                    @click="!hero.flags.chatShadowMuted
+                    @click.native.capture.stop="!hero.flags.chatShadowMuted
                       ? adminTurnOnShadowMuting()
                       : adminTurnOffShadowMuting()"
                   >
@@ -302,7 +304,7 @@
                   <!-- MUTE PLAYER WITH TOGGLE -->
                   <b-dropdown-item
                     class="selectListItem"
-                    @click="!hero.flags.chatRevoked
+                    @click.native.capture.stop="!hero.flags.chatRevoked
                       ? adminRevokeChat()
                       : adminReinstateChat()"
                   >
@@ -563,19 +565,25 @@
 <style lang="scss" >
   @import '~@/assets/scss/colors.scss';
 
-  .modal-header {
-    padding: 24px;
-    border-bottom: 0px solid $white;
-    background-color: $white;
-  }
   #userProfile {
     .dropdown-menu {
       margin-left: -48px;
       width: 210px;
     }
-    .dropdown-item:hover svg {
+
+    .dropdown-item.disabled {
+      color: $gray-50 !important;
+      opacity: 0.75;
+      svg {
+        color: $gray-50;
+        opacity: 0.75;
+      }
+    }
+
+    .dropdown-item:not(.disabled):hover svg {
       color: $purple-300;
     }
+
     .drawer-toggle-icon {
       position: absolute;
       right: 16px;
@@ -585,11 +593,13 @@
         top: 10px;
       }
     }
+
     .toggle-switch-outer {
       margin-bottom: 2px;
     }
+
     .selectListItem {
-      &:hover svg {
+      &:not(.disabled):hover svg {
         color: $purple-300;
       }
       &.block-ban {
@@ -601,8 +611,8 @@
           }
         }
       }
-     }
-   }
+    }
+  }
 
   .profile {
     .member-details {
@@ -701,7 +711,6 @@
     .admin-action {
       color: $red-500;
       cursor: pointer;
-      // padding: 0 16px;
     }
   }
 
@@ -715,12 +724,6 @@
     }
   }
 
-    // &hover {
-    //   color: $purple-300 !important;
-    //   text-decoration: none;
-    // }
-
-
   .profile-actions {
     float: right;
     margin-right: 16px;
@@ -735,34 +738,30 @@
     color: $gray-50 !important;
     display: block;
     margin: 0 auto;
-    }
-
-    .message-icon svg {
-      height: 11px;
-      margin-top: 1px;
   }
 
-    .gift-icon svg {
-      height: 16px;
-      margin: auto;
-      width: 14px;
+  .message-icon svg {
+    height: 11px;
+    margin-top: 1px;
   }
 
-   .dots-icon {
-      height: 16px;
-      width: 4px;
+  .gift-icon svg {
+    height: 16px;
+    margin: auto;
+    width: 14px;
   }
 
-   .block-icon {
-      width: 16px;
+  .dots-icon {
+    height: 16px;
+    width: 4px;
   }
 
-    .positive-icon {
-      width: 14px;
+  .block-icon, .report-icon {
+    width: 16px;
   }
 
-   .report-icon {
-      width: 16px;
+  .positive-icon {
+    width: 14px;
   }
 
   .toggle-switch-outer {
@@ -771,7 +770,7 @@
 
   .photo {
     img {
-    max-width: 100%;
+      max-width: 100%;
     }
   }
 
@@ -842,7 +841,6 @@
   }
 
   .profile-section {
-
     h2 {
       color: $gray-50;
       margin-bottom: 20px !important;
@@ -851,10 +849,6 @@
     }
   }
 
-  .profile-header {
-      margin-bottom: 0px;
-  }
-
   .about {
     line-height: 1.71;
   }
@@ -931,6 +925,7 @@
     height: 92px;
     width: 94px;
   }
+
   #achievements {
     .category-row {
       margin-bottom: 34px;
@@ -1161,6 +1156,13 @@ export default {
     // userBanned () {
     //   return valueOf(this.user._id.auth.blocked);
     // },
+    canReport () {
+      if (!this.user || !this.user.profile || !this.user.profile.flags) {
+        return true;
+      }
+      return Boolean(this.hasPermission(this.userLoggedIn, 'moderator')
+        || !this.user.profile.flags[this.userLoggedIn._id]);
+    },
   },
   watch: {
     startingPage () {
@@ -1178,6 +1180,9 @@ export default {
     this.oldTitle = this.$store.state.title;
     this.handleExternalLinks();
     this.selectPage(this.startingPage);
+    this.$root.$on('habitica:report-profile-result', () => {
+      this.loadUser();
+    });
   },
   updated () {
     this.handleExternalLinks();
@@ -1188,6 +1193,7 @@ export default {
         fullTitle: this.oldTitle,
       });
     }
+    this.$root.$off('habitica:report-profile-result');
   },
   methods: {
     async loadUser () {
diff --git a/website/client/src/components/userMenu/profileModal.vue b/website/client/src/components/userMenu/profileModal.vue
index b770cf77b6..4eb584e4a2 100644
--- a/website/client/src/components/userMenu/profileModal.vue
+++ b/website/client/src/components/userMenu/profileModal.vue
@@ -23,6 +23,11 @@
   @import '~@/assets/scss/colors.scss';
 
   #profile {
+    .modal-header {
+      background-color: $white;
+      border-bottom: none;
+      padding: 0px;
+    }
     .modal-dialog {
       max-width: 684px;
     }
@@ -41,8 +46,8 @@
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
-  .header {
-    width: 100%;
+  .modal-close {
+    z-index: 1;
   }
 
 </style>
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index 17ec7b26ce..e9c882f4d7 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -88,7 +88,7 @@
   "PMUserDoesNotReceiveMessages": "This user is no longer receiving private messages",
   "PMUnblockUserToSendMessages": "Unblock this user to continue sending and receiving messages.",
   "block": "Block Player",
-  "blockedUser": "<strong>You blocked this player.</strong> They cannot send you Private Messages but you will still see their posts.",
+  "blockedUser": "<strong>You blocked this player.</strong>&nbsp;They cannot send you Private Messages but you will still see their posts.",
   "unblock": "Unblock Player",
   "blockYourself": "You cannot block yourself",
   "blockWarning": "This will have no effect if the player is an admin.",