Add confirmation code view

src/messenger/android/core.cljs

@@ -32,7 +32,7 @@
 (defui AppRoot
   static om/IQuery
   (query [this]
-         '[:page :contacts-ds :user-phone-number])
+         '[:page :contacts-ds :user-phone-number :confirmation-code])
   Object
   (render [this]
           (let [{:keys [page]} (om/props this)]

src/messenger/android/login.cljs

@@ -9,8 +9,9 @@
             [re-natal.support :as sup]
             [syng-im.protocol.whisper :as whisper]
             [messenger.state :as state]
+            [messenger.android.utils :refer [log toast]]
             [messenger.android.resources :as res]
-            [messenger.android.contacts-list :refer [contacts-list]]))
+            [messenger.android.sign-up-confirm :refer [sign-up-confirm]]))
 
 (def nav-atom (atom nil))
 
@@ -18,24 +19,24 @@
 (def country-code "US")
 (def ethereum-rpc-url "http://localhost:8545")
 
-(defn show-home-view []
+(defn show-confirm-view []
   (binding [state/*nav-render* false]
-    (.replace @nav-atom (clj->js {:component contacts-list
+    (.replace @nav-atom (clj->js {:component sign-up-confirm
-                                  :name "contacts-list"}))))
+                                  :name "sign-up-confirm"}))))
 
 (defn sign-in [phone-number whisper-identity]
-  (alert (str "TODO: send number: " phone-number ", "
+  (toast (str "TODO: send number: " phone-number ", "
-              (subs whisper-identity 0 2) ".."
+                   (subs whisper-identity 0 2) ".."
-              (subs whisper-identity (- (count whisper-identity) 2)
+                   (subs whisper-identity (- (count whisper-identity) 2)
-                    (count whisper-identity))))
+                         (count whisper-identity))))
-  (show-home-view))
+  (show-confirm-view))
 
 (defn identity-handler [error result]
   (if error
-    (do (alert (str error))
+    (do (toast (str error))
         (.log js/console "error")
         (.log js/console error))
-    (alert (str result))))
+    (toast (str result))))
 
 (defn get-identity [handler]
   (let [web3 (whisper/make-web3 ethereum-rpc-url)]
@@ -51,7 +52,7 @@
                         (do (set-item "user-whisper-identity" identity)
                             (swap! state/app-state assoc :user-whisper-identity identity)
                             (sign-in phone-number identity))
-                        (alert error)))))))
+                        (toast (str "error" error))))))))
 
 (defn load-user-whisper-identity [handler]
   (get-item "user-whisper-identity"
@@ -60,7 +61,7 @@
                 (let [whisper-identity (when value (str value))]
                   (swap! state/app-state assoc :user-whisper-identity whisper-identity)
                   (handler whisper-identity))
-                (alert (str "error" error))))))
+                (toast (str "error" error))))))
 
 (defn handle-phone-number [phone-number]
   (when phone-number

src/messenger/android/sign_up_confirm.cljs

@@ -0,0 +1,98 @@
+(ns messenger.android.sign-up-confirm
+  (:require-macros
+   [natal-shell.components :refer [view text image touchable-highlight list-view
+                                   toolbar-android text-input]]
+   [natal-shell.async-storage :refer [get-item set-item]]
+   [natal-shell.core :refer [with-error-view]]
+   [natal-shell.alert :refer [alert]]
+   [natal-shell.toast-android :as toast])
+  (:require [om.next :as om :refer-macros [defui]]
+            [re-natal.support :as sup]
+            [syng-im.protocol.whisper :as whisper]
+            [messenger.state :as state]
+            [messenger.android.utils :refer [log toast]]
+            [messenger.android.resources :as res]
+            [messenger.android.contacts-list :refer [contacts-list]]))
+
+(def nav-atom (atom nil))
+
+(defn show-home-view []
+  (binding [state/*nav-render* false]
+    (.replace @nav-atom (clj->js {:component contacts-list
+                                  :name "contacts-list"}))))
+
+(defn handle-send-check-contacts-response []
+  (show-home-view))
+
+(defn send-check-contacts []
+  )
+
+(defn handle-send-code-response [response]
+  )
+
+(defn code-valid? [code]
+  (= 4 (count code)))
+
+(defn send-code [code]
+  (when (code-valid? code)
+    (toast (str code))
+    (show-home-view)))
+
+(defn update-code [value]
+  (let [formatted value]
+    (swap! state/app-state assoc :confirmation-code formatted)))
+
+(defui SignUpConfirm
+  static om/IQuery
+  (query [this]
+         '[:confirmation-code])
+  Object
+  (render
+   [this]
+   (let [{:keys [confirmation-code]} (om/props this)
+         {:keys [nav]} (om/get-computed this)]
+     (reset! nav-atom nav)
+     (view
+      {:style {:flex 1
+               :backgroundColor "white"}}
+      (toolbar-android {:logo res/logo-icon
+                        :title "Confirm"
+                        :titleColor "#4A5258"
+                        :style {:backgroundColor "white"
+                                :height 56
+                                :elevation 2}})
+      (view {}
+            (text-input {:underlineColorAndroid "#9CBFC0"
+                         :placeholder "Enter confirmation code"
+                         :keyboardType "number-pad"
+                         :maxLength 4
+                         :onChangeText (fn [value]
+                                         (update-code value))
+                         :style {:flex 1
+                                 :marginHorizontal 18
+                                 :lineHeight 42
+                                 :fontSize 14
+                                 :fontFamily "Avenir-Roman"
+                                 :color "#9CBFC0"}}
+                        confirmation-code)
+            (if (code-valid? confirmation-code)
+              (touchable-highlight
+               {:onPress #(send-code confirmation-code)
+                :style {:alignSelf "center"
+                        :borderRadius 7
+                        :backgroundColor "#E5F5F6"
+                        
+                        :width 100}}
+               (text {:style {:marginVertical 10
+                              :textAlign "center"}}
+                     "Confirm"))
+              (view
+               {:style {:alignSelf "center"
+                        :borderRadius 7
+                        :backgroundColor "#AAB2B2"
+                        :width 100}}
+               (text {:style {:marginVertical 10
+                              :textAlign "center"}}
+                     "Confirm"))))))))
+
+(def sign-up-confirm (om/factory SignUpConfirm))

src/messenger/android/utils.cljs

@@ -0,0 +1,11 @@
+(ns messenger.android.utils
+  (:require-macros
+   [natal-shell.async-storage :refer [get-item set-item]]
+   [natal-shell.alert :refer [alert]]
+   [natal-shell.toast-android :as toast]))
+
+(defn log [obj]
+  (.log js/console obj))
+
+(defn toast [s]
+  (toast/show s (toast/long)))

src/messenger/state.cljs

@@ -6,7 +6,8 @@
 
 (defonce app-state (atom {:component nil
                           :user-phone-number nil
-                          :user-whisper-identity nil}))
+                          :user-whisper-identity nil
+                          :confirmation-code nil}))
 (def ^{:dynamic true :private true} *nav-render*
   "Flag to suppress navigator re-renders from outside om when pushing/popping."
   true)