Merge pull request #1510 from Human-Connection/1506-anonymize_deleted_user

1506 Anonymize deleted user also for moderators

backend/src/middleware/index.js

@@ -2,7 +2,7 @@ import { applyMiddleware } from 'graphql-middleware'
 import CONFIG from './../config'
 
 import activityPub from './activityPubMiddleware'
-import softDelete from './softDeleteMiddleware'
+import softDelete from './softDelete/softDeleteMiddleware'
 import sluggify from './sluggifyMiddleware'
 import excerpt from './excerptMiddleware'
 import dateTime from './dateTimeMiddleware'

backend/src/middleware/softDelete/softDeleteMiddleware.spec.js

@@ -1,7 +1,7 @@
-import Factory from '../seed/factories'
-import { gql } from '../jest/helpers'
-import { neode as getNeode, getDriver } from '../bootstrap/neo4j'
-import createServer from '../server'
+import Factory from '../../seed/factories'
+import { gql } from '../../jest/helpers'
+import { neode as getNeode, getDriver } from '../../bootstrap/neo4j'
+import createServer from '../../server'
 import { createTestClient } from 'apollo-server-testing'
 
 const factory = Factory()

webapp/components/Comment.vue

@@ -59,7 +59,7 @@
 
 <script>
 import { mapGetters, mapMutations } from 'vuex'
-import HcUser from '~/components/User'
+import HcUser from '~/components/User/User'
 import ContentMenu from '~/components/ContentMenu'
 import ContentViewer from '~/components/Editor/ContentViewer'
 import HcEditCommentForm from '~/components/EditCommentForm/EditCommentForm'

webapp/components/CommentList/CommentList.spec.js

@@ -34,6 +34,7 @@ describe('CommentList.vue', () => {
       }
       store = new Vuex.Store({
         getters: {
+          'auth/isModerator': () => false,
           'auth/user': () => {
             return {}
           },

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -86,6 +86,7 @@ describe('ContributionForm.vue', () => {
       'editor/placeholder': () => {
         return 'some cool placeholder'
       },
+      'auth/isModerator': () => false,
       'auth/user': () => {
         return {
           id: '4711',

webapp/components/ContributionForm/ContributionForm.vue

@@ -79,7 +79,7 @@ import locales from '~/locales'
 import PostMutations from '~/graphql/PostMutations.js'
 import HcCategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 import HcTeaserImage from '~/components/TeaserImage/TeaserImage'
-import HcUser from '~/components/User'
+import HcUser from '~/components/User/User'
 
 export default {
   components: {

webapp/components/FilterPosts/FilterPosts.spec.js

@@ -55,6 +55,7 @@ describe('FilterPosts.vue', () => {
     }
     getters = {
       'postsFilter/isActive': () => false,
+      'auth/isModerator': () => false,
       'auth/user': () => {
         return { id: 'u34' }
       },

webapp/components/PostCard/index.spec.js

@@ -33,13 +33,6 @@ describe('PostCard', () => {
         disabled: false,
       },
     }
-    store = new Vuex.Store({
-      getters: {
-        'auth/user': () => {
-          return {}
-        },
-      },
-    })
     stubs = {
       NuxtLink: RouterLinkStub,
     }
@@ -56,6 +49,7 @@ describe('PostCard', () => {
       },
     }
     getters = {
+      'auth/isModerator': () => false,
       'auth/user': () => {
         return {}
       },
@@ -64,6 +58,7 @@ describe('PostCard', () => {
 
   describe('shallowMount', () => {
     Wrapper = () => {
+      store = new Vuex.Store({ getters })
       return shallowMount(PostCard, {
         store,
         propsData,

webapp/components/PostCard/index.vue

@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import HcUser from '~/components/User'
+import HcUser from '~/components/User/User'
 import ContentMenu from '~/components/ContentMenu'
 import HcCategory from '~/components/Category'
 import HcRibbon from '~/components/Ribbon'

webapp/components/User/User.spec.js

@@ -1,5 +1,5 @@
 import { mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
-import User from './index'
+import User from './User.vue'
 import Vuex from 'vuex'
 import VTooltip from 'v-tooltip'
 import Filters from '~/plugins/vue-filters'
@@ -67,6 +67,30 @@ describe('User', () => {
         expect(wrapper.text()).toMatch('Tilda Swinton')
       })
 
+      describe('user is deleted', () => {
+        beforeEach(() => {
+          propsData.user.deleted = true
+        })
+
+        it('renders anonymous user', () => {
+          const wrapper = Wrapper()
+          expect(wrapper.text()).not.toMatch('Tilda Swinton')
+          expect(mocks.$t).toHaveBeenCalledWith('profile.userAnonym')
+        })
+
+        describe('even if the current user is a moderator', () => {
+          beforeEach(() => {
+            getters['auth/isModerator'] = () => true
+          })
+
+          it('renders anonymous user', () => {
+            const wrapper = Wrapper()
+            expect(wrapper.text()).not.toMatch('Tilda Swinton')
+            expect(mocks.$t).toHaveBeenCalledWith('profile.userAnonym')
+          })
+        })
+      })
+
       describe('user is disabled', () => {
         beforeEach(() => {
           propsData.user.disabled = true

webapp/components/User/User.vue

@@ -1,25 +1,17 @@
 <template>
-  <div v-if="!user || ((user.disabled || user.deleted) && !isModerator)">
-    <div
-      style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;"
-    >
-      <hc-avatar />
-    </div>
-    <div style="display: inline-block; height: 100%; vertical-align: middle;">
-      <b class="username" style="vertical-align: middle;">{{ $t('profile.userAnonym') }}</b>
+  <div class="user" v-if="displayAnonymous">
+    <hc-avatar />
+    <div>
+      <b class="username">{{ $t('profile.userAnonym') }}</b>
     </div>
   </div>
   <dropdown v-else :class="{ 'disabled-content': user.disabled }" placement="top-start" offset="0">
     <template slot="default" slot-scope="{ openMenu, closeMenu, isOpen }">
       <nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
         <div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
-          <div
-            style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;"
-          >
-            <hc-avatar :user="user" />
-          </div>
-          <div style="display: inline-block; height: 100%; vertical-align: middle;">
-            <b class="username" style="vertical-align: middle;">{{ userName | truncate(18) }}</b>
+          <hc-avatar :user="user" />
+          <div>
+            <b class="username">{{ userName | truncate(18) }}</b>
           </div>
           <!-- Time -->
           <div v-if="dateTime" style="display: inline;">
@@ -125,6 +117,10 @@ export default {
     itsMe() {
       return this.user.slug === this.$store.getters['auth/user'].slug
     },
+    displayAnonymous() {
+      const { user, isModerator } = this
+      return !user || user.deleted || (user.disabled && !isModerator)
+    },
     userLink() {
       const { id, slug } = this.user
       if (!(id && slug)) return ''
@@ -139,6 +135,14 @@ export default {
 </script>
 
 <style lang="scss">
+.avatar {
+  display: inline-block;
+  float: left;
+  margin-right: 4px;
+  height: 100%;
+  vertical-align: middle;
+}
+
 .user {
   white-space: nowrap;
   position: relative;

webapp/components/notifications/Notification/Notification.spec.js

@@ -1,10 +1,12 @@
 import { config, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
-import Notification from './Notification'
+import Notification from './Notification.vue'
 import Styleguide from '@human-connection/styleguide'
 import Filters from '~/plugins/vue-filters'
+import Vuex from 'vuex'
 
 const localVue = createLocalVue()
 
+localVue.use(Vuex)
 localVue.use(Styleguide)
 localVue.use(Filters)
 
@@ -12,6 +14,7 @@ config.stubs['client-only'] = '<span><slot /></span>'
 
 describe('Notification', () => {
   let stubs
+  let getters
   let mocks
   let propsData
   let wrapper
@@ -23,11 +26,21 @@ describe('Notification', () => {
     stubs = {
       NuxtLink: RouterLinkStub,
     }
+    getters = {
+      'auth/user': () => {
+        return {}
+      },
+      'auth/isModerator': () => false,
+    }
   })
 
   const Wrapper = () => {
+    const store = new Vuex.Store({
+      getters,
+    })
     return mount(Notification, {
       stubs,
+      store,
       mocks,
       propsData,
       localVue,

webapp/components/notifications/Notification/Notification.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import HcUser from '~/components/User'
+import HcUser from '~/components/User/User'
 
 export default {
   name: 'Notification',

webapp/components/notifications/NotificationList/NotificationList.spec.js

@@ -26,6 +26,7 @@ describe('NotificationList.vue', () => {
   beforeEach(() => {
     store = new Vuex.Store({
       getters: {
+        'auth/isModerator': () => false,
         'auth/user': () => {
           return {}
         },

webapp/pages/post/_id/_slug/index.vue

@@ -79,7 +79,7 @@ import ContentViewer from '~/components/Editor/ContentViewer'
 import HcCategory from '~/components/Category'
 import HcTag from '~/components/Tag'
 import ContentMenu from '~/components/ContentMenu'
-import HcUser from '~/components/User'
+import HcUser from '~/components/User/User'
 import HcShoutButton from '~/components/ShoutButton.vue'
 import HcCommentForm from '~/components/CommentForm/CommentForm'
 import HcCommentList from '~/components/CommentList/CommentList'

webapp/pages/profile/_id/_slug.spec.js

@@ -68,6 +68,7 @@ describe('ProfileSlug', () => {
         }
         mocks.$store = {
           getters: {
+            'auth/isModerator': () => false,
             'auth/user': {
               id: 'u23',
             },

webapp/pages/profile/_id/_slug.vue

@@ -258,7 +258,7 @@
 
 <script>
 import uniqBy from 'lodash/uniqBy'
-import User from '~/components/User'
+import User from '~/components/User/User'
 import HcPostCard from '~/components/PostCard'
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcCountTo from '~/components/CountTo.vue'