added login and users screens

src/status_im/login/handlers.cljs

@@ -0,0 +1,23 @@
+(ns status-im.login.handlers
+  (:require [re-frame.core :refer [register-handler after dispatch]]
+            [status-im.utils.handlers :as u]))
+
+
+(defn set-login-from-qr
+  [{:keys [login] :as db} [_ _ login-info]]
+  (assoc db :login (merge login login-info)))
+
+(register-handler :set-login-from-qr set-login-from-qr)
+
+
+(defn go-back
+  [_ _]
+  (dispatch [:navigate-back]))
+
+(defn login
+  [{:keys [login] :as db} [_ _]]
+   (assoc db :current-account {:address (:address login)}))
+
+(register-handler :login-account
+  (-> login
+      ((after go-back))))

src/status_im/login/screen.cljs

@@ -0,0 +1,83 @@
+(ns status-im.login.screen
+  (:require-macros [status-im.utils.views :refer [defview]])
+  (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
+            [status-im.components.react :refer [view
+                                                text
+                                                text-input
+                                                image
+                                                linear-gradient
+                                                touchable-highlight]]
+            [status-im.components.toolbar :refer [toolbar]]
+            [status-im.components.styles :refer [color-purple
+                                                 color-white
+                                                 icon-search
+                                                 icon-back
+                                                 icon-qr
+                                                 toolbar-background1
+                                                 toolbar-title-container
+                                                 toolbar-title-text
+                                                 button-input-container
+                                                 button-input
+                                                 white-form-text-input]]
+            [status-im.qr-scanner.views.import-button :refer [import-button]]
+            [status-im.i18n :refer [label]]
+            [status-im.login.styles :as st]))
+
+(def toolbar-title
+  [view toolbar-title-container
+   [text {:style (merge toolbar-title-text {:color color-white})}
+    (label :t/login)]])
+
+(defview address-input [address]
+  [view button-input-container
+   [text-input
+    {:underlineColorAndroid color-white
+     :placeholderTextColor  color-white
+     :style                 (merge white-form-text-input button-input)
+     :autoFocus             true
+     :placeholder           (label :t/address)
+     :onChangeText          #(dispatch [:set-in [:login :address] %])}
+    address]
+   [import-button #(dispatch [:scan-qr-code {:toolbar-title (label :t/login)} :set-address-from-qr])]])
+
+(defview password-input []
+  []
+  [text-input
+   {:underlineColorAndroid color-white
+    :placeholderTextColor  color-white
+    :style                 white-form-text-input
+    :autoFocus             true
+    :placeholder           (label :t/password)
+    :onChangeText          #(dispatch [:set-in [:login :password] %])}
+   ""])
+
+(defview login []
+  [{:keys [address]} [:get :login]]
+   [view st/screen-container
+    [linear-gradient {:colors ["rgba(182, 116, 241, 1)" "rgba(107, 147, 231, 1)" "rgba(43, 171, 238, 1)"]
+                      :start [0, 0]
+                      :end [0.5, 1]
+                      :locations [0, 0.8 ,1]
+                      :style  st/gradient-background}]
+
+    [toolbar {:background-color :transparent
+              :nav-action     {:image   {:source {:uri :icon_back_white}
+                                         :style  icon-back}
+                               :handler  #(dispatch [:navigate-back])}
+              :custom-content   toolbar-title
+              :action           {:image   {:style  icon-search}
+                                 :handler #()}}]
+    [view st/form-container
+     [address-input (or address "")]
+     [password-input]
+     ]
+    [view st/bottom-actions-container
+     [view st/recover-text-container
+      [touchable-highlight
+       {:on-press #()}
+       [text {:style st/recover-text} (label :t/recover-from-passphrase)]]]
+     [view st/connect-button-container
+      [touchable-highlight
+       {:on-press #(dispatch [:login-account])}
+       [view st/connect-button
+        [text {:style st/connect-button-text} (label :t/connect)]]]]]])

src/status_im/login/styles.cljs

@@ -0,0 +1,54 @@
+(ns status-im.login.styles
+  (:require [status-im.components.styles :refer [font
+                                                 title-font
+                                                 text1-color
+                                                 color-white
+                                                 toolbar-background2
+                                                 online-color]]))
+
+
+(def screen-container
+  {:flex  1
+   :color :white})
+
+(def gradient-background
+  {:position :absolute
+   :top      0
+   :right    0
+   :bottom   0
+   :left     0})
+
+(def form-container
+  {:marginLeft 16
+   :margin-top 70})
+
+(def bottom-actions-container
+  {:position :absolute
+   :left     0
+   :right    0
+   :bottom   16})
+
+(def recover-text-container
+  {:flex     1
+   :flexWrap :nowrap
+   :padding  16})
+
+(def recover-text
+  {:flex  1
+   :color color-white})
+
+(def connect-button-container
+  {:position :absolute
+   :right    16
+   :top      0})
+
+(def connect-button
+  {:backgroundColor   color-white
+   :borderRadius      55
+   :paddingVertical   16
+   :paddingHorizontal 28
+   })
+
+(def connect-button-text
+  {:color    "#7099e6"
+   :fontSize 16})

src/status_im/users/handlers.cljs

@@ -0,0 +1 @@
+(ns status-im.users.handlers)

src/status_im/users/screen.cljs

@@ -0,0 +1,68 @@
+(ns status-im.users.screen
+  (:require-macros [status-im.utils.views :refer [defview]])
+  (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
+            [status-im.components.react :refer [view
+                                                text
+                                                list-view
+                                                list-item
+                                                image
+                                                linear-gradient
+                                                touchable-highlight]]
+            [status-im.components.toolbar :refer [toolbar]]
+            [status-im.components.styles :refer [color-purple
+                                                 color-white
+                                                 icon-search
+                                                 icon-back
+                                                 icon-qr
+                                                 toolbar-background1
+                                                 toolbar-title-container
+                                                 toolbar-title-text
+                                                 button-input-container
+                                                 button-input
+                                                 white-form-text-input]]
+            [status-im.utils.listview :as lw]
+            [status-im.users.views.user :refer [user-view]]
+            [status-im.i18n :refer [label]]
+            [status-im.users.styles :as st]))
+
+(def toolbar-title
+  [view toolbar-title-container
+   [text {:style (merge toolbar-title-text {:color color-white})}
+    (label :t/switch-users)]])
+
+(defn render-row [row _ _]
+  (list-item [user-view row]))
+
+(defn render-separator [_ row-id _]
+  (list-item [view {:style st/row-separator
+                    :key   row-id}]))
+
+(defview users []
+  [accounts [:get :accounts]]
+  (let [accounts (conj accounts {:name (label :t/add-account)
+                                 :address "0x0"
+                                 :photo-path :icon_plus})]
+  [view st/screen-container
+   [linear-gradient {:colors ["rgba(182, 116, 241, 1)" "rgba(107, 147, 231, 1)" "rgba(43, 171, 238, 1)"]
+                     :start [0, 0]
+                     :end [0.5, 1]
+                     :locations [0, 0.8 ,1]
+                     :style  st/gradient-background}]
+
+   [toolbar {:background-color :transparent
+             :nav-action     {:image   {:source {:uri :icon_back_white}
+                                        :style  icon-back}
+                              :handler  #(dispatch [:navigate-back])}
+             :custom-content   toolbar-title
+             :action           {:image   {:style  icon-search}
+                               :handler #()}}]
+
+   [view st/user-list-container
+    [list-view {:dataSource          (lw/to-datasource accounts)
+                :enableEmptySections true
+                :renderRow           render-row
+                :renderSeparator     render-separator
+                :style               st/user-list}]]]))
+
+
+;(re-frame.core/dispatch [:set :view-id :users])

src/status_im/users/styles.cljs

@@ -0,0 +1,83 @@
+(ns status-im.users.styles
+  (:require [status-im.components.styles :refer [font
+                                                 title-font
+                                                 text1-color
+                                                 color-white
+                                                 toolbar-background2
+                                                 online-color]]))
+
+
+(def screen-container
+  {:flex  1
+   :color :white})
+
+(def gradient-background
+  {:position :absolute
+   :top      0
+   :right    0
+   :bottom   0
+   :left     0})
+
+(def user-list-container1
+  {:position :absolute
+   :top 56
+   :right 0
+   :bottom 0
+   :left 0
+   :justifyContent :center})
+
+(def user-list-container
+  {:flex 1
+   :flexDirection :column
+   :justifyContent :center})
+
+(def user-list
+  {})
+
+(def row-separator
+  {:borderBottomWidth 1
+   :borderBottomColor "#bababa"})
+
+(def user-container
+  {:flex 1
+   :flexDirection :row
+   :height 69
+   :backgroundColor "rgba(255, 255, 255, 0.1)"
+   :alignItems     :center
+   :justifyContent :center})
+
+(def photo-container
+  {:flex 0.2
+   :flexDirection :column
+   :alignItems     :center
+   :justifyContent :center})
+
+(def user-photo-container
+  {:flex 1
+   :backgroundColor "rgba(255, 255, 255, 0.2)"
+   :borderRadius 50
+   :width 36
+   :height 36
+   :alignItems     :center
+   :justifyContent :center})
+
+(def photo-image
+  {:borderRadius 50
+   :width        36
+   :height       36})
+
+(def name-container
+  {:flex 1
+   :flexDirection :column})
+
+(def name-text
+  {:color color-white})
+
+(def address-text
+  {:color color-white})
+
+(def online-container
+  {:flex 0.2
+   :flexDirection :column
+   :alignItems     :center
+   :justifyContent :center})

src/status_im/users/subs.cljs

@@ -0,0 +1 @@
+(ns status-im.users.subs)

src/status_im/users/views/user.cljs

@@ -0,0 +1,39 @@
+(ns status-im.users.views.user
+  (:require-macros [status-im.utils.views :refer [defview]])
+  (:require [clojure.string :as s]
+            [status-im.resources :as res]
+            [status-im.components.react :refer [view
+                                                text
+                                                image
+                                                touchable-highlight]]
+            [re-frame.core :refer [dispatch subscribe]]
+            [status-im.components.styles :refer [icon-ok
+                                                 icon-plus]]
+            [status-im.users.styles :as st]))
+
+(defn on-press [address]
+  (dispatch [:navigate-to :login address])
+  (dispatch [:set-in [:login :address] address]))
+
+(defview user-view [{:keys [address photo-path name ] :as account}]
+  [current-account [:get :current-account]]
+  [touchable-highlight
+   {:onPress #(on-press address)}
+    [view st/user-container
+     [view st/photo-container
+      [view st/user-photo-container
+       (if (not= address "0x0")
+         [image {:source {:uri (if (s/blank? photo-path) :avatar photo-path)}
+                 :style  st/photo-image}]
+         [image {:source {:uri :icon_plus}
+                 :style  icon-plus}])]]
+     [view st/name-container
+      [text {:style st/name-text
+             :numberOfLines 1} name]
+      (when (not= address "0x0")
+        [text {:style st/address-text
+               :numberOfLines 1} address])]
+     [view st/online-container
+      (when (= address (:address current-account))
+        [image {:source {:uri :icon_ok}
+                :style  icon-ok}])]]])