diff --git a/src/status_im/contexts/keycard/pin/create/view.cljs b/src/status_im/contexts/keycard/pin/create/view.cljs new file mode 100644 index 0000000000..a952e528e8 --- /dev/null +++ b/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}]])) diff --git a/translations/en.json b/translations/en.json index 45098668cb..8c517a5bd0 100644 --- a/translations/en.json +++ b/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",