mirror of
https://github.com/penpot/penpot.git
synced 2025-05-30 09:06:12 +02:00
🎉 Add terms check to register
This commit is contained in:
elhombretecla
Andrés Moya
parent
93311b8b98
commit
6c47df20af
8 changed files with 152 additions and 83 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -23,56 +23,70 @@
|
|||
(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)
|
||||
is-checkbox? (= @type' "checkbox")
|
||||
is-radio? (= @type' "radio")
|
||||
is-text? (or (= @type' "password")
|
||||
(= @type' "text")
|
||||
(= @type' "email"))
|
||||
|
||||
value (get-in @form [:data name] "")
|
||||
touched? (get-in @form [:touched input-name])
|
||||
error (get-in @form [:errors input-name])
|
||||
|
||||
help-icon' (cond
|
||||
(and (= type "password")
|
||||
(= @type' "password"))
|
||||
i/eye
|
||||
value (get-in @form [:data input-name] "")
|
||||
|
||||
(and (= type "password")
|
||||
(= @type' "text"))
|
||||
i/eye-closed
|
||||
help-icon' (cond
|
||||
(and (= input-type "password")
|
||||
(= @type' "password"))
|
||||
i/eye
|
||||
|
||||
:else
|
||||
help-icon)
|
||||
(and (= input-type "password")
|
||||
(= @type' "text"))
|
||||
i/eye-closed
|
||||
|
||||
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')))
|
||||
: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 (= @type' "radio")
|
||||
:input-checkbox (= @type' "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]
|
||||
(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]
|
||||
(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 (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
|
||||
|
|
|
|||
|
|
@ -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