feat: additional confirm inserted before really deleting

backend/src/middleware/permissionsMiddleware.js

@@ -68,11 +68,7 @@ const isAuthor = rule({
 const isDeletingOwnAccount = rule({
   cache: 'no_cache',
 })(async (parent, args, context, info) => {
-  if (isAdmin === true) {
-    return true
-  } else {
-    return context.user.id === args.id
-  }
+  return context.user.id === args.id
 })
 
 const noEmailFilter = rule({

backend/src/schema/resolvers/users.js

@@ -173,8 +173,7 @@ export default {
       }
     },
     DeleteUser: async (object, params, context, resolveInfo) => {
-      const { resource } = params
-      const { id } = params
+      const { resource, id } = params
       const session = context.driver.session()
       try {
         if (resource && resource.length) {
@@ -182,14 +181,14 @@ export default {
             resource.map(node => {
               return transaction.run(
                 `
-                    MATCH (resource:${node})<-[:WROTE]-(author:User {id: $userId})
-                    OPTIONAL MATCH (resource)<-[:COMMENTS]-(comment:Comment)
-                    SET resource.deleted = true
-                    SET resource.content = 'UNAVAILABLE'
-                    SET resource.contentExcerpt = 'UNAVAILABLE'
-                    SET comment.deleted = true
-                    RETURN author
-                  `,
+                  MATCH (resource:${node})<-[:WROTE]-(author:User {id: $userId})
+                  OPTIONAL MATCH (resource)<-[:COMMENTS]-(comment:Comment)
+                  SET resource.deleted = true
+                  SET resource.content = 'UNAVAILABLE'
+                  SET resource.contentExcerpt = 'UNAVAILABLE'
+                  SET comment.deleted = true
+                  RETURN author
+                `,
                 {
                   userId: id,
                 },

backend/src/schema/types/schema.gql

@@ -12,11 +12,6 @@ type Mutation {
   unfollowUser(id: ID!): User
 }
 
-enum Deletable {
-  Post
-  Comment
-}
-
 enum ShoutTypeEnum {
   Post
 }

backend/src/schema/types/type/User.gql

@@ -192,6 +192,11 @@ type Query {
     )
 }
 
+enum Deletable {
+  Post
+  Comment
+}
+
 type Mutation {
   UpdateUser (
   id: ID!

webapp/components/DeleteUserModal/DeleteUserModal.spec.js

@@ -1,29 +0,0 @@
-import { config, shallowMount, mount } from '@vue/test-utils'
-
-import ConfirmModal from './DeleteUserModal.vue'
-
-const localVue = global.localVue
-
-describe('DisableModal.vue', () => {
-    let mocks
-    let propsData
-    let wrapper
-
-    beforeEach(() => {
-        propsData = {
-            slug: "oger-ly",
-            id: "u1",
-            name: "Oger Ly",
-            avatar: "avatar-link",
-            contributionsCount: "42",
-            commentedCount: "24",
-            createdAt: "date-created-at",
-        }
-        mocks = {
-          $t: jest.fn(),
-          $filters: {
-            truncate: a => a,
-          },
-        }
-      })
-})

webapp/components/DeleteUserModal/DeleteUserModal.vue

@@ -1,103 +0,0 @@
-<template>
-  <ds-modal :title="title" :is-open="isOpen" @cancel="cancel">
-    <!-- eslint-disable-next-line vue/no-v-html -->
-    <div>
-      <ds-flex>
-        <ds-flex-item :width="{ base: '60px', md: '200px' }">
-          <ds-placeholder>
-            <div>
-              <ds-avatar :name="name" :image="avatar" size="x-large" />
-            </div>
-          </ds-placeholder>
-        </ds-flex-item>
-        <ds-flex-item>
-          <ds-placeholder>
-            <div>
-              <ds-text>Name:</ds-text>
-              <ds-text size="x-large">{{ name }}</ds-text>
-              <ds-text>Slug:</ds-text>
-              <ds-text size="x-large">{{ slug }}</ds-text>
-              <ds-text>Id:</ds-text>
-              <ds-text size="x-large">{{ id }}</ds-text>
-              <ds-text>contributionsCount:</ds-text>
-              <ds-text size="x-large">{{ contributionsCount }}</ds-text>
-              <ds-text>commentedCount:</ds-text>
-              <ds-text size="x-large">{{ commentedCount }}</ds-text>
-              <ds-text>createdAt:</ds-text>
-              <ds-text size="x-large">{{ createdAt }}</ds-text>
-            </div>
-          </ds-placeholder>
-        </ds-flex-item>
-      </ds-flex>
-    </div>
-    <template slot="footer">
-      <base-button class="cancel" @click="cancel">{{ $t('actions.cancel') }}</base-button>
-      <base-button danger filled class="confirm" icon="exclamation-circle" @click="confirm">
-        {{ $t('settings.deleteUserAccount.name') }}
-      </base-button>
-    </template>
-  </ds-modal>
-</template>
-
-<script>
-import gql from 'graphql-tag'
-
-export default {
-  props: {
-    slug: { type: String, required: true },
-    id: { type: String, required: true },
-    name: { type: String, required: true },
-    avatar: { type: String, required: true },
-    contributionsCount: { type: Number, required: true },
-    commentedCount: { type: Number, required: true },
-    createdAt: { type: String, required: true },
-  },
-  data() {
-    return {
-      isOpen: true,
-      success: false,
-      loading: false,
-      isAdmin: this.$store.getters['auth/isAdmin'],
-    }
-  },
-  computed: {
-    title() {
-      return this.$t('settings.deleteUserAccount.name')
-    },
-  },
-  methods: {
-    cancel() {
-      this.isOpen = false
-      setTimeout(() => {
-        this.$emit('close')
-      }, 1000)
-    },
-    async confirm() {
-      try {
-        this.$apollo
-          .mutate({
-            mutation: gql`
-              mutation($id: ID!, $resource: [Deletable]) {
-                DeleteUser(id: $id, resource: $resource) {
-                  id
-                }
-              }
-            `,
-            variables: { id: this.$props.id, resource: ['Post', 'Comment'] },
-          })
-          .then(() => {
-            this.$toast.success(this.$t('settings.deleteUserAccount.success'))
-            this.$router.history.push('/')
-          })
-          .catch(error => {
-            this.$toast.error(error.message)
-          })
-        this.isOpen = false
-      } catch (err) {
-        this.$toast.error(err.message)
-        this.isOpen = false
-      }
-    },
-  },
-}
-</script>

webapp/components/Modal.vue

@@ -30,17 +30,7 @@
       :modalData="data.modalData"
       @close="close"
     />
-    <delete-user-modal
-      v-if="open === 'delete'"
-      :id="data.id"
-      :name="data.name"
-      :slug="data.slug"
-      :avatar="data.avatar"
-      :contributionsCount="data.contributionsCount"
-      :commentedCount="data.commentedCount"
-      :createdAt="data.createdAt"
-      @close="close"
-    />
+    <delete-user-modal v-if="open === 'delete'" :userdata="data.userdata" @close="close" />
   </div>
 </template>
 
@@ -49,7 +39,7 @@ import ConfirmModal from '~/components/Modal/ConfirmModal'
 import DisableModal from '~/components/Modal/DisableModal'
 import ReleaseModal from '~/components/ReleaseModal/ReleaseModal.vue'
 import ReportModal from '~/components/Modal/ReportModal'
-import DeleteUserModal from '~/components/DeleteUserModal/DeleteUserModal.vue'
+import DeleteUserModal from '~/components/Modal/DeleteUserModal.vue'
 import { mapGetters } from 'vuex'
 
 export default {

webapp/components/Modal/DeleteUserModal.spec.js

@@ -0,0 +1,87 @@
+/*
+import { mount } from '@vue/test-utils'
+import Vuex from 'vuex'
+ 
+ 
+import DeleteUserModal from './DeleteUserModal.vue'
+ 
+const localVue = global.localVue
+
+ 
+describe('ConfirmModal.vue', () => {
+    let getters, mutations, mocks, propsData
+   
+
+  beforeEach(() => {
+    propsData = {
+      type: 'user',
+      id: 'u23',
+      name: 'Huey',
+      slug: 'huey',
+      avatar: 'link',
+      contributionsCount: 2,
+      commentedCount: 3,
+      createdAt: 'datum',
+     
+       
+    }
+    mocks = {
+        $t: jest.fn(str => str),
+        $i18n: {
+          locale: () => 'en',
+        },
+        $router: {
+          push: jest.fn(),
+        },
+      }
+  })
+
+   
+
+  describe('mount', () => {
+    mutations = {
+        'modal/SET_OPEN': jest.fn(),
+      }
+      getters = {
+        'auth/isModerator': () => false,
+        'auth/isAdmin': () => false,
+      }
+ 
+        const store = new Vuex.Store({ mutations, getters })
+        const wrapper = mount(DeleteUserModal, {
+          propsData: {
+            ...values,
+          },
+          mocks,
+          store,
+          localVue,
+        })
+        console.log("wrapper", wrapper)
+       // menuToggle = wrapper.find('[data-test="content-menu-button"]')
+        // menuToggle.trigger('click')
+        //return wrapper
+    
+
+
+    describe('owner of contribution', () => {
+        let wrapper
+        beforeEach(() => {
+          wrapper = openContentMenu({
+            isOwner: true,
+            resourceType: 'contribution',
+            resource: {
+              id: 'd23a4265-f5f7-4e17-9f86-85f714b4b9f8',
+            },
+          })
+          openModalSpy = jest.spyOn(wrapper.vm, 'openModal')
+        })
+  
+       
+  
+      
+      })
+})
+
+
+})
+*/

webapp/components/Modal/DeleteUserModal.vue

@@ -0,0 +1,169 @@
+<template>
+  <ds-modal :title="title" :is-open="isOpen" @cancel="cancel">
+    <transition name="ds-transition-fade">
+      <ds-flex v-if="success" class="hc-modal-success" centered>
+        <sweetalert-icon icon="success" />
+      </ds-flex>
+    </transition>
+
+    <div>
+      <ds-flex>
+        <ds-flex-item :width="{ base: '60px', md: '200px' }">
+          <div>
+            <ds-avatar :name="userdata.name" :image="userdata.avatar" size="x-large" />
+          </div>
+        </ds-flex-item>
+        <ds-flex-item>
+          <div>
+            <ds-text>Name:</ds-text>
+            <ds-text size="x-large">{{ userdata.name }}</ds-text>
+            <ds-text>Slug:</ds-text>
+            <ds-text size="x-large">{{ userdata.slug }}</ds-text>
+            <ds-text>Id:</ds-text>
+            <ds-text size="x-large">{{ userdata.id }}</ds-text>
+            <ds-text>contributionsCount:</ds-text>
+            <ds-text size="x-large">{{ userdata.contributionsCount }}</ds-text>
+            <ds-text>commentedCount:</ds-text>
+            <ds-text size="x-large">{{ userdata.commentedCount }}</ds-text>
+            <ds-text>createdAt:</ds-text>
+            <ds-text size="x-large">{{ userdata.createdAt }}</ds-text>
+          </div>
+        </ds-flex-item>
+      </ds-flex>
+    </div>
+    <template slot="footer">
+      <base-button class="cancel" @click="cancel">{{ $t('actions.cancel') }}</base-button>
+      <base-button danger filled class="confirm" icon="exclamation-circle" @click="openModal">
+        {{ $t('settings.deleteUserAccount.name') }}
+      </base-button>
+    </template>
+  </ds-modal>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import { mapMutations } from 'vuex'
+import { SweetalertIcon } from 'vue-sweetalert-icons'
+
+export default {
+  name: 'DeleteUserModal',
+  components: {
+    SweetalertIcon,
+  },
+  props: {
+    userdata: { type: Object, required: true },
+  },
+  data() {
+    return {
+      isOpen: true,
+      success: false,
+      loading: false,
+      isAdmin: this.$store.getters['auth/isAdmin'],
+    }
+  },
+  computed: {
+    title() {
+      return this.$t('settings.deleteUserAccount.name')
+    },
+
+    modalData(userdata) {
+      return function(userdata) {
+        return {
+          name: 'confirm',
+          data: {
+            type: userdata.name,
+            resource: userdata,
+            modalData: {
+              titleIdent: this.$t('settings.deleteUserAccount.accountWarningIsAdmin'),
+              messageIdent: this.$t('settings.deleteUserAccount.infoAdmin'),
+              messageParams: {},
+              buttons: {
+                confirm: {
+                  danger: true,
+                  icon: 'trash',
+                  textIdent: this.$t('settings.deleteUserAccount.confirmDeleting'),
+                  callback: () => {
+                    this.confirm(userdata)
+                  },
+                },
+                cancel: {
+                  icon: 'close',
+                  textIdent: this.$t('actions.cancel'),
+                  callback: () => {},
+                },
+              },
+            },
+          },
+        }
+      }
+    },
+  },
+  methods: {
+    ...mapMutations({
+      commitModalData: 'modal/SET_OPEN',
+    }),
+    openModal() {
+      this.commitModalData(this.modalData(this.userdata))
+    },
+    cancel() {
+      // TODO: Use the "modalData" structure introduced in "ConfirmModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
+      // await this.modalData.buttons.cancel.callback()
+      this.isOpen = false
+      setTimeout(() => {
+        this.$emit('close')
+      }, 1000)
+    },
+    async confirm() {
+      this.$apollo
+        .mutate({
+          mutation: gql`
+            mutation($id: ID!, $resource: [Deletable]) {
+              DeleteUser(id: $id, resource: $resource) {
+                id
+              }
+            }
+          `,
+          variables: { id: this.userdata.id, resource: ['Post', 'Comment'] },
+        })
+        .then(({ _data }) => {
+          this.success = true
+          this.$toast.success(this.$t('settings.deleteUserAccount.success'))
+          setTimeout(() => {
+            this.isOpen = false
+            setTimeout(() => {
+              this.success = false
+              this.$emit('close')
+              this.$router.history.push('/')
+            }, 500)
+          }, 1500)
+          this.loading = false
+        })
+        .catch(err => {
+          this.$emit('close')
+          this.success = false
+          this.$toast.error(err.message)
+          this.isOpen = false
+          this.loading = false
+        })
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.ds-modal {
+  max-width: 600px !important;
+}
+.hc-modal-success {
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  opacity: 1;
+  z-index: $z-index-modal;
+  border-radius: $border-radius-x-large;
+}
+</style>

webapp/locales/de.json

@@ -640,9 +640,10 @@
       "accountDescription": "Sei dir bewusst, dass deine Beiträge und Kommentare für unsere Community wichtig sind. Wenn du sie trotzdem löschen möchtest, musst du sie unten markieren.",
       "accountWarning": "Dein Konto, deine Beiträge oder Kommentare kannst du nach dem Löschen WEDER VERWALTEN NOCH WIEDERHERSTELLEN!",
       "accountWarningAdmin": "Das Konto, die Beiträge oder Kommentare können nach dem Löschen WEDER VERWALTEN NOCH WIEDERHERGESTELLT WERDEN!",
-      "accountWarningIsAdmin": "Achtung! Du bist Admin!!",
+      "accountWarningIsAdmin": "Achtung! Du löschst jetzt ein Benutzerkonto!",
       "commentedCount": "Meine {count} Kommentare löschen",
       "contributionsCount": "Meine {count} Beiträge löschen",
+      "confirmDeleting": "Benutzerkonto jetzt löschen",
       "infoAdmin": "Alle Beiträge und Kommentare des Users werden zusätzlich gelöscht!",
       "name": "Benutzerkonto löschen",
       "pleaseConfirm": "Zerstörerische Aktion! Gib „{confirm}“ ein, um zu bestätigen.",

webapp/locales/en.json

@@ -640,9 +640,10 @@
       "accountDescription": "Be aware that your Posts and Comments are important to our community. If you still choose to delete them, you have to mark them below.",
       "accountWarning": "You CAN'T MANAGE and CAN'T RECOVER your Account, Posts, or Comments after deleting your account!",
       "accountWarningAdmin": "The account, contributions or comments can NOT BE ADMINISTERED OR RESTORED after deletion!",
-      "accountWarningIsAdmin": "Heads up! You are Admin!!",
+      "accountWarningIsAdmin": "Heads up! You are about to delete a user account!",
       "commentedCount": "Delete my {count} comments",
       "contributionsCount": "Delete my {count} posts",
+      "confirmDeleting": "Delete user account now",
       "infoAdmin": "All contributions and comments of the user are additionally deleted!",
       "name": "Delete user account",
       "pleaseConfirm": "Destructive action! Type “{confirm}” to confirm.",

webapp/pages/profile/_id/_slug.vue

@@ -441,13 +441,7 @@ export default {
       this.$store.commit('modal/SET_OPEN', {
         name: 'delete',
         data: {
-          id: userdata.id,
-          name: userdata.name,
-          slug: userdata.slug,
-          avatar: userdata.avatar,
-          contributionsCount: userdata.contributionsCount,
-          commentedCount: userdata.commentedCount,
-          createdAt: userdata.createdAt,
+          userdata: userdata,
         },
       })
     },