Merge pull request #2826 from Human-Connection/error-pages

fix: Error pages can be translated

cypress/integration/common/steps.js

@@ -311,7 +311,7 @@ Then(
     cy.visit(route, {
       failOnStatusCode: false
     });
-    cy.get(".error").should("contain", message);
+    cy.get(".error-message").should("contain", message);
   }
 );
 

webapp/layouts/error.spec.js

@@ -0,0 +1,47 @@
+import { config, shallowMount } from '@vue/test-utils'
+import Error from './error.vue'
+
+const localVue = global.localVue
+
+config.stubs['nuxt-link'] = '<span><slot /></span>'
+
+describe('error.vue', () => {
+  let mocks, wrapper
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(key => key),
+    }
+  })
+
+  const Wrapper = (propsData = {}) => {
+    return shallowMount(Error, { mocks, propsData, localVue })
+  }
+
+  describe('shallowMount', () => {
+    it('renders default error message', () => {
+      wrapper = Wrapper({ error: {} })
+      expect(wrapper.find('.error-message').text()).toBe('error-pages.default')
+    })
+
+    it('renders error message to given statusCode', () => {
+      wrapper = Wrapper({ error: { statusCode: 404 } })
+      expect(wrapper.find('.error-message').text()).toBe('error-pages.404-default')
+    })
+
+    it('renders error message to given custom key', () => {
+      wrapper = Wrapper({ error: { statusCode: 404, key: 'my-custom-key' } })
+      expect(wrapper.find('.error-message').text()).toBe('my-custom-key')
+    })
+
+    it('has a link to index page', () => {
+      wrapper = Wrapper({ error: {} })
+      expect(wrapper.find('span[to="/"]').text()).toBe('error-pages.back-to-index')
+    })
+
+    it('has an image related to the status code', () => {
+      wrapper = Wrapper({ error: { statusCode: 404 } })
+      expect(wrapper.find('.error-image').attributes('src')).toBe('/img/svg/errors/error404.svg')
+    })
+  })
+})

webapp/layouts/error.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="error-container">
+    <img class="error-image" :src="image" />
+    <br />
+    <span class="error-message">{{ $t(message) }}</span>
+    <br />
+    <nuxt-link to="/">{{ $t('error-pages.back-to-index') }}</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['error'],
+  computed: {
+    message() {
+      const mapping = {
+        403: 'error-pages.403-default',
+        404: 'error-pages.404-default',
+        500: 'error-pages.500-default',
+        503: 'error-pages.503-default',
+      }
+      return this.error.key || mapping[this.error.statusCode] || 'error-pages.default'
+    },
+    image() {
+      return `/img/svg/errors/error${this.error.statusCode || '500'}.svg`
+    },
+  },
+}
+</script>
+<style lang="scss">
+.error-container {
+  text-align: center;
+  padding: $space-small;
+}
+.error-message {
+  font-size: $font-size-x-large;
+  font-weight: $font-weight-bold;
+  color: $text-color-softer;
+  margin: $space-base;
+}
+.error-image {
+  width: 30%;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+</style>

webapp/locales/de.json

@@ -821,5 +821,16 @@
         "donations-for": "Spenden für",
         "donate-now": "Jetzt spenden",
         "amount-of-total": "{amount} von {total} € erreicht"
+    },
+    "error-pages" : {
+	"profile-not-found": "Dieses Profil konnte nicht gefunden werden",
+	"back-to-index": "Zurück zur Startseite",
+	"post-not-found": "Dieser Beitrag konnte nicht gefunden werden",
+	"cannot-edit-post": "Dieser Beitrag kann nicht editiert werden",
+	"403-default": "Kein Zugang zu dieser Seite",
+	"404-default": "Diese Seite konnte nicht gefunden werden",
+	"500-default": "Internal Server Error",
+	"503-default": "Dienst steht nicht zur Verfügung",
+	"default": "Ein Fehler ist aufgetreten"
     }
 }

webapp/locales/en.json

@@ -821,6 +821,17 @@
       "title": "In addition, we regularly hold events where you can also share your impressions and ask questions. You can find a current overview here:",
       "description": "<a href=\"https://human-connection.org/events/\" target=\"_blank\" > https://human-connection.org/events/ </a>"
     }
+  },
+  "error-pages" : {
+    "profile-not-found": "This profile could not be found",
+    "back-to-index": "Back to index page",
+    "post-not-found": "This post could not be found",
+    "cannot-edit-post": "This post cannot be edited",
+    "404-default": "This page could not be found",
+    "403-default": "Not authorized to this page",
+    "500-default": "Internal Server Error",
+    "503-default": "Service Unavailable",
+    "default": "An error occurred"
   }
 }
 

webapp/middleware/isAdmin.js

@@ -1,5 +1,5 @@
 export default ({ store, error }) => {
   if (!store.getters['auth/isAdmin']) {
-    return error({ statusCode: 403 })
+    return error({ statusCode: 403, message: 'error-pages.not-authorized' })
   }
 }

webapp/middleware/isModerator.js

@@ -1,5 +1,5 @@
 export default ({ store, error }) => {
   if (!store.getters['auth/isModerator']) {
-    return error({ statusCode: 403 })
+    return error({ statusCode: 403, message: 'error-pages.not-authorized' })
   }
 }

webapp/mixins/persistentLinks.js

@@ -26,7 +26,7 @@ export default function(options = {}) {
       resource = response.data[Object.keys(response.data)[0]][0]
       if (resource) return redirect(`/${path}/${resource.id}/${resource.slug}`)
 
-      return error({ statusCode: 404, message })
+      return error({ statusCode: 404, key: message })
     },
   }
 }

webapp/pages/post/_id.vue

@@ -35,7 +35,7 @@ const options = {
     }
   `,
   path: 'post',
-  message: 'This post could not be found',
+  message: 'error-pages.post-not-found',
 }
 const persistentLinks = PersistentLinks(options)
 
@@ -55,14 +55,14 @@ export default {
             },
             // TODO implement
             /* {
-              name: this.$t('common.letsTalk'),
-              path: `/post/${id}/${slug}#lets-talk`
-            }, */
+			    name: this.$t('common.letsTalk'),
+			    path: `/post/${id}/${slug}#lets-talk`
+			    }, */
             // TODO implement
             /* {
-              name: this.$t('common.versus'),
-              path: `/post/${id}/${slug}#versus`
-            } */
+			    name: this.$t('common.versus'),
+			    path: `/post/${id}/${slug}#versus`
+			    } */
           ],
         },
         {
@@ -71,9 +71,9 @@ export default {
         },
         // TODO implement
         /* {
-          name: this.$t('common.takeAction'),
-          path: `/post/${id}/${slug}/take-action`
-        } */
+		    name: this.$t('common.takeAction'),
+		    path: `/post/${id}/${slug}/take-action`
+		    } */
       ]
     },
   },

webapp/pages/post/edit/_id.vue

@@ -38,7 +38,7 @@ export default {
       variables: { id },
     })
     if (contribution.author.id !== store.getters['auth/user'].id) {
-      error({ statusCode: 403, message: "You can't edit that!" })
+      error({ statusCode: 403, message: 'error-pages.cannot-edit-post' })
     }
     return { contribution }
   },

webapp/pages/profile/_id.vue

@@ -23,7 +23,7 @@ const options = {
       }
     }
   `,
-  message: 'This user could not be found',
+  message: 'error-pages.profile-not-found',
   path: 'profile',
 }
 const persistentLinks = PersistentLinks(options)

webapp/static/img/svg/errors/error403.svg

@@ -0,0 +1 @@
+<svg width="784" height="355" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M254.932 354.445V0H0v354.445h254.932z"/></defs><g fill="none" fill-rule="evenodd"><g fill="#15A338"><path d="M74.4 217.4h59.2v-60h66v60h38v54h-38V333h-66v-61.6H.8v-47.6L89.2 53h68.4zM701 166.6l13.2 2c40.8 6.4 69.6 33.2 69.6 76.4 0 53.6-42 91.2-107.2 91.2-38.4 0-78.8-13.6-104.4-34l28.8-54c20.8 22.4 44.8 34 70 34 28 0 43.2-13.6 43.2-36.4 0-23.6-15.6-35.2-43.6-35.2h-44.8v-38l62.4-64.8h-102V53.4H771v40.4l-70 72.8z"/></g><g transform="translate(269 .1)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M183.356 112.487c-16.899-8.258-35.81-13.04-55.896-13.04-20.07 0-38.99 4.782-55.88 13.04v-10.123c.09-29.468 25.064-53.389 55.88-53.389 30.823 0 55.806 23.921 55.896 53.389v10.123zM127.46 286.506c-32.87 0-59.52-26.657-59.52-59.543 0-32.894 26.65-59.543 59.52-59.543 32.885 0 59.535 26.65 59.535 59.543 0 32.886-26.65 59.543-59.535 59.543zm102.353-135.331v-53.01h-.205C227.365 43.56 182.568 0 127.46 0 71.736 0 26.494 44.587 25.229 100.054h-.115v51.12C9.406 172.393 0 198.524 0 226.965c0 70.414 57.063 127.483 127.46 127.483 70.404 0 127.476-57.07 127.476-127.484 0-28.44-9.415-54.571-25.123-75.788z" fill="#15A338" mask="url(#b)"/></g><path d="M396.708 198C381.96 198 370 209.973 370 224.723c0 14.766 11.961 26.723 26.708 26.723 14.754 0 26.716-11.957 26.716-26.723 0-14.75-11.962-26.723-26.716-26.723" fill="#15A338"/></g></svg>

webapp/static/img/svg/errors/error404.svg

@@ -0,0 +1 @@
+<svg width="798" height="299" xmlns="http://www.w3.org/2000/svg"><g fill="#15A338" fill-rule="evenodd"><path d="M74.4 178.4h59.2v-60h66v60h38v54h-38V294h-66v-61.6H.8v-47.6L89.2 14h68.4zM634.4 178.4h59.2v-60h66v60h38v54h-38V294h-66v-61.6H560.8v-47.6L649.2 14h68.4zM459.291 137.33c-14.026 0-25.407-11.337-25.407-25.346 0-13.993 11.38-25.347 25.407-25.347 14.028 0 25.407 11.354 25.407 25.347 0 14.01-11.38 25.346-25.407 25.346m-143.974-25.346c0-13.993 11.38-25.347 25.407-25.347 14.028 0 25.407 11.354 25.407 25.347 0 14.01-11.38 25.346-25.407 25.346-14.026 0-25.407-11.337-25.407-25.346M400 0C272.963 0 273 118.282 273 118.282v180.455l31.773-42.199 31.718 42.2 31.722-42.2 31.724 42.2 31.723-42.2 31.725 42.2 31.75-42.2 31.864 42.2V118.281S527.036 0 400 0"/></g></svg>

webapp/static/img/svg/errors/error500.svg

@@ -0,0 +1 @@
+<svg width="862" height="295" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 291.938h320.326V0H0z"/></defs><g fill="none" fill-rule="evenodd"><path d="M207.8 61.4H89v45.2h25.2c64 0 106 34.4 106 84.4 0 58.8-44 96.8-111.6 96.8-36.8 0-78.8-14-108-34.8L29 199c20.8 22.4 46 34.4 71.2 34.4 27.6 0 43.6-13.6 43.6-37.6 0-22-16-34.8-43.6-34.8-14.4 0-58.8.8-76 2V5h183.6v56.4zM737.8.6c79.2 0 123.6 50.8 123.6 142 0 91.6-44.4 142.4-123.6 142.4-80 0-124.4-50.8-124.4-142.4 0-91.2 44.4-142 124.4-142zm0 52c-36 0-51.2 26-51.2 90s15.2 90.4 51.2 90.4c35.2 0 50.8-26.4 50.8-90.4s-15.6-90-50.8-90z" fill="#15A338"/><g transform="translate(259 3)"><path d="M201.573 225.61c2.054-2.432 3.08-5.84 3.08-10.222v-17.307h-27.28v17.307c0 4.382 1.11 7.79 3.331 10.222 2.222 2.432 5.742 3.648 10.56 3.648 4.82 0 8.256-1.216 10.31-3.648zm-33.377 14.657c-4.526-5.38-6.789-13.063-6.789-23.05v-19.136H100V179h120.745v39.465c0 9.097-2.389 16.351-7.166 21.76-4.777 5.41-12.173 8.113-22.189 8.113-10.937 0-18.669-2.691-23.194-8.07z" fill="#2B3E51"/><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M89.126 43.769h201.197V29.325H89.126V43.77zM29.562 262.612h260.76V73.094H29.563v189.518zm7.264-233.63c4.037 0 7.309 3.245 7.309 7.25 0 4.003-3.272 7.25-7.309 7.25-4.036 0-7.308-3.247-7.308-7.25 0-4.005 3.272-7.25 7.308-7.25zm30.003 0c4.037 0 7.309 3.245 7.309 7.25 0 4.003-3.272 7.25-7.309 7.25-4.036 0-7.308-3.247-7.308-7.25 0-4.005 3.272-7.25 7.308-7.25zM14.896 0C6.718 0 0 6.358 0 14.473v262.912c0 8.112 6.718 14.553 14.896 14.553h290.437c8.184 0 14.993-6.44 14.993-14.553V14.473c0-8.115-6.81-14.473-14.993-14.473H14.896z" fill="#15A338" mask="url(#b)"/><path fill="#2B3E51" mask="url(#b)" d="M125.223 139.58l-18.367-18.226 18.364-18.22L112.97 91l-18.365 18.217L76.244 91 64 103.135l18.366 18.227L64 139.58l12.244 12.145 18.362-18.217 18.372 18.217zM257.223 139.58l-18.367-18.226 18.364-18.22L244.97 91l-18.365 18.217L208.244 91 196 103.135l18.366 18.227L196 139.58l12.244 12.145 18.362-18.217 18.372 18.217z"/></g></g></svg>

webapp/static/img/svg/errors/error503.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="337px" height="321px" viewBox="0 0 337 321" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>error503</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="503" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-640.000000, -436.000000)">
+        <g id="error503" transform="translate(677.000000, 448.000000)" stroke="#15A338">
+            <path d="M23,78 C23,78 0.472708484,58.7674286 12.569864,33.4285714 C22.3467086,12.9257143 12.5698641,0 12.5698641,0" id="Shape" stroke-width="24" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M105,78 C105,78 82.515107,58.7674286 94.5894946,33.4285714 C104.347938,12.9257143 91,0 91,0" id="Shape" stroke-width="24" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M184,78 C184,78 162.117131,58.7674286 173.868231,33.4285714 C183.365397,12.9257143 170,0 170,0" id="Shape" stroke-width="24" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M216.747698,117.502501 C216.816054,117.501636 216.816054,117.501636 216.914009,117.500836 C217.752363,117.495016 218.875668,117.515107 220.247365,117.57846 C222.273569,117.672042 224.466592,117.844732 226.791846,118.115862 C233.348315,118.880359 239.918816,120.288968 246.256007,122.56612 C255.378326,125.844057 263.323498,130.674554 269.530968,137.535503 C277.281082,146.101495 281.5,157.058686 281.5,169.686689 C281.5,181.130077 276.974862,191.199601 269.158994,199.342184 C263.362264,205.381227 256.05231,210.113117 247.592891,213.920546 C241.478569,216.67249 235.09011,218.791782 228.722361,220.401814 C226.502828,220.963004 224.429572,221.424297 222.543378,221.79491 C221.343629,222.030646 220.421671,222.191016 219.819764,222.283843 L198.5,225.571812 L198.5,117.751385 L216.747698,117.502501 Z M198.022116,134.417042 C198.044416,134.676705 198.075444,135.079942 198.111936,135.619961 C198.168252,136.453331 198.223453,137.409499 198.274253,138.48171 C199.28809,159.880271 197.508718,184.815295 190.549878,209.096749 C184.243903,231.100167 174.218648,249.842298 159.580557,264.032921 C141.845328,281.226006 118.461725,290.5 89.9575722,290.5 C61.5953781,290.5 38.299342,281.214477 20.6050574,264.016028 C6.01737351,249.837125 -4.00776548,231.115642 -10.356649,209.133315 C-17.4115137,184.706603 -19.2561999,159.6517 -18.3028627,138.280133 C-18.2255633,136.547261 -18.1442647,135.272186 -18.0818103,134.502935 L-16.7013644,117.5 L196.569277,117.5 L198.022116,134.417042 Z" id="Combined-Shape" stroke-width="37"></path>
+        </g>
+    </g>
+</svg>