[NEW] Error page when browser is not supported (#17372)
Co-authored-by: Rodrigo Nascimento <rodrigoknascimento@gmail.com>pull/17333/head
Guilherme Gazzo
5 years ago
committed by
GitHub
parent
65638b53d5
commit
80f596922c
@ -0,0 +1,129 @@ |
|||||||
|
import { WebApp } from 'meteor/webapp'; |
||||||
|
import parser from 'ua-parser-js'; |
||||||
|
|
||||||
|
import { getURL } from '../../../../app/utils/lib/getURL'; |
||||||
|
|
||||||
|
return WebApp.connectHandlers.use(function(req, res, next) { |
||||||
|
if (req.cookies.browser_version_check === 'bypass') { |
||||||
|
return next(); |
||||||
|
} |
||||||
|
|
||||||
|
const result = parser(req.headers['user-agent']); |
||||||
|
if (req.cookies.browser_version_check !== 'force' && (!result || result.browser.name !== 'IE' || parseInt(result.browser.version) >= 11)) { |
||||||
|
return next(); |
||||||
|
} |
||||||
|
|
||||||
|
res.setHeader('content-type', 'text/html; charset=utf-8'); |
||||||
|
|
||||||
|
res.write(` |
||||||
|
<style> |
||||||
|
body { |
||||||
|
margin: 0; |
||||||
|
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Helvetica Neue','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Meiryo UI',Arial,sans-serif; |
||||||
|
} |
||||||
|
|
||||||
|
.rcx-box--text-style-headline { |
||||||
|
letter-spacing: 0rem; |
||||||
|
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Helvetica Neue, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Meiryo UI, Arial, sans-serif; |
||||||
|
font-size: 1.375rem; |
||||||
|
font-weight: 400; |
||||||
|
line-height: 2rem; |
||||||
|
} |
||||||
|
|
||||||
|
.not-supported-browser { |
||||||
|
width: 100%; |
||||||
|
min-height: 100vh; |
||||||
|
|
||||||
|
text-align: center; |
||||||
|
|
||||||
|
background-image: url(${ getURL('/images/404.svg') }); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center; |
||||||
|
background-size: cover; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
&__404 { |
||||||
|
font-size: 4em; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.not-supported-browser__text { |
||||||
|
font-size: 4em; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.rcx-box--text-color-alternative { |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
.rcx-box, .rcx-box::before, .rcx-box::after { |
||||||
|
box-sizing: border-box; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
transition: all 230ms; |
||||||
|
border-width: 0; |
||||||
|
border-style: solid; |
||||||
|
border-color: currentColor; |
||||||
|
outline: none; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
font-variant-numeric: tabular-nums; |
||||||
|
} |
||||||
|
|
||||||
|
.rcx-button { |
||||||
|
display: inline-block; |
||||||
|
text-align: center; |
||||||
|
vertical-align: middle; |
||||||
|
white-space: nowrap; |
||||||
|
text-decoration: none; |
||||||
|
cursor: pointer; |
||||||
|
outline: 0; |
||||||
|
letter-spacing: 0rem; |
||||||
|
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Helvetica Neue, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Meiryo UI, Arial, sans-serif; |
||||||
|
font-size: 0.875rem; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 1.25rem; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
padding: 7px 15px; |
||||||
|
padding-top: 7px; |
||||||
|
padding-bottom: 7px; |
||||||
|
padding-block: 7px; |
||||||
|
padding-left: 15px; |
||||||
|
padding-right: 15px; |
||||||
|
padding-inline: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.rcx-button--primary { |
||||||
|
color: #ffffff; |
||||||
|
border-width: 0.125rem; |
||||||
|
border-style: solid; |
||||||
|
border-color: #1d74f5; |
||||||
|
border-radius: 0.125rem; |
||||||
|
background-color: #1d74f5; |
||||||
|
-webkit-appearance: none; |
||||||
|
-moz-appearance: none; |
||||||
|
appearance: none; |
||||||
|
} |
||||||
|
|
||||||
|
.rcx-box--text-color-primary { |
||||||
|
color: #1d74f5; |
||||||
|
} |
||||||
|
.rcx-box.rcx-\@s6mi60{margin:0.75rem !important;}.rcx-box.rcx-\@19aubzx{margin:2rem !important;}.rcx-box.rcx-\@1kgm1vs{-webkit-align-items:center !important;-webkit-box-align:center !important;-ms-flex-align:center !important;align-items:center !important;-webkit-box-pack:center !important;-webkit-justify-content:center !important;-ms-flex-pack:center !important;justify-content:center !important;-webkit-flex-direction:column !important;-ms-flex-direction:column !important;flex-direction:column !important;}.rcx-box.rcx-\@1qvl0ud{display:-webkit-box !important;display:-webkit-flex !important;display:-ms-flexbox !important;display:flex !important;} |
||||||
|
</style> |
||||||
|
|
||||||
|
<section class="rcx-box not-supported-browser rcx-@1kgm1vs rcx-@1qvl0ud"> |
||||||
|
<div class="rcx-box"> |
||||||
|
<div class="rcx-box rcx-box--text-color-alternative not-supported-browser__text rcx-@s6mi60">Browser not supported</div> |
||||||
|
<a class="rcx-box rcx-button rcx-button--primary" href="https://rocket.chat/docs/getting-support/#supported-browser-versions" target="_blank">Check the documentation</a> |
||||||
|
<a class="rcx-box rcx-button rcx-button--primary" href="#" onclick="document.cookie = 'browser_version_check=bypass; path=/'; location.reload(true);">Proceed anyway</a> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
`);
|
||||||
|
|
||||||
|
return res.end(); |
||||||
|
}); |
||||||
Loading…
Reference in new issue