diff --git a/src/status_im/common/standard_authentication/password_input/view.cljs b/src/status_im/common/standard_authentication/password_input/view.cljs index bba900585c..cc16501317 100644 --- a/src/status_im/common/standard_authentication/password_input/view.cljs +++ b/src/status_im/common/standard_authentication/password_input/view.cljs @@ -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)) diff --git a/src/status_im/contexts/profile/profiles/view.cljs b/src/status_im/contexts/profile/profiles/view.cljs index 16fb76d53f..9818c09b1e 100644 --- a/src/status_im/contexts/profile/profiles/view.cljs +++ b/src/status_im/contexts/profile/profiles/view.cljs @@ -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}])]))