From 6beabf7edaaa51bd22d10738a559e9522cae9a2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 15 Mar 2019 17:12:52 +0100
Subject: [PATCH] Moderators see a red border around disabled users

---
 components/User.spec.js | 17 +++++++++++++++++
 components/User.vue     |  7 ++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/components/User.spec.js b/components/User.spec.js
index 9a2bb3a4a..0bbf13529 100644
--- a/components/User.spec.js
+++ b/components/User.spec.js
@@ -79,6 +79,23 @@ describe('User.vue', () => {
           expect(wrapper.text()).not.toMatch('Tilda Swinton')
           expect(wrapper.text()).toMatch('Anonymus')
         })
+
+        describe('current user is a moderator', () => {
+          beforeEach(() => {
+            getters['auth/isModerator'] = () => true
+          })
+
+          it('renders user name', () => {
+            const wrapper = Wrapper()
+            expect(wrapper.text()).not.toMatch('Anonymous')
+            expect(wrapper.text()).toMatch('Tilda Swinton')
+          })
+
+          it('has "disabled-content" class', () => {
+            const wrapper = Wrapper()
+            expect(wrapper.classes()).toContain('disabled-content')
+          })
+        })
       })
     })
   })
diff --git a/components/User.vue b/components/User.vue
index 620dee069..bb473d854 100644
--- a/components/User.vue
+++ b/components/User.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!user || user.disabled">
+  <div v-if="!user || (user.disabled && !isModerator)">
     <div style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;">
       <ds-avatar
         style="display: inline-block; vertical-align: middle;"
@@ -17,6 +17,7 @@
   </div>
   <dropdown
     v-else
+    :class="{'disabled-content': user.disabled}"
     :disabled="disabled || !showUserPopover"
     placement="top-start"
     offset="0"
@@ -133,6 +134,7 @@
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcBadges from '~/components/Badges.vue'
 import Dropdown from '~/components/Dropdown'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'HcUser',
@@ -147,6 +149,9 @@ export default {
     showUserPopover: { type: Boolean, default: true }
   },
   computed: {
+    ...mapGetters({
+      isModerator: 'auth/isModerator'
+    }),
     itsMe() {
       return this.user.slug === this.$store.getters['auth/user'].slug
     },