Skip to content

Commit

Permalink
feature: change create/change password forms to have max character limit
Browse files Browse the repository at this point in the history
  • Loading branch information
@seanstrom @VolodLytvynenko
seanstrom authored and VolodLytvynenko committed Nov 12, 2024
1 parent ac67753 commit 4b34682
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 66 deletions.
3 changes: 1 addition & 2 deletions src/status_im/common/password_with_hint/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@

(defn view
[{{:keys [text status shown?]} :hint :as input-props}]
(tap> shown?)
[rn/view
[:<>
[quo/input
(-> input-props
(dissoc :hint)
Expand Down
1 change: 1 addition & 0 deletions src/status_im/constants.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@
(def ^:const min-password-length 6)
(def ^:const pincode-length 6)
(def ^:const new-password-min-length 10)
(def ^:const new-password-max-length 100)
(def ^:const max-group-chat-participants 20)
(def ^:const max-group-chat-name-length 24)
(def ^:const default-number-of-messages 20)
Expand Down
69 changes: 29 additions & 40 deletions src/status_im/contexts/onboarding/create_password/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
[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]
[status-im.constants :as constants]
[status-im.contexts.onboarding.create-password.style :as style]
[utils.i18n :as i18n]
Expand All @@ -27,27 +28,9 @@
:size :paragraph-1}
(i18n/label :t/password-creation-subtitle)]])

(defn password-with-hint
[{{:keys [text status shown]} :hint :as input-props}]
[rn/view
[quo/input
(-> input-props
(dissoc :hint)
(assoc :type :password
:blur? true))]
[rn/view {:style style/info-message}
(when shown
[quo/info-message
{:status status
:size :default
:icon (if (= status :success) :i/check-circle :i/info)
:color (when (= status :default)
colors/white-70-blur)}
text])]])

(defn password-inputs
[{:keys [passwords-match? on-change-password on-change-repeat-password on-input-focus
password-long-enough? empty-password? show-password-validation?
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)
Expand All @@ -58,19 +41,24 @@
(not passwords-match?)
(not empty-password?))]
[:<>
[password-with-hint
{:hint {:text (i18n/label :t/password-creation-hint)
:status hint-1-status
:shown true}
[password-with-hint/view
{:hint (if (not password-short-enough?)
{: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
[password-with-hint/view
{:hint {:text hint-2-text
:status hint-2-status
:shown (and (not empty-password?)
:shown? (and (not empty-password?)
show-password-validation?)}
:error? error?
:placeholder (i18n/label :t/password-creation-placeholder-2)
Expand Down Expand Up @@ -100,10 +88,11 @@
utils.string/has-upper-case?
utils.string/has-numbers?
utils.string/has-symbols?
#(utils.string/at-least-n-chars? % constants/new-password-min-length))]
#(utils.string/at-least-n-chars? % constants/new-password-min-length)
#(utils.string/at-most-n-chars? % constants/new-password-max-length))]
(->> password
validations
(zipmap (conj constants/password-tips :long-enough?)))))
(zipmap (conj constants/password-tips :long-enough? :short-enough?)))))

(defn calc-password-strength
[validations]
Expand All @@ -115,12 +104,13 @@
[password]
(rn/use-memo
(fn []
(let [{:keys [long-enough?]
(let [{:keys [long-enough? short-enough?]
:as validations} (validate-password password)]
{:password-long-enough? long-enough?
:password-validations validations
:password-strength (calc-password-strength validations)
:empty-password? (empty? password)}))
{:password-long-enough? long-enough?
:password-short-enough? short-enough?
:password-validations validations
:password-strength (calc-password-strength validations)
:empty-password? (empty? password)}))
[password]))

(defn- use-repeat-password-checks
Expand Down Expand Up @@ -174,20 +164,18 @@


{: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? (rn/use-memo
#(and (not empty-password?)
(utils.string/at-least-n-chars? password
10)
same-passwords?
accepts-disclaimer?)
[password repeat-password
accepts-disclaimer?])]
meet-requirements? (and (not empty-password?)
password-long-enough?
password-short-enough?
same-passwords?
accepts-disclaimer?)]

[floating-button/view
{:header [page-nav]
Expand Down Expand Up @@ -231,6 +219,7 @@
[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?
Expand Down
38 changes: 14 additions & 24 deletions ...atus_im/contexts/profile/settings/screens/password/change_password/new_password_form.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
(:require
[clojure.string :as string]
[quo.core :as quo]
[quo.foundations.colors :as colors]
[react-native.core :as rn]
[status-im.common.password-with-hint.view :as password-with-hint]
[status-im.constants :as constant]
[status-im.contexts.profile.settings.screens.password.change-password.events]
[status-im.contexts.profile.settings.screens.password.change-password.header :as header]
Expand All @@ -13,24 +13,6 @@
[utils.security.core :as security]
[utils.string :as utils.string]))

(defn- password-with-hint
[{{:keys [text status shown?]} :hint :as input-props}]
[:<>
[quo/input
(-> input-props
(dissoc :hint)
(assoc :type :password
:blur? true))]
[rn/view {:style style/info-message}
(when shown?
[quo/info-message
(cond-> {:status status
:size :default}
(not= :success status) (assoc :icon :i/info)
(= :success status) (assoc :icon :i/check-circle)
(= :default status) (assoc :color colors/white-70-blur))
text])]])

(defn- calc-password-strength
[validations]
(->> (vals validations)
Expand Down Expand Up @@ -76,11 +58,15 @@
long-enough? (utils.string/at-least-n-chars?
password
constant/new-password-min-length)
short-enough? (utils.string/at-most-n-chars?
password
constant/new-password-max-length)
empty-password? (string/blank? password)
same-passwords? (and (not empty-password?)
(= password repeat-password))
meet-requirements? (and (not empty-password?)
long-enough?
short-enough?
same-passwords?
disclaimer-accepted?)
error? (and show-validation?
Expand Down Expand Up @@ -115,17 +101,21 @@
[:<>
[rn/scroll-view {:style style/form-container}
[header/view]
[password-with-hint
{:hint {:text (i18n/label :t/password-creation-hint)
:status (if long-enough? :success :default)
:shown? true}
[password-with-hint/view
{:hint (if (not short-enough?)
{:text (i18n/label :t/password-creation-max-length-hint)
:status :error
:shown? true}
{:text (i18n/label :t/password-creation-hint)
:status (if long-enough? :success :default)
:shown? true})
:placeholder (i18n/label :t/change-password-new-password-placeholder)
:label (i18n/label :t/change-password-new-password-label)
:on-change-text on-change-password
:on-focus on-input-focus
:auto-focus true}]
[rn/view {:style style/space-between-inputs}]
[password-with-hint
[password-with-hint/view
{:hint {:text (if same-passwords?
(i18n/label :t/password-creation-match)
(i18n/label :t/password-creation-dont-match))
Expand Down
4 changes: 4 additions & 0 deletions src/utils/string.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@
[s n]
(>= (count s) n))

(defn at-most-n-chars?
[s n]
(<= (count s) n))

(defn safe-trim
[s]
(when (string? s)
Expand Down
1 change: 1 addition & 0 deletions translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1900,6 +1900,7 @@
"password-creation-dont-match": "Passwords do not match",
"password-creation-hint": "Minimum 10 characters",
"password-creation-match": "Passwords match",
"password-creation-max-length-hint": "Maximum 100 characters",
"password-creation-placeholder-1": "Type password",
"password-creation-placeholder-2": "Repeat password",
"password-creation-subtitle": "To log in to Status and sign transactions",
Expand Down

0 comments on commit 4b34682

Please sign in to comment.