Skip to content

Commit

Permalink
chore: move password input to connected component
Browse files Browse the repository at this point in the history
  • Loading branch information
@J-Son89 @pavloburykh
J-Son89 authored and pavloburykh committed Sep 14, 2023
1 parent e908d1c commit 744e937
Show file tree
Hide file tree
Showing 17 changed files with 302 additions and 275 deletions.
3 changes: 1 addition & 2 deletions src/quo2/components/buttons/slide_button/component_spec.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
(ns quo2.components.buttons.slide-button.component-spec
(:require [quo2.components.buttons.slide-button.view :as slide-button]
[quo2.components.buttons.slide-button.constants :as constants]
[quo2.components.buttons.slide-button.utils :as utils]
["@testing-library/react-native" :as rtl]
["react-native-gesture-handler/jest-utils" :as gestures-jest]
[reagent.core :as r]
Expand Down Expand Up @@ -82,7 +81,7 @@
(h/has-style track-mock {:opacity constants/disable-opacity})))

(h/test "render the small button"
(h/render [slide-button/view (assoc default-props :size 40)])
(h/render [slide-button/view (assoc default-props :size :size/s-40)])
(let [mock (h/get-by-test-id :slide-button-track)
small-height (:track-height constants/small-dimensions)]
(h/has-style mock {:height small-height})))
Expand Down
4 changes: 2 additions & 2 deletions src/quo2/components/buttons/slide_button/utils.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@
(defn get-dimensions
[track-width size dimension-key]
(let [default-dimensions (case size
40 constants/small-dimensions
48 constants/large-dimensions
:size/s-40 constants/small-dimensions
:size/s-48 constants/large-dimensions
constants/large-dimensions)]
(-> default-dimensions
(merge {:usable-track (calc-usable-track
Expand Down
2 changes: 1 addition & 1 deletion src/quo2/components/buttons/slide_button/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
- `on-complete` Callback called when the sliding is complete
- `disabled?` Boolean that disables the button
(_and gestures_)
- `size` `40`/`48`
- `size` :size/s-40`/`:size/s-48`
- `track-text` Text that is shown on the track
- `track-icon` Key of the icon shown on the track
(e.g. `:face-id`)
Expand Down
12 changes: 0 additions & 12 deletions src/status_im2/common/standard_authentication/auth_utils.cljs
View file

This file was deleted.

69 changes: 19 additions & 50 deletions src/status_im2/common/standard_authentication/enter_password/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,18 @@
(ns status-im2.common.standard-authentication.enter-password.view
(:require [utils.i18n :as i18n]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[utils.re-frame :as rf]
[status-im2.common.standard-authentication.auth-utils :as auth-utils]
[utils.security.core :as security]
[status-im2.common.standard-authentication.enter-password.style :as style]
[quo2.theme :as quo.theme]))
[status-im2.common.standard-authentication.password-input.view :as password-input]))



(defn- view-internal
[{:keys [theme on-enter-password button-label]}]
(let [entered-password (atom "")
{:keys [key-uid display-name
(defn view
[{:keys [on-enter-password button-label]}]
(let [{:keys [key-uid display-name
customization-color]} (rf/sub [:profile/multiaccount])
{:keys [error processing password]} (rf/sub [:profile/login])
sign-in-enabled? (rf/sub [:sign-in-enabled?])
profile-picture (rf/sub [:profile/login-profiles-picture key-uid])
error (auth-utils/get-error-message error)]
profile-picture (rf/sub [:profile/login-profiles-picture key-uid])]
[:<>
[rn/view {:style style/enter-password-container}
[rn/view
Expand All @@ -31,41 +24,16 @@
(i18n/label :t/enter-password)]
[rn/view
{:style style/context-tag}
[quo/context-tag {} profile-picture display-name]]
[rn/view
[quo/input
{:type :password
:blur? true
:placeholder (i18n/label :t/type-your-password)
:auto-focus true
:show-cancel false
:error? (seq error)
:accessibility-label :password-input
:label (i18n/label :t/profile-password)
:on-change-text (fn [password]
(rf/dispatch [:set-in [:profile/login :password]
(security/mask-data password)])
(reset! entered-password password)
(rf/dispatch [:set-in [:profile/login :error] ""]))}]]
(when (seq error)
[rn/view {:style style/error-message}
[quo/info-message
{:type :error
:size :default
:icon :i/info}
error]
[rn/pressable
{:active-opacity 1
:on-press #(reset! entered-password %)}
[quo/text
{:style {:text-decoration-line :underline
:color (colors/theme-colors
(colors/custom-color :danger 50)
(colors/custom-color :danger 60)
theme)}
:size :paragraph-2
:suppress-highlighting true}
(i18n/label :t/forgot-password)]]])
[quo/context-tag
{:profile-picture profile-picture
:full-name display-name
:customization-color customization-color
:size 24}]]
[password-input/view
{:processing processing
:error error
:default-password password
:sign-in-enabled? sign-in-enabled?}]
[rn/view {:style style/enter-password-button}
[quo/button
{:size 40
Expand All @@ -74,7 +42,8 @@
:accessibility-label :login-button
:icon-left :i/reveal
:disabled? (or (not sign-in-enabled?) processing)
:on-press #(on-enter-password password)}
:on-press (fn []
(rf/dispatch [:set-in [:profile/login :key-uid] key-uid])
(rf/dispatch [:profile.login/verify-database-password password])
(js/setTimeout #(on-enter-password password) 100))}
button-label]]]]]))

(def view (quo.theme/with-theme view-internal))
6 changes: 6 additions & 0 deletions src/status_im2/common/standard_authentication/forgot_password_doc/style.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
(ns status-im2.common.standard-authentication.forgot-password-doc.style)

(def container {:margin-right 16})
(def step-container {:flex-direction :row :margin-top 14})
(def step-content {:margin-left 10})
(def step-title {:flex-direction :row})
52 changes: 52 additions & 0 deletions src/status_im2/common/standard_authentication/forgot_password_doc/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
(ns status-im2.common.standard-authentication.forgot-password-doc.view
(:require [status-im2.common.standard-authentication.forgot-password-doc.style :as style]
[quo2.core :as quo]
[react-native.core :as rn]
[utils.i18n :as i18n]))

(defn view
[{:keys [shell?]}]
[quo/documentation-drawers
{:title (i18n/label :t/forgot-your-password-info-title)
:shell? shell?}
[rn/view
{:style style/container}
[quo/text {:size :paragraph-2} (i18n/label :t/forgot-your-password-info-description)]

[rn/view {:style style/step-container}
[quo/step {:in-blur-view? shell?} 1]
[rn/view
{:style style/step-content}
[quo/text {:size :paragraph-2 :weight :semi-bold}
(i18n/label :t/forgot-your-password-info-remove-app)]
[quo/text {:size :paragraph-2} (i18n/label :t/forgot-your-password-info-remove-app-description)]]]

[rn/view {:style style/step-container}
[quo/step {:in-blur-view? shell?} 2]
[rn/view
{:style style/step-content}
[quo/text {:size :paragraph-2 :weight :semi-bold}
(i18n/label :t/forgot-your-password-info-reinstall-app)]
[quo/text {:size :paragraph-2}
(i18n/label :t/forgot-your-password-info-reinstall-app-description)]]]

[rn/view {:style style/step-container}
[quo/step {:in-blur-view? shell?} 3]
[rn/view
{:style style/step-content}
[rn/view
{:style style/step-title}
[quo/text {:size :paragraph-2} (str (i18n/label :t/sign-up) " ")]
[quo/text {:size :paragraph-2 :weight :semi-bold}
(i18n/label :t/forgot-your-password-info-signup-with-key)]]
[quo/text {:size :paragraph-2}
(i18n/label :t/forgot-your-password-info-signup-with-key-description)]]]

[rn/view {:style style/step-container}
[quo/step {:in-blur-view? shell?} 4]
[rn/view
{:style style/step-content}
[quo/text {:size :paragraph-2 :weight :semi-bold}
(i18n/label :t/forgot-your-password-info-create-new-password)]
[quo/text {:size :paragraph-2}
(i18n/label :t/forgot-your-password-info-create-new-password-description)]]]]])
6 changes: 6 additions & 0 deletions src/status_im2/common/standard_authentication/password_input/style.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
(ns status-im2.common.standard-authentication.password-input.style)

(def error-message
{:margin-top 8
:flex-direction :row
:align-items :center})
70 changes: 70 additions & 0 deletions src/status_im2/common/standard_authentication/password_input/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
(ns status-im2.common.standard-authentication.password-input.view
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[utils.security.core :as security]
[status-im2.common.standard-authentication.password-input.style :as style]
[status-im2.common.standard-authentication.forgot-password-doc.view :as forgot-password-doc]
[quo2.theme :as quo.theme]
[clojure.string :as string]))

(defn get-error-message
[error]
(if (and (some? error)
(or (= error "file is not a database")
(string/starts-with? error "failed to set ")
(string/starts-with? error "Failed")))
(i18n/label :t/oops-wrong-password)
error))

(defn- on-change-password
[entered-password]
(rf/dispatch [:set-in [:profile/login :password]
(security/mask-data entered-password)])
(rf/dispatch [:set-in [:profile/login :error] ""]))

(defn- view-internal
[{:keys [default-password theme shell?]}]
(let [{:keys [error processing]} (rf/sub [:profile/login])
error-message (get-error-message error)
error? (boolean (seq error-message))]
[:<>
[quo/input
{:type :password
:blur? true
: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)}]
(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/theme-colors
(colors/custom-color :danger 50)
(colors/custom-color :danger 60)
theme)}
:size :paragraph-2
:suppress-highlighting true}
(i18n/label :t/forgot-password)]]])]))

(def view (quo.theme/with-theme view-internal))
77 changes: 42 additions & 35 deletions .../common/standard_authentication/view.cljs → ...rd_authentication/standard_auth/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,66 @@
(ns status-im2.common.standard-authentication.view
(ns status-im2.common.standard-authentication.standard-auth.view
(:require
[quo2.core :as quo]
[quo2.theme :as quo.theme]
[reagent.core :as reagent]
[utils.re-frame :as rf]
[react-native.touch-id :as biometric]
[utils.i18n :as i18n]
[status-im2.common.standard-authentication.enter-password.view :as enter-password]
[react-native.core :as rn]))
[quo2.core :as quo]
[quo2.theme :as quo.theme]
[reagent.core :as reagent]
[utils.re-frame :as rf]
[react-native.touch-id :as biometric]
[utils.i18n :as i18n]
[taoensso.timbre :as log]
[status-im2.common.standard-authentication.enter-password.view :as enter-password]
[react-native.core :as rn]))

(defn reset-password
[]
(rf/dispatch [:set-in [:profile/login :password] nil])
(rf/dispatch [:set-in [:profile/login :error] ""]))

(defn authorize
[{:keys [on-enter-password biometric-auth? on-auth-success on-auth-fail fallback-button-label theme
on-close]}]
[{:keys [on-enter-password biometric-auth? on-auth-success on-auth-fail
fallback-button-label theme on-close]}]
(biometric/get-supported-type
(fn [biometric-type]
(if (and biometric-auth? biometric-type)
(biometric/authenticate
{:reason (i18n/label :t/biometric-auth-confirm-message)
:on-success (fn [response]
(on-auth-success)
(js/console.log "response" response))
(when on-auth-success (on-auth-success response))
(log/info "response" response))
:on-fail (fn [error]
(js/console.log "Authentication Failed. Error:" error)
(on-auth-fail)
(log/error "Authentication Failed. Error:" error)
(when on-auth-fail (on-auth-fail error))
(rf/dispatch [:show-bottom-sheet
{:theme theme
:shell? true
:content (fn []
[enter-password/view
{:on-enter-password on-enter-password}])}]))})

(rf/dispatch [:show-bottom-sheet
{:on-close on-close
:theme theme
:content (fn []
[enter-password/view
{:on-enter-password on-enter-password
:button-label fallback-button-label}])}])))))
(do
(reset-password)
(rf/dispatch [:show-bottom-sheet
{:on-close on-close
:theme theme
:content (fn []
[enter-password/view
{:on-enter-password on-enter-password
:button-label fallback-button-label}])}]))))))

(defn- view-internal
[{:keys [biometric-auth?
track-text
customization-color
fallback-button-label
on-enter-password
on-auth-success
on-auth-fail
size
theme]
:or {on-auth-success #() on-auth-fail #()}}]
[_]
(let [reset-slider? (reagent/atom false)
on-close #(reset! reset-slider? true)]
(fn []
(fn [{:keys [biometric-auth?
track-text
customization-color
fallback-button-label
on-enter-password
on-auth-success
on-auth-fail
size
theme]}]
[rn/view {:style {:flex 1}}
[quo/slide-button
{:size size
{:size size
:customization-color customization-color
:on-reset (when @reset-slider? #(reset! reset-slider? false))
:on-complete #(authorize {:on-close on-close
Expand Down
Loading

0 comments on commit 744e937

Please sign in to comment.