Feature/keycard create pin #21368 (#21413)

src/status_im/contexts/keycard/pin/create/view.cljs

@@ -0,0 +1,55 @@
+(ns status-im.contexts.keycard.pin.create.view
+  (:require [clojure.string :as string]
+            [quo.core :as quo]
+            [react-native.core :as rn]
+            [status-im.constants :as constants]
+            [utils.i18n :as i18n]))
+
+(defn view
+  [{:keys [on-complete]}]
+  (let [[pin set-pin]             (rn/use-state "")
+        [first-pin set-first-pin] (rn/use-state "")
+        [error? set-error]        (rn/use-state false)
+        [stage set-stage]         (rn/use-state :create)
+        pin-empty?                (string/blank? pin)
+        on-delete                 (rn/use-callback
+                                   (fn []
+                                     (set-error false)
+                                     (if (= (count pin) 1)
+                                       (do
+                                         (set-pin "")
+                                         (set-stage :create))
+                                       (when (and pin (pos? (count pin)))
+                                         (set-pin (.slice pin 0 -1)))))
+                                   [pin])
+        on-press                  (rn/use-callback
+                                   (fn [new-symbol]
+                                     (let [new-pin (str pin new-symbol)]
+                                       (when (<= (count new-pin) constants/pincode-length)
+                                         (set-pin new-pin)
+                                         (when (= constants/pincode-length (count new-pin))
+                                           (if (= :repeat stage)
+                                             (if (= first-pin new-pin)
+                                               (on-complete new-pin)
+                                               (set-error true))
+                                             (do
+                                               (set-pin "")
+                                               (set-first-pin new-pin)
+                                               (set-stage :repeat)))))))
+                                   [pin stage first-pin])]
+    [rn/view {:style {:padding-bottom 12 :flex 1}}
+     [quo/drawer-top
+      {:title (if (= :create stage)
+                (i18n/label :t/create-keycard-pin)
+                (i18n/label :t/repeat-keycard-pin))}]
+     [rn/view {:style {:flex 1 :justify-content :center :align-items :center :padding-vertical 34}}
+      [quo/pin-input
+       {:blur?                 false
+        :number-of-pins        constants/pincode-length
+        :number-of-filled-pins (count pin)
+        :error?                error?
+        :info                  (when error? (i18n/label :t/pin-not-match))}]]
+     [quo/numbered-keyboard
+      {:delete-key? (not pin-empty?)
+       :on-delete   on-delete
+       :on-press    on-press}]]))

translations/en.json

@@ -540,6 +540,7 @@
   "create-channel-title": "New channel",
   "create-community": "Create a community",
   "create-group-chat": "Create group chat",
+  "create-keycard-pin": "Create Keycard PIN",
   "create-multiaccount": "Generate keys",
   "create-new-key": "Get new keys",
   "create-new-profile": "Create new profile",
@@ -1931,6 +1932,7 @@
   "pin-code": "6-digit passcode",
   "pin-limit-reached": "Pin limit reached. Unpin a previous message first.",
   "pin-mismatch": "Wrong passcode",
+  "pin-not-match": "PIN do not match",
   "pin-one-attempt": " one attempt ",
   "pin-one-attempt-blocked-after": "before your Keycard gets blocked",
   "pin-one-attempt-blocked-before": "Be careful, you have only",
@@ -2094,6 +2096,7 @@
   "removed-from-contacts": "Removed from contacts",
   "rename": "Rename",
   "rename-key-pair": "Rename key pair",
+  "repeat-keycard-pin": "Repeat Keycard PIN",
   "repeat-pin": "Repeat new 6-digit passcode",
   "repeat-puk": "Repeat new 12-digit PUK",
   "replied": "Replied",