diff --git a/src/status_im/mailserver/subs.cljs b/src/status_im/mailserver/subs.cljs index 99db9916c8..0ace2cb161 100644 --- a/src/status_im/mailserver/subs.cljs +++ b/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)))) diff --git a/src/status_im/ui/components/tooltip/views.cljs b/src/status_im/ui/components/tooltip/views.cljs index 7aa39a9074..4c33086d8c 100644 --- a/src/status_im/ui/components/tooltip/views.cljs +++ b/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]] diff --git a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/subs.cljs b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/subs.cljs index 49e41fdc82..9df984eb23 100644 --- a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/subs.cljs +++ b/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)))) diff --git a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs index 4c172013fa..c4960e26d4 100644 --- a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs +++ b/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] - is-valid? [:manage-bootnode-valid?]] - (let [url (get-in manage-bootnode [:url :value]) - id (get-in manage-bootnode [:id :value]) - name (get-in manage-bootnode [:name :value])] + (views/letsubs [manage-bootnode [:get-manage-bootnode] + validation-errors [:manage-bootnode-validation-errors]] + (let [url (get-in manage-bootnode [:url :value]) + id (get-in manage-bootnode [:id :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 - {:label (i18n/label :t/bootnode-address) - :placeholder (i18n/label :t/specify-bootnode-address) - :content qr-code - :style styles/input - :container styles/input-container - :default-value url - :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :url %])}] + [react/view + {:flex 1} + [text-input/text-input-with-label + {:label (i18n/label :t/bootnode-address) + :placeholder (i18n/label :t/bootnode-format) + :content qr-code + :style styles/input + :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 diff --git a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs b/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs index 679522399d..6ee23b4221 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs +++ b/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?] - is-valid? [:mailserver.edit/valid?]] - (let [url (get-in mailserver [:url :value]) - id (get-in mailserver [:id :value]) - name (get-in mailserver [:name :value])] + connected? [:mailserver.edit/connected?] + validation-errors [:mailserver.edit/validation-errors]] + (let [url (get-in mailserver [:url :value]) + id (get-in mailserver [:id :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 - {: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 url - :on-change-text #(re-frame/dispatch [:mailserver.ui/input-changed :url %])}] + [react/view + {:flex 1} + [text-input/text-input-with-label + {:label (i18n/label :t/mailserver-address) + :placeholder (i18n/label :t/mailserver-format) + :content qr-code + :style styles/input + :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 diff --git a/translations/en.json b/translations/en.json index 28adb06c31..c26f3ae0d7 100644 --- a/translations/en.json +++ b/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}" }