From 1672db0dfbafe732a1f60e9bbce0a18aa4124379 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Thu, 28 Feb 2019 18:31:23 +0100
Subject: [PATCH] Implement custom error page

We need styling and additional translation for other
HTTP error codes.

CC @appinteractive
---
 .../integration/moderation/HidePosts.feature  |  2 +-
 layouts/error.vue                             | 57 +++++++++++++++++++
 locales/de.json                               | 11 ++++
 locales/en.json                               | 11 ++++
 pages/post/_slug/index.vue                    |  2 +-
 5 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 layouts/error.vue

diff --git a/cypress/integration/moderation/HidePosts.feature b/cypress/integration/moderation/HidePosts.feature
index 4006f4068..f42f3c790 100644
--- a/cypress/integration/moderation/HidePosts.feature
+++ b/cypress/integration/moderation/HidePosts.feature
@@ -22,5 +22,5 @@ Feature: Hide Posts
     Given I am logged in with a "user" role
     Then the page "/post/this-post-is-disabled" returns a 404 error with a message:
     """
-    We cannot find that post :(
+    Sorry, the page you're looking for cannot be found.
     """
diff --git a/layouts/error.vue b/layouts/error.vue
new file mode 100644
index 000000000..f78ed7ade
--- /dev/null
+++ b/layouts/error.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="layout-blank">
+    <ds-container>
+      <div class="error">
+        <h1>
+          {{ header }}
+        </h1>
+        <h3>
+          {{ subHeader }}
+        </h3>
+        <p>
+          {{ message }}
+        </p>
+      </div>
+    </ds-container>
+    <div id="overlay" />
+  </div>
+</template>
+
+<script>
+import seo from '~/components/mixins/seo'
+
+export default {
+  mixins: [seo],
+  props: {
+    error: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  computed: {
+    statusCode() {
+      const mapping = {
+        '500': '500',
+        '404': '404'
+      }
+      return mapping[this.error.statusCode] || '500'
+    },
+    header() {
+      return this.$t(`error.header.${this.statusCode}`)
+    },
+    subHeader() {
+      return this.$t(`error.subHeader.${this.statusCode}`)
+    },
+    message() {
+      return this.$t(`error.message.${this.statusCode}`)
+    },
+    suggestion() {
+      console.log(this.$t(`error.suggestion.${this.statusCode}`))
+      return this.$t(`error.suggestion.${this.statusCode}`)
+    }
+  },
+  mounted() {
+    console.log(this.error)
+  }
+}
+</script>
diff --git a/locales/de.json b/locales/de.json
index b3e6289ac..c0275a928 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -1,4 +1,15 @@
 {
+  "error": {
+    "header": {
+      "404": "Seite nicht gefunden"
+    },
+    "subHeader": {
+      "404": "Ups, ich wars nicht"
+    },
+    "message": {
+      "404": "Tut uns leid, wir haben diese Seite nicht gefunden."
+    }
+  },
   "actions": {
     "loading": "lade",
     "loadMore": "mehr laden",
diff --git a/locales/en.json b/locales/en.json
index cfe634675..cfe889d1e 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1,4 +1,15 @@
 {
+  "error": {
+    "header": {
+      "404": "Page not found"
+    },
+    "subHeader": {
+      "404": "Ups, not my fault"
+    },
+    "message": {
+      "404": "Sorry, the page you're looking for cannot be found."
+    }
+  },
   "actions": {
     "loading": "loading",
     "loadMore": "load more",
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 9f8cb0dca..5422bb562 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -236,7 +236,7 @@ export default {
       data: { Post }
     } = await client.query({ query, variables })
     if (Post.length <= 0) {
-      return error({ statusCode: 404, message: 'We cannot find that post :(' })
+      return error({ statusCode: 404 })
     }
     const [post] = Post
     return {