From 7cfd61ecf2321d96f91d973cda022c17c635a21b Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Fri, 17 Jan 2020 18:28:44 +0100 Subject: [PATCH 01/55] Error page added --- webapp/layouts/error.vue | 12 ++++++++++++ webapp/locales/de.json | 4 ++++ webapp/locales/en.json | 4 ++++ webapp/pages/profile/_id.vue | 2 +- 4 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 webapp/layouts/error.vue diff --git a/webapp/layouts/error.vue b/webapp/layouts/error.vue new file mode 100644 index 000000000..d11755ad4 --- /dev/null +++ b/webapp/layouts/error.vue @@ -0,0 +1,12 @@ + + + diff --git a/webapp/locales/de.json b/webapp/locales/de.json index d52a9817c..a3135c011 100644 --- a/webapp/locales/de.json +++ b/webapp/locales/de.json @@ -798,5 +798,9 @@ "donations-for": "Spenden für", "donate-now": "Jetzt spenden", "amount-of-total": "{amount} von {total} € erreicht" + }, + "error-pages" : { + "user-not-found": "Dieser Benutzer konnte nicht gefunden werden", + "back-to-index": "Zurück zur Startseite" } } diff --git a/webapp/locales/en.json b/webapp/locales/en.json index 1906a5f6f..f8dea3914 100644 --- a/webapp/locales/en.json +++ b/webapp/locales/en.json @@ -798,6 +798,10 @@ "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": " https://human-connection.org/events/ " } + }, + "error-pages" : { + "user-not-found": "This user could not be found", + "back-to-index": "Back to index page" } } diff --git a/webapp/pages/profile/_id.vue b/webapp/pages/profile/_id.vue index 992e5efce..6b57e3b2d 100644 --- a/webapp/pages/profile/_id.vue +++ b/webapp/pages/profile/_id.vue @@ -23,7 +23,7 @@ const options = { } } `, - message: 'This user could not be found', + message: 'error-pages.user-not-found', path: 'profile', } const persistentLinks = PersistentLinks(options) From 9948f4ef201ee66339663442a84ca8ffd48afea5 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Mon, 20 Jan 2020 11:24:18 +0100 Subject: [PATCH 02/55] improved layout, key-name changed --- webapp/layouts/error.vue | 23 +++++++++++++++++++++-- webapp/locales/de.json | 2 +- webapp/locales/en.json | 2 +- webapp/pages/profile/_id.vue | 2 +- 4 files changed, 24 insertions(+), 5 deletions(-) diff --git a/webapp/layouts/error.vue b/webapp/layouts/error.vue index d11755ad4..0b8c37bec 100644 --- a/webapp/layouts/error.vue +++ b/webapp/layouts/error.vue @@ -1,6 +1,9 @@ @@ -10,3 +13,19 @@ export default { props: ['error'], } + diff --git a/webapp/locales/de.json b/webapp/locales/de.json index a3135c011..21a717c6b 100644 --- a/webapp/locales/de.json +++ b/webapp/locales/de.json @@ -800,7 +800,7 @@ "amount-of-total": "{amount} von {total} € erreicht" }, "error-pages" : { - "user-not-found": "Dieser Benutzer konnte nicht gefunden werden", + "profile-not-found": "Dieses Profil konnte nicht gefunden werden", "back-to-index": "Zurück zur Startseite" } } diff --git a/webapp/locales/en.json b/webapp/locales/en.json index f8dea3914..54121af20 100644 --- a/webapp/locales/en.json +++ b/webapp/locales/en.json @@ -800,7 +800,7 @@ } }, "error-pages" : { - "user-not-found": "This user could not be found", + "user-not-found": "This profile could not be found", "back-to-index": "Back to index page" } } diff --git a/webapp/pages/profile/_id.vue b/webapp/pages/profile/_id.vue index 6b57e3b2d..b9bbef83e 100644 --- a/webapp/pages/profile/_id.vue +++ b/webapp/pages/profile/_id.vue @@ -23,7 +23,7 @@ const options = { } } `, - message: 'error-pages.user-not-found', + message: 'error-pages.profile-not-found', path: 'profile', } const persistentLinks = PersistentLinks(options) From 04ff82f880c1efec4f5bc732ff77cda97fa3a18b Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Mon, 20 Jan 2020 11:29:26 +0100 Subject: [PATCH 03/55] Cypress test fixed --- cypress/integration/common/steps.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js index 9a5c02d08..44d2ada64 100644 --- a/cypress/integration/common/steps.js +++ b/cypress/integration/common/steps.js @@ -300,7 +300,7 @@ Then( cy.visit(route, { failOnStatusCode: false }); - cy.get(".error").should("contain", message); + cy.get(".error-message").should("contain", message); } ); From a4907f2bcb4cea68a0bc6bf5828d15c7487d1fc9 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Mon, 20 Jan 2020 12:57:14 +0100 Subject: [PATCH 04/55] localised error message for cannot edit post --- webapp/locales/de.json | 4 +++- webapp/locales/en.json | 6 ++++-- webapp/pages/post/_id.vue | 20 ++++++++++---------- webapp/pages/post/edit/_id.vue | 2 +- 4 files changed, 18 insertions(+), 14 deletions(-) diff --git a/webapp/locales/de.json b/webapp/locales/de.json index 21a717c6b..1a396fa01 100644 --- a/webapp/locales/de.json +++ b/webapp/locales/de.json @@ -801,6 +801,8 @@ }, "error-pages" : { "profile-not-found": "Dieses Profil konnte nicht gefunden werden", - "back-to-index": "Zurück zur Startseite" + "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" } } diff --git a/webapp/locales/en.json b/webapp/locales/en.json index 54121af20..3138af41f 100644 --- a/webapp/locales/en.json +++ b/webapp/locales/en.json @@ -800,8 +800,10 @@ } }, "error-pages" : { - "user-not-found": "This profile could not be found", - "back-to-index": "Back to index page" + "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" } } diff --git a/webapp/pages/post/_id.vue b/webapp/pages/post/_id.vue index a02afd3b9..92795606f 100644 --- a/webapp/pages/post/_id.vue +++ b/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` + } */ ] }, }, diff --git a/webapp/pages/post/edit/_id.vue b/webapp/pages/post/edit/_id.vue index c79d2b70e..d269a04d8 100644 --- a/webapp/pages/post/edit/_id.vue +++ b/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 } }, From 7315cacb5a6057b17e6552f3358713266d6c85aa Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Mon, 20 Jan 2020 22:55:22 +0100 Subject: [PATCH 05/55] Text for 403 error is localized I hacked the error.vue to catch the default 404 error message and to display a localized message instead. I found no better way to do it. Any ideas? --- webapp/layouts/error.vue | 5 ++++- webapp/locales/de.json | 4 +++- webapp/locales/en.json | 4 +++- webapp/middleware/isAdmin.js | 2 +- webapp/middleware/isModerator.js | 2 +- 5 files changed, 12 insertions(+), 5 deletions(-) diff --git a/webapp/layouts/error.vue b/webapp/layouts/error.vue index 0b8c37bec..ab4f5e5bb 100644 --- a/webapp/layouts/error.vue +++ b/webapp/layouts/error.vue @@ -2,7 +2,10 @@

- {{ $t(error.message) }} + + {{ $t('error-pages.default') }} + + {{ $t(error.message) }}
{{ $t('error-pages.back-to-index') }}
diff --git a/webapp/locales/de.json b/webapp/locales/de.json index 1a396fa01..ae4b5bfc1 100644 --- a/webapp/locales/de.json +++ b/webapp/locales/de.json @@ -803,6 +803,8 @@ "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" + "cannot-edit-post": "Dieser Beitrag kann nicht editiert werden", + "default": "Diese Seite konnte nicht gefunden werden", + "not-authorized": "Kein Zugang zu dieser Seite" } } diff --git a/webapp/locales/en.json b/webapp/locales/en.json index 3138af41f..cb0d3ca07 100644 --- a/webapp/locales/en.json +++ b/webapp/locales/en.json @@ -803,7 +803,9 @@ "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" + "cannot-edit-post": "This post cannot be edited", + "default": "This page could not be found", + "not-authorized": "Not authorized to this page" } } diff --git a/webapp/middleware/isAdmin.js b/webapp/middleware/isAdmin.js index 4db10bbb6..12b6c5bac 100644 --- a/webapp/middleware/isAdmin.js +++ b/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' }) } } diff --git a/webapp/middleware/isModerator.js b/webapp/middleware/isModerator.js index e99793a3e..9b17badea 100644 --- a/webapp/middleware/isModerator.js +++ b/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' }) } } From 31790a9ebc17cedcf6698ddd0f53b271c3129f8f Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Tue, 28 Jan 2020 16:23:56 +0100 Subject: [PATCH 06/55] Imported images from https://github.com/Human-Connection/WebApp/blob/develop/static/assets/svg/errors/ --- webapp/static/img/svg/errors/error403.svg | 1 + webapp/static/img/svg/errors/error404.svg | 1 + webapp/static/img/svg/errors/error500.svg | 1 + webapp/static/img/svg/errors/error503.svg | 15 +++++++++++++++ 4 files changed, 18 insertions(+) create mode 100644 webapp/static/img/svg/errors/error403.svg create mode 100644 webapp/static/img/svg/errors/error404.svg create mode 100644 webapp/static/img/svg/errors/error500.svg create mode 100644 webapp/static/img/svg/errors/error503.svg diff --git a/webapp/static/img/svg/errors/error403.svg b/webapp/static/img/svg/errors/error403.svg new file mode 100644 index 000000000..e52d00a7a --- /dev/null +++ b/webapp/static/img/svg/errors/error403.svg @@ -0,0 +1 @@ + diff --git a/webapp/static/img/svg/errors/error404.svg b/webapp/static/img/svg/errors/error404.svg new file mode 100644 index 000000000..78f019410 --- /dev/null +++ b/webapp/static/img/svg/errors/error404.svg @@ -0,0 +1 @@ + diff --git a/webapp/static/img/svg/errors/error500.svg b/webapp/static/img/svg/errors/error500.svg new file mode 100644 index 000000000..5a95d7bf6 --- /dev/null +++ b/webapp/static/img/svg/errors/error500.svg @@ -0,0 +1 @@ + diff --git a/webapp/static/img/svg/errors/error503.svg b/webapp/static/img/svg/errors/error503.svg new file mode 100644 index 000000000..45b7b0cf7 --- /dev/null +++ b/webapp/static/img/svg/errors/error503.svg @@ -0,0 +1,15 @@ + + + + error503 + Created with Sketch. + + + + + + + + + + From d4e496b9e646079d19b5270135ca6878b08f8b10 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Tue, 28 Jan 2020 16:46:55 +0100 Subject: [PATCH 07/55] error image rendered --- webapp/layouts/error.spec.js | 47 ++++++++++++++++++++++++++++++++++++ webapp/layouts/error.vue | 24 +++++++++++++++--- webapp/locales/de.json | 7 ++++-- webapp/locales/en.json | 7 ++++-- 4 files changed, 77 insertions(+), 8 deletions(-) create mode 100644 webapp/layouts/error.spec.js diff --git a/webapp/layouts/error.spec.js b/webapp/layouts/error.spec.js new file mode 100644 index 000000000..95234ec5f --- /dev/null +++ b/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'] = '' + +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') + }) + }) +}) diff --git a/webapp/layouts/error.vue b/webapp/layouts/error.vue index ab4f5e5bb..4394a5cdb 100644 --- a/webapp/layouts/error.vue +++ b/webapp/layouts/error.vue @@ -1,6 +1,6 @@