3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-02 20:21:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix allow entering invalid emails into the invitation form

Browse source
This commit is contained in:
alonso.torres 2024-03-07 16:27:20 +01:00
parent 8a6882e155
commit ee4c56aa9b
2 changed files with 40 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

52
frontend/src/app/main/ui/components/forms.cljs
View file

@ -372,7 +372,10 @@
in-klass (str class " " in-klass (str class " "
(stl/css-case (stl/css-case
:inside-input true :inside-input true
:no-padding (pos? (count @items)))) :no-padding (pos? (count @items))
:invalid (and (some? valid-item-fn)
touched?
(not (valid-item-fn @value)))))
on-focus on-focus
(mf/use-fn #(reset! focus? true)) (mf/use-fn #(reset! focus? true))
@ -394,27 +397,38 @@
(mf/use-fn (mf/use-fn
(mf/deps @value) (mf/deps @value)
(fn [event] (fn [event]
(cond (let [val (cond-> @value trim str/trim)]
(or (kbd/enter? event) (cond
(kbd/comma? event)) (or (kbd/enter? event) (kbd/comma? event) (kbd/space? event))
(do (do
(dom/prevent-default event) (dom/prevent-default event)
(dom/stop-propagation event) (dom/stop-propagation event)
(let [val (cond-> @value trim str/trim)]
;; Once enter/comma is pressed we mark it as touched
(swap! form assoc-in [:touched input-name] true)
;; Empty values means "submit" the form (whent some items have been added
(when (and (kbd/enter? event) (str/empty? @value) (not-empty @items)) (when (and (kbd/enter? event) (str/empty? @value) (not-empty @items))
(on-submit form)) (on-submit form))
(when (not (str/empty? @value))
(reset! value "")
(swap! items conj-dedup {:text val
:valid (valid-item-fn val)
:caution (caution-item-fn val)}))))
(and (kbd/backspace? event) ;; If we have a string in the input we add it only if valid
(str/empty? @value)) (when (and (valid-item-fn val) (not (str/empty? @value)))
(do (reset! value "")
(dom/prevent-default event)
(dom/stop-propagation event) ;; Once added the form is back as "untouched"
(swap! items (fn [items] (if (c/empty? items) items (pop items)))))))) (swap! form assoc-in [:touched input-name] false)
;; This split will allow users to copy comma/space separated values of emails
(doseq [val (str/split val #",|\s+")]
(swap! items conj-dedup {:text (str/trim val)
:valid (valid-item-fn val)
:caution (caution-item-fn val)}))))
(and (kbd/backspace? event) (str/empty? @value))
(do
(dom/prevent-default event)
(dom/stop-propagation event)
(swap! items (fn [items] (if (c/empty? items) items (pop items)))))))))
on-blur on-blur
(mf/use-fn (mf/use-fn

7
frontend/src/app/main/ui/components/forms.scss
View file

@ -293,6 +293,13 @@
outline: none; outline: none;
border: $s-1 solid var(--input-border-color-focus); border: $s-1 solid var(--input-border-color-focus);
} }
&.invalid {
border: $s-1 solid var(--input-border-color-error);
&:hover,
&:focus {
border: $s-1 solid var(--input-border-color-error);
}
}
} }
label { label {
display: none; display: none;