No Javascript / Old Browser Blockers (#280)

* Add messages for no js and bad browser. Share styles with alpha agreement.

* Bad browser checks and shower.

* No flash of bad browser

* Typsecriptify

* Use babel minifier instead of uglify

* Move all checks directly to HTML to avoid issues.

* remove duplicate badBrowser declaration
This commit is contained in:
Daniel Ternyak 2017-10-10 15:57:15 -07:00 committed by GitHub
parent baea6aaf5f
commit 2e472e5c5a
11 changed files with 273 additions and 40 deletions

View File

@ -0,0 +1,33 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="15.5 15.5 224.5 224.5">
<defs>
<radialGradient cy="0" cx="0.5" id="r">
<stop stop-color="#f06b59"/>
<stop offset="1" stop-color="#df2227"/>
</radialGradient>
<radialGradient r="0.76" cy="0.3" cx="0.65" id="g">
<stop offset="0.65" stop-color="#4cb749"/>
<stop offset="1" stop-color="#388b41"/>
</radialGradient>
<radialGradient r="0.8" cy="0.25" cx="0.36" id="y">
<stop offset="0.6" stop-color="#FCD209"/>
<stop offset="0.7" stop-color="#f7c616"/>
<stop offset="1" stop-color="#bc821e"/>
</radialGradient>
<radialGradient r="1" cy="0" cx="0.5" spreadMethod="pad" id="cf">
<stop offset="0.1" stop-color="#7FB3DF"/>
<stop offset="0.9" stop-color="#0F5B94"/>
</radialGradient>
<radialGradient id="cb" r="1" cy="0" cx="0.5">
<stop offset="0" stop-color="#F6F0EE"/>
<stop offset="1" stop-color="#ddd"/>
</radialGradient>
</defs>
<path d="m198,148a70,70 0 0 0 -140,0l20,0a50,50 0 0 1 100,0" fill-opacity="0.1"/>
<circle r="45" cx="127.5" cy="127.6" fill="url(#cf)" stroke="url(#cb)" stroke-width="9" />
<path d="m228,78a112,112 0 0 0 -193,-13l45,78a50,50 0 0 1 47,-65" fill="url(#r)"/>
<path d="m35,65a112,112 0 0 0 84,174l47,-80a50,50 0 0 1 -86,-16" fill="url(#g)"/>
<path d="m119,239a112,112 0 0 0 109,-161l-101,0a50,50 0 0 1 39,81" fill="url(#y)"/>
<path d="m35,65l45,78a50,50 0 0 1 2,-34l-45,-47" opacity="0.075"/>
<path d="m119,239l47,-80a50,50 0 0 1 -29,17l-20,63" opacity="0.05"/>
<path d="m228,78l-101,0a50,50 0 0 1 39,19l64,-16" opacity="0.05"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 140 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="9.75 9.75 100.5 100.5"><linearGradient id="a" gradientTransform="matrix(0 97.396584 -97.396584 0 51.620814 11.389501)" gradientUnits="userSpaceOnUse" spreadMethod="pad" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#ff1b2d"/><stop offset=".3" stop-color="#ff1b2d"/><stop offset=".61" stop-color="#ff1b2d"/><stop offset="1" stop-color="#a70014"/></linearGradient><linearGradient id="b" gradientTransform="matrix(0 86.142511 -86.142511 0 76.85435 17.130095)" gradientUnits="userSpaceOnUse" spreadMethod="pad" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#9c0000"/><stop offset=".7" stop-color="#ff4b4b"/><stop offset="1" stop-color="#ff4b4b"/></linearGradient><path d="m60 9.75c-27.75 0-50.25 22.5-50.25 50.25l0 0c0 26.95 21.22 48.94 47.86 50.19l0 0c .8.04 1.59.06 2.39.06l0 0c12.87 0 24.6-4.84 33.49-12.79l0 0c-5.89 3.91-12.78 6.15-20.14 6.15l0 0c-11.97 0-22.68-5.94-29.89-15.3l0 0c-5.56-6.56-9.15-16.25-9.4-27.13l0 0c0-.03 0-2.34 0-2.37l0 0c .25-10.88 3.84-20.58 9.4-27.13l0 0c7.21-9.36 17.93-15.3 29.89-15.3l0 0c7.36 0 14.25 2.25 20.14 6.16l0 0c-8.84-7.91-20.51-12.74-33.3-12.79l0 0c-.06 0-.13 0-.19 0z" fill="url(#a)"/><path d="m43.46 31.68c4.61-5.44 10.57-8.73 17.07-8.73l0 0c14.63 0 26.49 16.59 26.49 37.04l0 0c0 20.46-11.86 37.04-26.49 37.04l0 0c-6.51 0-12.46-3.28-17.07-8.72l0 0c7.21 9.36 17.92 15.3 29.89 15.3l0 0c7.36 0 14.25-2.25 20.14-6.15l0 0c10.29-9.2 16.76-22.57 16.76-37.46l0 0c0-14.88-6.47-28.26-16.76-37.46l0 0c-5.89-3.91-12.78-6.15-20.14-6.15l0 0c-11.97 0-22.68 5.94-29.89 15.3" fill="url(#b)"/></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -1,33 +1,11 @@
@import "common/sass/variables";
@import "common/sass/mixins";
.AlphaAgreement {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
@include cover-message;
background: $brand-warning;
overflow: auto;
z-index: 10000;
&-content {
max-width: 520px;
padding: 20px;
margin: 0 auto;
color: #fff;
text-shadow: 1px 1px 1px rgba(#000, 0.12);
overflow: auto;
h2 {
font-size: 42px;
margin-bottom: 20px;
}
p {
font-size: 20px;
margin-bottom: 15px;
}
&-buttons {
padding-top: 20px;

View File

@ -2,25 +2,129 @@
<html>
<head>
<meta charset="utf-8">
<title>MyEtherWallet</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta charset="utf-8">
<title>MyEtherWallet</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="/dll.vendor.js"></script>
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon/favicon-16x16.png" sizes="16x16">
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#0e97c0">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="theme-color" content="#163151">
<script src="/dll.vendor.js"></script>
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon/favicon-16x16.png" sizes="16x16">
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#0e97c0">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="theme-color" content="#163151">
</head>
<body>
<div id="app"></div>
<div id="app"></div>
<noscript class="NoScript">
<div class="NoScript-content">
<h2>You Must Enable Javascript to Continue</h2>
<p>
MyEtherWallet requires Javascript to run. There are no security
vulnerabilities as a result of enabling Javascript on MyEtherWallet, as
we do not load any external scripts such as advertisements or trackers.
</p>
<p>
If you are not sure why you are seeing this message, or are unsure of
how to enable Javascript, please visit
<a href="https://www.enable-javascript.com/" rel="noopener" target="_blank">enable-javascript.com</a>
to learn more.
</p>
</div>
</noscript>
<div class="BadBrowser" style="display: none;">
<div class="BadBrowser-content">
<h2>Your Browser is Out of Date</h2>
<p class="is-desktop">
MyEtherWallet requires certain features that your browser doesn't offer.
Your browser may also be missing security updates that could open you up
to vulnerabilities. Please update your browser, or switch to one of the
following browsers ones to continue using MyEtherWallet.
</p>
<p class="is-mobile">
MyEtherWallet requires certain features that your browser doesn't offer.
Please use your device's default browser, or switch to a laptop or
computer to continue using MyEtherWallet.
</p>
<div class="BadBrowser-content-browsers is-desktop">
<a
class="BadBrowser-content-browsers-browser firefox"
href="https://www.mozilla.org/en-US/firefox/new/"
rel="noopener"
target="_blank"
>
<span class="BadBrowser-content-browsers-browser-name">
Firefox
</span>
</a>
<a
class="BadBrowser-content-browsers-browser chrome"
href="https://www.google.com/chrome/browser/desktop/index.html"
rel="noopener"
target="_blank"
>
<span class="BadBrowser-content-browsers-browser-name">
Chrome
</span>
</a>
<a
class="BadBrowser-content-browsers-browser opera"
href="http://www.opera.com/"
rel="noopener"
target="_blank"
>
<span class="BadBrowser-content-browsers-browser-name">
Opera
</span>
</a>
</div>
</div>
</div>
<script>
(function() {
var badBrowser = false;
try {
// Let and const
eval('let a = 1;');
eval('const b = 1');
// Object.assign
Object.assign({}, {});
// Local storage
window.localStorage.setItem('test', 'test');
window.localStorage.removeItem('test');
// Flexbox
var el = document.createElement('div');
el.style.display = 'flex';
if (el.style.display !== 'flex') {
badBrowser = false;
}
} catch (err) {
badBrowser = true;
}
if (badBrowser) {
var el = document.getElementsByClassName('BadBrowser')[0];
el.className += ' is-open';
// Dumb check for known mobile OS's. Not important to catch all, just
// displays more appropriate information.
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
el.className += ' is-mobile';
}
}
})();
</script>
</body>
</html>
</html>

View File

@ -33,3 +33,39 @@
text-overflow: ellipsis;
white-space: nowrap;
}
// Alpha agreement, noscript, bad browser, etc.
@mixin cover-message {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background: $brand-info;
z-index: $zindex-top;
&-content {
max-width: 580px;
padding: 20px;
margin: 0 auto;
color: #fff;
text-shadow: 1px 1px 1px rgba(#000, 0.12);
overflow: auto;
h2 {
font-size: 40px;
margin-bottom: 20px;
}
p {
font-size: 20px;
margin-bottom: 15px;
a {
color: #fff;
text-decoration: underline;
}
}
}
}

View File

@ -22,6 +22,8 @@
@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";
// --- CUSTOM ---
@import "./styles/badbrowser";
@import "./styles/noscript";
@import "./styles/overrides";
@import "./styles/scaffolding";
@import "./styles/tab";

View File

@ -0,0 +1,69 @@
@import "common/sass/variables";
@import "common/sass/mixins";
.BadBrowser {
@include cover-message;
&.is-open {
// Override inline display none
display: block !important;
}
&-content {
&-browsers {
text-align: center;
&-browser {
position: relative;
display: inline-block;
width: 20%;
margin: 5%;
background-position: center;
background-repeat: no-repeat;
&:after {
content: "";
display: block;
padding-bottom: 100%;
}
&-name {
position: absolute;
top: 100%;
left: 0;
width: 100%;
text-align: center;
padding-top: 12px;
color: rgba(#fff, 0.8);
}
&.chrome {
background-image: url('~assets/images/browsers/chrome.svg');
}
&.firefox {
background-image: url('~assets/images/browsers/firefox.svg');
}
&.opera {
background-image: url('~assets/images/browsers/opera.svg');
}
}
}
}
// Hide mobile specific messaging by default
.is-mobile {
display: none;
}
&.is-mobile {
.is-mobile {
display: block;
}
.is-desktop {
display: none;
}
}
}

View File

@ -0,0 +1,6 @@
@import "common/sass/variables";
@import "common/sass/mixins";
.NoScript {
@include cover-message;
}

View File

@ -8,6 +8,7 @@
@import "./variables/tables";
@import "./variables/buttons";
@import "./variables/forms";
@import "./variables/zindex";
// Misc.
$border-radius-small: 0px;

View File

@ -6,3 +6,5 @@ $zindex-navbar-fixed: 1030;
$zindex-modal-background: 1040;
$zindex-modal: 1050;
$zindex-alerts: 1060;
$zindex-top: 10000;