Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#21567] - Remove steps to set up profile on new profile creation #21715

Merged
merged 16 commits into from
Dec 9, 2024
Merged

[#21567] - Remove steps to set up profile on new profile creation #21715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
a4ff039
Remove password disclaimer, update copy and simplify implementation
ulisesmac Nov 29, 2024
443a4e4
Remove non-existing wallet event
ulisesmac Nov 29, 2024
6f3a136
Skip profile configuration for the "create profile" onboarding flow
ulisesmac Nov 29, 2024
01d3754
Include flow for new profiles when another profile already exists
ulisesmac Nov 29, 2024
a5202bb
Add explanation about temp username
ulisesmac Nov 30, 2024
d41d36b
Point 20 to a constant
ulisesmac Nov 30, 2024
3a74436
Simplify create profile password screen
ulisesmac Nov 30, 2024
da609f7
Fix password creation screen jump on mount
ulisesmac Nov 30, 2024
4ce1ff6
Simplify call
ulisesmac Dec 2, 2024
e5db917
renaming
ulisesmac Dec 2, 2024
b12bab6
Lint fix
ulisesmac Dec 2, 2024
9f05096
Dissoc key instead of assoc-ing nil
ulisesmac Dec 3, 2024
3a7c2af
e2e: updated tests
yevh-berdnyk Dec 6, 2024
8e04398
Completely remove the "create profile" onboarding screen
ulisesmac Dec 6, 2024
94002c0
e2e: updated tests with recovering user
yevh-berdnyk Dec 9, 2024
17c0923
Merge branch 'develop' into 21567-remove-profile-and-color-onboarding
ulisesmac Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/status_im/common/floating_button_page/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,17 @@
(defn view
[{:keys [header footer customization-color footer-container-padding header-container-style
content-container-style gradient-cover? keyboard-should-persist-taps shell-overlay?
blur-options content-avoid-keyboard? automatically-adjust-keyboard-insets]
blur-options content-avoid-keyboard? automatically-adjust-keyboard-insets
;; Note: Provide `initial-header-height` to avoid a jump due to the on-layout 1-frame
;; delay. Revisit this on RN 0.76 since the on-layout delay has been fixed.
initial-header-height]
:or {footer-container-padding (safe-area/get-top)}}
& children]
(reagent/with-let [scroll-view-ref (atom nil)
set-scroll-ref #(reset! scroll-view-ref %)
window-height (:height (rn/get-window))
footer-container-height (reagent/atom 0)
header-height (reagent/atom 0)
header-height (reagent/atom nil)
content-container-height (reagent/atom 0)
ulisesmac marked this conversation as resolved.
Show resolved Hide resolved
content-scroll-y (reagent/atom 0)
keyboard-height (reagent/atom 0)
Expand Down Expand Up @@ -112,7 +115,7 @@
{:style
(if content-avoid-keyboard?
(style/content-keyboard-avoiding-view
{:top @header-height
{:top (or @header-height initial-header-height)
:bottom (if keyboard-shown?
@footer-container-height
(+ bottom-safe-area @footer-container-height))})
Expand Down
9 changes: 5 additions & 4 deletions src/status_im/common/validation/password.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,10 @@
:long-enough?
:short-enough?)))))

(def password-tip? (set constants/password-tips))

(defn strength
[validations]
(->> (select-keys validations constants/password-tips)
(vals)
(filter true?)
count))
(->> validations
(filter #(and (password-tip? (key %)) (val %)))
(count)))
4 changes: 2 additions & 2 deletions src/status_im/contexts/centralized_metrics/tracking_test.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@
{:eventName "navigation"
:platform platform-os
:appVersion app-version
:eventValue {:viewId "onboarding.create-profile-info"}}}]
(tracking/track-view-id-event :screen/onboarding.create-profile)))
:eventValue {:viewId "onboarding.create-profile-password"}}}]
(tracking/track-view-id-event :screen/onboarding.create-profile-password)))
(is (= [] (tracking/track-view-id-event :unknown-stack)))))

(deftest tracked-event-test
Expand Down
17 changes: 15 additions & 2 deletions src/status_im/contexts/onboarding/create_password/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
(ns status-im.contexts.onboarding.create-password.style
(:require
[quo.foundations.colors :as colors]))
[quo.foundations.colors :as colors]
[react-native.platform :as platform]))

(def heading {:margin-bottom 20})
(def heading-subtitle {:color colors/white})
Expand All @@ -21,6 +22,18 @@
:padding-top 12
:padding-horizontal 20})

(def disclaimer-container {:padding-horizontal 20})
(def footer-container {:padding-bottom 12})
(def footer-button-container {:margin-top 20 :padding-horizontal 20})

(def blur-options
{:blur-amount 34
:blur-radius 20
:blur-type :transparent
:overlay-color :transparent
:background-color (if platform/android?
colors/neutral-100
colors/neutral-80-opa-1-blur)
:padding-vertical 0
:padding-horizontal 0})

(def page-nav-height 56)
238 changes: 107 additions & 131 deletions src/status_im/contexts/onboarding/create_password/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
(ns status-im.contexts.onboarding.create-password.view
(:require
[quo.core :as quo]
[quo.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.platform :as platform]
[react-native.safe-area :as safe-area]
[status-im.common.floating-button-page.view :as floating-button]
[status-im.common.password-with-hint.view :as password-with-hint]
Expand All @@ -29,78 +27,88 @@
(i18n/label :t/password-creation-subtitle)]])

(defn password-inputs
[{:keys [passwords-match? on-change-password on-change-repeat-password on-input-focus
password-long-enough? password-short-enough? empty-password? show-password-validation?
on-blur-repeat-password]}]
(let [hint-1-status (if password-long-enough? :success :default)
hint-2-status (if passwords-match? :success :error)
hint-2-text (if passwords-match?
(i18n/label :t/password-creation-match)
(i18n/label :t/password-creation-dont-match))
error? (and show-password-validation?
(not passwords-match?)
(not empty-password?))]
[{:keys [set-password set-repeat-password same-password-length? same-passwords?
password-long-enough? password-short-enough? non-empty-password?]}]
(let [[show-validation?
set-show-validation?] (rn/use-state false)
on-change-password (rn/use-callback
(fn [new-value]
(set-password new-value)
(when same-password-length?
(set-show-validation? true)))
[same-password-length?])
on-change-repeat-password (rn/use-callback
(fn [new-value]
(set-repeat-password new-value)
(when same-password-length?
(set-show-validation? true)))
[same-password-length?])
on-blur-repeat-password (rn/use-callback
#(set-show-validation? non-empty-password?)
[non-empty-password?])
hint-1-status (if password-long-enough? :success :default)
hint-2-status (if same-passwords? :success :error)
hint-2-text (if same-passwords?
(i18n/label :t/password-creation-match)
(i18n/label :t/password-creation-dont-match))
error? (and show-validation?
(not same-passwords?)
non-empty-password?)]
[:<>
[password-with-hint/view
{:hint (if (not password-short-enough?)
{:text (i18n/label
:t/password-creation-max-length-hint)
{:text (i18n/label :t/password-creation-max-length-hint)
:status :error
:shown? true}
{:text (i18n/label :t/password-creation-hint)
:status hint-1-status
:shown? true})
:placeholder (i18n/label :t/password-creation-placeholder-1)
:on-change-text on-change-password
:on-focus on-input-focus
:auto-focus true}]
[rn/view {:style style/space-between-inputs}]
[password-with-hint/view
{:hint {:text hint-2-text
:status hint-2-status
:shown? (and (not empty-password?)
show-password-validation?)}
:shown? (and non-empty-password? show-validation?)}
:error? error?
:placeholder (i18n/label :t/password-creation-placeholder-2)
:on-change-text on-change-repeat-password
:on-focus on-input-focus
:on-blur on-blur-repeat-password}]]))

(defn help
[{{:keys [lower-case? upper-case? numbers? symbols?]} :validations
password-strength :password-strength}]
[rn/view
[quo/strength-divider {:type (constants/strength-status password-strength :info)}
(i18n/label :t/password-creation-tips-title)]
[rn/view {:style style/password-tips}
[quo/tips {:completed? lower-case?}
(i18n/label :t/password-creation-tips-1)]
[quo/tips {:completed? upper-case?}
(i18n/label :t/password-creation-tips-2)]
[quo/tips {:completed? numbers?}
(i18n/label :t/password-creation-tips-3)]
[quo/tips {:completed? symbols?}
(i18n/label :t/password-creation-tips-4)]]])
[{:keys [lower-case? upper-case? numbers? symbols?] :as validations}]
(let [password-strength (constants/strength-status (password/strength validations) :info)]
[rn/view
[quo/strength-divider {:type password-strength}
(i18n/label :t/password-creation-tips-title)]
[rn/view {:style style/password-tips}
[quo/tips {:completed? lower-case?}
(i18n/label :t/password-creation-tips-1)]
[quo/tips {:completed? upper-case?}
(i18n/label :t/password-creation-tips-2)]
[quo/tips {:completed? numbers?}
(i18n/label :t/password-creation-tips-3)]
[quo/tips {:completed? symbols?}
(i18n/label :t/password-creation-tips-4)]]]))

(defn- use-password-checks
[password]
(rn/use-memo
(fn []
(let [{:keys [long-enough? short-enough?]
:as validations} (password/validate password)]
{:password-long-enough? long-enough?
:password-short-enough? short-enough?
:password-validations validations
:password-strength (password/strength validations)
:empty-password? (empty? password)}))
(-> password
(password/validate)
(assoc :non-empty? (seq password))))
ulisesmac marked this conversation as resolved.
Show resolved Hide resolved
[password]))

(defn- use-repeat-password-checks
[password repeat-password]
(rn/use-memo
(fn []
{:same-password-length? (and (seq password) (= (count password) (count repeat-password)))
:same-passwords? (and (seq password) (= password repeat-password))})
{:same-password-length? (and (seq password)
(= (count password) (count repeat-password)))
:same-passwords? (and (seq password)
(= password repeat-password))})
[password repeat-password]))

(defn create-password-doc
Expand All @@ -119,102 +127,70 @@
{:content create-password-doc
:shell? true}]))

(defn- navigate-back
[]
(rf/dispatch [:navigate-back]))
(defn- navigate-back [] (rf/dispatch [:navigate-back]))

(defn- page-nav
[]
(let [{:keys [top]} (safe-area/get-insets)]
[quo/page-nav
{:margin-top top
:background :blur
:icon-name :i/arrow-left
:on-press navigate-back
:right-side [{:icon-name :i/info
:on-press on-press-info}]}]))
[top]
[quo/page-nav
{:margin-top top
:background :blur
:icon-name :i/arrow-left
:on-press navigate-back
:right-side [{:icon-name :i/info
:on-press on-press-info}]}])

(defn- help-and-confirm-button
[{:keys [password-validations same-passwords? on-submit]}]
(let [{customization-color :color} (rf/sub [:onboarding/profile])
all-requirements-met? (and (:non-empty? password-validations)
(:long-enough? password-validations)
(:short-enough? password-validations)
same-passwords?)]
[rn/view {:style style/footer-container}
ulisesmac marked this conversation as resolved.
Show resolved Hide resolved
[help password-validations]
[quo/button
{:container-style style/footer-button-container
:disabled? (not all-requirements-met?)
:customization-color customization-color
:on-press on-submit}
(i18n/label :t/password-creation-confirm)]]))

(defn- on-confirm-password
[password]
(rf/dispatch [:onboarding/password-set (security/mask-data password)]))

(defn create-password
[]
(let [[password set-password] (rn/use-state "")
[repeat-password set-repeat-password] (rn/use-state "")
[accepts-disclaimer? set-accepts-disclaimer?] (rn/use-state false)
[focused-input set-focused-input] (rn/use-state nil)
[show-password-validation?
set-show-password-validation?] (rn/use-state false)
{user-color :color} (rf/sub [:onboarding/profile])


{:keys [password-long-enough?
password-short-enough?
password-validations password-strength
empty-password?]} (use-password-checks password)

{:keys [same-password-length? same-passwords?]} (use-repeat-password-checks password
repeat-password)

meet-requirements? (and (not empty-password?)
password-long-enough?
password-short-enough?
same-passwords?
accepts-disclaimer?)]

(let [[password set-password] (rn/use-state "")
[repeat-password
set-repeat-password] (rn/use-state "")
{:keys [long-enough? short-enough? non-empty?]
:as password-validations} (use-password-checks password)
{:keys [same-password-length?
same-passwords?]} (use-repeat-password-checks password repeat-password)
on-submit (rn/use-callback
#(on-confirm-password password)
[password])
top (safe-area/get-top)]
[floating-button/view
{:header [page-nav]
:keyboard-should-persist-taps :handled
:content-avoid-keyboard? true
{:header [page-nav top]
:initial-header-height (+ style/page-nav-height top)
:keyboard-should-persist-taps :handled
:content-avoid-keyboard? true
:automatically-adjust-keyboard-insets true
:blur-options
{:blur-amount 34
:blur-radius 20
:blur-type :transparent
:overlay-color :transparent
:background-color (if platform/android? colors/neutral-100 colors/neutral-80-opa-1-blur)
:padding-vertical 0
:padding-horizontal 0}
:footer-container-padding 0
:footer
[rn/view
{:style style/footer-container}
(when same-passwords?
[rn/view {:style style/disclaimer-container}
[quo/disclaimer
{:blur? true
:on-change (partial set-accepts-disclaimer? not)
:checked? accepts-disclaimer?
:customization-color user-color}
(i18n/label :t/password-creation-disclaimer)]])
(when (and (= focused-input :password) (not same-passwords?))
[help
{:validations password-validations
:password-strength password-strength}])
[quo/button
{:container-style style/footer-button-container
:disabled? (not meet-requirements?)
:customization-color user-color
:on-press #(rf/dispatch
[:onboarding/password-set
(security/mask-data password)])}
(i18n/label :t/password-creation-confirm)]]}

:blur-options style/blur-options
:footer-container-padding 0
:footer [help-and-confirm-button
{:password-validations password-validations
:same-passwords? same-passwords?
:on-submit on-submit}]}
[rn/view {:style style/form-container}
[header]
[password-inputs
{:password-long-enough? password-long-enough?
:password-short-enough? password-short-enough?
:passwords-match? same-passwords?
:empty-password? empty-password?
:show-password-validation? show-password-validation?
:on-input-focus #(set-focused-input :password)
ulisesmac marked this conversation as resolved.
Show resolved Hide resolved
:on-change-password (fn [new-value]
(set-password new-value)
(when same-password-length?
(set-show-password-validation? true)))

:on-change-repeat-password (fn [new-value]
(set-repeat-password new-value)
(when same-password-length?
(set-show-password-validation? true)))
:on-blur-repeat-password #(if empty-password?
(set-show-password-validation? false)
(set-show-password-validation? true))}]]]))
{:password-long-enough? long-enough?
:password-short-enough? short-enough?
:non-empty-password? non-empty?
:same-passwords? same-passwords?
:same-password-length? same-password-length?
:set-password set-password
:set-repeat-password set-repeat-password}]]]))
ulisesmac marked this conversation as resolved.
Show resolved Hide resolved
Loading