From 51ca20335ac9d9680321ac6d1c38537585da6321 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 25 Mar 2019 00:09:35 +0100
Subject: [PATCH 01/15] Sketch :cucumber: for #240

---
 cypress/integration/common/steps.js           |  4 ++
 .../identifier/PersistentLinks.feature        | 41 +++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 cypress/integration/identifier/PersistentLinks.feature

diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index 1a9891a7a..d05f80f13 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -86,6 +86,10 @@ Given('my user account has the role {string}', role => {
 
 When('I log out', cy.logout)
 
+When('I visit {string}', page => {
+  cy.openPage(page)
+})
+
 When('I visit the {string} page', page => {
   cy.openPage(page)
 })
diff --git a/cypress/integration/identifier/PersistentLinks.feature b/cypress/integration/identifier/PersistentLinks.feature
new file mode 100644
index 000000000..b4a55cee3
--- /dev/null
+++ b/cypress/integration/identifier/PersistentLinks.feature
@@ -0,0 +1,41 @@
+Feature: Persistent Links
+  As a user
+  I want to click on a link with an 'href' having an unmodifiable id of a user
+  In order to have persistent links even if the user changes a his/her slug
+
+  |      | Modifiable | Referenceable | Unique | Purpose                       |
+  | --   | --         | --            | --     | --                            |
+  | ID   | no         | yes           | yes    | Identity, Traceability, Links |
+  | Slug | yes        | yes           | yes    | @-Mentions, SEO-friendly URL  |
+  | Name | yes        | no            | no     | Search, self-description      |
+
+
+  Background:
+    Given we have the following user accounts:
+      | id         | name           | slug    |
+      | MHNqce98y1 | Stepen Hawking | thehawk |
+    And we have the following posts in our database:
+      | id         | title                                         | slug       |
+      | bWBjpkTKZp | 101 Essays that will change the way you think | 101-essays |
+    And I have a user account
+    And I am logged in
+
+  Scenario Outline: Link with slug only is valid and gets auto-completed
+    When I visit "<url>"
+    Then I get redirected to "<redirectUrl>"
+    Examples:
+      | url              | redirectUrl                 |
+      | /profile/thehawk | /profile/MHNqce98y1/thehawk |
+      | /post/101-essays | /post/bWBjpkTKZp/101-essays |
+
+  Scenario: Link with id only will always point to the same user
+    When I visit "/profile/MHNqce98y1"
+    Then I get redirected to "/profile/MHNqce98y1/thehawk"
+
+  Scenario Outline: ID takes precedence over slug
+    When I visit "<url>"
+    Then I get redirected to "<redirectUrl>"
+    Examples:
+      | url                                 | redirectUrl                 |
+      | /profile/MHNqce98y1/stephen-hawking | /profile/MHNqce98y1/thehawk |
+      | /post/bWBjpkTKZp/the-way-you-think  | /post/bWBjpkTKZp/101-essays |

From 327bd037a019a535703004f31283793d8e6cd9a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 25 Mar 2019 14:49:54 +0100
Subject: [PATCH 02/15] Implement redirect for user profile

---
 webapp/pages/profile/{ => _id}/_slug.vue |  0
 webapp/pages/profile/_id/index.vue       | 46 ++++++++++++++++++++++++
 webapp/pages/profile/index.vue           |  8 -----
 3 files changed, 46 insertions(+), 8 deletions(-)
 rename webapp/pages/profile/{ => _id}/_slug.vue (100%)
 create mode 100644 webapp/pages/profile/_id/index.vue
 delete mode 100644 webapp/pages/profile/index.vue

diff --git a/webapp/pages/profile/_slug.vue b/webapp/pages/profile/_id/_slug.vue
similarity index 100%
rename from webapp/pages/profile/_slug.vue
rename to webapp/pages/profile/_id/_slug.vue
diff --git a/webapp/pages/profile/_id/index.vue b/webapp/pages/profile/_id/index.vue
new file mode 100644
index 000000000..78e16f8fb
--- /dev/null
+++ b/webapp/pages/profile/_id/index.vue
@@ -0,0 +1,46 @@
+<script>
+import gql from 'graphql-tag'
+
+const queryId = gql`
+  query($idOrSlug: ID) {
+    User(id: $idOrSlug) {
+      id
+      slug
+    }
+  }
+`
+const querySlug = gql`
+  query($idOrSlug: String) {
+    User(slug: $idOrSlug) {
+      id
+      slug
+    }
+  }
+`
+
+export default {
+  layout: 'blank',
+  async asyncData(context) {
+    const {
+      params: { id: idOrSlug },
+      redirect,
+      error,
+      app: { apolloProvider }
+    } = context
+
+    const variables = { idOrSlug }
+    const client = apolloProvider.defaultClient
+
+    const tryToRedirect = async query => {
+      const idRes = await client.query({ query, variables })
+      const user = idRes.data.User[0]
+      if (user) redirect(`/profile/${user.id}/${user.slug}`)
+    }
+
+    await tryToRedirect(queryId)
+    await tryToRedirect(querySlug)
+
+    return error({ statusCode: 404 })
+  }
+}
+</script>
diff --git a/webapp/pages/profile/index.vue b/webapp/pages/profile/index.vue
deleted file mode 100644
index 7135a2c3d..000000000
--- a/webapp/pages/profile/index.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-export default {
-  layout: 'blank',
-  asyncData({ error }) {
-    error({ statusCode: 404, message: 'Profile slug missing' })
-  }
-}
-</script>

From 16e60e540f1bd511c89b7667e20800747516de68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 25 Mar 2019 21:00:22 +0100
Subject: [PATCH 03/15] Fix typo

Cypress tests currently fail because we cannot override `slug` in
factories.
---
 cypress/integration/identifier/PersistentLinks.feature | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/identifier/PersistentLinks.feature b/cypress/integration/identifier/PersistentLinks.feature
index b4a55cee3..1095c6c72 100644
--- a/cypress/integration/identifier/PersistentLinks.feature
+++ b/cypress/integration/identifier/PersistentLinks.feature
@@ -12,8 +12,8 @@ Feature: Persistent Links
 
   Background:
     Given we have the following user accounts:
-      | id         | name           | slug    |
-      | MHNqce98y1 | Stepen Hawking | thehawk |
+      | id         | name            | slug    |
+      | MHNqce98y1 | Stephen Hawking | thehawk |
     And we have the following posts in our database:
       | id         | title                                         | slug       |
       | bWBjpkTKZp | 101 Essays that will change the way you think | 101-essays |

From 51cbc65f4b349ca7eef20cc31d2768749efd213b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 25 Mar 2019 23:27:00 +0100
Subject: [PATCH 04/15] Rename `profile-id` to `profile-id-slug` route

---
 cypress/integration/common/report.js |  2 +-
 webapp/components/User.vue           |  6 +++---
 webapp/layouts/default.vue           |  2 +-
 webapp/pages/moderation/index.vue    | 10 +++++-----
 webapp/pages/profile/_id/_slug.vue   |  2 +-
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/cypress/integration/common/report.js b/cypress/integration/common/report.js
index 12f1b326f..e3d3f3975 100644
--- a/cypress/integration/common/report.js
+++ b/cypress/integration/common/report.js
@@ -71,7 +71,7 @@ When('I click on the author', () => {
 })
 
 When('I report the author', () => {
-  cy.get('.page-name-profile-slug').then(() => {
+  cy.get('.page-name-profile-id-slug').then(() => {
     invokeReportOnElement('.ds-card').then(() => {
       cy.get('button')
         .contains('Send')
diff --git a/webapp/components/User.vue b/webapp/components/User.vue
index 1c78b34cc..dd176a67d 100644
--- a/webapp/components/User.vue
+++ b/webapp/components/User.vue
@@ -153,9 +153,9 @@ export default {
       return count
     },
     userLink() {
-      const { slug } = this.user
-      if (!slug) return ''
-      return { name: 'profile-slug', params: { slug } }
+      const { id, slug } = this.user
+      if (!(id && slug)) return ''
+      return { name: 'profile-id-slug', params: { slug, id } }
     }
   }
 }
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index bdb41f8b2..f749fda69 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -39,7 +39,7 @@
                 >
                   <a
                     class="avatar-menu-trigger"
-                    :href="$router.resolve({name: 'profile-slug', params: {slug: user.slug}}).href"
+                    :href="$router.resolve({name: 'profile-id-slug', params: {id: user.id, slug: user.slug}}).href"
                     @click.prevent="toggleMenu"
                   >
                     <ds-avatar
diff --git a/webapp/pages/moderation/index.vue b/webapp/pages/moderation/index.vue
index cd41dc17c..5d9ab1eb0 100644
--- a/webapp/pages/moderation/index.vue
+++ b/webapp/pages/moderation/index.vue
@@ -36,7 +36,7 @@
           </ds-text>
         </div>
         <div v-else>
-          <nuxt-link :to="{ name: 'profile-slug', params: { slug: scope.row.user.slug } }">
+          <nuxt-link :to="{ name: 'profile-id-slug', params: { id: scope.row.user.id, slug: scope.row.user.slug } }">
             <b>{{ scope.row.user.name | truncate(50) }}</b>
           </nuxt-link>
         </div>
@@ -69,7 +69,7 @@
         slot="submitter"
         slot-scope="scope"
       >
-        <nuxt-link :to="{ name: 'profile-slug', params: { slug: scope.row.submitter.slug } }">
+        <nuxt-link :to="{ name: 'profile-id-slug', params: { id: scope.row.submitter.id, slug: scope.row.submitter.slug } }">
           {{ scope.row.submitter.name }}
         </nuxt-link>
       </template>
@@ -79,19 +79,19 @@
       >
         <nuxt-link
           v-if="scope.row.type === 'Post' && scope.row.post.disabledBy"
-          :to="{ name: 'profile-slug', params: { slug: scope.row.post.disabledBy.slug } }"
+          :to="{ name: 'profile-id-slug', params: { id: scope.row.post.disabledBy.id, slug: scope.row.post.disabledBy.slug } }"
         >
           <b>{{ scope.row.post.disabledBy.name | truncate(50) }}</b>
         </nuxt-link>
         <nuxt-link
           v-else-if="scope.row.type === 'Comment' && scope.row.comment.disabledBy"
-          :to="{ name: 'profile-slug', params: { slug: scope.row.comment.disabledBy.slug } }"
+          :to="{ name: 'profile-id-slug', params: { id: scope.row.comment.disabledBy.id, slug: scope.row.comment.disabledBy.slug } }"
         >
           <b>{{ scope.row.comment.disabledBy.name | truncate(50) }}</b>
         </nuxt-link>
         <nuxt-link
           v-else-if="scope.row.type === 'User' && scope.row.user.disabledBy"
-          :to="{ name: 'profile-slug', params: { slug: scope.row.user.disabledBy.slug } }"
+          :to="{ name: 'profile-id-slug', params: { id: scope.row.user.disabledBy.id, slug: scope.row.user.disabledBy.slug } }"
         >
           <b>{{ scope.row.user.disabledBy.name | truncate(50) }}</b>
         </nuxt-link>
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 76011f456..a3b10529e 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -423,7 +423,7 @@ export default {
   border: #fff 5px solid;
 }
 
-.page-name-profile-slug {
+.page-name-profile-id-slug {
   .ds-flex-item:first-child .content-menu {
     position: absolute;
     top: $space-x-small;

From b79ae683186125458e8904b5acfd8e6199c00d3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 25 Mar 2019 23:31:47 +0100
Subject: [PATCH 05/15] User factory can override slug

---
 backend/src/seed/factories/users.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/backend/src/seed/factories/users.js b/backend/src/seed/factories/users.js
index 491b3f9e1..9fe957515 100644
--- a/backend/src/seed/factories/users.js
+++ b/backend/src/seed/factories/users.js
@@ -5,6 +5,7 @@ export default function create (params) {
   const {
     id = uuid(),
     name = faker.name.findName(),
+    slug = '',
     email = faker.internet.email(),
     password = '1234',
     role = 'user',
@@ -19,6 +20,7 @@ export default function create (params) {
       CreateUser(
         id: "${id}",
         name: "${name}",
+        slug: "${slug}",
         password: "${password}",
         email: "${email}",
         avatar: "${avatar}",
@@ -29,6 +31,7 @@ export default function create (params) {
       ) {
         id
         name
+        slug
         email
         avatar
         role

From 203f2091de445d7f13136d158f617061bdc6f726 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 26 Mar 2019 14:28:55 +0100
Subject: [PATCH 06/15] Implement `id takes precedence over slug`

---
 .../pages/profile/{_id/index.vue => _id.vue}  | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)
 rename webapp/pages/profile/{_id/index.vue => _id.vue} (51%)

diff --git a/webapp/pages/profile/_id/index.vue b/webapp/pages/profile/_id.vue
similarity index 51%
rename from webapp/pages/profile/_id/index.vue
rename to webapp/pages/profile/_id.vue
index 78e16f8fb..eee8d610a 100644
--- a/webapp/pages/profile/_id/index.vue
+++ b/webapp/pages/profile/_id.vue
@@ -1,3 +1,7 @@
+<template>
+  <nuxt-child />
+</template>
+
 <script>
 import gql from 'graphql-tag'
 
@@ -22,23 +26,26 @@ export default {
   layout: 'blank',
   async asyncData(context) {
     const {
-      params: { id: idOrSlug },
+      params: { id, slug },
       redirect,
       error,
       app: { apolloProvider }
     } = context
+    const idOrSlug = id
 
     const variables = { idOrSlug }
     const client = apolloProvider.defaultClient
 
-    const tryToRedirect = async query => {
-      const idRes = await client.query({ query, variables })
-      const user = idRes.data.User[0]
-      if (user) redirect(`/profile/${user.id}/${user.slug}`)
-    }
+    let response
+    let user
+    response = await client.query({ query: queryId, variables })
+    user = response.data.User[0]
+    if (user && user.slug === slug) return // all good
+    if (user && user.slug !== slug) redirect(`/profile/${user.id}/${user.slug}`)
 
-    await tryToRedirect(queryId)
-    await tryToRedirect(querySlug)
+    response = await client.query({ query: querySlug, variables })
+    user = response.data.User[0]
+    if (user) redirect(`/profile/${user.id}/${user.slug}`)
 
     return error({ statusCode: 404 })
   }

From bbdec39017336be07e96d7ffdfffa0fb6090ee8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 26 Mar 2019 16:09:26 +0100
Subject: [PATCH 07/15] Implement redirect on posts

---
 webapp/pages/post/_id.vue                     | 99 +++++++++++++++++++
 webapp/pages/post/{ => _id}/_slug/index.vue   |  0
 .../pages/post/{ => _id}/_slug/more-info.vue  |  0
 .../post/{ => _id}/_slug/take-action.vue      |  0
 webapp/pages/post/_slug.vue                   | 54 ----------
 webapp/pages/profile/_id.vue                  |  1 -
 6 files changed, 99 insertions(+), 55 deletions(-)
 create mode 100644 webapp/pages/post/_id.vue
 rename webapp/pages/post/{ => _id}/_slug/index.vue (100%)
 rename webapp/pages/post/{ => _id}/_slug/more-info.vue (100%)
 rename webapp/pages/post/{ => _id}/_slug/take-action.vue (100%)
 delete mode 100644 webapp/pages/post/_slug.vue

diff --git a/webapp/pages/post/_id.vue b/webapp/pages/post/_id.vue
new file mode 100644
index 000000000..6863e3ca6
--- /dev/null
+++ b/webapp/pages/post/_id.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <ds-flex gutter="small">
+      <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
+        <transition
+          name="slide-up"
+          appear
+        >
+          <nuxt-child />
+        </transition>
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '200px' }">
+        <ds-menu :routes="routes" />
+      </ds-flex-item>
+    </ds-flex>
+  </div>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+
+const queryId = gql`
+  query($idOrSlug: ID) {
+    Post(id: $idOrSlug) {
+      id
+      slug
+    }
+  }
+`
+const querySlug = gql`
+  query($idOrSlug: String) {
+    Post(slug: $idOrSlug) {
+      id
+      slug
+    }
+  }
+`
+
+export default {
+  computed: {
+    routes() {
+      const { slug, id } = this.$route.params
+      return [
+        {
+          name: this.$t('common.post', null, 1),
+          path: `/post/${id}/${slug}`,
+          children: [
+            {
+              name: this.$t('common.comment', null, 2),
+              path: `/post/${id}/${slug}#comments`
+            },
+            {
+              name: this.$t('common.letsTalk'),
+              path: `/post/${id}/${slug}#lets-talk`
+            },
+            {
+              name: this.$t('common.versus'),
+              path: `/post/${id}/${slug}#versus`
+            }
+          ]
+        },
+        {
+          name: this.$t('common.moreInfo'),
+          path: `/post/${id}/${slug}/more-info`
+        },
+        {
+          name: this.$t('common.takeAction'),
+          path: `/post/${id}/${slug}/take-action`
+        }
+      ]
+    }
+  },
+  async asyncData(context) {
+    const {
+      params: { id, slug },
+      redirect,
+      error,
+      app: { apolloProvider }
+    } = context
+    const idOrSlug = id
+
+    const variables = { idOrSlug }
+    const client = apolloProvider.defaultClient
+
+    let response
+    let post
+    response = await client.query({ query: queryId, variables })
+    post = response.data.Post[0]
+    if (post && post.slug === slug) return // all good
+    if (post && post.slug !== slug) redirect(`/post/${post.id}/${post.slug}`)
+
+    response = await client.query({ query: querySlug, variables })
+    post = response.data.Post[0]
+    if (post) redirect(`/post/${post.id}/${post.slug}`)
+
+    return error({ statusCode: 404 })
+  }
+}
+</script>
diff --git a/webapp/pages/post/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
similarity index 100%
rename from webapp/pages/post/_slug/index.vue
rename to webapp/pages/post/_id/_slug/index.vue
diff --git a/webapp/pages/post/_slug/more-info.vue b/webapp/pages/post/_id/_slug/more-info.vue
similarity index 100%
rename from webapp/pages/post/_slug/more-info.vue
rename to webapp/pages/post/_id/_slug/more-info.vue
diff --git a/webapp/pages/post/_slug/take-action.vue b/webapp/pages/post/_id/_slug/take-action.vue
similarity index 100%
rename from webapp/pages/post/_slug/take-action.vue
rename to webapp/pages/post/_id/_slug/take-action.vue
diff --git a/webapp/pages/post/_slug.vue b/webapp/pages/post/_slug.vue
deleted file mode 100644
index d4a233f0f..000000000
--- a/webapp/pages/post/_slug.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <ds-flex gutter="small">
-      <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
-        <transition
-          name="slide-up"
-          appear
-        >
-          <nuxt-child />
-        </transition>
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '200px' }">
-        <ds-menu :routes="routes" />
-      </ds-flex-item>
-    </ds-flex>
-  </div>
-</template>
-
-<script>
-export default {
-  computed: {
-    routes() {
-      return [
-        {
-          name: this.$t('common.post', null, 1),
-          path: `/post/${this.$route.params.slug}`,
-          children: [
-            {
-              name: this.$t('common.comment', null, 2),
-              path: `/post/${this.$route.params.slug}#comments`
-            },
-            {
-              name: this.$t('common.letsTalk'),
-              path: `/post/${this.$route.params.slug}#lets-talk`
-            },
-            {
-              name: this.$t('common.versus'),
-              path: `/post/${this.$route.params.slug}#versus`
-            }
-          ]
-        },
-        {
-          name: this.$t('common.moreInfo'),
-          path: `/post/${this.$route.params.slug}/more-info`
-        },
-        {
-          name: this.$t('common.takeAction'),
-          path: `/post/${this.$route.params.slug}/take-action`
-        }
-      ]
-    }
-  }
-}
-</script>
diff --git a/webapp/pages/profile/_id.vue b/webapp/pages/profile/_id.vue
index eee8d610a..ad9772358 100644
--- a/webapp/pages/profile/_id.vue
+++ b/webapp/pages/profile/_id.vue
@@ -23,7 +23,6 @@ const querySlug = gql`
 `
 
 export default {
-  layout: 'blank',
   async asyncData(context) {
     const {
       params: { id, slug },

From 63d928e12e918a080d644b55ada3fc412b35ad1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 26 Mar 2019 16:21:39 +0100
Subject: [PATCH 08/15] Change route `post-slug` to `post-id-slug`

And query `slug` and `id` everywhere
---
 webapp/components/ContributionForm.vue |  4 ++--
 webapp/components/PostCard.vue         |  4 ++--
 webapp/graphql/ModerationListQuery.js  | 14 ++++++++++++--
 webapp/graphql/UserProfileQuery.js     |  6 ++++--
 webapp/layouts/default.vue             |  4 ++--
 webapp/pages/index.vue                 |  4 ++--
 webapp/pages/moderation/index.vue      |  4 ++--
 webapp/pages/post/_id/_slug/index.vue  |  2 +-
 8 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/webapp/components/ContributionForm.vue b/webapp/components/ContributionForm.vue
index cf7c28ece..3ef041569 100644
--- a/webapp/components/ContributionForm.vue
+++ b/webapp/components/ContributionForm.vue
@@ -111,8 +111,8 @@ export default {
           const result = res.data[this.id ? 'UpdatePost' : 'CreatePost']
 
           this.$router.push({
-            name: 'post-slug',
-            params: { slug: result.slug }
+            name: 'post-id-slug',
+            params: { id: result.id, slug: result.slug }
           })
         })
         .catch(err => {
diff --git a/webapp/components/PostCard.vue b/webapp/components/PostCard.vue
index 8f534f6ff..767835f74 100644
--- a/webapp/components/PostCard.vue
+++ b/webapp/components/PostCard.vue
@@ -106,8 +106,8 @@ export default {
   methods: {
     href(post) {
       return this.$router.resolve({
-        name: 'post-slug',
-        params: { slug: post.slug }
+        name: 'post-id-slug',
+        params: { id: post.id, slug: post.slug }
       }).href
     }
   }
diff --git a/webapp/graphql/ModerationListQuery.js b/webapp/graphql/ModerationListQuery.js
index d8105e388..4e3927bdd 100644
--- a/webapp/graphql/ModerationListQuery.js
+++ b/webapp/graphql/ModerationListQuery.js
@@ -9,43 +9,52 @@ export default app => {
         type
         createdAt
         submitter {
+          id
           disabled
           deleted
           name
           slug
         }
         user {
+          id
           name
           slug
           disabled
           deleted
           disabledBy {
+            id
             slug
             name
+            disabled
+            deleted
           }
         }
         comment {
           contentExcerpt
           author {
+            id
             name
             slug
             disabled
             deleted
           }
           post {
+            id
             disabled
             deleted
             title
             slug
           }
           disabledBy {
+            id
+            slug
             disabled
             deleted
-            slug
             name
           }
         }
         post {
+          id
           title
           slug
           disabled
@@ -57,9 +66,10 @@ export default app => {
             slug
           }
           disabledBy {
+            id
+            slug
             disabled
             deleted
-            slug
             name
           }
         }
diff --git a/webapp/graphql/UserProfileQuery.js b/webapp/graphql/UserProfileQuery.js
index 683f0e3ac..f0d7720ae 100644
--- a/webapp/graphql/UserProfileQuery.js
+++ b/webapp/graphql/UserProfileQuery.js
@@ -6,6 +6,7 @@ export default app => {
     query User($slug: String!, $first: Int, $offset: Int) {
       User(slug: $slug) {
         id
+        slug
         name
         avatar
         about
@@ -27,8 +28,8 @@ export default app => {
         followingCount
         following(first: 7) {
           id
-          name
           slug
+          name
           avatar
           disabled
           deleted
@@ -49,10 +50,10 @@ export default app => {
         followedByCurrentUser
         followedBy(first: 7)  {
           id
+          slug
           name
           disabled
           deleted
-          slug
           avatar
           followedByCount
           followedByCurrentUser
@@ -87,6 +88,7 @@ export default app => {
           }
           author {
             id
+            slug
             avatar
             name
             disabled
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index f749fda69..991662350 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -182,8 +182,8 @@ export default {
     goToPost(item) {
       this.$nextTick(() => {
         this.$router.push({
-          name: 'post-slug',
-          params: { slug: item.slug }
+          name: 'post-id-slug',
+          params: { id: item.id, slug: item.slug }
         })
       })
     },
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index e28d6b2c3..ee824eb59 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -64,8 +64,8 @@ export default {
     },
     href(post) {
       return this.$router.resolve({
-        name: 'post-slug',
-        params: { slug: post.slug }
+        name: 'post-id-slug',
+        params: { id: post.id, slug: post.slug }
       }).href
     },
     showMoreContributions() {
diff --git a/webapp/pages/moderation/index.vue b/webapp/pages/moderation/index.vue
index 5d9ab1eb0..fc5d1fbe6 100644
--- a/webapp/pages/moderation/index.vue
+++ b/webapp/pages/moderation/index.vue
@@ -14,7 +14,7 @@
         slot-scope="scope"
       >
         <div v-if="scope.row.type === 'Post'">
-          <nuxt-link :to="{ name: 'post-slug', params: { slug: scope.row.post.slug } }">
+          <nuxt-link :to="{ name: 'post-id-slug', params: { id: scope.row.post.id, slug: scope.row.post.slug } }">
             <b>{{ scope.row.post.title | truncate(50) }}</b>
           </nuxt-link><br>
           <ds-text
@@ -25,7 +25,7 @@
           </ds-text>
         </div>
         <div v-else-if="scope.row.type === 'Comment'">
-          <nuxt-link :to="{ name: 'post-slug', params: { slug: scope.row.comment.post.slug } }">
+          <nuxt-link :to="{ name: 'post-id-slug', params: { id: scope.row.comment.post.id, slug: scope.row.comment.post.slug } }">
             <b>{{ scope.row.comment.contentExcerpt | truncate(50) }}</b>
           </nuxt-link><br>
           <ds-text
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index b418a9cb2..49340ae9b 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -263,7 +263,7 @@ export default {
 </script>
 
 <style lang="scss">
-.page-name-post-slug {
+.page-name-post-id-slug {
   .content-menu {
     float: right;
     margin-right: -$space-x-small;

From 6ee9b9d830995a08dcc275b54a3a5a7cd00fc4f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 26 Mar 2019 17:13:41 +0100
Subject: [PATCH 09/15] Fix `WritePost.feature`

---
 cypress/integration/06.WritePost.feature | 2 +-
 cypress/integration/common/steps.js      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/06.WritePost.feature b/cypress/integration/06.WritePost.feature
index 0193e44bf..fed1bbf2f 100644
--- a/cypress/integration/06.WritePost.feature
+++ b/cypress/integration/06.WritePost.feature
@@ -17,7 +17,7 @@ Feature: Create a post
     for active citizenship.
     """
     And I click on "Save"
-    Then I get redirected to "/post/my-first-post/"
+    Then I get redirected to ".../my-first-post"
     And the post was saved successfully
 
   Scenario: See a post on the landing page
diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index d05f80f13..8944b7c25 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -224,7 +224,7 @@ Then('the post shows up on the landing page at position {int}', index => {
 })
 
 Then('I get redirected to {string}', route => {
-  cy.location('pathname').should('contain', route)
+  cy.location('pathname').should('contain', route.replace('...', ''))
 })
 
 Then('the post was saved successfully', () => {

From 9545e20a2237bff79bd32ced0a203f3157b06dd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 26 Mar 2019 17:28:15 +0100
Subject: [PATCH 10/15] Fix `Search.feature`

---
 cypress/integration/06.Search.feature | 2 +-
 cypress/integration/common/search.js  | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/06.Search.feature b/cypress/integration/06.Search.feature
index 0a4450829..71aee608a 100644
--- a/cypress/integration/06.Search.feature
+++ b/cypress/integration/06.Search.feature
@@ -8,7 +8,7 @@ Feature: Search
     And we have the following posts in our database:
       | Author        | id | title                                         | content                                 |
       | Brianna Wiest | p1 | 101 Essays that will change the way you think | 101 Essays, of course!                  |
-      | Brianna Wiest | p1 | No searched for content                       | will be found in this post, I guarantee |
+      | Brianna Wiest | p2 | No searched for content                       | will be found in this post, I guarantee |
     Given I am logged in
 
   Scenario: Search for specific words
diff --git a/cypress/integration/common/search.js b/cypress/integration/common/search.js
index 4809e8a13..de24bdccb 100644
--- a/cypress/integration/common/search.js
+++ b/cypress/integration/common/search.js
@@ -43,8 +43,12 @@ When('I select an entry', () => {
 
 Then("I should be on the post's page", () => {
   cy.location('pathname').should(
-    'eq',
-    '/post/101-essays-that-will-change-the-way-you-think/'
+    'contain',
+    '/post/'
+  )
+  cy.location('pathname').should(
+    'contain',
+    '/101-essays-that-will-change-the-way-you-think'
   )
 })
 

From 40224ab18d2367455b8a0e2259f2fc2f1101179c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 26 Mar 2019 20:03:11 +0100
Subject: [PATCH 11/15] Fix bug if `id` is undefined on post route

@itbsStefan this is the fix for the bug during our pair-programming. The
request to the server was returning *all* posts if `id` was undefined
and the post for redirecting was the most recently created.
---
 webapp/pages/post/_id.vue    | 11 +++++++----
 webapp/pages/profile/_id.vue |  9 ++++++---
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/webapp/pages/post/_id.vue b/webapp/pages/post/_id.vue
index 6863e3ca6..5870a1867 100644
--- a/webapp/pages/post/_id.vue
+++ b/webapp/pages/post/_id.vue
@@ -77,7 +77,7 @@ export default {
       error,
       app: { apolloProvider }
     } = context
-    const idOrSlug = id
+    const idOrSlug = id || slug
 
     const variables = { idOrSlug }
     const client = apolloProvider.defaultClient
@@ -87,13 +87,16 @@ export default {
     response = await client.query({ query: queryId, variables })
     post = response.data.Post[0]
     if (post && post.slug === slug) return // all good
-    if (post && post.slug !== slug) redirect(`/post/${post.id}/${post.slug}`)
+    if (post && post.slug !== slug) {
+      return redirect(`/post/${post.id}/${post.slug}`)
+    }
 
     response = await client.query({ query: querySlug, variables })
     post = response.data.Post[0]
-    if (post) redirect(`/post/${post.id}/${post.slug}`)
+    if (post) return redirect(`/post/${post.id}/${post.slug}`)
 
-    return error({ statusCode: 404 })
+    const message = 'This post could not be found'
+    return error({ statusCode: 404, message })
   }
 }
 </script>
diff --git a/webapp/pages/profile/_id.vue b/webapp/pages/profile/_id.vue
index ad9772358..382200c82 100644
--- a/webapp/pages/profile/_id.vue
+++ b/webapp/pages/profile/_id.vue
@@ -40,13 +40,16 @@ export default {
     response = await client.query({ query: queryId, variables })
     user = response.data.User[0]
     if (user && user.slug === slug) return // all good
-    if (user && user.slug !== slug) redirect(`/profile/${user.id}/${user.slug}`)
+    if (user && user.slug !== slug) {
+      return redirect(`/profile/${user.id}/${user.slug}`)
+    }
 
     response = await client.query({ query: querySlug, variables })
     user = response.data.User[0]
-    if (user) redirect(`/profile/${user.id}/${user.slug}`)
+    if (user) return redirect(`/profile/${user.id}/${user.slug}`)
 
-    return error({ statusCode: 404 })
+    const message = 'This user could not be found'
+    return error({ statusCode: 404, message })
   }
 }
 </script>

From d9d7c388004c31de7d835ba7297b7f3462f6c8e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 26 Mar 2019 20:19:25 +0100
Subject: [PATCH 12/15] Add missing id to graphqQl query

---
 webapp/graphql/ModerationListQuery.js | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/webapp/graphql/ModerationListQuery.js b/webapp/graphql/ModerationListQuery.js
index 4e3927bdd..940ada6f6 100644
--- a/webapp/graphql/ModerationListQuery.js
+++ b/webapp/graphql/ModerationListQuery.js
@@ -10,15 +10,15 @@ export default app => {
         createdAt
         submitter {
           id
+          slug
+          name
           disabled
           deleted
-          name
-          slug
         }
         user {
           id
-          name
           slug
+          name
           disabled
           deleted
           disabledBy {
@@ -33,44 +33,45 @@ export default app => {
           contentExcerpt
           author {
             id
-            name
             slug
+            name
             disabled
             deleted
           }
           post {
             id
+            slug
+            title
             disabled
             deleted
-            title
-            slug
           }
           disabledBy {
             id
             slug
+            name
             disabled
             deleted
-            name
           }
         }
         post {
           id
-          title
           slug
+          title
           disabled
           deleted
           author {
+            id
+            slug
+            name
             disabled
             deleted
-            name
-            slug
           }
           disabledBy {
             id
             slug
+            name
             disabled
             deleted
-            name
           }
         }
       }

From 5d440d2e5b0a87939bc3347d69766b44d23ac841 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 26 Mar 2019 20:49:04 +0100
Subject: [PATCH 13/15] Fix wrong implementation of cucumber test

---
 backend/src/seed/factories/posts.js | 2 ++
 webapp/pages/profile/_id.vue        | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/backend/src/seed/factories/posts.js b/backend/src/seed/factories/posts.js
index e2bc2ab66..83d5844d7 100644
--- a/backend/src/seed/factories/posts.js
+++ b/backend/src/seed/factories/posts.js
@@ -4,6 +4,7 @@ import uuid from 'uuid/v4'
 export default function (params) {
   const {
     id = uuid(),
+    slug = '',
     title = faker.lorem.sentence(),
     content = [
       faker.lorem.sentence(),
@@ -21,6 +22,7 @@ export default function (params) {
     mutation {
       CreatePost(
         id: "${id}",
+        slug: "${slug}",
         title: "${title}",
         content: "${content}",
         image: "${image}",
diff --git a/webapp/pages/profile/_id.vue b/webapp/pages/profile/_id.vue
index 382200c82..16a56d3eb 100644
--- a/webapp/pages/profile/_id.vue
+++ b/webapp/pages/profile/_id.vue
@@ -30,7 +30,7 @@ export default {
       error,
       app: { apolloProvider }
     } = context
-    const idOrSlug = id
+    const idOrSlug = id || slug
 
     const variables = { idOrSlug }
     const client = apolloProvider.defaultClient

From 88ac0601f7bb135190342121789beb792ca0d1a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 26 Mar 2019 23:15:49 +0100
Subject: [PATCH 14/15] DRY: persistentLink implementation

---
 cypress/integration/common/search.js |  4 +-
 webapp/mixins/persistentLinks.js     | 32 ++++++++++++++
 webapp/pages/post/_id.vue            | 63 ++++++++++------------------
 webapp/pages/profile/_id.vue         | 63 ++++++++++------------------
 4 files changed, 76 insertions(+), 86 deletions(-)
 create mode 100644 webapp/mixins/persistentLinks.js

diff --git a/cypress/integration/common/search.js b/cypress/integration/common/search.js
index de24bdccb..1c1981581 100644
--- a/cypress/integration/common/search.js
+++ b/cypress/integration/common/search.js
@@ -47,8 +47,8 @@ Then("I should be on the post's page", () => {
     '/post/'
   )
   cy.location('pathname').should(
-    'contain',
-    '/101-essays-that-will-change-the-way-you-think'
+    'eq',
+    '/post/p1/101-essays-that-will-change-the-way-you-think'
   )
 })
 
diff --git a/webapp/mixins/persistentLinks.js b/webapp/mixins/persistentLinks.js
new file mode 100644
index 000000000..e902f2fbe
--- /dev/null
+++ b/webapp/mixins/persistentLinks.js
@@ -0,0 +1,32 @@
+export default function(options = {}) {
+  const { queryId, querySlug, path, message = 'Page not found.' } = options
+  return {
+    asyncData: async context => {
+      const {
+        params: { id, slug },
+        redirect,
+        error,
+        app: { apolloProvider }
+      } = context
+      const idOrSlug = id || slug
+
+      const variables = { idOrSlug }
+      const client = apolloProvider.defaultClient
+
+      let response
+      let thing
+      response = await client.query({ query: queryId, variables })
+      thing = response.data[Object.keys(response.data)[0]][0]
+      if (thing && thing.slug === slug) return // all good
+      if (thing && thing.slug !== slug) {
+        return redirect(`/${path}/${thing.id}/${thing.slug}`)
+      }
+
+      response = await client.query({ query: querySlug, variables })
+      thing = response.data[Object.keys(response.data)[0]][0]
+      if (thing) return redirect(`/${path}/${thing.id}/${thing.slug}`)
+
+      return error({ statusCode: 404, message })
+    }
+  }
+}
diff --git a/webapp/pages/post/_id.vue b/webapp/pages/post/_id.vue
index 5870a1867..21dd4b292 100644
--- a/webapp/pages/post/_id.vue
+++ b/webapp/pages/post/_id.vue
@@ -18,25 +18,32 @@
 
 <script>
 import gql from 'graphql-tag'
+import PersistentLinks from '~/mixins/persistentLinks.js'
 
-const queryId = gql`
-  query($idOrSlug: ID) {
-    Post(id: $idOrSlug) {
-      id
-      slug
+const options = {
+  queryId: gql`
+    query($idOrSlug: ID) {
+      Post(id: $idOrSlug) {
+        id
+        slug
+      }
     }
-  }
-`
-const querySlug = gql`
-  query($idOrSlug: String) {
-    Post(slug: $idOrSlug) {
-      id
-      slug
+  `,
+  querySlug: gql`
+    query($idOrSlug: String) {
+      Post(slug: $idOrSlug) {
+        id
+        slug
+      }
     }
-  }
-`
+  `,
+  path: 'post',
+  message: 'This post could not be found'
+}
+const persistentLinks = PersistentLinks(options)
 
 export default {
+  mixins: [persistentLinks],
   computed: {
     routes() {
       const { slug, id } = this.$route.params
@@ -69,34 +76,6 @@ export default {
         }
       ]
     }
-  },
-  async asyncData(context) {
-    const {
-      params: { id, slug },
-      redirect,
-      error,
-      app: { apolloProvider }
-    } = context
-    const idOrSlug = id || slug
-
-    const variables = { idOrSlug }
-    const client = apolloProvider.defaultClient
-
-    let response
-    let post
-    response = await client.query({ query: queryId, variables })
-    post = response.data.Post[0]
-    if (post && post.slug === slug) return // all good
-    if (post && post.slug !== slug) {
-      return redirect(`/post/${post.id}/${post.slug}`)
-    }
-
-    response = await client.query({ query: querySlug, variables })
-    post = response.data.Post[0]
-    if (post) return redirect(`/post/${post.id}/${post.slug}`)
-
-    const message = 'This post could not be found'
-    return error({ statusCode: 404, message })
   }
 }
 </script>
diff --git a/webapp/pages/profile/_id.vue b/webapp/pages/profile/_id.vue
index 16a56d3eb..4d436146c 100644
--- a/webapp/pages/profile/_id.vue
+++ b/webapp/pages/profile/_id.vue
@@ -4,52 +4,31 @@
 
 <script>
 import gql from 'graphql-tag'
+import PersistentLinks from '~/mixins/persistentLinks.js'
 
-const queryId = gql`
-  query($idOrSlug: ID) {
-    User(id: $idOrSlug) {
-      id
-      slug
+const options = {
+  queryId: gql`
+    query($idOrSlug: ID) {
+      User(id: $idOrSlug) {
+        id
+        slug
+      }
     }
-  }
-`
-const querySlug = gql`
-  query($idOrSlug: String) {
-    User(slug: $idOrSlug) {
-      id
-      slug
+  `,
+  querySlug: gql`
+    query($idOrSlug: String) {
+      User(slug: $idOrSlug) {
+        id
+        slug
+      }
     }
-  }
-`
+  `,
+  message: 'This user could not be found',
+  path: 'profile'
+}
+const persistentLinks = PersistentLinks(options)
 
 export default {
-  async asyncData(context) {
-    const {
-      params: { id, slug },
-      redirect,
-      error,
-      app: { apolloProvider }
-    } = context
-    const idOrSlug = id || slug
-
-    const variables = { idOrSlug }
-    const client = apolloProvider.defaultClient
-
-    let response
-    let user
-    response = await client.query({ query: queryId, variables })
-    user = response.data.User[0]
-    if (user && user.slug === slug) return // all good
-    if (user && user.slug !== slug) {
-      return redirect(`/profile/${user.id}/${user.slug}`)
-    }
-
-    response = await client.query({ query: querySlug, variables })
-    user = response.data.User[0]
-    if (user) return redirect(`/profile/${user.id}/${user.slug}`)
-
-    const message = 'This user could not be found'
-    return error({ statusCode: 404, message })
-  }
+  mixins: [persistentLinks]
 }
 </script>

From 76dfd08c82fd718852978e751c9f1d0d3dbf2cff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 27 Mar 2019 00:14:07 +0100
Subject: [PATCH 15/15] Follow @mattwr18's review

https://github.com/Human-Connection/Human-Connection/pull/248#pullrequestreview-219203465
---
 .../integration/identifier/PersistentLinks.feature |  4 ++--
 webapp/mixins/persistentLinks.js                   | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/cypress/integration/identifier/PersistentLinks.feature b/cypress/integration/identifier/PersistentLinks.feature
index 1095c6c72..5ea48ef6a 100644
--- a/cypress/integration/identifier/PersistentLinks.feature
+++ b/cypress/integration/identifier/PersistentLinks.feature
@@ -1,7 +1,7 @@
 Feature: Persistent Links
   As a user
-  I want to click on a link with an 'href' having an unmodifiable id of a user
-  In order to have persistent links even if the user changes a his/her slug
+  I want all links to carry permanent information that identifies the linked resource
+  In order to have persistent links even if a part of the URL might change
 
   |      | Modifiable | Referenceable | Unique | Purpose                       |
   | --   | --         | --            | --     | --                            |
diff --git a/webapp/mixins/persistentLinks.js b/webapp/mixins/persistentLinks.js
index e902f2fbe..5cecbbdbd 100644
--- a/webapp/mixins/persistentLinks.js
+++ b/webapp/mixins/persistentLinks.js
@@ -14,17 +14,17 @@ export default function(options = {}) {
       const client = apolloProvider.defaultClient
 
       let response
-      let thing
+      let resource
       response = await client.query({ query: queryId, variables })
-      thing = response.data[Object.keys(response.data)[0]][0]
-      if (thing && thing.slug === slug) return // all good
-      if (thing && thing.slug !== slug) {
-        return redirect(`/${path}/${thing.id}/${thing.slug}`)
+      resource = response.data[Object.keys(response.data)[0]][0]
+      if (resource && resource.slug === slug) return // all good
+      if (resource && resource.slug !== slug) {
+        return redirect(`/${path}/${resource.id}/${resource.slug}`)
       }
 
       response = await client.query({ query: querySlug, variables })
-      thing = response.data[Object.keys(response.data)[0]][0]
-      if (thing) return redirect(`/${path}/${thing.id}/${thing.slug}`)
+      resource = response.data[Object.keys(response.data)[0]][0]
+      if (resource) return redirect(`/${path}/${resource.id}/${resource.slug}`)
 
       return error({ statusCode: 404, message })
     }