Onboarding app locked flow
This commit is contained in:
parent
03cf4cec0e
commit
937c128c08
Binary file not shown.
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
After Width: | Height: | Size: 1.5 KiB |
|
@ -6,12 +6,13 @@
|
|||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def themes
|
||||
(defn themes
|
||||
[customization-color]
|
||||
{:light {:primary {:icon-color colors/white
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/primary-50
|
||||
:pressed colors/primary-60
|
||||
:disabled colors/primary-50}}
|
||||
:background-color {:default (colors/custom-color customization-color 50)
|
||||
:pressed (colors/custom-color customization-color 60)
|
||||
:disabled (colors/custom-color customization-color 50)}}
|
||||
:secondary {:icon-color colors/primary-50
|
||||
:label-color colors/primary-50
|
||||
:background-color {:default colors/primary-50-opa-20
|
||||
|
@ -74,9 +75,9 @@
|
|||
:disabled colors/neutral-95}}}
|
||||
:dark {:primary {:icon-color colors/white
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/primary-60
|
||||
:pressed colors/primary-50
|
||||
:disabled colors/primary-60}}
|
||||
:background-color {:default (colors/custom-color customization-color 60)
|
||||
:pressed (colors/custom-color customization-color 50)
|
||||
:disabled (colors/custom-color customization-color 60)}}
|
||||
:secondary {:icon-color colors/primary-50
|
||||
:label-color colors/primary-50
|
||||
:background-color {:default colors/primary-50-opa-20
|
||||
|
@ -218,14 +219,15 @@
|
|||
(let [pressed (reagent/atom false)]
|
||||
(fn
|
||||
[{:keys [on-press disabled type size community-color community-text-color before after above
|
||||
width
|
||||
width customization-color
|
||||
override-theme override-background-color
|
||||
on-long-press accessibility-label icon icon-no-color style inner-style test-ID]
|
||||
:or {type :primary
|
||||
size 40}}
|
||||
:or {type :primary
|
||||
size 40
|
||||
customization-color :primary}}
|
||||
children]
|
||||
(let [{:keys [icon-color icon-secondary-color background-color label-color border-color]}
|
||||
(get-in themes
|
||||
(get-in (themes customization-color)
|
||||
[(or
|
||||
override-theme
|
||||
(theme/get-theme)) type])
|
||||
|
@ -252,11 +254,7 @@
|
|||
[rn/view
|
||||
{:style (merge
|
||||
(shape-style-container type icon size)
|
||||
{:background-color
|
||||
(if (= state :pressed)
|
||||
(colors/theme-colors colors/neutral-100 colors/white)
|
||||
:transparent)
|
||||
:width width}
|
||||
{:width width}
|
||||
style)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
|
|
|
@ -22,18 +22,18 @@
|
|||
opts
|
||||
{:type :default/:success/:error
|
||||
:size :default/:tiny
|
||||
:icon :main-icons/info ;; info message icon
|
||||
:icon :i/info ;; info message icon
|
||||
:text-color colors/white ;; text color override
|
||||
:icon-color colors/white ;; icon color override
|
||||
:no-icon-color? false ;; disable tint color for icon"
|
||||
[{:keys [type size icon text-color icon-color no-icon-color?]} message]
|
||||
[{:keys [type size icon text-color icon-color no-icon-color? style]} message]
|
||||
(let [weight (if (= size :default) :regular :medium)
|
||||
size (if (= size :default) :paragraph-2 :label)
|
||||
text-color (or text-color (get-color type))
|
||||
icon-color (or icon-color text-color)]
|
||||
[rn/view
|
||||
{:style {:flex-direction :row
|
||||
:flex 1}}
|
||||
{:style (merge {:flex-direction :row}
|
||||
style)}
|
||||
[quo2.icons/icon icon
|
||||
{:color icon-color
|
||||
:no-color no-icon-color?
|
||||
|
|
|
@ -66,7 +66,7 @@
|
|||
:padding-horizontal 8
|
||||
:border-width 1
|
||||
:border-color (:border-color colors-by-status)
|
||||
:border-radius (if small? 10 14)
|
||||
:border-radius (if small? 10 12)
|
||||
:opacity (if disabled? 0.3 1)})
|
||||
|
||||
(defn left-icon-container
|
||||
|
@ -110,8 +110,7 @@
|
|||
:color (:clear-icon variant-colors)})
|
||||
|
||||
(def texts-container
|
||||
{:flex 1
|
||||
:flex-direction :row
|
||||
{:flex-direction :row
|
||||
:height 18
|
||||
:margin-bottom 8})
|
||||
|
||||
|
|
|
@ -83,7 +83,7 @@
|
|||
colors-by-status (style/status-colors status-kw blur? override-theme)
|
||||
variant-colors (style/variants-colors blur? override-theme)
|
||||
clean-props (apply dissoc props custom-props)]
|
||||
[rn/view
|
||||
[:<>
|
||||
(when (or label char-limit)
|
||||
[label-&-counter
|
||||
{:variant-colors variant-colors
|
||||
|
|
|
@ -2,14 +2,16 @@
|
|||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn card-container
|
||||
[customization-color padding-bottom]
|
||||
{:flex-direction :column
|
||||
:padding-horizontal 12
|
||||
:padding-top 12
|
||||
:padding-bottom padding-bottom
|
||||
:flex 1
|
||||
:border-radius 16
|
||||
:background-color (colors/custom-color customization-color 50 40)})
|
||||
[{:keys [customization-color padding-bottom border-bottom-radius]}]
|
||||
{:padding-horizontal 12
|
||||
:padding-top 12
|
||||
:padding-bottom padding-bottom
|
||||
:flex 1
|
||||
:border-top-left-radius 16
|
||||
:border-top-right-radius 16
|
||||
:border-bottom-left-radius border-bottom-radius
|
||||
:border-bottom-right-radius border-bottom-radius
|
||||
:background-color (colors/custom-color customization-color 50 40)})
|
||||
|
||||
(def card-header
|
||||
{:flex-direction :row
|
||||
|
|
|
@ -4,77 +4,104 @@
|
|||
[quo2.components.icon :as icon]
|
||||
[quo2.components.tags.tag :as tag]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.hole-view :as hole-view]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.components.avatars.user-avatar.view :as user-avatar]
|
||||
[quo2.components.profile.profile-card.style :as style]))
|
||||
[quo2.components.profile.profile-card.style :as style]
|
||||
[quo2.components.avatars.user-avatar.view :as user-avatar]))
|
||||
|
||||
(defn profile-card
|
||||
[{:keys [key-card? profile-picture name hash customization-color
|
||||
emoji-hash on-options-press show-emoji-hash? padding-bottom
|
||||
show-options-button? show-user-hash? show-logged-in? on-card-press]
|
||||
(defn- profile-card-component
|
||||
[{:keys [keycard-account? profile-picture name hash
|
||||
customization-color emoji-hash on-options-press
|
||||
show-emoji-hash? show-options-button? show-user-hash?
|
||||
show-logged-in? on-card-press login-card? last-item? card-style]
|
||||
:or {show-emoji-hash? false
|
||||
show-user-hash? false
|
||||
customization-color :turquoise
|
||||
show-options-button? false
|
||||
show-logged-in? false
|
||||
key-card? false}}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press on-card-press
|
||||
:flex 1
|
||||
:accessibility-label :profile-card}
|
||||
[rn/view
|
||||
(style/card-container
|
||||
customization-color
|
||||
(or padding-bottom (if show-emoji-hash? 12 10)))
|
||||
[rn/view
|
||||
{:style style/card-header}
|
||||
[user-avatar/user-avatar
|
||||
{:full-name name
|
||||
:profile-picture profile-picture
|
||||
:override-theme :dark
|
||||
:size :medium
|
||||
:status-indicator? false}]
|
||||
[rn/view {:flex-direction :row}
|
||||
(when show-logged-in?
|
||||
[tag/tag
|
||||
{:type :icon
|
||||
:size 32
|
||||
:blurred? true
|
||||
:labelled? true
|
||||
:resource :main-icons2/check
|
||||
:accessibility-label :logged-in-tag
|
||||
:icon-color colors/success-50
|
||||
keycard-account? false
|
||||
login-card? false
|
||||
last-item? false
|
||||
card-style {:padding-horizontal 20
|
||||
:flex 1}}}]
|
||||
(let [{:keys [width]} (rn/use-window-dimensions)
|
||||
padding-bottom (cond
|
||||
login-card? 38
|
||||
show-emoji-hash? 12
|
||||
:else 10)
|
||||
border-bottom-radius (if (or (not login-card?) last-item?) 16 0)]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press on-card-press
|
||||
:accessibility-label :profile-card}
|
||||
[hole-view/hole-view
|
||||
{:key (str name last-item?) ;; Key is required to force removal of holes
|
||||
:style (merge {:flex-direction :row} card-style)
|
||||
:holes (if (or (not login-card?) last-item?)
|
||||
[]
|
||||
[{:x 20
|
||||
:y 108
|
||||
:width (- width 40)
|
||||
:height 50
|
||||
:borderRadius 16}])}
|
||||
[rn/view
|
||||
{:style (style/card-container
|
||||
{:customization-color customization-color
|
||||
:padding-bottom padding-bottom
|
||||
:border-bottom-radius border-bottom-radius})}
|
||||
[rn/view
|
||||
{:style style/card-header}
|
||||
[user-avatar/user-avatar
|
||||
{:full-name name
|
||||
:profile-picture profile-picture
|
||||
:override-theme :dark
|
||||
:label (i18n/label :t/logged-in)}])
|
||||
(when show-options-button?
|
||||
[button/button
|
||||
{:size 32
|
||||
:type :blur-bg
|
||||
:icon true
|
||||
:override-theme :dark
|
||||
:style style/option-button
|
||||
:on-press on-options-press
|
||||
:accessibility-label :profile-card-options}
|
||||
:i/options])]]
|
||||
[rn/view
|
||||
{:style style/name-container}
|
||||
[text/text
|
||||
{:size :heading-2
|
||||
:weight :semi-bold
|
||||
:number-of-lines 1
|
||||
:style style/user-name} name]
|
||||
(when key-card?
|
||||
(icon/icon
|
||||
:i/keycard
|
||||
style/keycard-icon))]
|
||||
(when show-user-hash?
|
||||
[text/text
|
||||
{:weight :monospace
|
||||
:number-of-lines 1
|
||||
:style style/user-hash} hash])
|
||||
(when (and show-emoji-hash? emoji-hash)
|
||||
[text/text
|
||||
{:weight :monospace
|
||||
:number-of-lines 1
|
||||
:style style/emoji-hash} emoji-hash])]])
|
||||
:size :medium
|
||||
:status-indicator? false
|
||||
:customization-color customization-color}]
|
||||
[rn/view {:flex-direction :row}
|
||||
(when show-logged-in?
|
||||
[tag/tag
|
||||
{:type :icon
|
||||
:size 32
|
||||
:blurred? true
|
||||
:labelled? true
|
||||
:resource :main-icons2/check
|
||||
:accessibility-label :logged-in-tag
|
||||
:icon-color colors/success-50
|
||||
:override-theme :dark
|
||||
:label (i18n/label :t/logged-in)}])
|
||||
(when show-options-button?
|
||||
[button/button
|
||||
{:size 32
|
||||
:type :blur-bg
|
||||
:icon true
|
||||
:override-theme :dark
|
||||
:style style/option-button
|
||||
:on-press on-options-press
|
||||
:accessibility-label :profile-card-options}
|
||||
:i/options])]]
|
||||
[rn/view
|
||||
{:style style/name-container}
|
||||
[text/text
|
||||
{:size :heading-2
|
||||
:weight :semi-bold
|
||||
:number-of-lines 1
|
||||
:style style/user-name} name]
|
||||
(when keycard-account?
|
||||
(icon/icon
|
||||
:i/keycard
|
||||
style/keycard-icon))]
|
||||
(when show-user-hash?
|
||||
[text/text
|
||||
{:weight :monospace
|
||||
:number-of-lines 1
|
||||
:style style/user-hash} hash])
|
||||
(when (and show-emoji-hash? emoji-hash)
|
||||
[text/text
|
||||
{:weight :monospace
|
||||
:number-of-lines 1
|
||||
:style style/emoji-hash} emoji-hash])]]]))
|
||||
|
||||
(defn profile-card
|
||||
[props]
|
||||
[:f> profile-card-component props])
|
||||
|
|
|
@ -57,6 +57,7 @@
|
|||
status-im2.contexts.activity-center.events
|
||||
status-im2.contexts.activity-center.notification.contact-requests.events
|
||||
status-im2.contexts.shell.events
|
||||
status-im2.contexts.onboarding.events
|
||||
status-im.chat.models.gaps
|
||||
[status-im2.navigation.events :as navigation]))
|
||||
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
[{:keys [db] :as cofx}]
|
||||
(rf/merge cofx
|
||||
{:db db}
|
||||
(navigation/pop-to-root :multiaccounts-stack)))
|
||||
(navigation/pop-to-root :profiles)))
|
||||
|
||||
(rf/defn login-pin-more-icon-pressed
|
||||
{:events [:keycard.login.pin.ui/more-icon-pressed]}
|
||||
|
|
|
@ -521,6 +521,7 @@
|
|||
(assoc-in [:multiaccount :multiaccounts/first-account] first-account?))
|
||||
::get-tokens [network-id accounts recovered-account?]}
|
||||
(finish-keycard-setup)
|
||||
(initialize-appearance)
|
||||
(transport/start-messenger)
|
||||
(communities/fetch)
|
||||
(data-store.chats/fetch-chats-rpc
|
||||
|
@ -624,14 +625,15 @@
|
|||
login)
|
||||
(rf/merge
|
||||
cofx
|
||||
{:db (dissoc db :goto-key-storage?)}
|
||||
{:db (dissoc db :goto-key-storage?)
|
||||
:theme/change-theme :dark}
|
||||
(when keycard-account?
|
||||
{:db (-> db
|
||||
(assoc-in [:keycard :pin :status] nil)
|
||||
(assoc-in [:keycard :pin :login] []))})
|
||||
#(if keycard-account?
|
||||
{:init-root-fx :multiaccounts-keycard}
|
||||
{:init-root-fx :multiaccounts})
|
||||
{:init-root-fx :profiles})
|
||||
#(when goto-key-storage?
|
||||
(navigation/navigate-to-cofx % :actions-not-logged-in nil))))))
|
||||
|
||||
|
@ -730,8 +732,9 @@
|
|||
keycard-multiaccount? (boolean (:keycard-pairing multiaccount))]
|
||||
(rf/merge
|
||||
cofx
|
||||
{:db (update db :keycard dissoc :application-info)
|
||||
:navigate-to-fx (if keycard-multiaccount? :keycard-login-pin :login)}
|
||||
(merge
|
||||
{:db (update db :keycard dissoc :application-info)}
|
||||
(when keycard-multiaccount? {:navigate-to-fx :keycard-login-pin}))
|
||||
(open-login (select-keys multiaccount [:key-uid :name :public-key :identicon :images])))))
|
||||
|
||||
(rf/defn hide-keycard-banner
|
||||
|
|
|
@ -1,8 +1,14 @@
|
|||
(ns status-im.theme.core
|
||||
(:require [quo.theme :as quo.theme]
|
||||
[quo2.theme :as quo2.theme]))
|
||||
[quo2.theme :as quo2.theme]
|
||||
[re-frame.core :as re-frame]))
|
||||
|
||||
(defn change-theme
|
||||
[theme]
|
||||
(quo.theme/set-theme theme)
|
||||
(quo2.theme/set-theme theme))
|
||||
|
||||
(re-frame/reg-fx
|
||||
:theme/change-theme
|
||||
(fn [theme]
|
||||
(change-theme theme)))
|
||||
|
|
|
@ -26,18 +26,23 @@
|
|||
[quo/text {:style {:margin-left 10}} extra-text]]))
|
||||
|
||||
(defn confirmation-drawer
|
||||
[{:keys [title description context button-text on-press extra-action extra-text accessibility-label]}]
|
||||
[{:keys [title description context button-text on-press extra-action extra-text accessibility-label
|
||||
close-button-text]}]
|
||||
(let [extra-action-selected? (reagent/atom false)]
|
||||
(fn []
|
||||
(let [{:keys [group-chat chat-id public-key color name]} context
|
||||
id (or chat-id public-key)
|
||||
display-name
|
||||
(if-not group-chat (first (rf/sub [:contacts/contact-two-names-by-identity id])) name)
|
||||
contact (when-not group-chat
|
||||
(rf/sub [:contacts/contact-by-address
|
||||
id]))
|
||||
photo-path (when-not (empty? (:images contact))
|
||||
(rf/sub [:chats/photo-path id]))]
|
||||
(let [{:keys [group-chat chat-id public-key color profile-picture
|
||||
name]} context
|
||||
id (or chat-id public-key)
|
||||
display-name (or
|
||||
name
|
||||
(when-not group-chat
|
||||
(rf/sub [:contacts/contact-name-by-identity id])))
|
||||
contact (when-not group-chat
|
||||
(rf/sub [:contacts/contact-by-address
|
||||
id]))
|
||||
photo-path (or profile-picture
|
||||
(when-not (empty? (:images contact))
|
||||
(rf/sub [:chats/photo-path id])))]
|
||||
[rn/view
|
||||
{:style {:margin-horizontal 20}
|
||||
:accessibility-label accessibility-label}
|
||||
|
@ -57,7 +62,7 @@
|
|||
{:type :grey
|
||||
:style {:flex 0.48} ;;WUT? 0.48 , whats that ?
|
||||
:on-press #(rf/dispatch [:bottom-sheet/hide])}
|
||||
(i18n/label :t/close)]
|
||||
(or close-button-text (i18n/label :t/close))]
|
||||
[quo/button
|
||||
{:type :danger
|
||||
:style {:flex 0.48}
|
||||
|
|
|
@ -3,7 +3,12 @@
|
|||
|
||||
(def background-container
|
||||
{:background-color colors/neutral-95
|
||||
:flex-direction :row})
|
||||
:flex-direction :row
|
||||
:position :absolute
|
||||
:top 0
|
||||
:bottom 0
|
||||
:left 0
|
||||
:right 0})
|
||||
|
||||
(defn background-gradient-overlay
|
||||
[dark-overlay?]
|
||||
|
|
|
@ -11,7 +11,8 @@
|
|||
{:style style/background-container}
|
||||
[rn/image
|
||||
{:blur-radius (if dark-overlay? 13 0)
|
||||
:style {:flex 1}
|
||||
:style {:height "100%"
|
||||
:width "100%"}
|
||||
;; Todo - get background image from sub using carousel index on landing page
|
||||
:source (resources/get-image :onboarding-bg-1)}]
|
||||
[linear-gradient/linear-gradient
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
(ns status-im2.contexts.onboarding.events
|
||||
(:require [utils.re-frame :as rf]))
|
||||
|
||||
(rf/defn on-delete-profile-success
|
||||
{:events [:onboarding/on-delete-profile-success]}
|
||||
[{:keys [db]} key-uid]
|
||||
{:db (update-in db [:multiaccounts/multiaccounts] dissoc key-uid)})
|
|
@ -0,0 +1,60 @@
|
|||
(ns status-im2.contexts.onboarding.profiles.style
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[react-native.platform :as platform]))
|
||||
|
||||
;; Profiles Section
|
||||
|
||||
(defn profiles-profile-card
|
||||
[last-item?]
|
||||
;; This part needs to be improved, inverted shadow is not supported in android
|
||||
;; https://reactnative.dev/docs/shadow-props#shadowoffset-ios
|
||||
;; (merge
|
||||
;; (:shadow-1 (shadows/get-scales true :dark))
|
||||
{:padding-horizontal 20
|
||||
:margin-bottom (when-not last-item? -24)})
|
||||
|
||||
(def profiles-container
|
||||
{:position :absolute
|
||||
:left 0
|
||||
:top 0
|
||||
:bottom 0
|
||||
:right 0})
|
||||
|
||||
(def profiles-header
|
||||
{:flex-direction :row
|
||||
:padding-horizontal 20
|
||||
:padding-top 112
|
||||
:margin-bottom 20})
|
||||
|
||||
(def profiles-header-text
|
||||
{:color colors/white
|
||||
:flex 1})
|
||||
|
||||
;; Login Section
|
||||
|
||||
(def login-container
|
||||
{:position :absolute
|
||||
:left 0
|
||||
:top 0
|
||||
:right 0
|
||||
:bottom 0
|
||||
:padding-top 56
|
||||
:padding-horizontal 20})
|
||||
|
||||
(def multi-profile-button
|
||||
{:align-self :flex-end})
|
||||
|
||||
(def login-profile-card
|
||||
{:margin-vertical 20})
|
||||
|
||||
(def keyboard-avoiding-view
|
||||
{:flex 1})
|
||||
|
||||
(def info-message
|
||||
{:margin-top 8})
|
||||
|
||||
(defn login-button
|
||||
[]
|
||||
{:margin-top 8
|
||||
:margin-bottom (if platform/android? 20 46)})
|
||||
|
|
@ -1,7 +1,203 @@
|
|||
(ns status-im2.contexts.onboarding.profiles.view
|
||||
(:require [status-im2.contexts.onboarding.common.background.view :as background]))
|
||||
(:require [quo2.core :as quo]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]
|
||||
[taoensso.timbre :as log]
|
||||
[reagent.core :as reagent]
|
||||
[react-native.core :as rn]
|
||||
[status-im.utils.types :as types]
|
||||
[utils.security.core :as security]
|
||||
[status-im.native-module.core :as status]
|
||||
[status-im2.contexts.onboarding.profiles.style :as style]
|
||||
[status-im2.common.confirmation-drawer.view :as confirmation-drawer]
|
||||
[status-im2.contexts.onboarding.common.background.view :as background]))
|
||||
|
||||
(def show-profiles? (reagent/atom false))
|
||||
|
||||
(defn login-multiaccount
|
||||
[]
|
||||
(rf/dispatch [:multiaccounts.login.ui/password-input-submitted]))
|
||||
|
||||
(defn new-account-options
|
||||
[]
|
||||
[quo/action-drawer
|
||||
[[{:icon :i/profile
|
||||
:label (i18n/label :t/create-new-profile)
|
||||
:on-press #(do
|
||||
(rf/dispatch [:bottom-sheet/hide])
|
||||
(rf/dispatch [:navigate-to :new-to-status]))
|
||||
:accessibility-label :create-new-profile}
|
||||
{:icon :i/multi-profile
|
||||
:label (i18n/label :t/add-existing-status-profile)
|
||||
:on-press #(do
|
||||
(rf/dispatch [:bottom-sheet/hide])
|
||||
(rf/dispatch [:navigate-to :new-to-status]))
|
||||
:accessibility-label :multi-profile}]]])
|
||||
|
||||
(defn show-new-account-options
|
||||
[]
|
||||
(rf/dispatch [:bottom-sheet/show-sheet
|
||||
{:content new-account-options}]))
|
||||
|
||||
(defn delete-profile-confirmation
|
||||
[key-uid context]
|
||||
(confirmation-drawer/confirmation-drawer
|
||||
{:title (i18n/label :remove-profile?)
|
||||
:description (i18n/label :remove-profile-confirm-message)
|
||||
:accessibility-label :remove-profile-confirm
|
||||
:context context
|
||||
:button-text (i18n/label :t/remove)
|
||||
:close-button-text (i18n/label :t/cancel)
|
||||
:on-press #(do
|
||||
(rf/dispatch [:bottom-sheet/hide])
|
||||
(status/delete-multiaccount
|
||||
key-uid
|
||||
(fn [result]
|
||||
(let [{:keys [error]} (types/json->clj result)]
|
||||
(rf/dispatch [:onboarding/on-delete-profile-success key-uid])
|
||||
(log/info "profile deleted: error" error)))))}))
|
||||
|
||||
(defn show-confirmation
|
||||
[key-uid context]
|
||||
(rf/dispatch [:bottom-sheet/hide])
|
||||
(rf/dispatch [:bottom-sheet/show-sheet
|
||||
{:content #(delete-profile-confirmation key-uid context)}]))
|
||||
|
||||
(defn profile-options
|
||||
[key-uid context]
|
||||
[quo/action-drawer
|
||||
[[{:icon :i/delete
|
||||
:label (i18n/label :remove-profile-message)
|
||||
:on-press #(show-confirmation key-uid context)
|
||||
:accessibility-label :remove-profile
|
||||
:danger? true}]]])
|
||||
|
||||
(defn show-profile-options
|
||||
[key-uid context]
|
||||
(rf/dispatch [:bottom-sheet/show-sheet
|
||||
{:content #(profile-options key-uid context)}]))
|
||||
|
||||
(defn profile-card
|
||||
[{:keys [name key-uid customization-color keycard-pairing last-index] :as multiaccount} index]
|
||||
(let [last-item? (= last-index index)
|
||||
profile-picture (:uri (first (:images multiaccount)))]
|
||||
[quo/profile-card
|
||||
{:name name
|
||||
:login-card? true
|
||||
:last-item? (= last-index index)
|
||||
:customization-color (or customization-color :primary)
|
||||
:keycard-account? keycard-pairing
|
||||
:show-options-button? true
|
||||
:profile-picture (when profile-picture {:uri profile-picture})
|
||||
:card-style (style/profiles-profile-card last-item?)
|
||||
:on-options-press #(show-profile-options
|
||||
key-uid
|
||||
{:name name
|
||||
:color customization-color
|
||||
:profile-picture profile-picture})
|
||||
:on-card-press #(do
|
||||
(rf/dispatch
|
||||
[:multiaccounts.login.ui/multiaccount-selected key-uid])
|
||||
(when-not keycard-pairing (reset! show-profiles? false)))}]))
|
||||
|
||||
(defn profiles-section
|
||||
[]
|
||||
(let [multiaccounts (vals (rf/sub [:multiaccounts/multiaccounts]))
|
||||
multiaccounts (map #(assoc % :last-index (- (count multiaccounts) 1)) multiaccounts)]
|
||||
[rn/view
|
||||
{:style style/profiles-container}
|
||||
[rn/view
|
||||
{:style style/profiles-header}
|
||||
[quo/text
|
||||
{:size :heading-1
|
||||
:weight :semi-bold
|
||||
:style style/profiles-header-text}
|
||||
(i18n/label :t/profiles-on-device)]
|
||||
[quo/button
|
||||
{:type :primary
|
||||
:size 32
|
||||
:icon true
|
||||
:on-press show-new-account-options
|
||||
:accessibility-label :show-new-account-options
|
||||
:override-theme :dark}
|
||||
:main-icons/add]]
|
||||
[rn/flat-list
|
||||
{:data (sort-by :timestamp > multiaccounts)
|
||||
:key-fn :key-uid
|
||||
:content-container-style {:padding-bottom 20}
|
||||
:render-fn profile-card}]]))
|
||||
|
||||
(defn login-section
|
||||
[]
|
||||
(let [{:keys [name customization-color error processing]
|
||||
:as multiaccount} (rf/sub [:multiaccounts/login])
|
||||
sign-in-enabled? (rf/sub [:sign-in-enabled?])
|
||||
profile-picture (:uri (first (:images multiaccount)))]
|
||||
[rn/keyboard-avoiding-view
|
||||
{:style style/login-container}
|
||||
[rn/view
|
||||
{:style {:flex 1}}
|
||||
[quo/button
|
||||
{:size 32
|
||||
:type :blur-bg
|
||||
:icon true
|
||||
:on-press #(reset! show-profiles? true)
|
||||
:override-theme :dark
|
||||
:width 32
|
||||
:accessibility-label :show-profiles
|
||||
:style style/multi-profile-button}
|
||||
:i/multi-profile]
|
||||
[quo/profile-card
|
||||
{:name name
|
||||
:customization-color (or customization-color :primary)
|
||||
:profile-picture (when profile-picture {:uri profile-picture})
|
||||
:card-style style/login-profile-card}]
|
||||
[quo/input
|
||||
{:type :password
|
||||
:blur? true
|
||||
:override-theme :dark
|
||||
:placeholder (i18n/label :t/type-your-password)
|
||||
:auto-focus true
|
||||
:error? (when (not-empty error) error)
|
||||
:label (i18n/label :t/profile-password)
|
||||
:secure-text-entry true
|
||||
:on-change-text (fn [password]
|
||||
(rf/dispatch [:set-in [:multiaccounts/login :password]
|
||||
(security/mask-data password)])
|
||||
(rf/dispatch [:set-in [:multiaccounts/login :error] ""]))
|
||||
:on-submit-editing (when sign-in-enabled? login-multiaccount)}]
|
||||
(when (not-empty error)
|
||||
[quo/info-message
|
||||
{:type :error
|
||||
:size :default
|
||||
:icon :i/info
|
||||
:style style/info-message}
|
||||
(i18n/label :t/oops-wrong-password)])]
|
||||
[quo/button
|
||||
{:size 40
|
||||
:type :ghost
|
||||
:before :i/info
|
||||
:accessibility-label :forget-password-button
|
||||
:override-theme :dark}
|
||||
(i18n/label :t/forget-password)]
|
||||
[quo/button
|
||||
{:size 40
|
||||
:type :primary
|
||||
:customization-color (or :primary customization-color)
|
||||
:accessibility-label :login-button
|
||||
:override-theme :dark
|
||||
:before :i/unlocked
|
||||
:disabled (or (not sign-in-enabled?) processing)
|
||||
:on-press login-multiaccount
|
||||
:style (style/login-button)}
|
||||
(i18n/label :t/log-in)]]))
|
||||
|
||||
(defn views
|
||||
[]
|
||||
[:<>
|
||||
[background/view true]])
|
||||
(reset! show-profiles? false)
|
||||
(fn []
|
||||
[:<>
|
||||
[background/view true]
|
||||
(if @show-profiles?
|
||||
[profiles-section]
|
||||
[login-section show-profiles?])]))
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
(def descriptor
|
||||
[{:label "Show: Is from key card?"
|
||||
:key :key-card?
|
||||
:key :keycard-account?
|
||||
:type :boolean}
|
||||
{:label "Show: Emoji hash?"
|
||||
:key :show-emoji-hash?
|
||||
|
@ -22,33 +22,19 @@
|
|||
{:label "Show: Logged In?"
|
||||
:key :show-logged-in?
|
||||
:type :boolean}
|
||||
{:label "Login Card?"
|
||||
:key :login-card?
|
||||
:type :boolean}
|
||||
{:label "Last Item?"
|
||||
:key :last-item?
|
||||
:type :boolean}
|
||||
{:label "Customization Color"
|
||||
:key :customization-color
|
||||
:type :select
|
||||
:options [{:key :primary
|
||||
:value "Primary"}
|
||||
{:key :purple
|
||||
:value "Purple"}
|
||||
{:key :indigo
|
||||
:value "Indigo"}
|
||||
{:key :turquoise
|
||||
:value "Turquoise"}
|
||||
{:key :blue
|
||||
:value "Blue"}
|
||||
{:key :green
|
||||
:value "Green"}
|
||||
{:key :yellow
|
||||
:value "Yellow"}
|
||||
{:key :orange
|
||||
:value "Orange"}
|
||||
{:key :red
|
||||
:value "Red"}
|
||||
{:key :pink
|
||||
:value "Pink"}
|
||||
{:key :brown
|
||||
:value "Brown"}
|
||||
{:key :beige
|
||||
:value "Beige"}]}
|
||||
:options (map (fn [[color-kw _]]
|
||||
{:key color-kw
|
||||
:value (name color-kw)})
|
||||
colors/customization)}
|
||||
{:label "Name"
|
||||
:key :name
|
||||
:type :text}
|
||||
|
@ -61,13 +47,15 @@
|
|||
|
||||
(defn cool-preview
|
||||
[]
|
||||
(let [state (reagent/atom {:key-card? false
|
||||
(let [state (reagent/atom {:keycard-account? false
|
||||
:name "Matt Grote"
|
||||
:on-options-press nil
|
||||
:on-card-press nil
|
||||
:show-options-button? true
|
||||
:show-logged-in? true
|
||||
:show-user-hash? false
|
||||
:login-card? false
|
||||
:last-item? true
|
||||
:on-press-sign nil
|
||||
:customization-color :turquoise
|
||||
:profile-picture (resources/get-mock-image :user-picture-male5)
|
||||
|
@ -80,10 +68,9 @@
|
|||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view
|
||||
{:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:margin-horizontal 20
|
||||
:justify-content :center}
|
||||
{:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[quo/profile-card @state]]]])))
|
||||
|
||||
(defn preview-profile-card
|
||||
|
|
|
@ -32,9 +32,9 @@
|
|||
:setup/init-theme
|
||||
(fn []
|
||||
(theme/add-mode-change-listener #(re-frame/dispatch [:system-theme-mode-changed %]))
|
||||
(quo2.theme/set-theme (if (theme/dark-mode?) :dark :light))
|
||||
(quo2.theme/set-theme :dark)
|
||||
;; TODO legacy support
|
||||
(quo.theme/set-theme (if (theme/dark-mode?) :dark :light))))
|
||||
(quo.theme/set-theme :dark)))
|
||||
|
||||
(rf/defn initialize-views
|
||||
{:events [:setup/initialize-view]}
|
||||
|
|
|
@ -2,12 +2,13 @@
|
|||
(:require [quo2.foundations.colors :as colors]
|
||||
[react-native.platform :as platform]
|
||||
[status-im2.navigation.view :as views]
|
||||
[status-im2.navigation.state :as state]
|
||||
[status-im2.common.theme.core :as utils.theme]))
|
||||
[status-im2.navigation.state :as state]))
|
||||
|
||||
(defn status-bar-options
|
||||
[]
|
||||
(let [dark-mode? (if (= @state/root-id :shell-stack) (colors/dark?) (utils.theme/dark-mode?))]
|
||||
;; dark-mode? = After login we are going to use theme as per user's choice (colors/dark?)
|
||||
;; but before login we only have dark mode (dark-mode? = true)
|
||||
(let [dark-mode? (if (= @state/root-id :shell-stack) (colors/dark?) true)]
|
||||
(if platform/android?
|
||||
{:navigationBar {:backgroundColor colors/neutral-100}
|
||||
:statusBar {:backgroundColor :transparent
|
||||
|
@ -98,8 +99,8 @@
|
|||
|
||||
:multiaccounts-keycard
|
||||
{:root {:stack {:id :multiaccounts-stack
|
||||
:children [{:component {:name :multiaccounts
|
||||
:id :multiaccounts
|
||||
:children [{:component {:name :profiles
|
||||
:id :profiles
|
||||
:options (get-screen-options :multiaccounts)}}
|
||||
{:component {:name :keycard-login-pin
|
||||
:id :keycard-login-pin
|
||||
|
|
|
@ -2000,5 +2000,16 @@
|
|||
"strength-divider-okay-label": "Okay",
|
||||
"strength-divider-strong-label": "Strong",
|
||||
"strength-divider-very-strong-label": "Very strong",
|
||||
"logged-in": "Logged in"
|
||||
"logged-in": "Logged in",
|
||||
"profiles-on-device": "Profiles on device",
|
||||
"profile-password": "Profile password",
|
||||
"forget-password": "Forgot password?",
|
||||
"log-in": "Log in",
|
||||
"type-your-password": "Type your password",
|
||||
"oops-wrong-password": "Oops, wrong password!",
|
||||
"remove-profile?" : "Remove profile?",
|
||||
"remove-profile-message": "Remove profile from this device",
|
||||
"remove-profile-confirm-message": "All profile data will removed from device.",
|
||||
"create-new-profile": "Create new profile",
|
||||
"add-existing-status-profile": "Add existing Status profile"
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue