Standardized in-app authentication (#16916)

* chore: move password input to connected component
---------

Co-authored-by: Jamie Caprani <jamiecaprani@gmail.com>
Co-authored-by: frank <lovefree103@gmail.com>

src/quo2/components/buttons/slide_button/animations.cljs

@@ -70,7 +70,7 @@
   [sliding-complete?]
   (reset! sliding-complete? true))
 
-(defn- reset-track-position
+(defn reset-track-position
   [x-pos]
   (animate-spring x-pos 0))
 

src/quo2/components/buttons/slide_button/component_spec.cljs

@@ -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]
@@ -82,17 +81,11 @@
       (h/has-style track-mock {:opacity constants/disable-opacity})))
 
   (h/test "render the small button"
-    (h/render [slide-button/view (assoc default-props :size :small)])
+    (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})))
 
-  (h/test "render with the correct customization-color"
-    (h/render [slide-button/view (assoc default-props :customization-color :purple)])
-    (let [track-mock   (h/get-by-test-id :slide-button-track)
-          purple-color (utils/slider-color :track :purple)]
-      (h/has-style track-mock {:backgroundColor purple-color})))
-
   (h/test
     "calls on-complete when dragged"
     (let [props          (merge default-props {:on-complete (h/mock-fn)})

src/quo2/components/buttons/slide_button/style.cljs

@@ -13,10 +13,10 @@
    :right    0})
 
 (defn thumb-container
-  [interpolate-track thumb-size customization-color]
+  [{:keys [interpolate-track thumb-size customization-color theme]}]
   (reanimated/apply-animations-to-style
    {:transform [{:translate-x (interpolate-track :track-clamp)}]}
-   {:background-color (utils/slider-color :main customization-color)
+   {:background-color (utils/slider-color :main customization-color theme)
     :border-radius    12
     :height           thumb-size
     :width            thumb-size
@@ -46,15 +46,15 @@
     :justify-content :space-around}))
 
 (defn track
-  [disabled? customization-color height]
+  [{:keys [disabled? customization-color height theme]}]
   {:align-items      :flex-start
    :justify-content  :center
    :border-radius    14
    :height           height
    :align-self       :stretch
    :padding          constants/track-padding
    :opacity          (if disabled? 0.3 1)
-   :background-color (utils/slider-color :track customization-color)})
+   :background-color (utils/slider-color :track customization-color theme)})
 
 (defn track-cover
   [interpolate-track]
@@ -74,7 +74,7 @@
    :width           track-width})
 
 (defn track-text
-  [customization-color]
+  [customization-color theme]
   (-> typography/paragraph-1
       (merge typography/font-medium)
-      (assoc :color (utils/slider-color :main customization-color))))
+      (assoc :color (utils/slider-color :main customization-color theme))))

src/quo2/components/buttons/slide_button/utils.cljs

@@ -6,9 +6,15 @@
 (defn slider-color
   "- `color-key`               `:main`/`:track`
    - `customization-color` Customization color"
-  [color-key customization-color]
-  (let [colors-by-key {:main  (colors/custom-color-by-theme customization-color 50 60)
-                       :track (colors/custom-color-by-theme customization-color 50 60 10 10)}]
+  [color-key customization-color theme]
+  (let [colors-by-key {:main  (colors/theme-colors
+                               (colors/custom-color customization-color 50)
+                               (colors/custom-color customization-color 60)
+                               theme)
+                       :track (colors/theme-colors
+                               (colors/custom-color customization-color 50 10)
+                               (colors/custom-color customization-color 60 10)
+                               theme)}]
     (color-key colors-by-key)))
 
 (defn clamp-value
@@ -28,8 +34,8 @@
 (defn get-dimensions
   [track-width size dimension-key]
   (let [default-dimensions (case size
-                             :small constants/small-dimensions
-                             :large 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

src/quo2/components/buttons/slide_button/view.cljs

@@ -10,7 +10,8 @@
     [reagent.core :as reagent]
     [oops.core :as oops]
     [react-native.reanimated :as reanimated]
-    [quo2.components.buttons.slide-button.constants :as constants]))
+    [quo2.components.buttons.slide-button.constants :as constants]
+    [quo2.theme :as quo.theme]))
 
 (defn- f-slider
   [{:keys [disabled?]}]
@@ -20,14 +21,15 @@
         on-track-layout    (fn [evt]
                              (let [width (oops/oget evt "nativeEvent.layout.width")]
                                (reset! track-width width)))]
-
-    (fn [{:keys [on-complete
+    (fn [{:keys [on-reset
+                 on-complete
                  track-text
                  track-icon
                  disabled?
                  customization-color
                  size
-                 container-style]}]
+                 container-style
+                 theme]}]
       (let [x-pos             (reanimated/use-shared-value 0)
             dimensions        (partial utils/get-dimensions
                                        (or @track-width constants/default-width)
@@ -36,12 +38,19 @@
                                        x-pos
                                        (dimensions :usable-track)
                                        (dimensions :thumb))]
-
         (rn/use-effect (fn []
                          (when @sliding-complete?
                            (on-complete)))
                        [@sliding-complete?])
 
+        (rn/use-effect (fn []
+                         (when on-reset
+                           (reset! sliding-complete? false)
+                           (reset! gestures-disabled? false)
+                           (animations/reset-track-position x-pos)
+                           (on-reset)))
+                       [on-reset])
+
         [gesture/gesture-detector
          {:gesture (animations/drag-gesture x-pos
                                             gestures-disabled?
@@ -50,21 +59,25 @@
                                             sliding-complete?)}
          [reanimated/view
           {:test-ID   :slide-button-track
-           :style     (merge (style/track disabled? customization-color (dimensions :track-height))
+           :style     (merge (style/track {:disabled?           disabled?
+                                           :customization-color customization-color
+                                           :height              (dimensions :track-height)
+                                           :theme               theme})
                              container-style)
            :on-layout (when-not (some? @track-width)
                         on-track-layout)}
           [reanimated/view {:style (style/track-cover interpolate-track)}
            [rn/view {:style (style/track-cover-text-container @track-width)}
             [icon/icon track-icon
-             {:color (utils/slider-color :main customization-color)
+             {:color (utils/slider-color :main customization-color theme)
               :size  20}]
             [rn/view {:width 4}]
-            [rn/text {:style (style/track-text customization-color)} track-text]]]
+            [rn/text {:style (style/track-text customization-color theme)} track-text]]]
           [reanimated/view
-           {:style (style/thumb-container interpolate-track
-                                          (dimensions :thumb)
-                                          customization-color)}
+           {:style (style/thumb-container {:interpolate-track   interpolate-track
+                                           :thumb-size          (dimensions :thumb)
+                                           :customization-color customization-color
+                                           :theme               theme})}
            [reanimated/view {:style (style/arrow-icon-container interpolate-track)}
             [icon/icon :arrow-right
              {:color colors/white
@@ -76,16 +89,19 @@
              {:color colors/white
               :size  20}]]]]]))))
 
-(defn view
+(defn- view-internal
   "Options
   - `on-complete`         Callback called when the sliding is complete
   - `disabled?`           Boolean that disables the button
                           (_and gestures_)
-  - `size`                `:small`/`:large`
+  - `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`)
   - `customization-color` Customization color
+  - `on-reset`            A callback which can be used to reset the component and run required functionality
   "
   [props]
   [:f> f-slider props])
+
+(def view (quo.theme/with-theme view-internal))

src/react_native/touch_id.cljs

@@ -15,5 +15,5 @@
 (defn authenticate
   [{:keys [on-success on-fail reason options]}]
   (-> (.authenticate ^js touchid reason (clj->js options))
-      (.then #(when on-success (on-success)))
+      (.then #(when on-success (on-success %)))
       (.catch #(when on-fail (on-fail (aget % "code"))))))

src/status_im2/common/bottom_sheet/view.cljs

@@ -17,6 +17,7 @@
 
 (defn hide
   [translate-y bg-opacity window-height on-close]
+  (rf/dispatch [:dismiss-keyboard])
   (when (fn? on-close)
     (on-close))
   ;; it will be better to use animation callback, but it doesn't work

src/status_im2/common/standard_authentication/enter_password/style.cljs

@@ -0,0 +1,20 @@
+(ns status-im2.common.standard-authentication.enter-password.style)
+
+(def enter-password-container
+  {:margin-horizontal       20
+   :border-top-left-radius  12
+   :border-top-right-radius 12})
+
+(def error-message
+  {:margin-top     8
+   :flex-direction :row
+   :align-items    :center})
+
+(def enter-password-button
+  {:margin-top    45
+   :margin-bottom 12})
+
+(def context-tag
+  {:flex-direction :row
+   :margin-bottom  20
+   :margin-top     8})

src/status_im2/common/standard_authentication/enter_password/view.cljs

@@ -0,0 +1,53 @@
+(ns status-im2.common.standard-authentication.enter-password.view
+  (:require [utils.i18n :as i18n]
+            [quo2.core :as quo]
+            [react-native.core :as rn]
+            [utils.re-frame :as rf]
+            [status-im2.common.standard-authentication.enter-password.style :as style]
+            [status-im2.common.standard-authentication.password-input.view :as password-input]
+            [status-im.multiaccounts.core :as multiaccounts]))
+
+(defn view
+  [{:keys [on-enter-password button-label]}]
+  (let [{:keys [key-uid display-name
+                customization-color]
+         :as   account}                     (rf/sub [:profile/multiaccount])
+        {:keys [error processing password]} (rf/sub [:profile/login])
+        sign-in-enabled?                    (rf/sub [:sign-in-enabled?])
+        profile-picture                     (multiaccounts/displayed-photo account)]
+    [:<>
+     [rn/view {:style style/enter-password-container}
+      [rn/view
+       [quo/text
+        {:accessibility-label :sync-code-generated
+         :weight              :bold
+         :size                :heading-1
+         :style               {:margin-bottom 4}}
+        (i18n/label :t/enter-password)]
+       [rn/view
+        {:style style/context-tag}
+        [quo/context-tag
+         {:type                :default
+          :blur?               true
+          :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
+          :type                :primary
+          :customization-color (or customization-color :primary)
+          :accessibility-label :login-button
+          :icon-left           :i/reveal
+          :disabled?           (or (not sign-in-enabled?) processing)
+          :on-press            (fn []
+                                 (rf/dispatch [:set-in [:profile/login :key-uid] key-uid])
+                                 (rf/dispatch [:profile.login/verify-database-password password
+                                               #(on-enter-password password)]))}
+         button-label]]]]]))

src/status_im2/common/standard_authentication/forgot_password_doc/style.cljs

@@ -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})

src/status_im2/common/standard_authentication/forgot_password_doc/view.cljs

@@ -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)]]]]])

src/status_im2/common/standard_authentication/password_input/style.cljs

@@ -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})