Adding wallet alert for mist users (ethereum#435)

OutThereLabs · Dec 4, 2017 · 30ac582 · 30ac582
1 parent 31f8a9d
commit 30ac582
Show file tree

Hide file tree

Showing 4 changed files with 169 additions and 21 deletions.
diff --git a/app/client/styles/elements.import.less b/app/client/styles/elements.import.less
@@ -24,7 +24,7 @@ span.address {
     &.ens-name {
         font-weight: 400;
     }
-    
+
     &.not-ens-name {
         font-style: italic;
     }
@@ -95,7 +95,7 @@ span.address {
         }
     }
 
-    &.creating { 
+    &.creating {
         pointer-events: none;
         cursor: default;
     }
@@ -127,9 +127,9 @@ span.address {
         transform-style: preserve-3d;
 
         .dapp-identicon {
-            border: @colorWhite solid 2px; 
+            border: @colorWhite solid 2px;
             .transition(transform 0.3s);
-            backface-visibility: hidden;       
+            backface-visibility: hidden;
         }
 
         .delete-token {
@@ -275,7 +275,7 @@ span.address {
     background: @colorGrayLight;
     margin-top: @gridHeight*0.75;
 
-    
+
     &:hover {
         .dapp-shadow-medium;
     }
@@ -289,7 +289,7 @@ span.address {
         border-color: @colorGray;
         color: @colorGrayDark;
         padding: @defaultPaddingVertical/2 @defaultPaddingHorizontal/2;
-        opacity: 1;        
+        opacity: 1;
         background: @colorGray;
         font-weight: 400;
 
@@ -308,7 +308,7 @@ span.address {
         display: flex;
         overflow: hidden;
         height: @gridHeight * 2;
-        padding: @defaultPaddingVertical/2 @defaultPaddingHorizontal/2;  
+        padding: @defaultPaddingVertical/2 @defaultPaddingHorizontal/2;
         .transition(height @animationSpeed/2, opacity @animationSpeed/2, padding @animationSpeed/2);
         cursor: pointer;
 
@@ -417,7 +417,7 @@ table {
         td {
 
             &.plus, .plus {
-                color: @colorTextSecondary;                
+                color: @colorTextSecondary;
             }
             &.minus, .minus {
                 color: @colorError;
@@ -495,16 +495,16 @@ table {
 
                 button {
                     width: 120px;
-                    margin-right: @defaultMargin;  
+                    margin-right: @defaultMargin;
                     text-align: center;
                     .transition(background-color @animationSpeed/2);
 
                     .hover-label {
                         display: none;
                     }
                     &:hover {
-                        .label { 
-                            display: none;                      
+                        .label {
+                            display: none;
                         }
                         .hover-label {
                             display: block;
@@ -551,13 +551,13 @@ table {
 
         a {
             color: @colorWhite;
-        } 
+        }
 
         &:hover {
             background: lighten(@colorError, 10%);
-        }       
+        }
     }
-  
+
     a.learn-more-link {
         display: block;
         padding-top: @gridHeight;
@@ -569,7 +569,7 @@ table {
             cursor: pointer;
             text-decoration: underline;
         }
-    }  
+    }
 }
 
 .sticky + div .account-page-notification {
@@ -602,3 +602,96 @@ table {
         width: @gridWidth * 13;
     }
 }
+
+
+// Alert
+.alert-banner {
+  z-index: 100;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background: rgba(255, 221, 221, 0.97);
+  left: 0;
+  padding: 12.26666667px 80px 24.53333333px;
+  -webkit-transition: all 300ms ease-out;
+  opacity: 1;
+
+  &.is-hidden {
+    bottom: -500px;
+    opacity: 0;
+  }
+
+  h1 {
+    color: @colorError;
+    font-weight: bold;
+    margin: initial;
+  }
+
+  p {
+    color: @colorError;
+  }
+
+  .close-button {
+    position: absolute;
+    font-size: 30px;
+    right: 1em;
+    top: 0.5em;
+    color: @colorError;
+  }
+
+  .button {
+    display: inline-block;
+    border-radius: 8px;
+    padding: 8px 10px;
+    margin-top: 0.3em;
+    margin-right: 0.3em;
+
+    background: white;
+    color: rgb(75, 75, 75);
+    font-weight: 400;
+
+    &:active, &:focus {
+      outline: 0;
+    }
+  }
+
+  .download-button {
+    background: @colorLink;
+    color: white;
+  }
+}
+
+.alert-bubble {
+  position: fixed;
+  bottom: .75em;
+  right: .75em;
+
+  border-radius: 50%;
+  background: @colorError;
+  font-size: 1.25em;
+
+  &.is-hidden {
+    display: none;
+  }
+
+  button {
+    animation: jiggle 0.4s infinite;
+    animation-delay: 2s;
+    animation-direction: alternate-reverse;
+    transform-origin: 50% 10%;
+    color: white;
+    width: 35px;
+    height: 35px;
+
+    &:active, &:focus {
+      outline: 0;
+      border: 0;
+    }
+  }
+}
+
+
+@keyframes jiggle {
+  0% { transform: rotate(-10deg); }
+  100% { transform: rotate(10deg); }
+}
diff --git a/app/client/templates/elements/mistAlert.html b/app/client/templates/elements/mistAlert.html
@@ -0,0 +1,21 @@
+<template name="mist_alert">
+  <div class="alert-banner {{alertViewState}}">
+    <section>
+      <h1> ⚠︎ Warning</h1>
+      <button type="button" class="hide-alert close-button">&times;</button>
+      <p>
+        Due to a vulnerability affecting all released versions of the Mist beta browser, we urge you for the time being, not to browse untrusted websites with Mist. Users of "Ethereum Wallet" desktop app are not affected.
+      </p>
+      <p>
+        <a class="hide-alert button" href="javascript:void(0)">Close this message</a>
+        <a class="hide-alert button download-button" href="https://github.com/ethereum/mist/releases">Download Ethereum Wallet</a>
+      </p>
+    </section>
+  </div>
+
+  <div class="show-alert alert-bubble {{bubbleViewState}}">
+    <button>
+      <span class="icon-bell"></span>
+    </button>
+  </div>
+</template>
diff --git a/app/client/templates/elements/mistAlert.js b/app/client/templates/elements/mistAlert.js
@@ -0,0 +1,30 @@
+
+var alertKey = 'alert_20171104-hidden';
+console.log('mistAlert started');
+Template['mist_alert'].onRendered(function(){
+    console.log(window.navigator, window.navigator.userAgent);
+
+    TemplateVar.set('hidden', localStorage.getItem(alertKey));
+    console.log(TemplateVar.get('hidden'));
+});
+
+Template['mist_alert'].helpers({
+    alertViewState: function() {
+      return (!!TemplateVar.get('hidden'))? 'is-hidden' : '';
+    },
+    bubbleViewState: function() {
+      return (!TemplateVar.get('hidden'))? 'is-hidden' : '';
+    }
+});
+
+Template['mist_alert'].events({
+    'click .hide-alert': function() {
+      localStorage.setItem(alertKey, true);
+      TemplateVar.set('hidden', localStorage.getItem(alertKey));
+    },
+
+    'click .show-alert button': function() {
+      localStorage.setItem(alertKey, '');
+      TemplateVar.set('hidden', localStorage.getItem(alertKey));
+    }
+});
diff --git a/app/client/templates/views/dashboard.html b/app/client/templates/views/dashboard.html
@@ -1,4 +1,8 @@
 <template name="views_dashboard">
+    {{#if isMist }}
+      {{>mist_alert}}
+    {{/if}}
+
     <div class="dapp-container">
 
         <h1>{{{i18n "wallet.accounts.title"}}}</h1>
@@ -11,7 +15,7 @@ <h2>{{i18n 'wallet.transactions.pendingConfirmations'}}</h2>
         {{/if}}
 
         {{#if hasAccounts}}
-        
+
             <h2>{{i18n "wallet.accounts.accountsTitle"}}</h2>
             <p>
                 {{i18n "wallet.accounts.accountsDescription"}}
@@ -35,18 +39,18 @@ <h3>{{i18n "wallet.app.buttons.addAccount"}}</h3>
 
 
             <h2>{{i18n "wallet.accounts.walletsTitle"}}</h2>
-            
+
             {{#if hasMinimumBalance}}
                 <p>
-                    {{i18n "wallet.accounts.walletsDescription"}}     
+                    {{i18n "wallet.accounts.walletsDescription"}}
                 </p>
             {{else}}
                 <p>
                     {{{i18n "wallet.accounts.walletsDescriptionNotEnoughFunds"}}}
-                </p>           
+                </p>
             {{/if}}
 
-            
+
 
             <div class="wallet-box-list">
             {{#each wallets}}
@@ -94,4 +98,4 @@ <h2>{{i18n 'wallet.transactions.latest'}}</h2>
             <h2>{{i18n 'wallet.transactions.none'}}</h2>
         {{/if}}
     </div>
-</template>
+</template>