From 1d7b454c96255f0797ee4202c84bbbedd163679a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Timoth=C3=A9e=20Alby?= Date: Wed, 1 Apr 2020 10:07:59 -0500 Subject: [PATCH] Merge pull request #2691 from overleaf/ta-4xx-error-page Enhance 4xx HTML Response Page GitOrigin-RevId: 620f84cd6cdc0571bd68bbd2c3164b08f7fe5598 --- .../Features/Errors/HttpErrorController.js | 5 +- services/web/app/views/general/400.pug | 28 +++++++++++ services/web/app/views/general/404.pug | 7 +-- services/web/app/views/general/500.pug | 7 +-- .../frontend/stylesheets/app/error-pages.less | 50 ------------------- .../acceptance/src/BodyParserErrorsTest.js | 2 +- .../src/Errors/HttpErrorControllerTests.js | 9 ++-- 7 files changed, 41 insertions(+), 67 deletions(-) create mode 100644 services/web/app/views/general/400.pug diff --git a/services/web/app/src/Features/Errors/HttpErrorController.js b/services/web/app/src/Features/Errors/HttpErrorController.js index f4e05b3063..6cfb4a7bdb 100644 --- a/services/web/app/src/Features/Errors/HttpErrorController.js +++ b/services/web/app/src/Features/Errors/HttpErrorController.js @@ -10,7 +10,10 @@ function renderHTMLError(statusCode, publicInfo, res) { } else if (statusCode === 403) { res.render('user/restricted', { title: 'restricted' }) } else if (statusCode >= 400 && statusCode < 500) { - res.render('general/500', { title: 'Client Error' }) + res.render('general/400', { + title: 'Client Error', + message: publicInfo.message + }) } else { res.render('general/500', { title: 'Server Error' }) } diff --git a/services/web/app/views/general/400.pug b/services/web/app/views/general/400.pug new file mode 100644 index 0000000000..5630818d2c --- /dev/null +++ b/services/web/app/views/general/400.pug @@ -0,0 +1,28 @@ +doctype html +html.full-height(itemscope, itemtype='http://schema.org/Product') + head + title Something went wrong + link(rel="icon", href="/" + settings.brandPrefix + "favicon.ico") + if buildCssPath + link(rel="stylesheet", href=buildCssPath(null, { hashedPath: true })) + + body.full-height + .content.content-alt.full-height + .container.full-height + .error-container.full-height + .error-details + p.error-status I'm sorry, Dave. I'm afraid I can't do that. + p.error-description(ng-non-bindable) There was a problem with your latest request + if(message) + |: #{message} + |. + br + | Please go back and try again. + p.error-description(ng-non-bindable) + | If the problem persists, please contact us at + | + a(href="mailto:" + settings.adminEmail) #{settings.adminEmail} + | . + a.error-btn(href="javascript:history.back()") Back + |   + a.btn.btn-default(href="/") Home diff --git a/services/web/app/views/general/404.pug b/services/web/app/views/general/404.pug index 092b495325..42349650e7 100644 --- a/services/web/app/views/general/404.pug +++ b/services/web/app/views/general/404.pug @@ -4,12 +4,7 @@ block content .content.content-alt .container .error-container - .error-figure - img.error-img( - src="/img/brand/404-visual.svg" - alt="Not found" - ) .error-details p.error-status Not found p.error-description #{translate("cant_find_page")} - a.error-btn(href="/") Home \ No newline at end of file + a.error-btn(href="/") Home diff --git a/services/web/app/views/general/500.pug b/services/web/app/views/general/500.pug index 387c1d6601..a4e79f12bd 100644 --- a/services/web/app/views/general/500.pug +++ b/services/web/app/views/general/500.pug @@ -10,11 +10,6 @@ html.full-height(itemscope, itemtype='http://schema.org/Product') .content.content-alt.full-height .container.full-height .error-container.full-height - .error-figure.error-figure-500 - img.error-img( - src="/img/brand/500-visual-socket.svg" - alt="Error" - ) .error-details p.error-status Something went wrong, sorry. p.error-description(ng-non-bindable) Our staff are probably looking into this, but if it continues, please check our status page at @@ -26,4 +21,4 @@ html.full-height(itemscope, itemtype='http://schema.org/Product') | a(href="mailto:" + settings.adminEmail) #{settings.adminEmail} | . - a.error-btn(href="/") Home \ No newline at end of file + a.error-btn(href="/") Home diff --git a/services/web/frontend/stylesheets/app/error-pages.less b/services/web/frontend/stylesheets/app/error-pages.less index 189a68b1ef..ae9a0303d1 100644 --- a/services/web/frontend/stylesheets/app/error-pages.less +++ b/services/web/frontend/stylesheets/app/error-pages.less @@ -12,56 +12,6 @@ margin-top: -(@header-height + @content-margin-vertical) / 2; } -.error-figure { - display: none; - flex: 0 0 50%; - padding: @line-height-computed * 2; - @media (min-width: @screen-sm-min) { - display: block; - } -} - -.error-figure when (@is-overleaf = true) { - display: none; -} - -.error-figure-500 { - &::before { - content: ''; - display: block; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 80%; - background-image: url(/img/brand/500-visual-plug.svg); - background-size: 400px; - background-repeat: no-repeat; - background-position: right 70%; - pointer-events: none; - } - &::after { - content: ''; - display: block; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 50%; - background-image: url(/img/brand/500-visual-tail.svg); - background-size: 100px; - background-repeat: no-repeat; - background-position: 90% bottom; - pointer-events: none; - } -} -.error-img { - display: block; - max-width: 380px; - height: auto; - margin: 0 auto; -} - .error-details { flex: 0 1 50%; padding: @line-height-computed * 2; diff --git a/services/web/test/acceptance/src/BodyParserErrorsTest.js b/services/web/test/acceptance/src/BodyParserErrorsTest.js index cd14ea8c31..71f915e126 100644 --- a/services/web/test/acceptance/src/BodyParserErrorsTest.js +++ b/services/web/test/acceptance/src/BodyParserErrorsTest.js @@ -38,7 +38,7 @@ describe('BodyParserErrors', function() { return done(error) } response.statusCode.should.equal(413) - body.should.match(/Something went wrong, sorry/) + body.should.match(/I'm afraid I can't do that./) done() } ) diff --git a/services/web/test/unit/src/Errors/HttpErrorControllerTests.js b/services/web/test/unit/src/Errors/HttpErrorControllerTests.js index 442516864b..6ab6ef8c25 100644 --- a/services/web/test/unit/src/Errors/HttpErrorControllerTests.js +++ b/services/web/test/unit/src/Errors/HttpErrorControllerTests.js @@ -94,14 +94,17 @@ describe('HttpErrorController', function() { it('renders HTML with info', function() { let cause = new Errors.SubscriptionAdminDeletionError() - let error = new HttpErrors.UnprocessableEntityError({}).withCause(cause) + let error = new HttpErrors.UnprocessableEntityError({ + info: { public: { message: 'some public message' } } + }).withCause(cause) this.req.accepts = () => 'html' this.ErrorController.handleError(error, this.req, this.res) expect(this.res.statusCode).to.equal(422) - expect(this.res.renderedTemplate).to.equal('general/500') + expect(this.res.renderedTemplate).to.equal('general/400') expect(this.res.renderedVariables).to.deep.equal({ - title: 'Client Error' + title: 'Client Error', + message: 'some public message' }) }) })