3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-18 14:47:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Properly initialize options and profile forms

Browse source
This commit is contained in:
Andrey Antukh 2022-04-04 15:43:19 +02:00
parent d389dab8d2
commit 88292f2f3b
3 changed files with 41 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/data/users.cljs
View file

@ -303,7 +303,7 @@
(watch [_ _ stream] (watch [_ _ stream]
(let [mdata (meta data) (let [mdata (meta data)
on-success (:on-success mdata identity) on-success (:on-success mdata identity)
on-error (:on-error mdata #(rx/throw %))] on-error (:on-error mdata rx/throw)]
(->> (rp/mutation :update-profile (dissoc data :props)) (->> (rp/mutation :update-profile (dissoc data :props))
(rx/catch on-error) (rx/catch on-error)
(rx/mapcat (rx/mapcat

30
frontend/src/app/main/ui/settings/options.cljs
View file

@ -13,7 +13,7 @@
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.forms :as fm] [app.main.ui.components.forms :as fm]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [t tr]] [app.util.i18n :as i18n :refer [tr]]
[cljs.spec.alpha :as s] [cljs.spec.alpha :as s]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
@ -30,51 +30,51 @@
(defn- on-submit (defn- on-submit
[form _event] [form _event]
(let [data (:clean-data @form) (let [data (:clean-data @form)
data (cond-> data
(empty? (:lang data))
(assoc :lang nil))
mdata {:on-success (partial on-success form)}] mdata {:on-success (partial on-success form)}]
(st/emit! (du/update-profile (with-meta data mdata))))) (st/emit! (du/update-profile (with-meta data mdata)))))
(mf/defc options-form (mf/defc options-form
[{:keys [locale] :as props}] []
(let [profile (mf/deref refs/profile) (let [profile (mf/deref refs/profile)
initial (mf/with-memo [profile]
(update profile :lang #(or % "")))
form (fm/use-form :spec ::options-form form (fm/use-form :spec ::options-form
:initial profile)] :initial initial)]
[:& fm/form {:class "options-form" [:& fm/form {:class "options-form"
:on-submit on-submit :on-submit on-submit
:form form} :form form}
[:h2 (t locale "labels.language")] [:h2 (tr "labels.language")]
[:div.fields-row [:div.fields-row
[:& fm/select {:options (into [{:label "Auto (browser)" :value "default"}] [:& fm/select {:options (into [{:label "Auto (browser)" :value ""}]
i18n/supported-locales) i18n/supported-locales)
:label (t locale "dashboard.select-ui-language") :label (tr "dashboard.select-ui-language")
:default "" :default ""
:name :lang :name :lang
:data-test "setting-lang"}]] :data-test "setting-lang"}]]
;; TODO: Do not show as long as we only have one theme ;; TODO: Do not show as long as we only have one theme
#_[:h2 (t locale "dashboard.theme-change")] #_[:h2 (tr "dashboard.theme-change")]
#_[:div.fields-row #_[:div.fields-row
[:& fm/select {:label (t locale "dashboard.select-ui-theme") [:& fm/select {:label (tr "dashboard.select-ui-theme")
:name :theme :name :theme
:default "default" :default "default"
:options [{:label "Default" :value "default"}] :options [{:label "Default" :value "default"}]
:data-test "theme-lang"}]] :data-test "theme-lang"}]]
[:& fm/submit-button [:& fm/submit-button
{:label (t locale "dashboard.update-settings") {:label (tr "dashboard.update-settings")
:data-test "submit-lang-change"}]])) :data-test "submit-lang-change"}]]))
;; --- Password Page ;; --- Password Page
(mf/defc options-page (mf/defc options-page
[{:keys [locale]}] []
(mf/use-effect (mf/use-effect
#(dom/set-html-title (tr "title.settings.options"))) #(dom/set-html-title (tr "title.settings.options")))
[:div.dashboard-settings [:div.dashboard-settings
[:div.form-container [:div.form-container
{:data-test "settings-form"} {:data-test "settings-form"}
[:& options-form {:locale locale}]]]) [:& options-form {}]]])

55
frontend/src/app/main/ui/settings/profile.cljs
View file

@ -17,7 +17,7 @@
[app.main.ui.components.forms :as fm] [app.main.ui.components.forms :as fm]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr t]] [app.util.i18n :as i18n :refer [tr]]
[cljs.spec.alpha :as s] [cljs.spec.alpha :as s]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
@ -40,12 +40,12 @@
;; --- Profile Form ;; --- Profile Form
(mf/defc profile-form (mf/defc profile-form
[{:keys [locale] :as props}] []
(let [profile (mf/deref refs/profile) (let [profile (mf/deref refs/profile)
form (fm/use-form :spec ::profile-form initial (mf/with-memo [profile]
:initial profile) (let [subscribed? (-> profile :props :newsletter-subscribed)]
disabled-button (mf/use-state true) (assoc profile :newsletter-subscribed subscribed?)))
activate-btn #(reset! disabled-button false)] form (fm/use-form :spec ::profile-form :initial initial)]
[:& fm/form {:on-submit on-submit [:& fm/form {:on-submit on-submit
:form form :form form
@ -53,9 +53,8 @@
[:div.fields-row [:div.fields-row
[:& fm/input [:& fm/input
{:type "text" {:type "text"
:on-key-down activate-btn
:name :fullname :name :fullname
:label (t locale "dashboard.your-name")}]] :label (tr "dashboard.your-name")}]]
[:div.fields-row [:div.fields-row
[:& fm/input [:& fm/input
@ -63,40 +62,39 @@
:name :email :name :email
:disabled true :disabled true
:help-icon i/at :help-icon i/at
:label (t locale "dashboard.your-email")}] :label (tr "dashboard.your-email")}]
[:div.options [:div.options
[:div.change-email [:div.change-email
[:a {:on-click #(modal/show! :change-email {})} [:a {:on-click #(modal/show! :change-email {})}
(t locale "dashboard.change-email")]]]] (tr "dashboard.change-email")]]]]
[:div.newsletter-subs [:div.newsletter-subs
[:p.newsletter-title (tr "dashboard.newsletter-title")] [:p.newsletter-title (tr "dashboard.newsletter-title")]
[:& fm/input {:name :newsletter-subscribed [:& fm/input {:name :newsletter-subscribed
:class "check-primary" :class "check-primary"
:type "checkbox" :type "checkbox"
:label (tr "dashboard.newsletter-msg") :label (tr "dashboard.newsletter-msg")}]
:on-click activate-btn}] [:p.info (tr "onboarding.newsletter.privacy1")
[:p.info (tr "onboarding.newsletter.privacy1") [:a {:target "_blank" :href "https://penpot.app/privacy.html"} (tr "onboarding.newsletter.policy")]] [:a {:target "_blank" :href "https://penpot.app/privacy.html"} (tr "onboarding.newsletter.policy")]]
[:p.info (tr "onboarding.newsletter.privacy2")]] [:p.info (tr "onboarding.newsletter.privacy2")]]
[:& fm/submit-button [:& fm/submit-button
{:label (t locale "dashboard.save-settings") {:label (tr "dashboard.save-settings")
:disabled @disabled-button}] :disabled (empty? (:touched @form))}]
[:div.links [:div.links
[:div.link-item [:div.link-item
[:a {:on-click #(modal/show! :delete-account {}) [:a {:on-click #(modal/show! :delete-account {})
:data-test "remove-acount-btn"} :data-test "remove-acount-btn"}
(t locale "dashboard.remove-account")]]]])) (tr "dashboard.remove-account")]]]]))
;; --- Profile Photo Form ;; --- Profile Photo Form
(mf/defc profile-photo-form (mf/defc profile-photo-form []
[{:keys [locale] :as props}] (let [file-input (mf/use-ref nil)
(let [file-input (mf/use-ref nil) profile (mf/deref refs/profile)
profile (mf/deref refs/profile) photo (cfg/resolve-profile-photo-url profile)
photo (cfg/resolve-profile-photo-url profile)
on-image-click #(dom/click (mf/ref-val file-input)) on-image-click #(dom/click (mf/ref-val file-input))
on-file-selected on-file-selected
@ -105,7 +103,7 @@
[:form.avatar-form [:form.avatar-form
[:div.image-change-field [:div.image-change-field
[:span.update-overlay {:on-click on-image-click} (t locale "labels.update")] [:span.update-overlay {:on-click on-image-click} (tr "labels.update")]
[:img {:src photo}] [:img {:src photo}]
[:& file-uploader {:accept "image/jpeg,image/png" [:& file-uploader {:accept "image/jpeg,image/png"
:multi false :multi false
@ -115,14 +113,11 @@
;; --- Profile Page ;; --- Profile Page
(mf/defc profile-page (mf/defc profile-page []
[{:keys [locale]}] (mf/with-effect []
(dom/set-html-title (tr "title.settings.profile")))
(mf/use-effect
#(dom/set-html-title (tr "title.settings.profile")))
[:div.dashboard-settings [:div.dashboard-settings
[:div.form-container.two-columns [:div.form-container.two-columns
[:& profile-photo-form {:locale locale}] [:& profile-photo-form]
[:& profile-form {:locale locale}]]]) [:& profile-form]]])