From faddabbf74e35b8ffb2f5b6d7dde2fd9afb51a10 Mon Sep 17 00:00:00 2001 From: Andrey Shovkoplyas Date: Mon, 21 May 2018 16:44:46 +0300 Subject: [PATCH] Security warning for browser view [#4298] Signed-off-by: Julien Eluard --- src/status_im/translations/en.cljs | 3 +- src/status_im/ui/components/colors.cljs | 1 + .../ui/components/connectivity/styles.cljs | 5 +-- .../ui/components/tooltip/animations.cljs | 4 +-- .../ui/components/tooltip/styles.cljs | 33 +++++++++++++++++-- .../ui/components/tooltip/views.cljs | 29 +++++++++++++--- src/status_im/ui/screens/browser/views.cljs | 14 ++++---- 7 files changed, 69 insertions(+), 20 deletions(-) diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 0a0ef6e1a1..c2c46007e8 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -633,4 +633,5 @@ :enter-dapp-url "Enter a ÐApp URL" :dapp "ÐApp" :selected "Selected" - :selected-dapps "Selected ÐApps"}) + :selected-dapps "Selected ÐApps" + :browser-warning "Connection is not proven secure. Make sure you trust this site before signing transactions or entering personal data."}) diff --git a/src/status_im/ui/components/colors.cljs b/src/status_im/ui/components/colors.cljs index 3cbcfb12b3..dc512a5aa5 100644 --- a/src/status_im/ui/components/colors.cljs +++ b/src/status_im/ui/components/colors.cljs @@ -12,6 +12,7 @@ (def gray-light "#e8ebec") ;; Used as divider color (def gray-lighter "#eef2f5") ;; Used as a background or shadow (def gray-transparent "rgba(184, 193, 199, 0.5)") ;; Used for tabs +(def gray-notifications "#4A5054cc") ;; Used for notifications background (def gray-border "#ececf0") (def blue "#4360df") ;; Used as main wallet color, and ios home add button (def blue-dark "#3147ac") ;; Used as secondary wallet color (icon background) diff --git a/src/status_im/ui/components/connectivity/styles.cljs b/src/status_im/ui/components/connectivity/styles.cljs index 0ef4d16f5a..2bab1359ca 100644 --- a/src/status_im/ui/components/connectivity/styles.cljs +++ b/src/status_im/ui/components/connectivity/styles.cljs @@ -1,5 +1,6 @@ (ns status-im.ui.components.connectivity.styles - (:require-macros [status-im.utils.styles :refer [defnstyle]])) + (:require-macros [status-im.utils.styles :refer [defnstyle]]) + (:require [status-im.ui.components.colors :as colors])) (defnstyle text-wrapper [top opacity window-width pending?] {:ios {:z-index 0} @@ -7,7 +8,7 @@ :width window-width :top (+ (+ 56 top) (if pending? 35 0)) :position :absolute - :background-color "#828b92cc" + :background-color colors/gray-notifications :height 35}) (def text diff --git a/src/status_im/ui/components/tooltip/animations.cljs b/src/status_im/ui/components/tooltip/animations.cljs index ca84a8bffb..0308b2ddc4 100644 --- a/src/status_im/ui/components/tooltip/animations.cljs +++ b/src/status_im/ui/components/tooltip/animations.cljs @@ -1,12 +1,12 @@ (ns status-im.ui.components.tooltip.animations (:require [status-im.ui.components.animation :as animation])) -(defn animate-tooltip [bottom-value bottom-anim-value opacity-value] +(defn animate-tooltip [bottom-value bottom-anim-value opacity-value delta] (fn [] (animation/start (animation/parallel [(animation/timing opacity-value {:toValue 1 :duration 500}) - (animation/timing bottom-anim-value {:toValue (- bottom-value 10) + (animation/timing bottom-anim-value {:toValue (- bottom-value delta) :easing (.bezier (animation/easing) 0.685, 0.000, 0.025, 1.185) :duration 500})])))) \ No newline at end of file diff --git a/src/status_im/ui/components/tooltip/styles.cljs b/src/status_im/ui/components/tooltip/styles.cljs index 0c2dde09a1..82e45726d3 100644 --- a/src/status_im/ui/components/tooltip/styles.cljs +++ b/src/status_im/ui/components/tooltip/styles.cljs @@ -1,5 +1,7 @@ (ns status-im.ui.components.tooltip.styles - (:require [status-im.ui.components.styles :as styles])) + (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) + (:require [status-im.ui.components.styles :as styles] + [status-im.ui.components.colors :as colors])) (def tooltip-container {:position :absolute @@ -8,6 +10,14 @@ :right 0 :top 0}) +(defstyle bottom-tooltip-container + {:position :absolute + :align-items :center + :left 12 + :right 12 + :ios {:top 0} + :android {:top 30}}) + (defn tooltip-animated [bottom-value opacity-value] {:position :absolute :align-items :center @@ -22,10 +32,27 @@ :background-color color :border-radius 8}) +(def bottom-tooltip-text-container + {:flex-direction :row + :align-items :center + :margin-horizontal 12 + :padding-horizontal 16 + :padding-vertical 9 + :background-color colors/gray-notifications + :border-radius 8}) + (defn tooltip-text [font-size] {:color styles/color-red-2 :font-size font-size}) +(def bottom-tooltip-text + {:color colors/white + :font-size 15}) + (def tooltip-triangle - {:width 16 - :height 8}) \ No newline at end of file + {:width 16 + :height 8}) + +(def close-icon + {:margin-right 4 + :margin-left 10}) \ No newline at end of file diff --git a/src/status_im/ui/components/tooltip/views.cljs b/src/status_im/ui/components/tooltip/views.cljs index 778bdb57c3..908c2f5646 100644 --- a/src/status_im/ui/components/tooltip/views.cljs +++ b/src/status_im/ui/components/tooltip/views.cljs @@ -4,14 +4,33 @@ [status-im.ui.components.tooltip.animations :as animations] [status-im.ui.components.react :as react] [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.tooltip.styles :as styles])) + [status-im.ui.components.tooltip.styles :as styles] + [status-im.ui.components.colors :as colors] + [reagent.core :as reagent])) (views/defview tooltip [label & [{:keys [bottom-value color font-size] :or {bottom-value -30 color :white font-size 15}}]] (views/letsubs [bottom-anim-value (animation/create-value bottom-value) - opacity-value (animation/create-value 0)] - {:component-did-mount (animations/animate-tooltip bottom-value bottom-anim-value opacity-value)} + opacity-value (animation/create-value 0)] + {:component-did-mount (animations/animate-tooltip bottom-value bottom-anim-value opacity-value 10)} [react/view styles/tooltip-container - [react/animated-view {:style (styles/tooltip-animated bottom-value opacity-value)} + [react/animated-view {:style (styles/tooltip-animated bottom-anim-value opacity-value)} [react/view (styles/tooltip-text-container color) [react/text {:style (styles/tooltip-text font-size)} label]] - [vector-icons/icon :icons/tooltip-triangle {:color color :style styles/tooltip-triangle}]]])) \ No newline at end of file + [vector-icons/icon :icons/tooltip-triangle {:color color :style styles/tooltip-triangle}]]])) + +(views/defview bottom-tooltip-info [label] + (views/letsubs [opened? (reagent/atom true) + bottom-anim-value (animation/create-value -150) + opacity-value (animation/create-value 0)] + {:component-did-mount (animations/animate-tooltip -150 bottom-anim-value opacity-value -10)} + (when @opened? + [react/view styles/bottom-tooltip-container + [react/animated-view {:style (styles/tooltip-animated bottom-anim-value opacity-value)} + [vector-icons/icon :icons/tooltip-triangle {:color colors/gray-notifications + :style styles/tooltip-triangle + :container-style {:transform [{:rotate "180deg"}]}}] + [react/view styles/bottom-tooltip-text-container + [react/text {:style styles/bottom-tooltip-text} label] + [react/touchable-highlight {:on-press #(reset! opened? false) + :style styles/close-icon} + [vector-icons/icon :icons/close {:color colors/white}]]]]]))) diff --git a/src/status_im/ui/screens/browser/views.cljs b/src/status_im/ui/screens/browser/views.cljs index 475350a1ea..12e89a4fed 100644 --- a/src/status_im/ui/screens/browser/views.cljs +++ b/src/status_im/ui/screens/browser/views.cljs @@ -15,7 +15,8 @@ [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.i18n :as i18n] [status-im.utils.ethereum.core :as ethereum] - [status-im.ui.components.toolbar.actions :as actions])) + [status-im.ui.components.toolbar.actions :as actions] + [status-im.ui.components.tooltip.views :as tooltip])) (views/defview toolbar-content-dapp [contact-identity] (views/letsubs [contact [:get-contact-by-identity contact-identity]] @@ -45,11 +46,7 @@ :auto-capitalize :none :auto-correct false :default-value url - :style styles/url-input}] - ;;TODO .reload doesn't work, implement later - #_[react/touchable-highlight {:on-press #(when @webview (.reload @webview))} - [react/view - [vector-icons/icon :icons/refresh]]]]])) + :style styles/url-input}]]])) (defn- web-view-error [_ code desc] (reagent/as-element @@ -129,4 +126,7 @@ :style styles/forward-button :accessibility-label :next-page-button} [react/view (when (not can-go-forward?) {:opacity 0.4}) - [vector-icons/icon :icons/arrow-right]]]]])) + [vector-icons/icon :icons/arrow-right]]]] + (when-not dapp? + [tooltip/bottom-tooltip-info + (i18n/label :t/browser-warning)])]))