mirror of
https://github.com/penpot/penpot.git
synced 2025-05-29 05:56:11 +02:00
Merge branch 'main' into develop
This commit is contained in:
Andrey Antukh
commit
fdeaac7f65
11 changed files with 183 additions and 123 deletions
|
|
@ -33,7 +33,7 @@
|
|||
(s/def ::email ::us/email)
|
||||
(s/def ::password ::us/string)
|
||||
(s/def ::lang (s/nilable ::us/string))
|
||||
(s/def ::theme ::us/string)
|
||||
(s/def ::theme (s/nilable ::us/string))
|
||||
(s/def ::created-at ::us/inst)
|
||||
(s/def ::password-1 ::us/string)
|
||||
(s/def ::password-2 ::us/string)
|
||||
|
|
@ -55,17 +55,15 @@
|
|||
(ptk/reify ::profile-fetched
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(assoc state :profile
|
||||
(cond-> data
|
||||
(nil? (:theme data))
|
||||
(assoc :theme cfg/default-theme))))
|
||||
(assoc state :profile data))
|
||||
|
||||
ptk/EffectEvent
|
||||
(effect [_ state stream]
|
||||
(let [profile (:profile state)]
|
||||
(swap! storage assoc :profile profile)
|
||||
(i18n/set-locale! (:lang profile))
|
||||
(theme/set-current-theme! (:theme profile))))))
|
||||
(some-> (:theme profile)
|
||||
(theme/set-current-theme!))))))
|
||||
|
||||
;; --- Fetch Profile
|
||||
|
||||
|
|
@ -91,16 +89,19 @@
|
|||
(watch [_ state stream]
|
||||
(let [mdata (meta data)
|
||||
on-success (:on-success mdata identity)
|
||||
on-error (:on-error mdata identity)]
|
||||
(rx/merge
|
||||
(->> (rp/mutation :update-profile data)
|
||||
(rx/map fetch-profile)
|
||||
(rx/catch on-error))
|
||||
(->> stream
|
||||
(rx/filter (ptk/type? ::profile-fetched))
|
||||
(rx/take 1)
|
||||
(rx/tap on-success)
|
||||
(rx/ignore)))))))
|
||||
on-error (:on-error mdata #(rx/throw %))]
|
||||
(->> (rp/mutation :update-profile data)
|
||||
(rx/catch on-error)
|
||||
(rx/mapcat
|
||||
(fn [_]
|
||||
(rx/merge
|
||||
(->> stream
|
||||
(rx/filter (ptk/type? ::profile-fetched))
|
||||
(rx/take 1)
|
||||
(rx/tap on-success)
|
||||
(rx/ignore))
|
||||
(rx/of (profile-fetched data))))))))))
|
||||
|
||||
|
||||
;; --- Request Email Change
|
||||
|
||||
|
|
|
|||
|
|
@ -36,17 +36,23 @@
|
|||
|
||||
(defn- validate
|
||||
[data]
|
||||
(let [password (:password data)]
|
||||
(when (> 8 (count password))
|
||||
{:password {:message "errors.password-too-short"}})))
|
||||
(let [password (:password data)
|
||||
terms-privacy (:terms-privacy data)]
|
||||
(cond-> {}
|
||||
(> 8 (count password))
|
||||
(assoc :password {:message "errors.password-too-short"})
|
||||
|
||||
(and (not terms-privacy) false)
|
||||
(assoc :terms-privacy {:message "errors.terms-privacy-agreement-invalid"}))))
|
||||
|
||||
(s/def ::fullname ::us/not-empty-string)
|
||||
(s/def ::password ::us/not-empty-string)
|
||||
(s/def ::email ::us/email)
|
||||
(s/def ::invitation-token ::us/not-empty-string)
|
||||
(s/def ::terms-privacy ::us/boolean)
|
||||
|
||||
(s/def ::register-form
|
||||
(s/keys :req-un [::password ::fullname ::email]
|
||||
(s/keys :req-un [::password ::fullname ::email ::terms-privacy]
|
||||
:opt-un [::invitation-token]))
|
||||
|
||||
(mf/defc register-form
|
||||
|
|
@ -113,10 +119,16 @@
|
|||
:label (tr "auth.password")
|
||||
:type "password"}]]
|
||||
|
||||
[:div.fields-row
|
||||
[:& fm/input {:name :terms-privacy
|
||||
:class "check-primary"
|
||||
:tab-index "4"
|
||||
:label (tr "auth.terms-privacy-agreement")
|
||||
:type "checkbox"}]]
|
||||
|
||||
[:& fm/submit-button
|
||||
{:label (tr "auth.register-submit")
|
||||
:disabled @submitted?
|
||||
}]]))
|
||||
:disabled @submitted?}]]))
|
||||
|
||||
;; --- Register Page
|
||||
|
||||
|
|
|
|||
|
|
@ -9,70 +9,84 @@
|
|||
|
||||
(ns app.main.ui.components.forms
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[cuerdas.core :as str]
|
||||
[app.common.data :as d]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.object :as obj]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.forms :as fm]
|
||||
[app.util.i18n :as i18n :refer [t tr]]
|
||||
["react" :as react]
|
||||
[app.util.dom :as dom]))
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.object :as obj]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(def form-ctx (mf/create-context nil))
|
||||
(def use-form fm/use-form)
|
||||
|
||||
(mf/defc input
|
||||
[{:keys [type label help-icon disabled name form hint trim] :as props}]
|
||||
(let [form (or form (mf/use-ctx form-ctx))
|
||||
[{:keys [label help-icon disabled form hint trim] :as props}]
|
||||
(let [input-type (get props :type)
|
||||
input-name (get props :name)
|
||||
more-classes (get props :class)
|
||||
|
||||
type' (mf/use-state type)
|
||||
focus? (mf/use-state false)
|
||||
form (or form (mf/use-ctx form-ctx))
|
||||
|
||||
touched? (get-in @form [:touched name])
|
||||
error (get-in @form [:errors name])
|
||||
type' (mf/use-state input-type)
|
||||
focus? (mf/use-state false)
|
||||
|
||||
value (get-in @form [:data name] "")
|
||||
is-checkbox? (= @type' "checkbox")
|
||||
is-radio? (= @type' "radio")
|
||||
is-text? (or (= @type' "password")
|
||||
(= @type' "text")
|
||||
(= @type' "email"))
|
||||
|
||||
help-icon' (cond
|
||||
(and (= type "password")
|
||||
(= @type' "password"))
|
||||
i/eye
|
||||
touched? (get-in @form [:touched input-name])
|
||||
error (get-in @form [:errors input-name])
|
||||
|
||||
(and (= type "password")
|
||||
(= @type' "text"))
|
||||
i/eye-closed
|
||||
value (get-in @form [:data input-name] "")
|
||||
|
||||
:else
|
||||
help-icon)
|
||||
help-icon' (cond
|
||||
(and (= input-type "password")
|
||||
(= @type' "password"))
|
||||
i/eye
|
||||
|
||||
klass (dom/classnames
|
||||
:focus @focus?
|
||||
:valid (and touched? (not error))
|
||||
:invalid (and touched? error)
|
||||
:disabled disabled
|
||||
:empty (str/empty? value)
|
||||
:with-icon (not (nil? help-icon')))
|
||||
(and (= input-type "password")
|
||||
(= @type' "text"))
|
||||
i/eye-closed
|
||||
|
||||
:else
|
||||
help-icon)
|
||||
|
||||
klass (str more-classes " "
|
||||
(dom/classnames
|
||||
:focus @focus?
|
||||
:valid (and touched? (not error))
|
||||
:invalid (and touched? error)
|
||||
:disabled disabled
|
||||
:empty (and is-text? (str/empty? value))
|
||||
:with-icon (not (nil? help-icon'))
|
||||
:custom-input is-text?
|
||||
:input-radio is-radio?
|
||||
:input-checkbox is-checkbox?))
|
||||
|
||||
swap-text-password
|
||||
(fn []
|
||||
(swap! type' (fn [type]
|
||||
(if (= "password" type)
|
||||
(swap! type' (fn [input-type]
|
||||
(if (= "password" input-type)
|
||||
"text"
|
||||
"password"))))
|
||||
|
||||
on-focus #(reset! focus? true)
|
||||
on-change (fm/on-input-change form name trim)
|
||||
on-change (fm/on-input-change form input-name trim)
|
||||
|
||||
on-blur
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(reset! focus? false)
|
||||
(when-not (get-in @form [:touched name])
|
||||
(swap! form assoc-in [:touched name] true)))
|
||||
(when-not (get-in @form [:touched input-name])
|
||||
(swap! form assoc-in [:touched input-name] true)))
|
||||
|
||||
props (-> props
|
||||
(dissoc :help-icon :form :trim)
|
||||
(assoc :value value
|
||||
(assoc :id (name input-name)
|
||||
:value value
|
||||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
:placeholder label
|
||||
|
|
@ -80,15 +94,15 @@
|
|||
:type @type')
|
||||
(obj/clj->props))]
|
||||
|
||||
[:div.custom-input
|
||||
[:div
|
||||
{:class klass}
|
||||
[:*
|
||||
[:label label]
|
||||
[:> :input props]
|
||||
[:label {:for (name input-name)} label]
|
||||
(when help-icon'
|
||||
[:div.help-icon
|
||||
{:style {:cursor "pointer"}
|
||||
:on-click (when (= "password" type)
|
||||
:on-click (when (= "password" input-type)
|
||||
swap-text-password)}
|
||||
help-icon'])
|
||||
(cond
|
||||
|
|
@ -100,16 +114,17 @@
|
|||
|
||||
|
||||
(mf/defc textarea
|
||||
[{:keys [label disabled name form hint trim] :as props}]
|
||||
(let [form (or form (mf/use-ctx form-ctx))
|
||||
[{:keys [label disabled form hint trim] :as props}]
|
||||
(let [input-name (get props :name)
|
||||
|
||||
form (or form (mf/use-ctx form-ctx))
|
||||
|
||||
type' (mf/use-state type)
|
||||
focus? (mf/use-state false)
|
||||
|
||||
touched? (get-in @form [:touched name])
|
||||
error (get-in @form [:errors name])
|
||||
touched? (get-in @form [:touched input-name])
|
||||
error (get-in @form [:errors input-name])
|
||||
|
||||
value (get-in @form [:data name] "")
|
||||
value (get-in @form [:data input-name] "")
|
||||
|
||||
klass (dom/classnames
|
||||
:focus @focus?
|
||||
|
|
@ -120,13 +135,13 @@
|
|||
)
|
||||
|
||||
on-focus #(reset! focus? true)
|
||||
on-change (fm/on-input-change form name trim)
|
||||
on-change (fm/on-input-change form input-name trim)
|
||||
|
||||
on-blur
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(reset! focus? false)
|
||||
(when-not (get-in @form [:touched name])
|
||||
(swap! form assoc-in [:touched name] true)))
|
||||
(when-not (get-in @form [:touched input-name])
|
||||
(swap! form assoc-in [:touched input-name] true)))
|
||||
|
||||
props (-> props
|
||||
(dissoc :help-icon :form :trim)
|
||||
|
|
@ -134,8 +149,7 @@
|
|||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
;; :placeholder label
|
||||
:on-change on-change
|
||||
:type @type')
|
||||
:on-change on-change)
|
||||
(obj/clj->props))]
|
||||
|
||||
[:div.custom-input
|
||||
|
|
@ -151,12 +165,14 @@
|
|||
[:span.hint hint])]]))
|
||||
|
||||
(mf/defc select
|
||||
[{:keys [options label name form default]
|
||||
[{:keys [options label form default] :as props
|
||||
:or {default ""}}]
|
||||
(let [form (or form (mf/use-ctx form-ctx))
|
||||
value (get-in @form [:data name] default)
|
||||
(let [input-name (get props :name)
|
||||
|
||||
form (or form (mf/use-ctx form-ctx))
|
||||
value (or (get-in @form [:data input-name]) default)
|
||||
cvalue (d/seek #(= value (:value %)) options)
|
||||
on-change (fm/on-input-change form name)]
|
||||
on-change (fm/on-input-change form input-name)]
|
||||
|
||||
[:div.custom-select
|
||||
[:select {:value value
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
|
||||
(ns app.main.ui.settings.options
|
||||
(:require
|
||||
[app.common.spec :as us]
|
||||
[app.common.data :as d]
|
||||
[app.common.spec :as us]
|
||||
[app.main.data.messages :as dm]
|
||||
[app.main.data.users :as du]
|
||||
[app.main.refs :as refs]
|
||||
|
|
@ -28,10 +28,6 @@
|
|||
(s/def ::options-form
|
||||
(s/keys :opt-un [::lang ::theme]))
|
||||
|
||||
(defn- on-error
|
||||
[form error]
|
||||
(st/emit! (dm/error (tr "errors.generic"))))
|
||||
|
||||
(defn- on-success
|
||||
[form]
|
||||
(st/emit! (dm/success (tr "notifications.profile-saved"))))
|
||||
|
|
@ -42,8 +38,7 @@
|
|||
data (cond-> data
|
||||
(empty? (:lang data))
|
||||
(assoc :lang nil))
|
||||
mdata {:on-success (partial on-success form)
|
||||
:on-error (partial on-error form)}]
|
||||
mdata {:on-success (partial on-success form)}]
|
||||
(st/emit! (du/update-profile (with-meta data mdata)))))
|
||||
|
||||
(mf/defc options-form
|
||||
|
|
|
|||
|
|
@ -31,24 +31,18 @@
|
|||
(s/def ::email ::us/email)
|
||||
|
||||
(s/def ::profile-form
|
||||
(s/keys :req-un [::fullname ::lang ::theme ::email]))
|
||||
(s/keys :req-un [::fullname ::email]))
|
||||
|
||||
(defn- on-success
|
||||
[form]
|
||||
(st/emit! (dm/success (tr "notifications.profile-saved"))))
|
||||
|
||||
(defn- on-error
|
||||
[form error]
|
||||
(st/emit! (dm/error (tr "errors.generic"))))
|
||||
|
||||
(defn- on-submit
|
||||
[form event]
|
||||
(let [data (:clean-data @form)
|
||||
mdata {:on-success (partial on-success form)
|
||||
:on-error (partial on-error form)}]
|
||||
mdata {:on-success (partial on-success form)}]
|
||||
(st/emit! (du/update-profile (with-meta data mdata)))))
|
||||
|
||||
|
||||
;; --- Profile Form
|
||||
|
||||
(mf/defc profile-form
|
||||
|
|
|
|||
|
|
@ -89,7 +89,6 @@
|
|||
(mf/set-ref-val! state-ref new-value)
|
||||
(render inc))
|
||||
|
||||
|
||||
ISwap
|
||||
(-swap! [self f]
|
||||
(let [f (wrap-update-fn f opts)]
|
||||
|
|
@ -119,7 +118,10 @@
|
|||
([form field trim?]
|
||||
(fn [event]
|
||||
(let [target (dom/get-target event)
|
||||
value (dom/get-value target)]
|
||||
value (if (or (= (.-type target) "checkbox")
|
||||
(= (.-type target) "radio"))
|
||||
(.-checked target)
|
||||
(dom/get-value target))]
|
||||
(swap! form (fn [state]
|
||||
(-> state
|
||||
(assoc-in [:data field] (if trim? (str/trim value) value))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue