mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Merge pull request #2691 from overleaf/ta-4xx-error-page
Enhance 4xx HTML Response Page GitOrigin-RevId: 620f84cd6cdc0571bd68bbd2c3164b08f7fe5598
This commit is contained in:
Timothée Alby
Copybot
parent
fb2e182d2e
commit
1d7b454c96
7 changed files with 41 additions and 67 deletions
|
|
@ -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' })
|
||||
}
|
||||
|
|
|
|||
28
services/web/app/views/general/400.pug
Normal file
28
services/web/app/views/general/400.pug
Normal file
|
|
@ -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
|
||||
|
|
@ -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
|
||||
a.error-btn(href="/") Home
|
||||
|
|
|
|||
|
|
@ -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
|
||||
a.error-btn(href="/") Home
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue