Allow scanning qr codes for custom mailservers

Signed-off-by: Andrea Maria Piana <andrea.maria.piana@gmail.com>

src/status_im/ui/components/text_input/view.cljs

@@ -4,7 +4,7 @@
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.tooltip.views :as tooltip]))
 
-(defn text-input-with-label [{:keys [label error style height container] :as props}]
+(defn text-input-with-label [{:keys [label content error style height container] :as props}]
   [react/view
    (when label
      [react/text {:style styles/label}
@@ -16,6 +16,7 @@
        :placeholder-text-color colors/gray
        :auto-focus             true
        :auto-capitalize        :none}
-      (dissoc props :style :height))]]
+      (dissoc props :style :height))]
+    (when content content)]
    (when error
      [tooltip/tooltip error (styles/error label)])])

src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/events.cljs

@@ -31,6 +31,12 @@
                                                                  chain))]
      :dispatch [:navigate-back]}))
 
+(defn set-input [input-key value {:keys [db]}]
+  {:db (update db :mailservers/manage assoc input-key {:value value
+                                                       :error (if (= input-key :name)
+                                                                (string/blank? value)
+                                                                (not (utils.inbox/valid-enode-address? value)))})})
+
 (handlers/register-handler-fx
  :save-new-mailserver
  [(re-frame/inject-cofx :random-id)]
@@ -38,11 +44,8 @@
 
 (handlers/register-handler-fx
  :mailserver-set-input
- (fn [{db :db} [_ input-key value]]
+ (fn [cofx [_ input-key value]]
-   {:db (update db :mailservers/manage assoc input-key {:value value
+   (set-input input-key value cofx)))
-                                                        :error (if (= input-key :name)
-                                                                 (string/blank? value)
-                                                                 (not (utils.inbox/valid-enode-address? value)))})}))
 
 (handlers/register-handler-fx
  :edit-mailserver
@@ -51,3 +54,9 @@
                          :name  {:error true}
                          :url   {:error true})
     :dispatch [:navigate-to :edit-mailserver]}))
+
+(handlers/register-handler-fx
+ :set-mailserver-from-qr
+ (fn [cofx [_ _ contact-identity]]
+   (assoc (set-input :url contact-identity cofx)
+          :dispatch [:navigate-back])))

src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/styles.cljs

@@ -1,5 +1,6 @@
 (ns status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle]]))
+  (:require-macros [status-im.utils.styles :refer [defstyle]])
+  (:require [status-im.ui.components.styles :as styles]))
 
 (def edit-mailserver-view
   {:flex              1
@@ -7,7 +8,21 @@
    :margin-vertical   15})
 
 (def input-container
-  {:margin-bottom 15})
+  {:flex-direction    :row
+   :align-items       :center
+   :justify-content   :space-between
+   :border-radius     styles/border-radius
+   :height            52
+   :margin-top        15})
+
+(defstyle input
+  {:flex               1
+   :font-size          15
+   :letter-spacing     -0.2
+   :android            {:padding 0}})
+
+(def qr-code
+  {:margin-right 14})
 
 (def bottom-container
   {:flex-direction    :row

src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs

@@ -4,6 +4,8 @@
    [re-frame.core :as re-frame]
    [status-im.ui.components.react :as react]
    [status-im.i18n :as i18n]
+   [status-im.ui.components.colors :as colors]
+   [status-im.ui.components.icons.vector-icons :as vector-icons]
    [status-im.ui.components.styles :as components.styles]
    [status-im.ui.components.common.common :as components.common]
    [status-im.ui.components.status-bar.view :as status-bar]
@@ -12,6 +14,14 @@
    [status-im.ui.components.text-input.view :as text-input]
    [status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles :as styles]))
 
+(def qr-code
+  [react/touchable-highlight {:on-press #(re-frame/dispatch [:scan-qr-code
+                                                             {:toolbar-title (i18n/label :t/add-mailserver)}
+                                                             :set-mailserver-from-qr])
+                              :style    styles/qr-code}
+   [react/view
+    [vector-icons/icon :icons/qr {:color colors/blue}]]])
+
 (views/defview edit-mailserver []
   (views/letsubs [manage-mailserver [:get-manage-mailserver]
                   is-valid?         [:manage-mailserver-valid?]]
@@ -24,6 +34,7 @@
         [text-input/text-input-with-label
          {:label           (i18n/label :t/name)
           :placeholder     (i18n/label :t/specify-name)
+          :style           styles/input
           :container       styles/input-container
           :default-value   (get-in manage-mailserver [:name :value])
           :on-change-text  #(re-frame/dispatch [:mailserver-set-input :name %])
@@ -31,6 +42,8 @@
         [text-input/text-input-with-label
          {:label           (i18n/label :t/mailserver-address)
           :placeholder     (i18n/label :t/specify-mailserver-address)
+          :content         qr-code
+          :style           styles/input
           :container       styles/input-container
           :default-value   (get-in manage-mailserver [:url :value])
           :on-change-text  #(re-frame/dispatch [:mailserver-set-input :url %])}]]]

test/cljs/status_im/test/offline_messaging_settings/events.cljs

@@ -2,6 +2,28 @@
   (:require [cljs.test :refer-macros [deftest is testing]]
             [status-im.ui.screens.offline-messaging-settings.edit-mailserver.events :as events]))
 
+(def valid-enode-url "enode://1da276e34126e93babf24ec88aac1a7602b4cbb2e11b0961d0ab5e989ca9c261aa7f7c1c85f15550a5f1e5a5ca2305b53b9280cf5894d5ecf7d257b173136d40:somepassword@167.99.209.61:30504")
+
+(deftest set-input
+  (testing "it validates names"
+    (testing "correct name"
+      (is (= {:db {:mailservers/manage {:name {:value "value"
+                                               :error false}}}}
+             (events/set-input :name "value" {}))))
+    (testing "blank name"
+      (is (= {:db {:mailservers/manage {:name {:value ""
+                                               :error true}}}}
+             (events/set-input :name "" {})))))
+  (testing "it validates enodes url"
+    (testing "correct url"
+      (is (= {:db {:mailservers/manage {:url {:value valid-enode-url
+                                              :error false}}}}
+             (events/set-input :url valid-enode-url {}))))
+    (testing "broken url"
+      (is (= {:db {:mailservers/manage {:url {:value "broken"
+                                              :error true}}}}
+             (events/set-input :url "broken" {}))))))
+
 (deftest save-new-mailserver
   (testing "save a new mailserver"
     (let [cofx {:random-id "random-id"