Design Feedbacks on "Create profile password" screen (#15863)

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
Co-authored-by: pavloburykh <pavlo@status.im>

src/quo2/components/inputs/input/style.cljs

@@ -8,7 +8,7 @@
     {:label         (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
      :icon          (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme)
      :button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
-     :password-icon (colors/theme-colors colors/neutral-100 colors/white override-theme)
+     :password-icon (colors/theme-colors colors/neutral-100 colors/white-opa-70 override-theme)
      :clear-icon    (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
      :cursor        (colors/theme-colors (colors/custom-color :blue 50)
                                          colors/white

src/status_im2/contexts/onboarding/create_password/style.cljs

@@ -1,19 +1,7 @@
 (ns status-im2.contexts.onboarding.create-password.style
   (:require [quo2.foundations.colors :as colors]))
 
-(def image-background
+(def flex-fill {:flex 1})
-  {:height "100%"
-   :width  "100%"})
-
-(def overlay
-  {:position         :absolute
-   :top              0
-   :bottom           0
-   :left             0
-   :right            0
-   :background-color colors/neutral-80-opa-80-blur})
-
-(def content-style {:flex-grow 1})
 
 (def heading {:margin-bottom 20})
 (def heading-subtitle {:color colors/white})

src/status_im2/contexts/onboarding/create_password/view.cljs

@@ -1,5 +1,6 @@
 (ns status-im2.contexts.onboarding.create-password.view
   (:require
+    [oops.core :refer [ocall]]
     [quo2.core :as quo]
     [quo2.foundations.colors :as colors]
     [react-native.core :as rn]
@@ -66,7 +67,8 @@
                         :shown  true}
        :placeholder    (i18n/label :t/password-creation-placeholder-1)
        :on-change-text on-change-password
-       :on-focus       on-input-focus}]
+       :on-focus       on-input-focus
+       :auto-focus     true}]
      [rn/view {:style style/space-between-inputs}]
      [password-with-hint
       {:hint           {:text   hint-2-text
@@ -120,7 +122,7 @@
        (count)))
 
 (defn password-form
-  [{:keys [scroll-to-end-fn]}]
+  []
   (let [password                  (reagent/atom "")
         repeat-password           (reagent/atom "")
         accepts-disclaimer?       (reagent/atom false)
@@ -134,7 +136,7 @@
              :as   validations} (password-validations @password)
             password-strength   (calc-password-strength validations)
             empty-password?     (empty? @password)
-            same-passwords?     (= @password @repeat-password)
+            same-passwords?     (and (not empty-password?) (= @password @repeat-password))
             meet-requirements?  (and (not empty-password?)
                                      (utils.string/at-least-n-chars? @password 10)
                                      same-passwords?
@@ -147,9 +149,7 @@
             :passwords-match?          same-passwords?
             :empty-password?           empty-password?
             :show-password-validation? @show-password-validation?
-            :on-input-focus            (fn []
+            :on-input-focus            #(reset! focused-input :password)
-                                         (scroll-to-end-fn)
-                                         (reset! focused-input :password))
             :on-change-password        (fn [new-value]
                                          (reset! password new-value)
                                          (when (same-password-length?)
@@ -163,14 +163,14 @@
                                           (reset! show-password-validation? true))}]]
 
          [rn/view {:style style/bottom-part}
+          (when same-passwords?
             [rn/view {:style style/disclaimer-container}
              [quo/disclaimer
               {:blur?     true
                :on-change #(swap! accepts-disclaimer? not)
                :checked?  @accepts-disclaimer?}
-            (i18n/label :t/password-creation-disclaimer)]]
+              (i18n/label :t/password-creation-disclaimer)]])
-
+          (when (and (= @focused-input :password) (not same-passwords?))
-          (when (= @focused-input :password)
             [help
              {:validations       validations
               :password-strength password-strength}])
@@ -196,25 +196,45 @@
      (i18n/label
       :t/create-profile-password-info-box-description)]]])
 
-(defn create-password
+(defn- f-create-password
   []
-  (let [scroll-view-ref  (atom nil)
+  (let [keyboard-shown?      (reagent/atom false)
-        scroll-to-end-fn #(js/setTimeout ^js/Function (.-scrollToEnd @scroll-view-ref) 250)]
+        {:keys [top bottom]} (safe-area/get-insets)]
     (fn []
-      (let [{:keys [top]} (safe-area/get-insets)]
+      (rn/use-effect
-        [:<>
+       (let [will-show-listener (ocall rn/keyboard
-         [background/view true]
+                                       "addListener"
-         [rn/scroll-view
+                                       "keyboardWillShow"
-          {:ref                     #(reset! scroll-view-ref %)
+                                       #(reset! keyboard-shown? true))
-           :style                   style/overlay
+             will-hide-listener (ocall rn/keyboard
-           :content-container-style style/content-style}
+                                       "addListener"
+                                       "keyboardWillHide"
+                                       #(reset! keyboard-shown? false))]
+         (fn []
+           (fn []
+             (ocall will-show-listener "remove")
+             (ocall will-hide-listener "remove"))))
+       [])
+      [rn/touchable-without-feedback
+       {:on-press   rn/dismiss-keyboard!
+        :accessible false}
+       [rn/view {:style style/flex-fill}
+        [rn/keyboard-avoiding-view {:style style/flex-fill}
          [navigation-bar/navigation-bar
           {:top                   top
            :right-section-buttons [{:type                :blur-bg
                                     :icon                :i/info
                                     :icon-override-theme :dark
-                                     :on-press            #(rf/dispatch
+                                    :on-press            (fn []
-                                                            [:show-bottom-sheet
+                                                           (rn/dismiss-keyboard!)
+                                                           (rf/dispatch [:show-bottom-sheet
                                                                          {:content create-password-doc
-                                                              :shell?  true}])}]}]
+                                                                          :shell?  true}]))}]}]
-          [password-form {:scroll-to-end-fn scroll-to-end-fn}]]]))))
+         [password-form]
+         [rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]])))
+
+(defn create-password
+  []
+  [:<>
+   [background/view true]
+   [:f> f-create-password]])

test/appium/views/sign_in_view.py

@@ -207,7 +207,7 @@ class SignInView(BaseView):
         self.profile_repeat_password_edit_box.click()
         self.profile_repeat_password_edit_box.send_keys(password)
         self.checkbox_button.scroll_to_element()
-        self.checkbox_button.double_click()
+        self.checkbox_button.click()
         self.profile_confirm_password_button.click()
 
     def set_profile(self, username: str, set_image=False):