status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#19004] Password input cursor is jumping when typing password fast (#19029)

This commit is contained in:
flexsurfer 2024-02-28 15:23:15 +01:00 committed by GitHub
parent bd7ced5f25
commit 26dd51c5da
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 76 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/status_im/common/standard_authentication/password_input/view.cljs
View File

@ -12,7 +12,7 @@
[utils.re-frame :as rf]
[utils.security.core :as security]))
(defn get-error-message
(defn- get-error-message
[error]
(if (and (some? error)
(or (= error "file is not a database")
@ -21,31 +21,62 @@
(i18n/label :t/oops-wrong-password)
error))
(defn- on-change-password
[entered-password]
(debounce/debounce-and-dispatch [:profile/on-password-input-changed
{:password (security/mask-data entered-password)
:error ""}]
100))
(defn- error-info
[error-message processing shell?]
(let [theme (quo.theme/use-theme-value)
on-press (rn/use-callback
(fn []
(rn/dismiss-keyboard!)
(rf/dispatch [:show-bottom-sheet
{:content #(forgot-password-doc/view {:shell? shell?})
:theme theme
:shell? shell?}]))
[theme])]
[rn/view {:style style/error-message}
[quo/info-message
{:type :error
:size :default
:icon :i/info}
error-message]
[rn/pressable
{:hit-slop {:top 6 :bottom 20 :left 0 :right 0}
:disabled processing
:on-press on-press}
[rn/text
{:style {:text-decoration-line :underline
:color (colors/resolve-color :danger theme)}
:size :paragraph-2
:suppress-highlighting true}
(i18n/label :t/forgot-password)]]]))
(defn- view-internal
[{:keys [default-password theme shell? on-press-biometrics blur?]}]
(defn view
[{:keys [shell? on-press-biometrics blur?]}]
(let [{:keys [error processing]} (rf/sub [:profile/login])
error-message (get-error-message error)
error? (boolean (seq error-message))]
error-message (rn/use-memo #(get-error-message error) [error])
error? (boolean (seq error-message))
default-value (rn/use-ref-atom "") ;;bug on Android
;;https://github.com/status-im/status-mobile/issues/19004
on-change-password (rn/use-callback
(fn [entered-password]
(reset! default-value entered-password)
(debounce/debounce-and-dispatch [:profile/on-password-input-changed
{:password (security/mask-data
entered-password)
:error ""}]
100)))]
[:<>
[rn/view {:style {:flex-direction :row}}
[quo/input
{:container-style {:flex 1}
:type :password
:default-value @default-value
:blur? blur?
:disabled? processing
:placeholder (i18n/label :t/type-your-password)
:auto-focus true
:error? error?
:label (i18n/label :t/profile-password)
:on-change-text on-change-password
:default-value (security/safe-unmask-data default-password)}]
:on-change-text on-change-password}]
(when on-press-biometrics
[quo/button
{:container-style style/auth-button
@ -55,26 +86,5 @@
:type :outline}
:i/face-id])]
(when error?
[rn/view {:style style/error-message}
[quo/info-message
{:type :error
:size :default
:icon :i/info}
error-message]
[rn/pressable
{:hit-slop {:top 6 :bottom 20 :left 0 :right 0}
:disabled processing
:on-press (fn []
(rn/dismiss-keyboard!)
(rf/dispatch [:show-bottom-sheet
{:content #(forgot-password-doc/view {:shell? shell?})
:theme theme
:shell? shell?}]))}
[rn/text
{:style {:text-decoration-line :underline
:color (colors/resolve-color :danger theme)}
:size :paragraph-2
:suppress-highlighting true}
(i18n/label :t/forgot-password)]]])]))
[error-info error-message processing shell?])]))
(def view (quo.theme/with-theme view-internal))

70
src/status_im/contexts/profile/profiles/view.cljs
View File

@ -5,7 +5,6 @@
[react-native.core :as rn]
[react-native.reanimated :as reanimated]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent]
[status-im.common.confirmation-drawer.view :as confirmation-drawer]
[status-im.common.standard-authentication.core :as standard-authentication]
[status-im.config :as config]
@ -133,8 +132,8 @@
[:profile.login/login-with-biometric-if-available key-uid])
(when-not keycard-pairing (set-hide-profiles)))}]))
(defn- f-profiles-section
[{:keys [set-hide-profiles]}]
(defn- profiles-section
[{:keys [hide-profiles]}]
(let [profiles (vals (rf/sub [:profile/profiles-overview]))
translate-x (reanimated/use-shared-value @translate-x-atom)]
(rn/use-mount (fn []
@ -165,42 +164,38 @@
:key-fn :key-uid
:content-container-style {:padding-bottom 20}
:render-data {:last-index (dec (count profiles))
:set-hide-profiles set-hide-profiles}
:set-hide-profiles hide-profiles}
:render-fn profile-card}]]))
(defn profiles-section
[props]
[:f> f-profiles-section props])
(defn password-input
[]
(let [password (rf/sub [:profile/login-password])
auth-method (rf/sub [:auth-method])]
(let [auth-method (rf/sub [:auth-method])
on-press-biometrics (when (= auth-method constants/auth-method-biometric)
(rn/use-callback
(fn []
(rf/dispatch [:biometric/authenticate
{:on-success #(rf/dispatch
[:profile.login/biometric-success])
:on-fail #(rf/dispatch
[:profile.login/biometric-auth-fail
%])}]))))]
[standard-authentication/password-input
{:shell? true
:blur? true
:on-press-biometrics (when (= auth-method constants/auth-method-biometric)
(fn []
(rf/dispatch [:biometric/authenticate
{:on-success #(rf/dispatch
[:profile.login/biometric-success])
:on-fail #(rf/dispatch
[:profile.login/biometric-auth-fail
%])}])))
:default-password password}]))
:on-press-biometrics on-press-biometrics}]))
(defn login-section
[{:keys [set-show-profiles]}]
(let [processing (rf/sub [:profile/login-processing])
{:keys [key-uid name customization-color]} (rf/sub [:profile/login-profile])
sign-in-enabled? (rf/sub [:sign-in-enabled?])
profile-picture (rf/sub [:profile/login-profiles-picture key-uid])
login-multiaccount #(rf/dispatch [:profile.login/login])]
[{:keys [show-profiles]}]
(let [processing (rf/sub [:profile/login-processing])
{:keys [key-uid name
customization-color]} (rf/sub [:profile/login-profile])
sign-in-enabled? (rf/sub [:sign-in-enabled?])
profile-picture (rf/sub [:profile/login-profiles-picture key-uid])
login-multiaccount (rn/use-callback #(rf/dispatch [:profile.login/login]))]
[rn/keyboard-avoiding-view
{:style style/login-container
:keyboardVerticalOffset (- (safe-area/get-bottom))}
[rn/view
{:style style/multi-profile-button-container}
[rn/view {:style style/multi-profile-button-container}
(when config/quo-preview-enabled?
[quo/button
{:size 32
@ -217,7 +212,7 @@
:type :grey
:background :blur
:icon-only? true
:on-press set-show-profiles
:on-press show-profiles
:disabled? processing
:accessibility-label :show-profiles}
:i/multi-profile]]
@ -241,16 +236,13 @@
:container-style {:margin-bottom (+ (safe-area/get-bottom) 12)}}
(i18n/label :t/log-in)]]))
;; we had to register it here, because of hotreload, overwise on hotreload it will be reseted
(defonce show-profiles? (reagent/atom false))
(defn view
[]
(let [set-show-profiles #(reset! show-profiles? true)
set-hide-profiles #(reset! show-profiles? false)]
(fn []
[:<>
[background/view true]
(if @show-profiles?
[profiles-section {:set-hide-profiles set-hide-profiles}]
[login-section {:set-show-profiles set-show-profiles}])])))
(let [[show-profiles? set-show-profiles] (rn/use-state false)
show-profiles (rn/use-callback #(set-show-profiles true))
hide-profiles (rn/use-callback #(set-show-profiles false))]
[:<>
[background/view true]
(if show-profiles?
[profiles-section {:hide-profiles hide-profiles}]
[login-section {:show-profiles show-profiles}])]))