Get user deletion working from UI

webapp/components/DeleteAccount/DeleteAccount.vue

@@ -59,7 +59,12 @@
             </ds-flex-item>
             <ds-flex-item width="20%" />
             <ds-flex-item>
-              <ds-button icon="trash" danger :disabled="isLoading || !deleteEnabled">
+              <ds-button
+                icon="trash"
+                danger
+                :disabled="isLoading || !deleteEnabled"
+                @click="handleSubmit"
+              >
                 {{ $t('settings.delete.name') }}
               </ds-button>
             </ds-flex-item>
@@ -71,6 +76,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex'
+import gql from 'graphql-tag'
 
 export default {
   name: 'DeleteAccount',
@@ -82,8 +88,6 @@ export default {
       },
       deleteEnabled: false,
       isLoading: false,
-      countPosts: 0,
-      countComments: 0,
     }
   },
   computed: {
@@ -92,12 +96,33 @@ export default {
     }),
   },
   methods: {
-    enableDeletion() {
-      if (this.accept === 'I really want to delete my account') {
-        this.disabled = false
-      } else {
-        this.disabled = true
+    handleSubmit() {
+      let resourceArgs = []
+      if (this.formData.deleteContributions) {
+        resourceArgs.push('Post')
       }
+      if (this.formData.deleteComments) {
+        resourceArgs.push('Comment')
+      }
+      this.$apollo
+        .mutate({
+          mutation: gql`
+            mutation($id: ID!, $resource: [String]) {
+              DeleteUser(id: $id, resource: $resource) {
+                id
+              }
+            }
+          `,
+          variables: { id: this.currentUser.id, resource: resourceArgs },
+        })
+        .then(() => {
+          this.$toast.success(this.$t('settings.delete.success'))
+          this.$store.dispatch('auth/logout')
+          this.$router.replace('/')
+        })
+        .catch(error => {
+          this.$toast.error(error.message)
+        })
     },
   },
 }

webapp/locales/en.json

@@ -78,7 +78,8 @@
       "countPosts": "Delete my {count} posts",
       "countComments": "Delete my {count} comments",
       "accountDescription": "Be aware that your Post and Comments are important to our community. If you still choose to delete those you have to mark them below.",
-      "accountWarning": "You <b>CAN'T MANAGE</b> and <b>CAN'T RECOVER</b> your Account, Posts... after deleting your account!"
+      "accountWarning": "You <b>CAN'T MANAGE</b> and <b>CAN'T RECOVER</b> your Account, Posts... after deleting your account!",
+      "success": "Account successfully deleted"
     },
     "organizations": {
       "name": "My Organizations"

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

@@ -13,13 +13,11 @@
           resource-type="contribution"
           :resource="post"
           :callbacks="{ confirm: () => deletePostCallback('page'), cancel: null }"
-          :is-owner="isAuthor(post.author.id)"
+          :is-owner="isAuthor(post.author ? post.author.id : null)"
         />
       </no-ssr>
       <ds-space margin-bottom="small" />
-      <ds-heading tag="h3" no-margin>
-        {{ post.title }}
-      </ds-heading>
+      <ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
       <ds-space margin-bottom="small" />
       <!-- Content -->
       <!-- eslint-disable vue/no-v-html -->