feat: enable biometrics screen

src/status_im2/constants.cljs

@@ -318,3 +318,8 @@
 (def ^:const empty-category-id :communities/not-categorized)
 
 (def ^:const seed-phrase-valid-length #{12 18 24})
+
+(def ^:const auth-method-password "password")
+(def ^:const auth-method-biometric "biometric")
+(def ^:const auth-method-biometric-prepare "biometric-prepare")
+(def ^:const auth-method-none "none")

src/status_im2/contexts/onboarding/enable_biometrics/style.cljs

@@ -12,3 +12,12 @@
    :background-color colors/neutral-80-opa-80-blur})
 
 (def navigation-bar {:height 56})
+
+(def image-container
+  {:margin-top       20
+   :margin-bottom    24
+   :background-color colors/danger-50
+   :border-radius    20
+   :flex             1
+   :align-items      :center
+   :justify-content  :center})

src/status_im2/contexts/onboarding/enable_biometrics/view.cljs

@@ -5,7 +5,8 @@
             [status-im2.contexts.onboarding.enable-biometrics.style :as style]
             [utils.i18n :as i18n]
             [status-im2.contexts.onboarding.common.background.view :as background]
-            [utils.re-frame :as rf]))
+            [utils.re-frame :as rf]
+            [status-im.multiaccounts.biometric.core :as biometric]))
 
 (defn navigation-bar
   []
@@ -17,18 +18,39 @@
 
 (defn page
   []
-  [rn/view {:style style/page-container}
+  (let [supported-biometric (rf/sub [:supported-biometric-auth])
-   [navigation-bar]
+        bio-type-label      (biometric/get-label supported-biometric)
-   [rn/view {:style {:padding-horizontal 20}}
+        profile-color       (:color (rf/sub [:onboarding-2/profile]))]
-    [quo/text
+    [rn/view {:style style/page-container}
-     {:size   :heading-1
+     [navigation-bar]
-      :weight :semi-bold
+     [rn/view
-      :style  {:color colors/white}} "Enable-biometrics"]
+      {:style {:padding-horizontal 20
-    [quo/button
+               :flex               1}}
-     {:on-press       #(rf/dispatch [:onboarding-2/create-account-and-login])
+      [quo/text
-      :type           :grey
+       {:size   :heading-1
-      :override-theme :dark
+        :weight :semi-bold
-      :style          {}} (i18n/label :t/continue)]]])
+        :style  {:color colors/white}} (i18n/label :t/enable-biometrics)]
+      [quo/text
+       {:size  :paragraph-1
+        :style {:color      colors/white
+                :margin-top 8}}
+       (i18n/label :t/use-biometrics)]
+      ;; TODO(@briansztamfater): Replace view with image view with the real illustration,
+      ;; https://github.com/status-im/status-mobile/issues/15445
+      [rn/view {:style style/image-container}
+       [quo/text {:size :paragraph-1}
+        "Illustration here"]]
+      [rn/view {:style {:margin-bottom 55}}
+       [quo/button
+        {:on-press                  #(rf/dispatch [:onboarding-2/enable-biometrics])
+         :before                    :i/face-id
+         :override-background-color (colors/custom-color profile-color 50)}
+        (i18n/label :t/biometric-enable-button {:bio-type-label bio-type-label})]
+       [quo/button
+        {:on-press                  #(rf/dispatch [:onboarding-2/create-account-and-login])
+         :override-background-color colors/white-opa-5
+         :style                     {:margin-top 12}}
+        (i18n/label :t/maybe-later)]]]]))
 
 (defn enable-biometrics
   []

src/status_im2/contexts/onboarding/events.cljs

@@ -7,7 +7,9 @@
     [clojure.string :as string]
     [utils.security.core :as security]
     [status-im.native-module.core :as status]
-    [status-im.ethereum.core :as ethereum]))
+    [status-im.ethereum.core :as ethereum]
+    [status-im2.constants :as constants]
+    [utils.i18n :as i18n]))
 
 (re-frame/reg-fx
  :multiaccount/create-account-and-login
@@ -36,6 +38,29 @@
   {:db       (update db :onboarding-2/profile merge onboarding-data)
    :dispatch [:navigate-to :create-profile-password]})
 
+(rf/defn enable-biometrics
+  {:events [:onboarding-2/enable-biometrics]}
+  [_]
+  {:biometric-auth/authenticate [#(rf/dispatch [:onboarding-2/biometrics-done %]) {}]})
+
+(rf/defn show-biometrics-message
+  [cofx bioauth-message bioauth-code]
+  (let [content (or (when (get #{"NOT_AVAILABLE" "NOT_ENROLLED"} bioauth-code)
+                      (i18n/label :t/grant-face-id-permissions))
+                    bioauth-message)]
+    (when content
+      {:utils/show-popup
+       {:title   (i18n/label :t/biometric-auth-login-error-title)
+        :content content}})))
+
+(rf/defn biometrics-done
+  {:events [:onboarding-2/biometrics-done]}
+  [{:keys [db] :as cofx} {:keys [bioauth-success bioauth-message bioauth-code]}]
+  (if bioauth-success
+    {:db       (assoc-in db [:onboarding-2/profile :auth-method] constants/auth-method-biometric)
+     :dispatch [:onboarding-2/create-account-and-login]}
+    (show-biometrics-message cofx bioauth-message bioauth-code)))
+
 (defn strip-file-prefix
   [path]
   (when path
@@ -87,7 +112,9 @@
 (rf/defn password-set
   {:events [:onboarding-2/password-set]}
   [{:keys [db]} password]
-  {:db       (assoc-in db [:onboarding-2/profile :password] password)
+  {:db       (-> db
+                 (assoc-in [:onboarding-2/profile :password] password)
+                 (assoc-in [:onboarding-2/profile :auth-method] constants/auth-method-password))
    :dispatch [:navigate-to :enable-biometrics]})
 
 (rf/defn seed-phrase-entered

src/status_im2/navigation/screens.cljs

@@ -151,7 +151,9 @@
 
     {:name      :create-profile-password
      :options   {:statusBar     {:style :light}
-                 :topBar        {:visible false}
+                 :topBar        {:visible    false
+                                 :backButton {:popStackOnPress false}}
+
                  :navigationBar {:backgroundColor colors/black}}
      :insets    {:top false}
      :component create-password/create-password}
@@ -164,9 +166,13 @@
      :component enable-biometrics/enable-biometrics}
 
     {:name      :generating-keys
-     :options   {:statusBar     {:style :light}
+     :options   {:statusBar          {:style :light}
-                 :topBar        {:visible false}
+                 :navigationBar      {:backgroundColor colors/black}
-                 :navigationBar {:backgroundColor colors/black}}
+                 :popGesture         false
+                 :hardwareBackButton {:dismissModalOnPress false
+                                      :popStackOnPress     false}
+                 :topBar             {:visible    false
+                                      :backButton {:popStackOnPress false}}}
      :insets    {:top false}
      :component generating-keys/generating-keys}
 
@@ -178,9 +184,13 @@
      :component enter-seed-phrase/enter-seed-phrase}
 
     {:name      :enable-notifications
-     :options   {:statusBar     {:style :light}
+     :options   {:statusBar          {:style :light}
-                 :topBar        {:visible false}
+                 :navigationBar      {:backgroundColor colors/black}
-                 :navigationBar {:backgroundColor colors/black}}
+                 :popGesture         false
+                 :hardwareBackButton {:dismissModalOnPress false
+                                      :popStackOnPress     false}
+                 :topBar             {:visible    false
+                                      :backButton {:popStackOnPress false}}}
      :insets    {:top false}
      :component enable-notifications/enable-notifications}
 

translations/en.json

@@ -2052,5 +2052,7 @@
     "ensure-qr-code-is-in-focus-to-scan":"Ensure that the QR code is in focus to scan",
     "error-this-is-not-a-sync-qr-code": "Oops! This is not a sync QR code",
     "error-syncing-connection-failed": "Oops! Connection failed. Try again",
-    "camera-permission-denied": "Permission denied"
+    "camera-permission-denied": "Permission denied",
+    "enable-biometrics": "Enable biometrics",
+    "use-biometrics": "Use biometrics to fill in your password"
 }