No Javascript / Old Browser Blockers (#274)

* Add messages for no js and bad browser. Share styles with alpha agreement. * Bad browser checks and shower. * No flash of bad browser * Typsecriptify * Move all checks directly to HTML to avoid issues. * remove duplicate badBrowser declaration
MyCryptoHQ · Oct 10, 2017 · a92ea25 · a92ea25
1 parent f719aee
commit a92ea25
Show file tree

Hide file tree

Showing 11 changed files with 274 additions and 41 deletions.
diff --git a/common/assets/images/browsers/chrome.svg b/common/assets/images/browsers/chrome.svg
diff --git a/common/assets/images/browsers/firefox.svg b/common/assets/images/browsers/firefox.svg
diff --git a/common/assets/images/browsers/opera.svg b/common/assets/images/browsers/opera.svg
diff --git a/common/components/AlphaAgreement/index.scss b/common/components/AlphaAgreement/index.scss
@@ -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;
 

diff --git a/common/index.html b/common/index.html
@@ -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">
-
-    <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">
+  <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">
 </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>
diff --git a/common/sass/mixins.scss b/common/sass/mixins.scss
@@ -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;
+      }
+    }
+  }
+}
diff --git a/common/sass/styles.scss b/common/sass/styles.scss
@@ -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";
diff --git a/common/sass/styles/badbrowser.scss b/common/sass/styles/badbrowser.scss
@@ -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;
+    }
+  }
+}
diff --git a/common/sass/styles/noscript.scss b/common/sass/styles/noscript.scss
@@ -0,0 +1,6 @@
+@import "common/sass/variables";
+@import "common/sass/mixins";
+
+.NoScript {
+  @include cover-message;
+}
diff --git a/common/sass/variables.scss b/common/sass/variables.scss
@@ -8,6 +8,7 @@
 @import "./variables/tables";
 @import "./variables/buttons";
 @import "./variables/forms";
+@import "./variables/zindex";
 
 // Misc.
 $border-radius-small: 0px;

diff --git a/common/sass/variables/zindex.scss b/common/sass/variables/zindex.scss
@@ -6,3 +6,5 @@ $zindex-navbar-fixed: 1030;
 $zindex-modal-background: 1040;
 $zindex-modal: 1050;
 $zindex-alerts: 1060;
+
+$zindex-top: 10000;