Add validation tooltip to mailserver/bootnode address input

src/status_im/mailserver/subs.cljs

@@ -79,7 +79,10 @@
       current-mailserver-id)))
 
 (re-frame/reg-sub
- :mailserver.edit/valid?
+ :mailserver.edit/validation-errors
  :<- [:mailserver.edit/mailserver]
  (fn [mailserver]
-   (not-any? :error (vals mailserver))))
+   (set (keep
+         (fn [[k {:keys [error]}]]
+           (when error k))
+         mailserver))))

src/status_im/ui/components/tooltip/views.cljs

@@ -8,11 +8,12 @@
             [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/defview tooltip [label & [{:keys [bottom-value color font-size container-style]
+                                  :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 10)}
-    [react/view styles/tooltip-container
+    [react/view (merge styles/tooltip-container container-style)
      [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]]

src/status_im/ui/screens/bootnodes_settings/edit_bootnode/subs.cljs

@@ -8,7 +8,10 @@
    manage))
 
 (reg-sub
- :manage-bootnode-valid?
+ :manage-bootnode-validation-errors
  :<- [:get-manage-bootnode]
  (fn [manage]
-   (not-any? :error (vals manage))))
+   (set (keep
+         (fn [[k {:keys [error]}]]
+           (when error k))
+         manage))))

src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs

@@ -12,7 +12,9 @@
    [status-im.ui.components.status-bar.view :as status-bar]
    [status-im.ui.components.toolbar.view :as toolbar]
    [status-im.ui.components.text-input.view :as text-input]
-   [status-im.ui.screens.bootnodes-settings.edit-bootnode.styles :as styles]))
+   [status-im.ui.screens.bootnodes-settings.edit-bootnode.styles :as styles]
+   [status-im.ui.components.tooltip.views :as tooltip]
+   [clojure.string :as string]))
 
 (defn delete-button [id]
   [react/touchable-highlight {:on-press #(re-frame/dispatch [:bootnodes.ui/delete-pressed id])}
@@ -31,11 +33,13 @@
     [vector-icons/icon :main-icons/qr {:color colors/blue}]]])
 
 (views/defview edit-bootnode []
-  (views/letsubs [manage-bootnode [:get-manage-bootnode]
+  (views/letsubs [manage-bootnode   [:get-manage-bootnode]
-                  is-valid?       [:manage-bootnode-valid?]]
+                  validation-errors [:manage-bootnode-validation-errors]]
-    (let [url  (get-in manage-bootnode [:url :value])
+    (let [url          (get-in manage-bootnode [:url :value])
-          id   (get-in manage-bootnode [:id :value])
+          id           (get-in manage-bootnode [:id :value])
-          name (get-in manage-bootnode [:name :value])]
+          name         (get-in manage-bootnode [:name :value])
+          is-valid?    (empty? validation-errors)
+          invalid-url? (contains? validation-errors :url)]
       [react/view styles/container
        [status-bar/status-bar]
        [react/keyboard-avoiding-view components.styles/flex
@@ -50,14 +54,22 @@
             :default-value   name
             :on-change-text  #(re-frame/dispatch [:bootnodes.ui/input-changed :name %])
             :auto-focus      true}]
-          [text-input/text-input-with-label
+          [react/view
-           {:label           (i18n/label :t/bootnode-address)
+           {:flex 1}
-            :placeholder     (i18n/label :t/specify-bootnode-address)
+           [text-input/text-input-with-label
-            :content         qr-code
+            {:label          (i18n/label :t/bootnode-address)
-            :style           styles/input
+             :placeholder    (i18n/label :t/bootnode-format)
-            :container       styles/input-container
+             :content        qr-code
-            :default-value   url
+             :style          styles/input
-            :on-change-text  #(re-frame/dispatch [:bootnodes.ui/input-changed :url %])}]
+             :container      styles/input-container
+             :default-value  url
+             :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :url %])}]
+           (when (and (not (string/blank? url)) invalid-url?)
+             [tooltip/tooltip (i18n/label :t/invalid-format
+                                          {:format (i18n/label :t/bootnode-format)})
+              {:color        colors/red-light
+               :font-size    12
+               :bottom-value -25}])]
           (when id
             [delete-button id])]]
         [react/view styles/bottom-container

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

@@ -13,7 +13,9 @@
    [status-im.ui.components.toolbar.view :as toolbar]
    [status-im.ui.components.list.views :as list]
    [status-im.ui.components.text-input.view :as text-input]
-   [status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles :as styles]))
+   [status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles :as styles]
+   [status-im.ui.components.tooltip.views :as tooltip]
+   [clojure.string :as string]))
 
 (defn connect-button [id]
   [react/touchable-highlight {:on-press #(re-frame/dispatch [:mailserver.ui/connect-pressed id])}
@@ -41,11 +43,13 @@
 
 (views/defview edit-mailserver []
   (views/letsubs [mailserver [:mailserver.edit/mailserver]
-                  connected?        [:mailserver.edit/connected?]
+                  connected? [:mailserver.edit/connected?]
-                  is-valid?         [:mailserver.edit/valid?]]
+                  validation-errors [:mailserver.edit/validation-errors]]
-    (let [url  (get-in mailserver [:url :value])
+    (let [url          (get-in mailserver [:url :value])
-          id   (get-in mailserver [:id :value])
+          id           (get-in mailserver [:id :value])
-          name (get-in mailserver [:name :value])]
+          name         (get-in mailserver [:name :value])
+          is-valid?    (empty? validation-errors)
+          invalid-url? (contains? validation-errors :url)]
       [react/view components.styles/flex
        [status-bar/status-bar]
        [react/keyboard-avoiding-view components.styles/flex
@@ -60,14 +64,23 @@
             :default-value   name
             :on-change-text  #(re-frame/dispatch [:mailserver.ui/input-changed :name %])
             :auto-focus      true}]
-          [text-input/text-input-with-label
+          [react/view
-           {:label           (i18n/label :t/mailserver-address)
+           {:flex 1}
-            :placeholder     (i18n/label :t/specify-mailserver-address)
+           [text-input/text-input-with-label
-            :content         qr-code
+            {:label          (i18n/label :t/mailserver-address)
-            :style           styles/input
+             :placeholder    (i18n/label :t/mailserver-format)
-            :container       styles/input-container
+             :content        qr-code
-            :default-value   url
+             :style          styles/input
-            :on-change-text  #(re-frame/dispatch [:mailserver.ui/input-changed :url %])}]
+             :container      styles/input-container
+             :default-value  url
+             :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :url %])}]
+           (when (and (not (string/blank? url))
+                      invalid-url?)
+             [tooltip/tooltip (i18n/label :t/invalid-format
+                                          {:format (i18n/label :t/mailserver-format)})
+              {:color        colors/red-light
+               :font-size    12
+               :bottom-value -25}])]
           (when (and id
                      (not connected?))
             [react/view

translations/en.json

@@ -984,5 +984,8 @@
     "extension-install-alert": "Development mode is required to install an extension. Do you want to enable and continue installing?",
     "see-details": "See details",
     "chaos-unicorn-day": "Chaos Unicorn Day",
-    "chaos-unicorn-day-details": "\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83D\uDE80!"
+    "chaos-unicorn-day-details": "\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83E\uDD84\uD83D\uDE80!",
+    "invalid-format": "Invalid format\nMust be {{format}}",
+    "mailserver-format": "enode://{enode-id}:{password}@{ip-address}:{port}",
+    "bootnode-format": "enode://{enode-id}@{ip-address}:{port}"
 }