From 8cd62078f2cf90313a82ab0c245ff271bad65958 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Tue, 4 Jun 2019 21:24:02 -0300
Subject: [PATCH 01/23] Start DeleteAccount functionality

---
 .../DeleteAccount/DeleteAccount.vue           | 71 +++++++++++++++++++
 webapp/locales/en.json                        |  2 +-
 webapp/pages/settings.vue                     | 12 ++--
 webapp/pages/settings/delete-account.vue      |  8 +--
 4 files changed, 80 insertions(+), 13 deletions(-)
 create mode 100644 webapp/components/DeleteAccount/DeleteAccount.vue

diff --git a/webapp/components/DeleteAccount/DeleteAccount.vue b/webapp/components/DeleteAccount/DeleteAccount.vue
new file mode 100644
index 000000000..b73142a52
--- /dev/null
+++ b/webapp/components/DeleteAccount/DeleteAccount.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <ds-card hover>
+      <ds-space />
+      <ds-form v-model="formData">
+        <ds-flex>
+          <ds-flex-item width="10%" />
+          <ds-flex-item>
+            <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
+          </ds-flex-item>
+          <ds-flex-item width="80%">
+            <ds-heading>{{ $t('settings.delete.name') }}</ds-heading>
+          </ds-flex-item>
+          <ds-container>
+            <ds-space />
+            <ds-heading tag="h3">
+              This is a destructive action and to proceed you must choose to take this action by
+              selecting the 'I really want to delete my account' from the dropdown This cannot be
+              undone, please consider your actions carefully!
+            </ds-heading>
+          </ds-container>
+        </ds-flex>
+        <ds-space />
+        <ds-section>
+          <ds-flex>
+            <ds-flex-item width="50%">
+              <ds-select
+                v-model="accept"
+                :options="['', 'I really want to delete my account']"
+                @input="enableDeletion"
+                placeholder="Are you sure you want to delete your account?"
+              />
+            </ds-flex-item>
+            <ds-flex-item width="10%" />
+            <ds-flex-item>
+              <ds-button icon="trash" danger :disabled="disabled">
+                {{ $t('settings.delete.name') }}
+              </ds-button>
+            </ds-flex-item>
+          </ds-flex>
+        </ds-section>
+      </ds-form>
+    </ds-card>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DeleteAccount',
+  data() {
+    return {
+      formData: {},
+      accept: null,
+      disabled: true,
+    }
+  },
+  methods: {
+    enableDeletion() {
+      if (this.accept === 'I really want to delete my account') {
+        this.disabled = false
+      } else {
+        this.disabled = true
+      }
+    },
+  },
+}
+</script>
+<style lang="scss">
+.delete-warning-icon {
+  color: $color-danger;
+}
+</style>
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 8330f97b2..3520f0d56 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -71,7 +71,7 @@
       "name": "Download Data"
     },
     "delete": {
-      "name": "Delete Account"
+      "name": "Delete my User Account"
     },
     "organizations": {
       "name": "My Organizations"
diff --git a/webapp/pages/settings.vue b/webapp/pages/settings.vue
index f6745cdf3..a273b8b63 100644
--- a/webapp/pages/settings.vue
+++ b/webapp/pages/settings.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <ds-heading tag="h1">
-      {{ $t('settings.name') }}
-    </ds-heading>
+    <ds-heading tag="h1">{{ $t('settings.name') }}</ds-heading>
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
         <ds-menu :routes="routes" :is-exact="() => true" />
@@ -33,6 +31,10 @@ export default {
           name: this.$t('settings.social-media.name'),
           path: `/settings/my-social-media`,
         },
+        {
+          name: this.$t('settings.delete.name'),
+          path: `/settings/delete-account`,
+        },
         // TODO implement
         /* {
           name: this.$t('settings.invites.name'),
@@ -44,10 +46,6 @@ export default {
           path: `/settings/data-download`
         }, */
         // TODO implement
-        /* {
-          name: this.$t('settings.delete.name'),
-          path: `/settings/delete-account`
-        }, */
         // TODO implement
         /* {
           name: this.$t('settings.organizations.name'),
diff --git a/webapp/pages/settings/delete-account.vue b/webapp/pages/settings/delete-account.vue
index d10fb706d..944abef17 100644
--- a/webapp/pages/settings/delete-account.vue
+++ b/webapp/pages/settings/delete-account.vue
@@ -1,15 +1,13 @@
 <template>
-  <ds-card :header="$t('settings.delete.name')">
-    <hc-empty icon="tasks" message="Coming Soon…" />
-  </ds-card>
+  <delete-account />
 </template>
 
 <script>
-import HcEmpty from '~/components/Empty.vue'
+import DeleteAccount from '~/components/DeleteAccount/DeleteAccount.vue'
 
 export default {
   components: {
-    HcEmpty,
+    DeleteAccount,
   },
 }
 </script>

From bf352dca92a9cc2062c45e6e41178ffbbd7d87a4 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Thu, 6 Jun 2019 17:28:52 -0300
Subject: [PATCH 02/23] Start backend implementation UserAccount Deletion

---
 .../src/middleware/permissionsMiddleware.js   |   7 +
 backend/src/schema/resolvers/users.js         |  28 ++++
 backend/src/schema/resolvers/users.spec.js    | 152 +++++++++++++++++-
 backend/src/schema/types/schema.gql           |  18 ++-
 4 files changed, 196 insertions(+), 9 deletions(-)

diff --git a/backend/src/middleware/permissionsMiddleware.js b/backend/src/middleware/permissionsMiddleware.js
index bc9b4c525..7bc2e8caa 100644
--- a/backend/src/middleware/permissionsMiddleware.js
+++ b/backend/src/middleware/permissionsMiddleware.js
@@ -80,6 +80,12 @@ const isAuthor = rule({
   return authorId === user.id
 })
 
+const isDeletingOwnAccount = rule({
+  cache: 'no_cache',
+})(async (parent, args, context, info) => {
+  return context.user.id === args.id
+})
+
 // Permissions
 const permissions = shield({
   Query: {
@@ -115,6 +121,7 @@ const permissions = shield({
     CreateComment: isAuthenticated,
     DeleteComment: isAuthor,
     // CreateUser: allow,
+    DeleteUser: isDeletingOwnAccount,
   },
   User: {
     email: isMyOwn,
diff --git a/backend/src/schema/resolvers/users.js b/backend/src/schema/resolvers/users.js
index 53bf0967e..d46664c60 100644
--- a/backend/src/schema/resolvers/users.js
+++ b/backend/src/schema/resolvers/users.js
@@ -11,5 +11,33 @@ export default {
       params = await fileUpload(params, { file: 'avatarUpload', url: 'avatar' })
       return neo4jgraphql(object, params, context, resolveInfo, false)
     },
+    DeleteUser: async (object, params, context, resolveInfo) => {
+      const { comments, posts } = params
+      const session = context.driver.session()
+      if (comments) {
+        await session.run(
+          `
+          MATCH (comments:Comment)<-[:WROTE]-(author:User {id: $userId}) 
+          DETACH DELETE comments
+          RETURN author`,
+          {
+            userId: context.user.id,
+          },
+        )
+      }
+      if (posts) {
+        await session.run(
+          `
+          MATCH (posts:Post)<-[:WROTE]-(author:User {id: $userId}) 
+          DETACH DELETE posts
+          RETURN author`,
+          {
+            userId: context.user.id,
+          },
+        )
+      }
+      session.close()
+      return neo4jgraphql(object, params, context, resolveInfo, false)
+    },
   },
 }
diff --git a/backend/src/schema/resolvers/users.spec.js b/backend/src/schema/resolvers/users.spec.js
index a5c50f4f9..a2b59c19d 100644
--- a/backend/src/schema/resolvers/users.spec.js
+++ b/backend/src/schema/resolvers/users.spec.js
@@ -1,6 +1,7 @@
 import { GraphQLClient } from 'graphql-request'
-import { host } from '../../jest/helpers'
+import { host, login } from '../../jest/helpers'
 import Factory from '../../seed/factories'
+import gql from 'graphql-tag'
 
 const factory = Factory()
 let client
@@ -82,4 +83,153 @@ describe('users', () => {
       await expect(client.request(mutation, variables)).rejects.toThrow(expected)
     })
   })
+
+  describe('DeleteUser', () => {
+    let deleteUserVariables
+    let asAuthor
+    const deleteUserMutation = gql`
+      mutation($id: ID!, $comments: Boolean, $posts: Boolean) {
+        DeleteUser(id: $id, comments: $comments, posts: $posts) {
+          id
+        }
+      }
+    `
+    beforeEach(async () => {
+      asAuthor = await factory.create('User', {
+        email: 'test@example.org',
+        password: '1234',
+        id: 'u343',
+      })
+      await factory.create('User', {
+        email: 'friendsAccount@example.org',
+        password: '1234',
+        id: 'u565',
+      })
+      deleteUserVariables = { id: 'u343' }
+    })
+
+    describe('unauthenticated', () => {
+      it('throws authorization error', async () => {
+        client = new GraphQLClient(host)
+        await expect(client.request(deleteUserMutation, deleteUserVariables)).rejects.toThrow(
+          'Not Authorised',
+        )
+      })
+    })
+
+    describe('authenticated', () => {
+      let headers
+      beforeEach(async () => {
+        headers = await login({
+          email: 'test@example.org',
+          password: '1234',
+        })
+        client = new GraphQLClient(host, { headers })
+      })
+
+      describe("attempting to delete another user's account", () => {
+        it('throws an authorization error', async () => {
+          deleteUserVariables = { id: 'u565' }
+          await expect(client.request(deleteUserMutation, deleteUserVariables)).rejects.toThrow(
+            'Not Authorised',
+          )
+        })
+      })
+
+      describe('attempting to delete my own account', () => {
+        const commentQuery = gql`
+          query($content: String) {
+            Comment(content: $content) {
+              id
+            }
+          }
+        `
+
+        const postQuery = gql`
+          query($content: String) {
+            Post(content: $content) {
+              id
+            }
+          }
+        `
+
+        beforeEach(async () => {
+          await asAuthor.authenticateAs({
+            email: 'test@example.org',
+            password: '1234',
+          })
+          await asAuthor.create('Post', {
+            id: 'p139',
+            content: 'Post by user u343',
+          })
+          await asAuthor.create('Comment', {
+            id: 'c155',
+            postId: 'p139',
+            content: 'Comment by user u343',
+          })
+          deleteUserVariables = { id: 'u343' }
+        })
+        it('deletes my account', async () => {
+          const expected = {
+            DeleteUser: {
+              id: 'u343',
+            },
+          }
+          await expect(client.request(deleteUserMutation, deleteUserVariables)).resolves.toEqual(
+            expected,
+          )
+        })
+
+        describe("doesn't delete a user's", () => {
+          it('comments by default', async () => {
+            await client.request(deleteUserMutation, deleteUserVariables)
+            const commentQueryVariablesByContent = {
+              content: 'Comment by user u343',
+            }
+            const { Comment } = await client.request(commentQuery, commentQueryVariablesByContent)
+            expect(Comment).toEqual([
+              {
+                id: 'c155',
+              },
+            ])
+          })
+
+          it('posts by default', async () => {
+            await client.request(deleteUserMutation, deleteUserVariables)
+            const postQueryVariablesByContent = {
+              content: 'Post by user u343',
+            }
+            const { Post } = await client.request(postQuery, postQueryVariablesByContent)
+            expect(Post).toEqual([
+              {
+                id: 'p139',
+              },
+            ])
+          })
+        })
+
+        describe("deletes a user's", () => {
+          it('comments on request', async () => {
+            deleteUserVariables = { id: 'u343', comments: true }
+            await client.request(deleteUserMutation, deleteUserVariables)
+            const commentQueryVariablesByContent = {
+              content: 'Comment by user u343',
+            }
+            const { Comment } = await client.request(commentQuery, commentQueryVariablesByContent)
+            expect(Comment).toEqual([])
+          })
+
+          it('posts on request', async () => {
+            deleteUserVariables = { id: 'u343', posts: true }
+            await client.request(deleteUserMutation, deleteUserVariables)
+            const postQueryVariablesByContent = {
+              content: 'Post by user u343',
+            }
+            const { Post } = await client.request(postQuery, postQueryVariablesByContent)
+            expect(Post).toEqual([])
+          })
+        })
+      })
+    })
+  })
 })
diff --git a/backend/src/schema/types/schema.gql b/backend/src/schema/types/schema.gql
index ab8b25399..1b9517c52 100644
--- a/backend/src/schema/types/schema.gql
+++ b/backend/src/schema/types/schema.gql
@@ -4,8 +4,9 @@ type Query {
   currentUser: User
   # Get the latest Network Statistics
   statistics: Statistics!
-  findPosts(filter: String!, limit: Int = 10): [Post]! @cypher(
-    statement: """
+  findPosts(filter: String!, limit: Int = 10): [Post]!
+    @cypher(
+      statement: """
       CALL db.index.fulltext.queryNodes('full_text_search', $filter)
       YIELD node as post, score
       MATCH (post)<-[:WROTE]-(user:User)
@@ -14,8 +15,8 @@ type Query {
       AND NOT post.deleted = true AND NOT post.disabled = true
       RETURN post
       LIMIT $limit
-    """
-  )
+      """
+    )
   CommentByPost(postId: ID!): [Comment]!
 }
 
@@ -23,7 +24,7 @@ type Mutation {
   # Get a JWT Token for the given Email and password
   login(email: String!, password: String!): String!
   signup(email: String!, password: String!): Boolean!
-  changePassword(oldPassword:String!, newPassword: String!): String!
+  changePassword(oldPassword: String!, newPassword: String!): String!
   report(id: ID!, description: String): Report
   disable(id: ID!): ID
   enable(id: ID!): ID
@@ -37,6 +38,7 @@ type Mutation {
   follow(id: ID!, type: FollowTypeEnum): Boolean!
   # Unfollow the given Type and ID
   unfollow(id: ID!, type: FollowTypeEnum): Boolean!
+  DeleteUser(id: ID!, comments: Boolean, posts: Boolean): User
 }
 
 type Statistics {
@@ -53,7 +55,7 @@ type Statistics {
 
 type Notification {
   id: ID!
-  read: Boolean,
+  read: Boolean
   user: User @relation(name: "NOTIFIED", direction: "OUT")
   post: Post @relation(name: "NOTIFIED", direction: "IN")
   createdAt: String
@@ -80,7 +82,8 @@ type Report {
   id: ID!
   submitter: User @relation(name: "REPORTED", direction: "IN")
   description: String
-  type: String! @cypher(statement: "MATCH (resource)<-[:REPORTED]-(this) RETURN labels(resource)[0]")
+  type: String!
+    @cypher(statement: "MATCH (resource)<-[:REPORTED]-(this) RETURN labels(resource)[0]")
   createdAt: String
   comment: Comment @relation(name: "REPORTED", direction: "OUT")
   post: Post @relation(name: "REPORTED", direction: "OUT")
@@ -131,4 +134,3 @@ type SocialMedia {
   url: String
   ownedBy: [User]! @relation(name: "OWNED", direction: "IN")
 }
-

From 6e420d68d102d14ff3fd7255db82e61c381af553 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 7 Jun 2019 10:16:55 -0300
Subject: [PATCH 03/23] Improved UI

- add buefy for slider and checkboxes
- update/translate text
- add warning
- transition
---
 webapp/assets/styles/main.scss                |  11 +-
 .../DeleteAccount/DeleteAccount.vue           | 106 ++++++++++++------
 webapp/locales/en.json                        |   6 +-
 webapp/nuxt.config.js                         |   1 +
 webapp/package.json                           |   1 +
 webapp/plugins/buefy.js                       |  12 ++
 webapp/store/auth.js                          |   2 +
 webapp/yarn.lock                              |  12 ++
 8 files changed, 111 insertions(+), 40 deletions(-)
 create mode 100644 webapp/plugins/buefy.js

diff --git a/webapp/assets/styles/main.scss b/webapp/assets/styles/main.scss
index db967e973..560249b4a 100644
--- a/webapp/assets/styles/main.scss
+++ b/webapp/assets/styles/main.scss
@@ -10,7 +10,7 @@ $easeOut: cubic-bezier(0.19, 1, 0.22, 1);
   &::before {
     @include border-radius($border-radius-x-large);
     box-shadow: inset 0 0 0 5px $color-danger;
-    content: "";
+    content: '';
     display: block;
     position: absolute;
     width: 100%;
@@ -102,10 +102,10 @@ hr {
   height: 1px !important;
 }
 
-[class$=menu-trigger] {
+[class$='menu-trigger'] {
   user-select: none;
 }
-[class$=menu-popover] {
+[class$='menu-popover'] {
   display: inline-block;
 
   nav {
@@ -145,10 +145,11 @@ hr {
   }
 }
 
-[class$="menu-popover"] {
+[class$='menu-popover'] {
   min-width: 130px;
 
-  a, button {
+  a,
+  button {
     display: flex;
     align-content: center;
     align-items: center;
diff --git a/webapp/components/DeleteAccount/DeleteAccount.vue b/webapp/components/DeleteAccount/DeleteAccount.vue
index b73142a52..dd03da648 100644
--- a/webapp/components/DeleteAccount/DeleteAccount.vue
+++ b/webapp/components/DeleteAccount/DeleteAccount.vue
@@ -2,57 +2,95 @@
   <div>
     <ds-card hover>
       <ds-space />
-      <ds-form v-model="formData">
-        <ds-flex>
-          <ds-flex-item width="10%" />
-          <ds-flex-item>
-            <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
-          </ds-flex-item>
-          <ds-flex-item width="80%">
-            <ds-heading>{{ $t('settings.delete.name') }}</ds-heading>
-          </ds-flex-item>
-          <ds-container>
-            <ds-space />
-            <ds-heading tag="h3">
-              This is a destructive action and to proceed you must choose to take this action by
-              selecting the 'I really want to delete my account' from the dropdown This cannot be
-              undone, please consider your actions carefully!
-            </ds-heading>
-          </ds-container>
-        </ds-flex>
-        <ds-space />
-        <ds-section>
+      <ds-flex>
+        <ds-flex-item width="5%" />
+        <ds-flex-item>
+          <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
+        </ds-flex-item>
+        <ds-flex-item width="80%">
+          <ds-heading>{{ $t('settings.delete.name') }}</ds-heading>
+        </ds-flex-item>
+        <ds-container>
+          <ds-space />
+          <ds-heading tag="h4">{{ $t('settings.delete.accountDescription') }}</ds-heading>
+        </ds-container>
+      </ds-flex>
+      <ds-space />
+      <ds-container>
+        <transition name="slide-up">
+          <div v-if="deleteEnabled">
+            <div class="field">
+              <div class="control">
+                <b-checkbox
+                  type="is-danger"
+                  :disabled="!currentUser.contributionsCount"
+                  v-model="formData.deleteContributions"
+                >
+                  {{ $t('settings.delete.countPosts', { count: currentUser.contributionsCount }) }}
+                </b-checkbox>
+              </div>
+            </div>
+            <div class="field">
+              <div class="control">
+                <b-checkbox
+                  type="is-danger"
+                  :disabled="!currentUser.commentsCount"
+                  v-model="formData.deleteComments"
+                >
+                  {{ $t('settings.delete.countComments', { count: currentUser.commentsCount }) }}
+                </b-checkbox>
+              </div>
+            </div>
+            <div class="message is-danger">
+              <div class="message-body" v-html="$t('settings.delete.accountWarning')"></div>
+            </div>
+          </div>
+        </transition>
+      </ds-container>
+      <template slot="footer">
+        <ds-container>
           <ds-flex>
-            <ds-flex-item width="50%">
-              <ds-select
-                v-model="accept"
-                :options="['', 'I really want to delete my account']"
-                @input="enableDeletion"
-                placeholder="Are you sure you want to delete your account?"
-              />
+            <ds-flex-item width="40%">
+              <div class="columns is-mobile">
+                <div class="column">
+                  <b-switch type="is-danger" v-model="deleteEnabled"></b-switch>
+                </div>
+              </div>
             </ds-flex-item>
-            <ds-flex-item width="10%" />
+            <ds-flex-item width="20%" />
             <ds-flex-item>
-              <ds-button icon="trash" danger :disabled="disabled">
+              <ds-button icon="trash" danger :disabled="isLoading || !deleteEnabled">
                 {{ $t('settings.delete.name') }}
               </ds-button>
             </ds-flex-item>
           </ds-flex>
-        </ds-section>
-      </ds-form>
+        </ds-container>
+      </template>
     </ds-card>
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   name: 'DeleteAccount',
   data() {
     return {
-      formData: {},
-      accept: null,
-      disabled: true,
+      formData: {
+        deleteContributions: false,
+        deleteComments: false,
+      },
+      deleteEnabled: false,
+      isLoading: false,
+      countPosts: 0,
+      countComments: 0,
     }
   },
+  computed: {
+    ...mapGetters({
+      currentUser: 'auth/user',
+    }),
+  },
   methods: {
     enableDeletion() {
       if (this.accept === 'I really want to delete my account') {
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 567f6bcd4..0945ada22 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -74,7 +74,11 @@
       "name": "Download Data"
     },
     "delete": {
-      "name": "Delete my User Account"
+      "name": "Delete my User Account",
+      "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!"
     },
     "organizations": {
       "name": "My Organizations"
diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index 49f2f5d0a..37ff192b7 100644
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@@ -81,6 +81,7 @@ module.exports = {
     { src: '~/plugins/v-tooltip.js', ssr: false },
     { src: '~/plugins/izi-toast.js', ssr: false },
     { src: '~/plugins/vue-filters.js' },
+    { src: '~/plugins/buefy.js' },
   ],
 
   router: {
diff --git a/webapp/package.json b/webapp/package.json
index 379053d08..e145f6991 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -57,6 +57,7 @@
     "accounting": "~0.4.1",
     "apollo-cache-inmemory": "~1.5.1",
     "apollo-client": "~2.6.1",
+    "buefy": "^0.7.7",
     "cookie-universal-nuxt": "~2.0.14",
     "cross-env": "~5.2.0",
     "date-fns": "2.0.0-alpha.29",
diff --git a/webapp/plugins/buefy.js b/webapp/plugins/buefy.js
new file mode 100644
index 000000000..36fb7b2d2
--- /dev/null
+++ b/webapp/plugins/buefy.js
@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import Buefy from 'buefy'
+import 'buefy/dist/buefy.css'
+
+Vue.use(Buefy, {
+  defaultIconPack: 'fa',
+  defaultTooltipAnimated: true,
+  defaultTooltipType: 'is-black',
+  defaultToastDuration: 6000,
+  defaultSnackbarDuration: 5000,
+  defaultNoticeQueue: true,
+})
diff --git a/webapp/store/auth.js b/webapp/store/auth.js
index 87de84d9a..6185a38cf 100644
--- a/webapp/store/auth.js
+++ b/webapp/store/auth.js
@@ -79,6 +79,8 @@ export const actions = {
           role
           about
           locationName
+          contributionsCount
+          commentsCount
           socialMedia {
             id
             url
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 56e2e50b3..6708acfa8 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -2689,6 +2689,13 @@ bser@^2.0.0:
   dependencies:
     node-int64 "^0.4.0"
 
+buefy@^0.7.7:
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.7.7.tgz#0e0dea84e776959bf2c23110541d67a94eaaa1de"
+  integrity sha512-UuPD+/749s6XzRL2INoJxykOygcBo1pVlLlSJ7wodY228LGOYsURXSkMrCxeemwhvWzSq/UJ+D8X9BkyIw6Tww==
+  dependencies:
+    bulma "0.7.5"
+
 buffer-equal-constant-time@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
@@ -2723,6 +2730,11 @@ builtin-status-codes@^3.0.0:
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
   integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
+bulma@0.7.5:
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.7.5.tgz#35066c37f82c088b68f94450be758fc00a967208"
+  integrity sha512-cX98TIn0I6sKba/DhW0FBjtaDpxTelU166pf7ICXpCCuplHWyu6C9LYZmL5PEsnePIeJaiorsTEzzNk3Tsm1hw==
+
 busboy@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/busboy/-/busboy-0.3.1.tgz#170899274c5bf38aae27d5c62b71268cd585fd1b"

From ed5f14d052e8490dfe26309345dc31fef833d259 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 7 Jun 2019 10:17:58 -0300
Subject: [PATCH 04/23] Dry out resolver

---
 backend/src/schema/resolvers/users.js      | 35 ++++++++--------------
 backend/src/schema/resolvers/users.spec.js | 25 ++++++++++++----
 backend/src/schema/types/schema.gql        |  2 +-
 3 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/backend/src/schema/resolvers/users.js b/backend/src/schema/resolvers/users.js
index d46664c60..60558a056 100644
--- a/backend/src/schema/resolvers/users.js
+++ b/backend/src/schema/resolvers/users.js
@@ -12,29 +12,20 @@ export default {
       return neo4jgraphql(object, params, context, resolveInfo, false)
     },
     DeleteUser: async (object, params, context, resolveInfo) => {
-      const { comments, posts } = params
+      const { resource } = params
       const session = context.driver.session()
-      if (comments) {
-        await session.run(
-          `
-          MATCH (comments:Comment)<-[:WROTE]-(author:User {id: $userId}) 
-          DETACH DELETE comments
-          RETURN author`,
-          {
-            userId: context.user.id,
-          },
-        )
-      }
-      if (posts) {
-        await session.run(
-          `
-          MATCH (posts:Post)<-[:WROTE]-(author:User {id: $userId}) 
-          DETACH DELETE posts
-          RETURN author`,
-          {
-            userId: context.user.id,
-          },
-        )
+      if (resource && resource.length) {
+        resource.forEach(async node => {
+          await session.run(
+            `
+            MATCH (resource:${node})<-[:WROTE]-(author:User {id: $userId})
+            DETACH DELETE resource
+            RETURN author`,
+            {
+              userId: context.user.id,
+            },
+          )
+        })
       }
       session.close()
       return neo4jgraphql(object, params, context, resolveInfo, false)
diff --git a/backend/src/schema/resolvers/users.spec.js b/backend/src/schema/resolvers/users.spec.js
index a2b59c19d..06ccec5de 100644
--- a/backend/src/schema/resolvers/users.spec.js
+++ b/backend/src/schema/resolvers/users.spec.js
@@ -88,8 +88,8 @@ describe('users', () => {
     let deleteUserVariables
     let asAuthor
     const deleteUserMutation = gql`
-      mutation($id: ID!, $comments: Boolean, $posts: Boolean) {
-        DeleteUser(id: $id, comments: $comments, posts: $posts) {
+      mutation($id: ID!, $resource: [String]) {
+        DeleteUser(id: $id, resource: $resource) {
           id
         }
       }
@@ -209,8 +209,18 @@ describe('users', () => {
         })
 
         describe("deletes a user's", () => {
+          it('posts on request', async () => {
+            deleteUserVariables = { id: 'u343', resource: ['Post'] }
+            await client.request(deleteUserMutation, deleteUserVariables)
+            const postQueryVariablesByContent = {
+              content: 'Post by user u343',
+            }
+            const { Post } = await client.request(postQuery, postQueryVariablesByContent)
+            expect(Post).toEqual([])
+          })
+
           it('comments on request', async () => {
-            deleteUserVariables = { id: 'u343', comments: true }
+            deleteUserVariables = { id: 'u343', resource: ['Comment'] }
             await client.request(deleteUserMutation, deleteUserVariables)
             const commentQueryVariablesByContent = {
               content: 'Comment by user u343',
@@ -219,14 +229,19 @@ describe('users', () => {
             expect(Comment).toEqual([])
           })
 
-          it('posts on request', async () => {
-            deleteUserVariables = { id: 'u343', posts: true }
+          it('posts and comments on request', async () => {
+            deleteUserVariables = { id: 'u343', resource: ['Post', 'Comment'] }
             await client.request(deleteUserMutation, deleteUserVariables)
             const postQueryVariablesByContent = {
               content: 'Post by user u343',
             }
+            const commentQueryVariablesByContent = {
+              content: 'Comment by user u343',
+            }
             const { Post } = await client.request(postQuery, postQueryVariablesByContent)
+            const { Comment } = await client.request(commentQuery, commentQueryVariablesByContent)
             expect(Post).toEqual([])
+            expect(Comment).toEqual([])
           })
         })
       })
diff --git a/backend/src/schema/types/schema.gql b/backend/src/schema/types/schema.gql
index 1b9517c52..2a8be9e09 100644
--- a/backend/src/schema/types/schema.gql
+++ b/backend/src/schema/types/schema.gql
@@ -38,7 +38,7 @@ type Mutation {
   follow(id: ID!, type: FollowTypeEnum): Boolean!
   # Unfollow the given Type and ID
   unfollow(id: ID!, type: FollowTypeEnum): Boolean!
-  DeleteUser(id: ID!, comments: Boolean, posts: Boolean): User
+  DeleteUser(id: ID!, resource: [String]): User
 }
 
 type Statistics {

From 70aa77bd2eb8b5d9a390ee4cfb7a4bce3e533f15 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 7 Jun 2019 13:37:59 -0300
Subject: [PATCH 05/23] Get user deletion working from UI

---
 .../DeleteAccount/DeleteAccount.vue           | 41 +++++++++++++++----
 webapp/locales/en.json                        |  3 +-
 webapp/pages/post/_id/_slug/index.vue         |  6 +--
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/webapp/components/DeleteAccount/DeleteAccount.vue b/webapp/components/DeleteAccount/DeleteAccount.vue
index dd03da648..d7e102d28 100644
--- a/webapp/components/DeleteAccount/DeleteAccount.vue
+++ b/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)
+        })
     },
   },
 }
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 0945ada22..0644dbdb4 100644
--- a/webapp/locales/en.json
+++ b/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"
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 81f05c36c..d2113dff7 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/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 -->

From 6b0c1312f1b29c90c50ef344c23c778727559bae Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 7 Jun 2019 13:38:31 -0300
Subject: [PATCH 06/23] Refactor tests to dry out, search for by comment id

---
 backend/src/schema/resolvers/users.spec.js | 40 +++++++---------------
 1 file changed, 12 insertions(+), 28 deletions(-)

diff --git a/backend/src/schema/resolvers/users.spec.js b/backend/src/schema/resolvers/users.spec.js
index 06ccec5de..1a7b2a517 100644
--- a/backend/src/schema/resolvers/users.spec.js
+++ b/backend/src/schema/resolvers/users.spec.js
@@ -137,17 +137,19 @@ describe('users', () => {
       })
 
       describe('attempting to delete my own account', () => {
+        const commentQueryVariables = { id: 'c155' }
+        const postQueryVariables = { id: 'p139' }
         const commentQuery = gql`
-          query($content: String) {
-            Comment(content: $content) {
+          query($id: ID) {
+            Comment(id: $id) {
               id
             }
           }
         `
 
         const postQuery = gql`
-          query($content: String) {
-            Post(content: $content) {
+          query($id: ID) {
+            Post(id: $id) {
               id
             }
           }
@@ -183,10 +185,7 @@ describe('users', () => {
         describe("doesn't delete a user's", () => {
           it('comments by default', async () => {
             await client.request(deleteUserMutation, deleteUserVariables)
-            const commentQueryVariablesByContent = {
-              content: 'Comment by user u343',
-            }
-            const { Comment } = await client.request(commentQuery, commentQueryVariablesByContent)
+            const { Comment } = await client.request(commentQuery, commentQueryVariables)
             expect(Comment).toEqual([
               {
                 id: 'c155',
@@ -196,10 +195,7 @@ describe('users', () => {
 
           it('posts by default', async () => {
             await client.request(deleteUserMutation, deleteUserVariables)
-            const postQueryVariablesByContent = {
-              content: 'Post by user u343',
-            }
-            const { Post } = await client.request(postQuery, postQueryVariablesByContent)
+            const { Post } = await client.request(postQuery, postQueryVariables)
             expect(Post).toEqual([
               {
                 id: 'p139',
@@ -212,34 +208,22 @@ describe('users', () => {
           it('posts on request', async () => {
             deleteUserVariables = { id: 'u343', resource: ['Post'] }
             await client.request(deleteUserMutation, deleteUserVariables)
-            const postQueryVariablesByContent = {
-              content: 'Post by user u343',
-            }
-            const { Post } = await client.request(postQuery, postQueryVariablesByContent)
+            const { Post } = await client.request(postQuery, postQueryVariables)
             expect(Post).toEqual([])
           })
 
           it('comments on request', async () => {
             deleteUserVariables = { id: 'u343', resource: ['Comment'] }
             await client.request(deleteUserMutation, deleteUserVariables)
-            const commentQueryVariablesByContent = {
-              content: 'Comment by user u343',
-            }
-            const { Comment } = await client.request(commentQuery, commentQueryVariablesByContent)
+            const { Comment } = await client.request(commentQuery, commentQueryVariables)
             expect(Comment).toEqual([])
           })
 
           it('posts and comments on request', async () => {
             deleteUserVariables = { id: 'u343', resource: ['Post', 'Comment'] }
             await client.request(deleteUserMutation, deleteUserVariables)
-            const postQueryVariablesByContent = {
-              content: 'Post by user u343',
-            }
-            const commentQueryVariablesByContent = {
-              content: 'Comment by user u343',
-            }
-            const { Post } = await client.request(postQuery, postQueryVariablesByContent)
-            const { Comment } = await client.request(commentQuery, commentQueryVariablesByContent)
+            const { Post } = await client.request(postQuery, postQueryVariables)
+            const { Comment } = await client.request(commentQuery, commentQueryVariables)
             expect(Post).toEqual([])
             expect(Comment).toEqual([])
           })

From cc1be62bbdb0a70c375ed9d72059f487e1abd734 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 7 Jun 2019 13:58:53 -0300
Subject: [PATCH 07/23] Add afterEach block to DeleteUser block

- not able to reliably get reproduce build failure locally
---
 backend/src/schema/resolvers/users.spec.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/backend/src/schema/resolvers/users.spec.js b/backend/src/schema/resolvers/users.spec.js
index 1a7b2a517..ea68a211d 100644
--- a/backend/src/schema/resolvers/users.spec.js
+++ b/backend/src/schema/resolvers/users.spec.js
@@ -108,6 +108,10 @@ describe('users', () => {
       deleteUserVariables = { id: 'u343' }
     })
 
+    afterEach(async () => {
+      await factory.cleanDatabase()
+    })
+
     describe('unauthenticated', () => {
       it('throws authorization error', async () => {
         client = new GraphQLClient(host)

From 687e12165899d9e995123ce28856ef64b0ca712d Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 7 Jun 2019 14:21:03 -0300
Subject: [PATCH 08/23] Remove unneccesary second database clean, reset
 variables

- in high level describe block, to avoid leaky info
---
 backend/src/schema/resolvers/users.spec.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/backend/src/schema/resolvers/users.spec.js b/backend/src/schema/resolvers/users.spec.js
index ea68a211d..b63cf51eb 100644
--- a/backend/src/schema/resolvers/users.spec.js
+++ b/backend/src/schema/resolvers/users.spec.js
@@ -105,11 +105,7 @@ describe('users', () => {
         password: '1234',
         id: 'u565',
       })
-      deleteUserVariables = { id: 'u343' }
-    })
-
-    afterEach(async () => {
-      await factory.cleanDatabase()
+      deleteUserVariables = { id: 'u343', resource: [] }
     })
 
     describe('unauthenticated', () => {
@@ -173,7 +169,6 @@ describe('users', () => {
             postId: 'p139',
             content: 'Comment by user u343',
           })
-          deleteUserVariables = { id: 'u343' }
         })
         it('deletes my account', async () => {
           const expected = {

From ef1f5ea51c0d803f6700b0bfccd4beca49ce90fb Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 7 Jun 2019 14:47:57 -0300
Subject: [PATCH 09/23] Nested beforeEach

- flaky test, leaky info
---
 backend/src/schema/resolvers/users.spec.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/backend/src/schema/resolvers/users.spec.js b/backend/src/schema/resolvers/users.spec.js
index b63cf51eb..320c49a7b 100644
--- a/backend/src/schema/resolvers/users.spec.js
+++ b/backend/src/schema/resolvers/users.spec.js
@@ -204,6 +204,10 @@ describe('users', () => {
         })
 
         describe("deletes a user's", () => {
+          beforeEach(async () => {
+            deleteUserVariables = { id: 'u343', resource: [] }
+          })
+
           it('posts on request', async () => {
             deleteUserVariables = { id: 'u343', resource: ['Post'] }
             await client.request(deleteUserMutation, deleteUserVariables)

From f7b2d52a7e10e1cbd3238265c19af0289b616e70 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 7 Jun 2019 15:58:51 -0300
Subject: [PATCH 10/23] Refactor resolver to use Promise and map

- forEach cannot be used with async/await
---
 backend/src/schema/resolvers/users.js      |  21 +++--
 backend/src/schema/resolvers/users.spec.js | 100 +++++++++------------
 2 files changed, 56 insertions(+), 65 deletions(-)

diff --git a/backend/src/schema/resolvers/users.js b/backend/src/schema/resolvers/users.js
index 60558a056..f1cfffd65 100644
--- a/backend/src/schema/resolvers/users.js
+++ b/backend/src/schema/resolvers/users.js
@@ -14,20 +14,23 @@ export default {
     DeleteUser: async (object, params, context, resolveInfo) => {
       const { resource } = params
       const session = context.driver.session()
+
       if (resource && resource.length) {
-        resource.forEach(async node => {
-          await session.run(
-            `
+        await Promise.all(
+          resource.map(async node => {
+            await session.run(
+              `
             MATCH (resource:${node})<-[:WROTE]-(author:User {id: $userId})
             DETACH DELETE resource
             RETURN author`,
-            {
-              userId: context.user.id,
-            },
-          )
-        })
+              {
+                userId: context.user.id,
+              },
+            )
+          }),
+        )
+        session.close()
       }
-      session.close()
       return neo4jgraphql(object, params, context, resolveInfo, false)
     },
   },
diff --git a/backend/src/schema/resolvers/users.spec.js b/backend/src/schema/resolvers/users.spec.js
index 320c49a7b..3706cbbae 100644
--- a/backend/src/schema/resolvers/users.spec.js
+++ b/backend/src/schema/resolvers/users.spec.js
@@ -91,6 +91,12 @@ describe('users', () => {
       mutation($id: ID!, $resource: [String]) {
         DeleteUser(id: $id, resource: $resource) {
           id
+          contributions {
+            id
+          }
+          comments {
+            id
+          }
         }
       }
     `
@@ -137,24 +143,7 @@ describe('users', () => {
       })
 
       describe('attempting to delete my own account', () => {
-        const commentQueryVariables = { id: 'c155' }
-        const postQueryVariables = { id: 'p139' }
-        const commentQuery = gql`
-          query($id: ID) {
-            Comment(id: $id) {
-              id
-            }
-          }
-        `
-
-        const postQuery = gql`
-          query($id: ID) {
-            Post(id: $id) {
-              id
-            }
-          }
-        `
-
+        let expected
         beforeEach(async () => {
           await asAuthor.authenticateAs({
             email: 'test@example.org',
@@ -169,38 +158,18 @@ describe('users', () => {
             postId: 'p139',
             content: 'Comment by user u343',
           })
-        })
-        it('deletes my account', async () => {
-          const expected = {
+          expectedResponse = {
             DeleteUser: {
               id: 'u343',
+              contributions: [{ id: 'p139' }],
+              comments: [{ id: 'c155' }],
             },
           }
-          await expect(client.request(deleteUserMutation, deleteUserVariables)).resolves.toEqual(
-            expected,
-          )
         })
-
-        describe("doesn't delete a user's", () => {
-          it('comments by default', async () => {
-            await client.request(deleteUserMutation, deleteUserVariables)
-            const { Comment } = await client.request(commentQuery, commentQueryVariables)
-            expect(Comment).toEqual([
-              {
-                id: 'c155',
-              },
-            ])
-          })
-
-          it('posts by default', async () => {
-            await client.request(deleteUserMutation, deleteUserVariables)
-            const { Post } = await client.request(postQuery, postQueryVariables)
-            expect(Post).toEqual([
-              {
-                id: 'p139',
-              },
-            ])
-          })
+        it("deletes my account, but doesn't delete posts or comments by default", async () => {
+          await expect(client.request(deleteUserMutation, deleteUserVariables)).resolves.toEqual(
+            expectedResponse,
+          )
         })
 
         describe("deletes a user's", () => {
@@ -210,25 +179,44 @@ describe('users', () => {
 
           it('posts on request', async () => {
             deleteUserVariables = { id: 'u343', resource: ['Post'] }
-            await client.request(deleteUserMutation, deleteUserVariables)
-            const { Post } = await client.request(postQuery, postQueryVariables)
-            expect(Post).toEqual([])
+            expectedResponse = {
+              DeleteUser: {
+                id: 'u343',
+                contributions: [],
+                comments: [{ id: 'c155' }],
+              },
+            }
+            await expect(client.request(deleteUserMutation, deleteUserVariables)).resolves.toEqual(
+              expectedResponse,
+            )
           })
 
           it('comments on request', async () => {
             deleteUserVariables = { id: 'u343', resource: ['Comment'] }
-            await client.request(deleteUserMutation, deleteUserVariables)
-            const { Comment } = await client.request(commentQuery, commentQueryVariables)
-            expect(Comment).toEqual([])
+            expectedResponse = {
+              DeleteUser: {
+                id: 'u343',
+                contributions: [{ id: 'p139' }],
+                comments: [],
+              },
+            }
+            await expect(client.request(deleteUserMutation, deleteUserVariables)).resolves.toEqual(
+              expectedResponse,
+            )
           })
 
           it('posts and comments on request', async () => {
             deleteUserVariables = { id: 'u343', resource: ['Post', 'Comment'] }
-            await client.request(deleteUserMutation, deleteUserVariables)
-            const { Post } = await client.request(postQuery, postQueryVariables)
-            const { Comment } = await client.request(commentQuery, commentQueryVariables)
-            expect(Post).toEqual([])
-            expect(Comment).toEqual([])
+            expectedResponse = {
+              DeleteUser: {
+                id: 'u343',
+                contributions: [],
+                comments: [],
+              },
+            }
+            await expect(client.request(deleteUserMutation, deleteUserVariables)).resolves.toEqual(
+              expectedResponse,
+            )
           })
         })
       })

From 7bbf870d8d0f7f235af0c672a6b32e69154a38fb Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 7 Jun 2019 16:03:02 -0300
Subject: [PATCH 11/23] Clean up of backend tests

- changed variable name, remove unneeded beforeEach
---
 backend/src/schema/resolvers/users.spec.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/backend/src/schema/resolvers/users.spec.js b/backend/src/schema/resolvers/users.spec.js
index 3706cbbae..c91fdf08e 100644
--- a/backend/src/schema/resolvers/users.spec.js
+++ b/backend/src/schema/resolvers/users.spec.js
@@ -143,7 +143,7 @@ describe('users', () => {
       })
 
       describe('attempting to delete my own account', () => {
-        let expected
+        let expectedResponse
         beforeEach(async () => {
           await asAuthor.authenticateAs({
             email: 'test@example.org',
@@ -173,10 +173,6 @@ describe('users', () => {
         })
 
         describe("deletes a user's", () => {
-          beforeEach(async () => {
-            deleteUserVariables = { id: 'u343', resource: [] }
-          })
-
           it('posts on request', async () => {
             deleteUserVariables = { id: 'u343', resource: ['Post'] }
             expectedResponse = {

From 18d3e36c19f6ae5e57ddaeedc0afd6b3d2417192 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 7 Jun 2019 18:13:49 -0300
Subject: [PATCH 12/23] Write component tests, move header close to icon

---
 .../DeleteAccount/DeleteAccount.spec.js       | 168 ++++++++++++++++++
 .../DeleteAccount/DeleteAccount.vue           |  64 +++----
 2 files changed, 197 insertions(+), 35 deletions(-)
 create mode 100644 webapp/components/DeleteAccount/DeleteAccount.spec.js

diff --git a/webapp/components/DeleteAccount/DeleteAccount.spec.js b/webapp/components/DeleteAccount/DeleteAccount.spec.js
new file mode 100644
index 000000000..fcbf18a3e
--- /dev/null
+++ b/webapp/components/DeleteAccount/DeleteAccount.spec.js
@@ -0,0 +1,168 @@
+import { config, mount, createLocalVue, createWrapper } from '@vue/test-utils'
+import DeleteAccount from './DeleteAccount.vue'
+import Styleguide from '@human-connection/styleguide'
+import Vuex from 'vuex'
+
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
+localVue.use(Styleguide)
+config.stubs['b-switch'] = '<span><slot /></span>'
+config.stubs['b-checkbox'] = '<span><slot /></span>'
+
+describe('DeleteAccount.vue', () => {
+  let mocks
+  let wrapper
+  let getters
+  let actions
+  let deleteAccountBtn
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+      $apollo: {
+        mutate: jest
+          .fn()
+          .mockResolvedValueOnce({
+            data: {
+              DeleteAccount: {
+                id: 'u343',
+              },
+            },
+          })
+          .mockRejectedValue({ message: 'Not authorised!' }),
+      },
+      $toast: {
+        error: jest.fn(),
+        success: jest.fn(),
+      },
+      $router: {
+        history: {
+          push: jest.fn(),
+        },
+      },
+    }
+    getters = {
+      'auth/user': () => {
+        return { id: 'u343' }
+      },
+    }
+    actions = { 'auth/logout': jest.fn() }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      const store = new Vuex.Store({
+        getters,
+        actions,
+      })
+      return mount(DeleteAccount, { mocks, localVue, store })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    afterEach(() => {
+      jest.clearAllMocks()
+    })
+
+    it('defaults to deleteContributions to false', () => {
+      expect(wrapper.vm.deleteContributions).toEqual(false)
+    })
+
+    it('defaults to deleteComments to false', () => {
+      expect(wrapper.vm.deleteComments).toEqual(false)
+    })
+
+    it('defaults to deleteEnabled to false', () => {
+      expect(wrapper.vm.deleteEnabled).toEqual(false)
+    })
+
+    it('does not call the delete user mutation if deleteEnabled is false', () => {
+      deleteAccountBtn = wrapper.find('.ds-button-danger')
+      deleteAccountBtn.trigger('click')
+      expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
+    })
+
+    describe('calls the delete user mutation', () => {
+      beforeEach(() => {
+        wrapper.setData({ deleteEnabled: true })
+        deleteAccountBtn = wrapper.find('.ds-button-danger')
+      })
+
+      it('if deleteEnabled is true and only deletes user by default', () => {
+        deleteAccountBtn.trigger('click')
+        expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
+          expect.objectContaining({
+            variables: {
+              id: 'u343',
+              resource: [],
+            },
+          }),
+        )
+      })
+
+      it("deletes a user's posts if requested", () => {
+        wrapper.setData({ deleteContributions: true })
+        deleteAccountBtn.trigger('click')
+        expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
+          expect.objectContaining({
+            variables: {
+              id: 'u343',
+              resource: ['Post'],
+            },
+          }),
+        )
+      })
+
+      it("deletes a user's comments if requested", () => {
+        wrapper.setData({ deleteComments: true })
+        deleteAccountBtn.trigger('click')
+        expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
+          expect.objectContaining({
+            variables: {
+              id: 'u343',
+              resource: ['Comment'],
+            },
+          }),
+        )
+      })
+
+      it("deletes a user's posts and comments if requested", () => {
+        wrapper.setData({ deleteContributions: true, deleteComments: true })
+        deleteAccountBtn.trigger('click')
+        expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
+          expect.objectContaining({
+            variables: {
+              id: 'u343',
+              resource: ['Post', 'Comment'],
+            },
+          }),
+        )
+      })
+
+      it('shows a success toaster after successful mutation', async () => {
+        await deleteAccountBtn.trigger('click')
+        expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
+      })
+
+      it('updates the user in the store', async () => {
+        await deleteAccountBtn.trigger('click')
+        expect(mocks.$router.history.push).toHaveBeenCalledWith('/')
+      })
+    })
+
+    describe('error handling', () => {
+      it('shows an error toaster when the mutation rejects', async () => {
+        wrapper.setData({ deleteEnabled: true })
+        deleteAccountBtn = wrapper.find('.ds-button-danger')
+        await deleteAccountBtn.trigger('click')
+        // second submission causes mutation to reject
+        await deleteAccountBtn.trigger('click')
+        await mocks.$apollo.mutate
+        expect(mocks.$toast.error).toHaveBeenCalledWith('Not authorised!')
+      })
+    })
+  })
+})
diff --git a/webapp/components/DeleteAccount/DeleteAccount.vue b/webapp/components/DeleteAccount/DeleteAccount.vue
index d7e102d28..35a8c7865 100644
--- a/webapp/components/DeleteAccount/DeleteAccount.vue
+++ b/webapp/components/DeleteAccount/DeleteAccount.vue
@@ -1,21 +1,20 @@
 <template>
   <div>
     <ds-card hover>
-      <ds-space />
-      <ds-flex>
-        <ds-flex-item width="5%" />
-        <ds-flex-item>
-          <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
-        </ds-flex-item>
-        <ds-flex-item width="80%">
-          <ds-heading>{{ $t('settings.delete.name') }}</ds-heading>
-        </ds-flex-item>
-        <ds-container>
-          <ds-space />
+      <ds-space/>
+      <ds-container>
+        <ds-flex>
+          <ds-flex-item width="8%">
+            <ds-icon name="warning" size="xxx-large" class="delete-warning-icon"/>
+          </ds-flex-item>
+          <ds-flex-item width="80%">
+            <ds-heading>{{ $t('settings.delete.name') }}</ds-heading>
+          </ds-flex-item>
+          <ds-space/>
           <ds-heading tag="h4">{{ $t('settings.delete.accountDescription') }}</ds-heading>
-        </ds-container>
-      </ds-flex>
-      <ds-space />
+        </ds-flex>
+      </ds-container>
+      <ds-space/>
       <ds-container>
         <transition name="slide-up">
           <div v-if="deleteEnabled">
@@ -24,10 +23,8 @@
                 <b-checkbox
                   type="is-danger"
                   :disabled="!currentUser.contributionsCount"
-                  v-model="formData.deleteContributions"
-                >
-                  {{ $t('settings.delete.countPosts', { count: currentUser.contributionsCount }) }}
-                </b-checkbox>
+                  v-model="deleteContributions"
+                >{{ $t('settings.delete.countPosts', { count: currentUser.contributionsCount }) }}</b-checkbox>
               </div>
             </div>
             <div class="field">
@@ -35,10 +32,8 @@
                 <b-checkbox
                   type="is-danger"
                   :disabled="!currentUser.commentsCount"
-                  v-model="formData.deleteComments"
-                >
-                  {{ $t('settings.delete.countComments', { count: currentUser.commentsCount }) }}
-                </b-checkbox>
+                  v-model="deleteComments"
+                >{{ $t('settings.delete.countComments', { count: currentUser.commentsCount }) }}</b-checkbox>
               </div>
             </div>
             <div class="message is-danger">
@@ -57,16 +52,14 @@
                 </div>
               </div>
             </ds-flex-item>
-            <ds-flex-item width="20%" />
+            <ds-flex-item width="20%"/>
             <ds-flex-item>
               <ds-button
                 icon="trash"
                 danger
                 :disabled="isLoading || !deleteEnabled"
                 @click="handleSubmit"
-              >
-                {{ $t('settings.delete.name') }}
-              </ds-button>
+              >{{ $t('settings.delete.name') }}</ds-button>
             </ds-flex-item>
           </ds-flex>
         </ds-container>
@@ -75,17 +68,15 @@
   </div>
 </template>
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import gql from 'graphql-tag'
 
 export default {
   name: 'DeleteAccount',
   data() {
     return {
-      formData: {
-        deleteContributions: false,
-        deleteComments: false,
-      },
+      deleteContributions: false,
+      deleteComments: false,
       deleteEnabled: false,
       isLoading: false,
     }
@@ -96,12 +87,15 @@ export default {
     }),
   },
   methods: {
+    ...mapActions({
+      logout: 'auth/logout',
+    }),
     handleSubmit() {
       let resourceArgs = []
-      if (this.formData.deleteContributions) {
+      if (this.deleteContributions) {
         resourceArgs.push('Post')
       }
-      if (this.formData.deleteComments) {
+      if (this.deleteComments) {
         resourceArgs.push('Comment')
       }
       this.$apollo
@@ -117,8 +111,8 @@ export default {
         })
         .then(() => {
           this.$toast.success(this.$t('settings.delete.success'))
-          this.$store.dispatch('auth/logout')
-          this.$router.replace('/')
+          this.logout()
+          this.$router.history.push('/')
         })
         .catch(error => {
           this.$toast.error(error.message)

From eb45e68896300f105daae70f0559d4ebd979ff90 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 7 Jun 2019 18:17:15 -0300
Subject: [PATCH 13/23] Fix lint

---
 .../DeleteAccount/DeleteAccount.spec.js       |  2 +-
 .../DeleteAccount/DeleteAccount.vue           | 22 ++++++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/webapp/components/DeleteAccount/DeleteAccount.spec.js b/webapp/components/DeleteAccount/DeleteAccount.spec.js
index fcbf18a3e..f1bd8ffc1 100644
--- a/webapp/components/DeleteAccount/DeleteAccount.spec.js
+++ b/webapp/components/DeleteAccount/DeleteAccount.spec.js
@@ -1,4 +1,4 @@
-import { config, mount, createLocalVue, createWrapper } from '@vue/test-utils'
+import { config, mount, createLocalVue } from '@vue/test-utils'
 import DeleteAccount from './DeleteAccount.vue'
 import Styleguide from '@human-connection/styleguide'
 import Vuex from 'vuex'
diff --git a/webapp/components/DeleteAccount/DeleteAccount.vue b/webapp/components/DeleteAccount/DeleteAccount.vue
index 35a8c7865..05be374f5 100644
--- a/webapp/components/DeleteAccount/DeleteAccount.vue
+++ b/webapp/components/DeleteAccount/DeleteAccount.vue
@@ -1,20 +1,20 @@
 <template>
   <div>
     <ds-card hover>
-      <ds-space/>
+      <ds-space />
       <ds-container>
         <ds-flex>
           <ds-flex-item width="8%">
-            <ds-icon name="warning" size="xxx-large" class="delete-warning-icon"/>
+            <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
           </ds-flex-item>
           <ds-flex-item width="80%">
             <ds-heading>{{ $t('settings.delete.name') }}</ds-heading>
           </ds-flex-item>
-          <ds-space/>
+          <ds-space />
           <ds-heading tag="h4">{{ $t('settings.delete.accountDescription') }}</ds-heading>
         </ds-flex>
       </ds-container>
-      <ds-space/>
+      <ds-space />
       <ds-container>
         <transition name="slide-up">
           <div v-if="deleteEnabled">
@@ -24,7 +24,9 @@
                   type="is-danger"
                   :disabled="!currentUser.contributionsCount"
                   v-model="deleteContributions"
-                >{{ $t('settings.delete.countPosts', { count: currentUser.contributionsCount }) }}</b-checkbox>
+                >
+                  {{ $t('settings.delete.countPosts', { count: currentUser.contributionsCount }) }}
+                </b-checkbox>
               </div>
             </div>
             <div class="field">
@@ -33,7 +35,9 @@
                   type="is-danger"
                   :disabled="!currentUser.commentsCount"
                   v-model="deleteComments"
-                >{{ $t('settings.delete.countComments', { count: currentUser.commentsCount }) }}</b-checkbox>
+                >
+                  {{ $t('settings.delete.countComments', { count: currentUser.commentsCount }) }}
+                </b-checkbox>
               </div>
             </div>
             <div class="message is-danger">
@@ -52,14 +56,16 @@
                 </div>
               </div>
             </ds-flex-item>
-            <ds-flex-item width="20%"/>
+            <ds-flex-item width="20%" />
             <ds-flex-item>
               <ds-button
                 icon="trash"
                 danger
                 :disabled="isLoading || !deleteEnabled"
                 @click="handleSubmit"
-              >{{ $t('settings.delete.name') }}</ds-button>
+              >
+                {{ $t('settings.delete.name') }}
+              </ds-button>
             </ds-flex-item>
           </ds-flex>
         </ds-container>

From e542a8dc830e7f28aa2b10dbcfd73b1346b6cf46 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Fri, 7 Jun 2019 18:46:39 -0300
Subject: [PATCH 14/23] Make mobile responsive

---
 webapp/components/DeleteAccount/DeleteAccount.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/webapp/components/DeleteAccount/DeleteAccount.vue b/webapp/components/DeleteAccount/DeleteAccount.vue
index 05be374f5..d614fe603 100644
--- a/webapp/components/DeleteAccount/DeleteAccount.vue
+++ b/webapp/components/DeleteAccount/DeleteAccount.vue
@@ -4,10 +4,10 @@
       <ds-space />
       <ds-container>
         <ds-flex>
-          <ds-flex-item width="8%">
+          <ds-flex-item :width="{ base: '100%', sm: 0.75, md: 0.5, lg: 0.5 }">
             <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
           </ds-flex-item>
-          <ds-flex-item width="80%">
+          <ds-flex-item :width="{ base: '100%', sm: 5.25, md: 2.75, lg: 5.5 }">
             <ds-heading>{{ $t('settings.delete.name') }}</ds-heading>
           </ds-flex-item>
           <ds-space />
@@ -49,15 +49,14 @@
       <template slot="footer">
         <ds-container>
           <ds-flex>
-            <ds-flex-item width="40%">
+            <ds-flex-item :width="{ base: '60%', sm: 1.25, md: 1.25, lg: 1.75 }">
               <div class="columns is-mobile">
                 <div class="column">
                   <b-switch type="is-danger" v-model="deleteEnabled"></b-switch>
                 </div>
               </div>
             </ds-flex-item>
-            <ds-flex-item width="20%" />
-            <ds-flex-item>
+            <ds-flex-item :width="{ base: '60%', sm: 2.75, md: 2.75, lg: 1 }">
               <ds-button
                 icon="trash"
                 danger

From 507890a7aa46a1903dc4024d3aa9860137b90921 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 10 Jun 2019 14:11:44 -0300
Subject: [PATCH 15/23] Add CSS styling to danger message box

- lost the CSS when removed buefy
---
 .../DeleteAccount/DeleteAccount.vue           | 41 +++++++++++++------
 webapp/pages/settings.vue                     |  4 +-
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/webapp/components/DeleteAccount/DeleteAccount.vue b/webapp/components/DeleteAccount/DeleteAccount.vue
index 3e6388238..9dc6a6bb6 100644
--- a/webapp/components/DeleteAccount/DeleteAccount.vue
+++ b/webapp/components/DeleteAccount/DeleteAccount.vue
@@ -1,20 +1,22 @@
 <template>
   <div>
     <ds-card hover>
-      <ds-space/>
+      <ds-space />
       <ds-container>
         <ds-flex>
           <ds-flex-item :width="{ base: '100%', sm: 0.75, md: 0.5, lg: 0.5 }">
-            <ds-icon name="warning" size="xxx-large" class="delete-warning-icon"/>
+            <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
           </ds-flex-item>
           <ds-flex-item :width="{ base: '100%', sm: 5.25, md: 2.75, lg: 5.5 }">
             <ds-heading>{{ $t('settings.deleteUserAccount.name') }}</ds-heading>
           </ds-flex-item>
-          <ds-space/>
-          <ds-heading tag="h4">{{ $t('settings.deleteUserAccount.accountDescription') }}</ds-heading>
+          <ds-space />
+          <ds-heading tag="h4">
+            {{ $t('settings.deleteUserAccount.accountDescription') }}
+          </ds-heading>
         </ds-flex>
       </ds-container>
-      <ds-space/>
+      <ds-space />
       <ds-container>
         <transition name="slide-up">
           <div v-if="deleteEnabled">
@@ -40,7 +42,7 @@
                 />
               </ds-flex-item>
             </ds-flex>
-            <ds-space margin-top="xx-small"/>
+            <ds-space margin-top="xx-small" />
             <ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'large' }">
               <ds-flex-item
                 v-if="currentUser.commentsCount"
@@ -62,10 +64,12 @@
                   class="enable-comment-deletion-input"
                 />
               </ds-flex-item>
+              <ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: '100%' }">
+                <ds-section id="delete-user-account-warning">
+                  <div v-html="$t('settings.deleteUserAccount.accountWarning')"></div>
+                </ds-section>
+              </ds-flex-item>
             </ds-flex>
-            <div class="message is-danger">
-              <div class="message-body" v-html="$t('settings.deleteUserAccount.accountWarning')"></div>
-            </div>
           </div>
         </transition>
       </ds-container>
@@ -75,7 +79,9 @@
             <ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1.75 }">
               <div
                 class="delete-input-label"
-                v-html="$t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name })"
+                v-html="
+                  $t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name })
+                "
               ></div>
               <ds-input
                 v-model="enableDeletionValue"
@@ -89,7 +95,9 @@
                 danger
                 :disabled="isLoading || !deleteEnabled"
                 @click="handleSubmit"
-              >{{ $t('settings.deleteUserAccount.name') }}</ds-button>
+              >
+                {{ $t('settings.deleteUserAccount.name') }}
+              </ds-button>
             </ds-flex-item>
           </ds-flex>
         </ds-container>
@@ -201,6 +209,15 @@ b.is-danger {
 
 .ds-card-footer {
   border-top: $border-size-base solid $border-color-softest;
-  background-color: $background-color-warning-inverse;
+  background-color: $background-color-danger-inverse;
+}
+
+#delete-user-account-warning {
+  background-color: $background-color-danger-inverse;
+  border-left: $border-size-x-large solid $background-color-danger-active;
+  color: $text-color-danger;
+  margin-left: 0px;
+  margin-right: 0px;
+  border-radius: $border-radius-x-large;
 }
 </style>
diff --git a/webapp/pages/settings.vue b/webapp/pages/settings.vue
index 0c7f0fbe5..1284aea7f 100644
--- a/webapp/pages/settings.vue
+++ b/webapp/pages/settings.vue
@@ -3,11 +3,11 @@
     <ds-heading tag="h1">{{ $t('settings.name') }}</ds-heading>
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
-        <ds-menu :routes="routes" :is-exact="() => true"/>
+        <ds-menu :routes="routes" :is-exact="() => true" />
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', md: 1 }">
         <transition name="slide-up" appear>
-          <nuxt-child/>
+          <nuxt-child />
         </transition>
       </ds-flex-item>
     </ds-flex>

From ccce29512ef929e3cbabe4cd5c5ae9ec76cd374b Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 10 Jun 2019 14:53:10 -0300
Subject: [PATCH 16/23] Fix styling

---
 .../DeleteAccount/DeleteAccount.vue           | 59 +++++++++----------
 1 file changed, 28 insertions(+), 31 deletions(-)

diff --git a/webapp/components/DeleteAccount/DeleteAccount.vue b/webapp/components/DeleteAccount/DeleteAccount.vue
index 9dc6a6bb6..872be24f5 100644
--- a/webapp/components/DeleteAccount/DeleteAccount.vue
+++ b/webapp/components/DeleteAccount/DeleteAccount.vue
@@ -20,21 +20,22 @@
       <ds-container>
         <transition name="slide-up">
           <div v-if="deleteEnabled">
+            <div
+              class="delete-input-label"
+              v-html="
+                $t('settings.deleteUserAccount.pleaseConfirm', {
+                  confirm: $t('settings.deleteUserAccount.contributionsCount', {
+                    count: currentUser.contributionsCount,
+                  }),
+                })
+              "
+            ></div>
+            <ds-space margin-bottom="xx-small" />
             <ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'large' }">
               <ds-flex-item
                 v-if="currentUser.contributionsCount"
                 :width="{ base: '100%', sm: '100%', md: '100%', lg: '100%' }"
               >
-                <div
-                  class="delete-input-label"
-                  v-html="
-                    $t('settings.deleteUserAccount.pleaseConfirm', {
-                      confirm: $t('settings.deleteUserAccount.contributionsCount', {
-                        count: currentUser.contributionsCount,
-                      }),
-                    })
-                  "
-                ></div>
                 <ds-input
                   v-model="deleteContributionsValue"
                   @input="enableDeletion"
@@ -42,22 +43,23 @@
                 />
               </ds-flex-item>
             </ds-flex>
-            <ds-space margin-top="xx-small" />
+            <ds-space margin-bottom="xx-small" />
+            <div
+              class="delete-input-label"
+              v-html="
+                $t('settings.deleteUserAccount.pleaseConfirm', {
+                  confirm: $t('settings.deleteUserAccount.commentsCount', {
+                    count: currentUser.commentsCount,
+                  }),
+                })
+              "
+            ></div>
+            <ds-space margin-bottom="xx-small" />
             <ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'large' }">
               <ds-flex-item
                 v-if="currentUser.commentsCount"
                 :width="{ base: '100%', sm: '100%', md: '100%', lg: '100%' }"
               >
-                <div
-                  class="delete-input-label"
-                  v-html="
-                    $t('settings.deleteUserAccount.pleaseConfirm', {
-                      confirm: $t('settings.deleteUserAccount.commentsCount', {
-                        count: currentUser.commentsCount,
-                      }),
-                    })
-                  "
-                ></div>
                 <ds-input
                   v-model="deleteCommentsValue"
                   @input="enableDeletion"
@@ -75,14 +77,13 @@
       </ds-container>
       <template slot="footer">
         <ds-container>
+          <div
+            class="delete-input-label"
+            v-html="$t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name })"
+          ></div>
+          <ds-space margin-bottom="xx-small" />
           <ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'large' }">
             <ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1.75 }">
-              <div
-                class="delete-input-label"
-                v-html="
-                  $t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name })
-                "
-              ></div>
               <ds-input
                 v-model="enableDeletionValue"
                 @input="enableDeletion"
@@ -195,10 +196,6 @@ export default {
   border-color: $border-color-danger;
 }
 
-.ds-button-danger {
-  margin-top: 1.55rem;
-}
-
 .delete-input-label {
   font-size: $font-size-base;
 }

From 83c7773d1b1cb9dd8ca31a7937e75f794b8e2d37 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Wed, 12 Jun 2019 15:07:16 -0300
Subject: [PATCH 17/23] Add checkboxes to delete posts/comments

- fix tests
- rename files/directory to DeleteData to be more accurate
---
 .../DeleteData.spec.js}                       |  40 ++--
 .../DeleteData.vue}                           | 178 +++++++++---------
 webapp/locales/de.json                        |   8 +-
 webapp/locales/en.json                        |   6 +-
 webapp/pages/settings/delete-account.vue      |   6 +-
 5 files changed, 122 insertions(+), 116 deletions(-)
 rename webapp/components/{DeleteAccount/DeleteAccount.spec.js => DeleteData/DeleteData.spec.js} (78%)
 rename webapp/components/{DeleteAccount/DeleteAccount.vue => DeleteData/DeleteData.vue} (52%)

diff --git a/webapp/components/DeleteAccount/DeleteAccount.spec.js b/webapp/components/DeleteData/DeleteData.spec.js
similarity index 78%
rename from webapp/components/DeleteAccount/DeleteAccount.spec.js
rename to webapp/components/DeleteData/DeleteData.spec.js
index b2cbeb1b3..139316ed2 100644
--- a/webapp/components/DeleteAccount/DeleteAccount.spec.js
+++ b/webapp/components/DeleteData/DeleteData.spec.js
@@ -1,5 +1,5 @@
-import { config, mount, createLocalVue } from '@vue/test-utils'
-import DeleteAccount from './DeleteAccount.vue'
+import { mount, createLocalVue } from '@vue/test-utils'
+import DeleteData from './DeleteData.vue'
 import Styleguide from '@human-connection/styleguide'
 import Vuex from 'vuex'
 
@@ -7,20 +7,18 @@ const localVue = createLocalVue()
 
 localVue.use(Vuex)
 localVue.use(Styleguide)
-config.stubs['b-switch'] = '<span><slot /></span>'
-config.stubs['b-checkbox'] = '<span><slot /></span>'
 
-describe('DeleteAccount.vue', () => {
+describe('DeleteData.vue', () => {
   let mocks
   let wrapper
   let getters
   let actions
   let deleteAccountBtn
   let enableDeletionInput
-  let enablePostDeletionInput
-  let enableCommentDeletionInput
+  let enableContributionDeletionCheckbox
+  let enableCommentDeletionCheckbox
   const deleteAccountName = 'Delete MyAccount'
-  const deletePostsMessage = 'Delete my 2 posts'
+  const deleteContributionsMessage = 'Delete my 2 posts'
   const deleteCommentsMessage = 'Delete my 3 comments'
 
   beforeEach(() => {
@@ -31,7 +29,7 @@ describe('DeleteAccount.vue', () => {
           .fn()
           .mockResolvedValueOnce({
             data: {
-              DeleteAccount: {
+              DeleteData: {
                 id: 'u343',
               },
             },
@@ -62,7 +60,7 @@ describe('DeleteAccount.vue', () => {
         getters,
         actions,
       })
-      return mount(DeleteAccount, { mocks, localVue, store })
+      return mount(DeleteData, { mocks, localVue, store })
     }
 
     beforeEach(() => {
@@ -111,9 +109,9 @@ describe('DeleteAccount.vue', () => {
       })
 
       it("deletes a user's posts if requested", () => {
-        mocks.$t.mockImplementation(() => deletePostsMessage)
-        enablePostDeletionInput = wrapper.find('.enable-post-deletion-input input')
-        enablePostDeletionInput.setValue(deletePostsMessage)
+        mocks.$t.mockImplementation(() => deleteContributionsMessage)
+        enableContributionDeletionCheckbox = wrapper.findAll('.checkbox-container input').at(0)
+        enableContributionDeletionCheckbox.trigger('click')
         deleteAccountBtn.trigger('click')
         expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
           expect.objectContaining({
@@ -127,8 +125,8 @@ describe('DeleteAccount.vue', () => {
 
       it("deletes a user's comments if requested", () => {
         mocks.$t.mockImplementation(() => deleteCommentsMessage)
-        enableCommentDeletionInput = wrapper.find('.enable-comment-deletion-input input')
-        enableCommentDeletionInput.setValue(deleteCommentsMessage)
+        enableCommentDeletionCheckbox = wrapper.findAll('.checkbox-container input').at(1)
+        enableCommentDeletionCheckbox.trigger('click')
         deleteAccountBtn.trigger('click')
         expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
           expect.objectContaining({
@@ -141,12 +139,12 @@ describe('DeleteAccount.vue', () => {
       })
 
       it("deletes a user's posts and comments if requested", () => {
-        mocks.$t.mockImplementation(() => deletePostsMessage)
-        enablePostDeletionInput = wrapper.find('.enable-post-deletion-input input')
-        enablePostDeletionInput.setValue(deletePostsMessage)
+        mocks.$t.mockImplementation(() => deleteContributionsMessage)
+        enableContributionDeletionCheckbox = wrapper.findAll('.checkbox-container input').at(0)
+        enableContributionDeletionCheckbox.trigger('click')
         mocks.$t.mockImplementation(() => deleteCommentsMessage)
-        enableCommentDeletionInput = wrapper.find('.enable-comment-deletion-input input')
-        enableCommentDeletionInput.setValue(deleteCommentsMessage)
+        enableCommentDeletionCheckbox = wrapper.findAll('.checkbox-container input').at(1)
+        enableCommentDeletionCheckbox.trigger('click')
         deleteAccountBtn.trigger('click')
         expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
           expect.objectContaining({
@@ -163,7 +161,7 @@ describe('DeleteAccount.vue', () => {
         expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
       })
 
-      it('updates the user in the store', async () => {
+      it('redirect the user to the homepage', async () => {
         await deleteAccountBtn.trigger('click')
         expect(mocks.$router.history.push).toHaveBeenCalledWith('/')
       })
diff --git a/webapp/components/DeleteAccount/DeleteAccount.vue b/webapp/components/DeleteData/DeleteData.vue
similarity index 52%
rename from webapp/components/DeleteAccount/DeleteAccount.vue
rename to webapp/components/DeleteData/DeleteData.vue
index 872be24f5..5f0e781d7 100644
--- a/webapp/components/DeleteAccount/DeleteAccount.vue
+++ b/webapp/components/DeleteData/DeleteData.vue
@@ -4,10 +4,10 @@
       <ds-space />
       <ds-container>
         <ds-flex>
-          <ds-flex-item :width="{ base: '100%', sm: 0.75, md: 0.5, lg: 0.5 }">
+          <ds-flex-item :width="{ base: '22%', sm: '12%', md: '12%', lg: '8%' }">
             <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
           </ds-flex-item>
-          <ds-flex-item :width="{ base: '100%', sm: 5.25, md: 2.75, lg: 5.5 }">
+          <ds-flex-item :width="{ base: '78%', sm: '88%', md: '88%', lg: '92%' }">
             <ds-heading>{{ $t('settings.deleteUserAccount.name') }}</ds-heading>
           </ds-flex-item>
           <ds-space />
@@ -20,62 +20,33 @@
       <ds-container>
         <transition name="slide-up">
           <div v-if="deleteEnabled">
-            <div
-              class="delete-input-label"
-              v-html="
-                $t('settings.deleteUserAccount.pleaseConfirm', {
-                  confirm: $t('settings.deleteUserAccount.contributionsCount', {
-                    count: currentUser.contributionsCount,
-                  }),
+            <label v-if="currentUser.contributionsCount" class="checkbox-container">
+              <input type="checkbox" v-model="deleteContributions" />
+              <span class="checkmark"></span>
+              {{
+                $t('settings.deleteUserAccount.contributionsCount', {
+                  count: currentUser.contributionsCount,
                 })
-              "
-            ></div>
-            <ds-space margin-bottom="xx-small" />
-            <ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'large' }">
-              <ds-flex-item
-                v-if="currentUser.contributionsCount"
-                :width="{ base: '100%', sm: '100%', md: '100%', lg: '100%' }"
-              >
-                <ds-input
-                  v-model="deleteContributionsValue"
-                  @input="enableDeletion"
-                  class="enable-post-deletion-input"
-                />
-              </ds-flex-item>
-            </ds-flex>
-            <ds-space margin-bottom="xx-small" />
-            <div
-              class="delete-input-label"
-              v-html="
-                $t('settings.deleteUserAccount.pleaseConfirm', {
-                  confirm: $t('settings.deleteUserAccount.commentsCount', {
-                    count: currentUser.commentsCount,
-                  }),
+              }}
+            </label>
+            <ds-space margin-bottom="small" />
+            <label v-if="currentUser.commentsCount" class="checkbox-container">
+              <input type="checkbox" v-model="deleteComments" />
+              <span class="checkmark"></span>
+              {{
+                $t('settings.deleteUserAccount.commentsCount', {
+                  count: currentUser.commentsCount,
                 })
-              "
-            ></div>
-            <ds-space margin-bottom="xx-small" />
-            <ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'large' }">
-              <ds-flex-item
-                v-if="currentUser.commentsCount"
-                :width="{ base: '100%', sm: '100%', md: '100%', lg: '100%' }"
-              >
-                <ds-input
-                  v-model="deleteCommentsValue"
-                  @input="enableDeletion"
-                  class="enable-comment-deletion-input"
-                />
-              </ds-flex-item>
-              <ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: '100%' }">
-                <ds-section id="delete-user-account-warning">
-                  <div v-html="$t('settings.deleteUserAccount.accountWarning')"></div>
-                </ds-section>
-              </ds-flex-item>
-            </ds-flex>
+              }}
+            </label>
+            <ds-space margin-bottom="small" />
+            <ds-section id="delete-user-account-warning">
+              <div v-html="$t('settings.deleteUserAccount.accountWarning')"></div>
+            </ds-section>
           </div>
         </transition>
       </ds-container>
-      <template slot="footer">
+      <template slot="footer" class="delete-data-footer">
         <ds-container>
           <div
             class="delete-input-label"
@@ -91,12 +62,7 @@
               />
             </ds-flex-item>
             <ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1 }">
-              <ds-button
-                icon="trash"
-                danger
-                :disabled="isLoading || !deleteEnabled"
-                @click="handleSubmit"
-              >
+              <ds-button icon="trash" danger :disabled="!deleteEnabled" @click="handleSubmit">
                 {{ $t('settings.deleteUserAccount.name') }}
               </ds-button>
             </ds-flex-item>
@@ -111,16 +77,12 @@ import { mapGetters, mapActions } from 'vuex'
 import gql from 'graphql-tag'
 
 export default {
-  name: 'DeleteAccount',
+  name: 'DeleteData',
   data() {
     return {
       deleteContributions: false,
       deleteComments: false,
       deleteEnabled: false,
-      isLoading: false,
-      enableDeletionValue: '',
-      deleteContributionsValue: '',
-      deleteCommentsValue: '',
     }
   },
   computed: {
@@ -135,23 +97,6 @@ export default {
     enableDeletion() {
       if (this.enableDeletionValue === this.currentUser.name) {
         this.deleteEnabled = true
-        this.focused = false
-      }
-      if (
-        this.deleteContributionsValue ===
-        this.$t('settings.deleteUserAccount.contributionsCount', {
-          count: this.currentUser.contributionsCount,
-        })
-      ) {
-        this.deleteContributions = true
-      }
-      if (
-        this.deleteCommentsValue ===
-        this.$t('settings.deleteUserAccount.commentsCount', {
-          count: this.currentUser.commentsCount,
-        })
-      ) {
-        this.deleteComments = true
       }
     },
     handleSubmit() {
@@ -190,9 +135,72 @@ export default {
   color: $color-danger;
 }
 
-.enable-deletion-input input:focus,
-.enable-post-deletion-input input:focus,
-.enable-comment-deletion-input input:focus {
+.checkbox-container {
+  display: block;
+  position: relative;
+  padding-left: 35px;
+  cursor: pointer;
+  font-size: $font-size-large;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.checkbox-container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  border: 2px solid $background-color-inverse-softer;
+  background-color: $background-color-base;
+  border-radius: $border-radius-x-large;
+}
+
+.checkbox-container:hover input ~ .checkmark {
+  background-color: $background-color-softest;
+}
+
+/* When the checkbox is checked, add a blue background */
+.checkbox-container input:checked ~ .checkmark {
+  background-color: $background-color-danger-active;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark:after {
+  content: '';
+  position: absolute;
+  display: none;
+}
+
+/* Show the checkmark when checked */
+.checkbox-container input:checked ~ .checkmark:after {
+  display: block;
+}
+
+/* Style the checkmark/indicator */
+.checkbox-container .checkmark:after {
+  left: 6px;
+  top: 3px;
+  width: 5px;
+  height: 10px;
+  border: solid $background-color-base;
+  border-width: 0 $border-size-large $border-size-large 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.enable-deletion-input input:focus {
   border-color: $border-color-danger;
 }
 
@@ -204,7 +212,7 @@ b.is-danger {
   color: $text-color-danger;
 }
 
-.ds-card-footer {
+.delete-data-footer {
   border-top: $border-size-base solid $border-color-softest;
   background-color: $background-color-danger-inverse;
 }
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 68f495ca5..6d10bd7e7 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -74,13 +74,13 @@
       "name": "Daten herunterladen"
     },
     "deleteUserAccount": {
-      "name": "Mein Benutzerkonto löschen",
+      "name": "Daten löschen",
       "contributionsCount": "Meine {count} Beiträge löschen",
       "commentsCount": "Meine {count} Kommentare löschen",
-      "accountDescription": "Seien Sie sich bewusst, dass Ihre Beiträge und Kommentare für unsere Community wichtig sind. Wenn du sie trotzdem löschen möchtest, musst du dies unten auswählen.",
-      "accountWarning": "Dein Benutzerkonto, die Beiträge, etc. kannst Du nach dem Löschen <b>WEDER VERWALTEN NOCH WIEDERHERSTELLEN!</b>",
+      "accountDescription": "Sie 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, Beiträge oder Kommentare kannst Du nach dem Löschen <b>WEDER VERWALTEN NOCH WIEDERHERSTELLEN!</b>",
       "success": "Konto erfolgreich gelöscht",
-      "pleaseConfirm": "<b class='is-danger'>Zerstörerische Aktion!</b> Geben Sie <b>{confirm}</b> ein, um zu bestätigen."
+      "pleaseConfirm": "<b class='is-danger'>Zerstörerische Aktion!</b> Gib <b>{confirm}</b> ein, um zu bestätigen."
     },
     "organizations": {
       "name": "Meine Organisationen"
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index f56970db2..77d6cc57b 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -74,11 +74,11 @@
       "name": "Download Data"
     },
     "deleteUserAccount": {
-      "name": "Delete my User Account",
+      "name": "Delete Data",
       "contributionsCount": "Delete my {count} posts",
       "commentsCount": "Delete my {count} comments",
-      "accountDescription": "Be aware that your Post and Comments are important to our community. If you still want to delete them, you have to choose so below.",
-      "accountWarning": "You <b>CAN'T MANAGE</b> and <b>CAN'T RECOVER</b> your Account, Posts... after deleting your account!",
+      "accountDescription": "Be aware that your Post and Comments are important to our community. If you still choose to delete them, you have to mark them below.",
+      "accountWarning": "You <b>CAN'T MANAGE</b> and <b>CAN'T RECOVER</b> your Account, Posts, or Comments after deleting your account!",
       "success": "Account successfully deleted",
       "pleaseConfirm": "<b class='is-danger'>Destructive action!</b> Type <b>{confirm}</b> to confirm"
     },
diff --git a/webapp/pages/settings/delete-account.vue b/webapp/pages/settings/delete-account.vue
index 944abef17..e1872bf4c 100644
--- a/webapp/pages/settings/delete-account.vue
+++ b/webapp/pages/settings/delete-account.vue
@@ -1,13 +1,13 @@
 <template>
-  <delete-account />
+  <delete-data />
 </template>
 
 <script>
-import DeleteAccount from '~/components/DeleteAccount/DeleteAccount.vue'
+import DeleteData from '~/components/DeleteData/DeleteData.vue'
 
 export default {
   components: {
-    DeleteAccount,
+    DeleteData,
   },
 }
 </script>

From d15857d240e89917b4ecb616e5a56378da43e4a3 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Wed, 12 Jun 2019 15:27:57 -0300
Subject: [PATCH 18/23] Set user's posts/comments' delete attribute to true

- favor over actually deleting the node so that the comments will appear as anonymous and not lose the context of the conversation
- the post will not appear, but for admin it will be accessible
- follow @roschaefer `PR` review
---
 backend/src/schema/resolvers/users.js      |  2 +-
 backend/src/schema/resolvers/users.spec.js | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/backend/src/schema/resolvers/users.js b/backend/src/schema/resolvers/users.js
index f1cfffd65..c5c3701b5 100644
--- a/backend/src/schema/resolvers/users.js
+++ b/backend/src/schema/resolvers/users.js
@@ -21,7 +21,7 @@ export default {
             await session.run(
               `
             MATCH (resource:${node})<-[:WROTE]-(author:User {id: $userId})
-            DETACH DELETE resource
+            SET resource.deleted = true
             RETURN author`,
               {
                 userId: context.user.id,
diff --git a/backend/src/schema/resolvers/users.spec.js b/backend/src/schema/resolvers/users.spec.js
index c91fdf08e..95dbfdc3b 100644
--- a/backend/src/schema/resolvers/users.spec.js
+++ b/backend/src/schema/resolvers/users.spec.js
@@ -93,9 +93,11 @@ describe('users', () => {
           id
           contributions {
             id
+            deleted
           }
           comments {
             id
+            deleted
           }
         }
       }
@@ -161,8 +163,8 @@ describe('users', () => {
           expectedResponse = {
             DeleteUser: {
               id: 'u343',
-              contributions: [{ id: 'p139' }],
-              comments: [{ id: 'c155' }],
+              contributions: [{ id: 'p139', deleted: false }],
+              comments: [{ id: 'c155', deleted: false }],
             },
           }
         })
@@ -178,8 +180,8 @@ describe('users', () => {
             expectedResponse = {
               DeleteUser: {
                 id: 'u343',
-                contributions: [],
-                comments: [{ id: 'c155' }],
+                contributions: [{ id: 'p139', deleted: true }],
+                comments: [{ id: 'c155', deleted: false }],
               },
             }
             await expect(client.request(deleteUserMutation, deleteUserVariables)).resolves.toEqual(
@@ -192,8 +194,8 @@ describe('users', () => {
             expectedResponse = {
               DeleteUser: {
                 id: 'u343',
-                contributions: [{ id: 'p139' }],
-                comments: [],
+                contributions: [{ id: 'p139', deleted: false }],
+                comments: [{ id: 'c155', deleted: true }],
               },
             }
             await expect(client.request(deleteUserMutation, deleteUserVariables)).resolves.toEqual(
@@ -206,8 +208,8 @@ describe('users', () => {
             expectedResponse = {
               DeleteUser: {
                 id: 'u343',
-                contributions: [],
-                comments: [],
+                contributions: [{ id: 'p139', deleted: true }],
+                comments: [{ id: 'c155', deleted: true }],
               },
             }
             await expect(client.request(deleteUserMutation, deleteUserVariables)).resolves.toEqual(

From aa6551e35d32148a727b5f84dea0670babb004e4 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Wed, 12 Jun 2019 15:59:33 -0300
Subject: [PATCH 19/23] Remove comments

---
 webapp/components/DeleteData/DeleteData.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/webapp/components/DeleteData/DeleteData.vue b/webapp/components/DeleteData/DeleteData.vue
index 5f0e781d7..cac548fa4 100644
--- a/webapp/components/DeleteData/DeleteData.vue
+++ b/webapp/components/DeleteData/DeleteData.vue
@@ -170,24 +170,20 @@ export default {
   background-color: $background-color-softest;
 }
 
-/* When the checkbox is checked, add a blue background */
 .checkbox-container input:checked ~ .checkmark {
   background-color: $background-color-danger-active;
 }
 
-/* Create the checkmark/indicator (hidden when not checked) */
 .checkmark:after {
   content: '';
   position: absolute;
   display: none;
 }
 
-/* Show the checkmark when checked */
 .checkbox-container input:checked ~ .checkmark:after {
   display: block;
 }
 
-/* Style the checkmark/indicator */
 .checkbox-container .checkmark:after {
   left: 6px;
   top: 3px;

From 6e6407b2653a1af340859fc01eabd3eb6a84eb27 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Wed, 12 Jun 2019 17:06:37 -0300
Subject: [PATCH 20/23] Upgrade apollo-cache-inmemory

---
 backend/package.json |  2 +-
 backend/yarn.lock    | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/backend/package.json b/backend/package.json
index 4bfeea9a3..f6cb0de6b 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "activitystrea.ms": "~2.1.3",
-    "apollo-cache-inmemory": "~1.6.1",
+    "apollo-cache-inmemory": "~1.6.2",
     "apollo-client": "~2.6.2",
     "apollo-link-context": "~1.0.14",
     "apollo-link-http": "~1.5.14",
diff --git a/backend/yarn.lock b/backend/yarn.lock
index ed9e98649..e92070fe9 100644
--- a/backend/yarn.lock
+++ b/backend/yarn.lock
@@ -1303,18 +1303,18 @@ apollo-cache-control@^0.1.0:
   dependencies:
     graphql-extensions "^0.0.x"
 
-apollo-cache-inmemory@~1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.1.tgz#536b6f366461f6264250041f9146363e2faa1d4c"
-  integrity sha512-c/WJjh9MTWcdussCTjLKufpPjTx3qOFkBPHIDOOpQ+U0B7K1PczPl9N0LaC4ir3wAWL7s4A0t2EKtoR+6UP92g==
+apollo-cache-inmemory@~1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.2.tgz#bbf2e4e1eacdf82b2d526f5c2f3b37e5acee3c5e"
+  integrity sha512-AyCl3PGFv5Qv1w4N9vlg63GBPHXgMCekZy5mhlS042ji0GW84uTySX+r3F61ZX3+KM1vA4m9hQyctrEGiv5XjQ==
   dependencies:
-    apollo-cache "^1.3.1"
-    apollo-utilities "^1.3.1"
+    apollo-cache "^1.3.2"
+    apollo-utilities "^1.3.2"
     optimism "^0.9.0"
     ts-invariant "^0.4.0"
     tslib "^1.9.3"
 
-apollo-cache@1.3.2, apollo-cache@^1.3.1:
+apollo-cache@1.3.2, apollo-cache@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/apollo-cache/-/apollo-cache-1.3.2.tgz#df4dce56240d6c95c613510d7e409f7214e6d26a"
   integrity sha512-+KA685AV5ETEJfjZuviRTEImGA11uNBp/MJGnaCvkgr+BYRrGLruVKBv6WvyFod27WEB2sp7SsG8cNBKANhGLg==
@@ -1566,7 +1566,7 @@ apollo-upload-server@^7.0.0:
     http-errors "^1.7.0"
     object-path "^0.11.4"
 
-apollo-utilities@1.3.2, apollo-utilities@^1.0.1, apollo-utilities@^1.2.1, apollo-utilities@^1.3.1, apollo-utilities@^1.3.2:
+apollo-utilities@1.3.2, apollo-utilities@^1.0.1, apollo-utilities@^1.2.1, apollo-utilities@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.3.2.tgz#8cbdcf8b012f664cd6cb5767f6130f5aed9115c9"
   integrity sha512-JWNHj8XChz7S4OZghV6yc9FNnzEXj285QYp/nLNh943iObycI5GTDO3NGR9Dth12LRrSFMeDOConPfPln+WGfg==

From 3c3db87c1bb2044a6f67c3a8f25f7fc231132872 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Thu, 13 Jun 2019 15:34:45 -0300
Subject: [PATCH 21/23] Add back deleted translations

- mistakenly deleted when working through merge conflict
---
 webapp/locales/de.json             | 11 ++++++++++-
 webapp/locales/en.json             | 11 ++++++++++-
 webapp/pages/profile/_id/_slug.vue |  2 +-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 4c158c2eb..1ccfe88c2 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -25,7 +25,16 @@
     "shouted": "Empfohlen",
     "commented": "Kommentiert",
     "userAnonym": "Anonymus",
-    "socialMedia": "Wo sonst finde ich"
+    "socialMedia": "Wo sonst finde ich",
+    "network": {
+      "title": "Netzwerk",
+      "following": "folgt:",
+      "followingNobody": "folgt niemandem.",
+      "followedBy": "wird gefolgt von:",
+      "followedByNobody": "wird von niemandem gefolgt.",
+      "and": "und",
+      "more": "weitere"
+    }
   },
   "notifications": {
     "menu": {
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 8027ce091..22202ebde 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -25,7 +25,16 @@
     "shouted": "Shouted",
     "commented": "Commented",
     "userAnonym": "Anonymous",
-    "socialMedia": "Where else can I find"
+    "socialMedia": "Where else can I find",
+    "network": {
+      "title": "Network",
+      "following": "is following:",
+      "followingNobody": "follows nobody.",
+      "followedBy": "is followed by:",
+      "followedByNobody": "is not followed by anyone.",
+      "and": "and",
+      "more": "more"
+    }
   },
   "notifications": {
     "menu": {
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 493fa916b..c79a14317 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -69,7 +69,7 @@
         </ds-card>
         <ds-space />
         <ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px;">
-          Netzwerk
+          {{ $t('profile.network.title') }}
         </ds-heading>
         <ds-card style="position: relative; height: auto;">
           <ds-space v-if="user.following && user.following.length" margin="x-small">

From 306da8a4e310c2d422060f5eacbecf391212da0c Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Thu, 13 Jun 2019 16:05:20 -0300
Subject: [PATCH 22/23] Revert _slug.vue to master

---
 webapp/pages/profile/_id/_slug.vue | 33 +++++++++++++++---------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index c79a14317..b9b462454 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -73,7 +73,9 @@
         </ds-heading>
         <ds-card style="position: relative; height: auto;">
           <ds-space v-if="user.following && user.following.length" margin="x-small">
-            <ds-text tag="h5" color="soft">Wem folgt {{ userName | truncate(15) }}?</ds-text>
+            <ds-text tag="h5" color="soft">
+              {{ userName | truncate(15) }} {{ $t('profile.network.following') }}
+            </ds-text>
           </ds-space>
           <template v-if="user.following && user.following.length">
             <ds-space v-for="follow in uniq(user.following)" :key="follow.id" margin="x-small">
@@ -84,18 +86,23 @@
             </ds-space>
             <ds-space v-if="user.followingCount - user.following.length" margin="small">
               <ds-text size="small" color="softer">
-                und {{ user.followingCount - user.following.length }} weitere
+                {{ $t('profile.network.and') }} {{ user.followingCount - user.following.length }}
+                {{ $t('profile.network.more') }}
               </ds-text>
             </ds-space>
           </template>
           <template v-else>
-            <p style="text-align: center; opacity: .5;">{{ userName }} folgt niemandem</p>
+            <p style="text-align: center; opacity: .5;">
+              {{ userName }} {{ $t('profile.network.followingNobody') }}
+            </p>
           </template>
         </ds-card>
         <ds-space />
         <ds-card style="position: relative; height: auto;">
           <ds-space v-if="user.followedBy && user.followedBy.length" margin="x-small">
-            <ds-text tag="h5" color="soft">Wer folgt {{ userName | truncate(15) }}?</ds-text>
+            <ds-text tag="h5" color="soft">
+              {{ userName | truncate(15) }} {{ $t('profile.network.followedBy') }}
+            </ds-text>
           </ds-space>
           <template v-if="user.followedBy && user.followedBy.length">
             <ds-space v-for="follow in uniq(user.followedBy)" :key="follow.id" margin="x-small">
@@ -106,12 +113,15 @@
             </ds-space>
             <ds-space v-if="user.followedByCount - user.followedBy.length" margin="small">
               <ds-text size="small" color="softer">
-                und {{ user.followedByCount - user.followedBy.length }} weitere
+                {{ $t('profile.network.and') }} {{ user.followedByCount - user.followedBy.length }}
+                {{ $t('profile.network.more') }}
               </ds-text>
             </ds-space>
           </template>
           <template v-else>
-            <p style="text-align: center; opacity: .5;">niemand folgt {{ userName }}</p>
+            <p style="text-align: center; opacity: .5;">
+              {{ userName }} {{ $t('profile.network.followedByNobody') }}
+            </p>
           </template>
         </ds-card>
         <ds-space v-if="user.socialMedia && user.socialMedia.length" margin="large">
@@ -218,7 +228,6 @@
 
 <script>
 import uniqBy from 'lodash/uniqBy'
-
 import User from '~/components/User'
 import HcPostCard from '~/components/PostCard'
 import HcFollowButton from '~/components/FollowButton.vue'
@@ -230,10 +239,8 @@ import ContentMenu from '~/components/ContentMenu'
 import HcUpload from '~/components/Upload'
 import HcAvatar from '~/components/Avatar/Avatar.vue'
 import PostMutationHelpers from '~/mixins/PostMutationHelpers'
-
 import PostQuery from '~/graphql/UserProfile/Post.js'
 import UserQuery from '~/graphql/UserProfile/User.js'
-
 const tabToFilterMapping = ({ tab, id }) => {
   return {
     post: { author: { id } },
@@ -241,7 +248,6 @@ const tabToFilterMapping = ({ tab, id }) => {
     shout: { shoutedBy_some: { id } },
   }[tab]
 }
-
 export default {
   components: {
     User,
@@ -387,7 +393,6 @@ export default {
 .pointer {
   cursor: pointer;
 }
-
 .Tab {
   border-collapse: collapse;
   padding-bottom: 5px;
@@ -395,7 +400,6 @@ export default {
 .Tab:hover {
   border-bottom: 2px solid #c9c6ce;
 }
-
 .Tabs {
   position: relative;
   background-color: #fff;
@@ -431,14 +435,12 @@ export default {
     transition: left 0.25s;
   }
 }
-
 .profile-avatar.ds-avatar {
   display: block;
   margin: auto;
   margin-top: -60px;
   border: #fff 5px solid;
 }
-
 .page-name-profile-id-slug {
   .ds-flex-item:first-child .content-menu {
     position: absolute;
@@ -446,17 +448,14 @@ export default {
     right: $space-x-small;
   }
 }
-
 .profile-top-navigation {
   position: sticky;
   top: 53px;
   z-index: 2;
 }
-
 .ds-tab-nav {
   .ds-card-content {
     padding: 0 !important;
-
     .ds-tab-nav-item {
       &.ds-tab-nav-item-active {
         border-bottom: 3px solid #17b53f;

From 3af6f4e8229db991fffb577c25cafcdebae8733a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Fri, 14 Jun 2019 14:42:30 +0200
Subject: [PATCH 23/23] =?UTF-8?q?Little=20german=20approvements=20?=
 =?UTF-8?q?=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/locales/de.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 1ccfe88c2..c17bfc96b 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -86,8 +86,8 @@
       "name": "Daten löschen",
       "contributionsCount": "Meine {count} Beiträge löschen",
       "commentsCount": "Meine {count} Kommentare löschen",
-      "accountDescription": "Sie 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, Beiträge oder Kommentare kannst Du nach dem Löschen <b>WEDER VERWALTEN NOCH WIEDERHERSTELLEN!</b>",
+      "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 <b>WEDER VERWALTEN NOCH WIEDERHERSTELLEN!</b>",
       "success": "Konto erfolgreich gelöscht",
       "pleaseConfirm": "<b class='is-danger'>Zerstörerische Aktion!</b> Gib <b>{confirm}</b> ein, um zu bestätigen."
     },