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>
Mohamed Javid
GitHub
|
Before Width: | Height: | Size: 944 B After Width: | Height: | Size: 838 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.5 KiB |
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,19 +1,7 @@
|
|||
(ns status-im2.contexts.onboarding.create-password.style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def image-background
|
||||
{: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 flex-fill {:flex 1})
|
||||
|
||||
(def heading {:margin-bottom 20})
|
||||
(def heading-subtitle {:color colors/white})
|
||||
|
|
|
|||
|
|
@ -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 []
|
||||
(scroll-to-end-fn)
|
||||
(reset! focused-input :password))
|
||||
:on-input-focus #(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}
|
||||
[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)]]
|
||||
|
||||
(when (= @focused-input :password)
|
||||
(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)]])
|
||||
(when (and (= @focused-input :password) (not same-passwords?))
|
||||
[help
|
||||
{:validations validations
|
||||
:password-strength password-strength}])
|
||||
|
|
@ -196,25 +196,45 @@
|
|||
(i18n/label
|
||||
:t/create-profile-password-info-box-description)]]])
|
||||
|
||||
(defn- f-create-password
|
||||
[]
|
||||
(let [keyboard-shown? (reagent/atom false)
|
||||
{:keys [top bottom]} (safe-area/get-insets)]
|
||||
(fn []
|
||||
(rn/use-effect
|
||||
(let [will-show-listener (ocall rn/keyboard
|
||||
"addListener"
|
||||
"keyboardWillShow"
|
||||
#(reset! keyboard-shown? true))
|
||||
will-hide-listener (ocall rn/keyboard
|
||||
"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 (fn []
|
||||
(rn/dismiss-keyboard!)
|
||||
(rf/dispatch [:show-bottom-sheet
|
||||
{:content create-password-doc
|
||||
:shell? true}]))}]}]
|
||||
[password-form]
|
||||
[rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]])))
|
||||
|
||||
(defn create-password
|
||||
[]
|
||||
(let [scroll-view-ref (atom nil)
|
||||
scroll-to-end-fn #(js/setTimeout ^js/Function (.-scrollToEnd @scroll-view-ref) 250)]
|
||||
(fn []
|
||||
(let [{:keys [top]} (safe-area/get-insets)]
|
||||
[:<>
|
||||
[background/view true]
|
||||
[rn/scroll-view
|
||||
{:ref #(reset! scroll-view-ref %)
|
||||
:style style/overlay
|
||||
:content-container-style style/content-style}
|
||||
[navigation-bar/navigation-bar
|
||||
{:top top
|
||||
:right-section-buttons [{:type :blur-bg
|
||||
:icon :i/info
|
||||
:icon-override-theme :dark
|
||||
:on-press #(rf/dispatch
|
||||
[:show-bottom-sheet
|
||||
{:content create-password-doc
|
||||
:shell? true}])}]}]
|
||||
[password-form {:scroll-to-end-fn scroll-to-end-fn}]]]))))
|
||||
[:<>
|
||||
[background/view true]
|
||||
[:f> f-create-password]])
|
||||
|
|
|
|||
|
|
@ -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):
|
||||
|
|
|
|||