mirror of
https://github.com/penpot/penpot.git
synced 2025-02-12 18:18:24 -05:00
✨ Properly initialize options and profile forms
This commit is contained in:
Andrey Antukh
parent
d389dab8d2
commit
88292f2f3b
3 changed files with 41 additions and 46 deletions
|
|
@ -303,7 +303,7 @@
|
|||
(watch [_ _ stream]
|
||||
(let [mdata (meta data)
|
||||
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))
|
||||
(rx/catch on-error)
|
||||
(rx/mapcat
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
[app.main.store :as st]
|
||||
[app.main.ui.components.forms :as fm]
|
||||
[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]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
|
|
@ -30,51 +30,51 @@
|
|||
(defn- on-submit
|
||||
[form _event]
|
||||
(let [data (:clean-data @form)
|
||||
data (cond-> data
|
||||
(empty? (:lang data))
|
||||
(assoc :lang nil))
|
||||
mdata {:on-success (partial on-success form)}]
|
||||
(st/emit! (du/update-profile (with-meta data mdata)))))
|
||||
|
||||
(mf/defc options-form
|
||||
[{:keys [locale] :as props}]
|
||||
[]
|
||||
(let [profile (mf/deref refs/profile)
|
||||
initial (mf/with-memo [profile]
|
||||
(update profile :lang #(or % "")))
|
||||
form (fm/use-form :spec ::options-form
|
||||
:initial profile)]
|
||||
:initial initial)]
|
||||
|
||||
[:& fm/form {:class "options-form"
|
||||
:on-submit on-submit
|
||||
:form form}
|
||||
|
||||
[:h2 (t locale "labels.language")]
|
||||
[:h2 (tr "labels.language")]
|
||||
|
||||
[:div.fields-row
|
||||
[:& fm/select {:options (into [{:label "Auto (browser)" :value "default"}]
|
||||
[:& fm/select {:options (into [{:label "Auto (browser)" :value ""}]
|
||||
i18n/supported-locales)
|
||||
:label (t locale "dashboard.select-ui-language")
|
||||
:label (tr "dashboard.select-ui-language")
|
||||
:default ""
|
||||
:name :lang
|
||||
:data-test "setting-lang"}]]
|
||||
|
||||
|
||||
;; 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
|
||||
[:& fm/select {:label (t locale "dashboard.select-ui-theme")
|
||||
[:& fm/select {:label (tr "dashboard.select-ui-theme")
|
||||
:name :theme
|
||||
:default "default"
|
||||
:options [{:label "Default" :value "default"}]
|
||||
:data-test "theme-lang"}]]
|
||||
[:& fm/submit-button
|
||||
{:label (t locale "dashboard.update-settings")
|
||||
{:label (tr "dashboard.update-settings")
|
||||
:data-test "submit-lang-change"}]]))
|
||||
|
||||
;; --- Password Page
|
||||
|
||||
(mf/defc options-page
|
||||
[{:keys [locale]}]
|
||||
[]
|
||||
(mf/use-effect
|
||||
#(dom/set-html-title (tr "title.settings.options")))
|
||||
|
||||
[:div.dashboard-settings
|
||||
[:div.form-container
|
||||
{:data-test "settings-form"}
|
||||
[:& options-form {:locale locale}]]])
|
||||
[:& options-form {}]]])
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
[app.main.ui.components.forms :as fm]
|
||||
[app.main.ui.icons :as i]
|
||||
[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]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
|
|
@ -40,12 +40,12 @@
|
|||
;; --- Profile Form
|
||||
|
||||
(mf/defc profile-form
|
||||
[{:keys [locale] :as props}]
|
||||
[]
|
||||
(let [profile (mf/deref refs/profile)
|
||||
form (fm/use-form :spec ::profile-form
|
||||
:initial profile)
|
||||
disabled-button (mf/use-state true)
|
||||
activate-btn #(reset! disabled-button false)]
|
||||
initial (mf/with-memo [profile]
|
||||
(let [subscribed? (-> profile :props :newsletter-subscribed)]
|
||||
(assoc profile :newsletter-subscribed subscribed?)))
|
||||
form (fm/use-form :spec ::profile-form :initial initial)]
|
||||
|
||||
[:& fm/form {:on-submit on-submit
|
||||
:form form
|
||||
|
|
@ -53,9 +53,8 @@
|
|||
[:div.fields-row
|
||||
[:& fm/input
|
||||
{:type "text"
|
||||
:on-key-down activate-btn
|
||||
:name :fullname
|
||||
:label (t locale "dashboard.your-name")}]]
|
||||
:label (tr "dashboard.your-name")}]]
|
||||
|
||||
[:div.fields-row
|
||||
[:& fm/input
|
||||
|
|
@ -63,40 +62,39 @@
|
|||
:name :email
|
||||
:disabled true
|
||||
:help-icon i/at
|
||||
:label (t locale "dashboard.your-email")}]
|
||||
:label (tr "dashboard.your-email")}]
|
||||
|
||||
[:div.options
|
||||
[:div.change-email
|
||||
[:a {:on-click #(modal/show! :change-email {})}
|
||||
(t locale "dashboard.change-email")]]]]
|
||||
(tr "dashboard.change-email")]]]]
|
||||
|
||||
[:div.newsletter-subs
|
||||
[:p.newsletter-title (tr "dashboard.newsletter-title")]
|
||||
[:& fm/input {:name :newsletter-subscribed
|
||||
:class "check-primary"
|
||||
:type "checkbox"
|
||||
:label (tr "dashboard.newsletter-msg")
|
||||
:on-click activate-btn}]
|
||||
[:p.info (tr "onboarding.newsletter.privacy1") [:a {:target "_blank" :href "https://penpot.app/privacy.html"} (tr "onboarding.newsletter.policy")]]
|
||||
:label (tr "dashboard.newsletter-msg")}]
|
||||
[:p.info (tr "onboarding.newsletter.privacy1")
|
||||
[:a {:target "_blank" :href "https://penpot.app/privacy.html"} (tr "onboarding.newsletter.policy")]]
|
||||
[:p.info (tr "onboarding.newsletter.privacy2")]]
|
||||
|
||||
[:& fm/submit-button
|
||||
{:label (t locale "dashboard.save-settings")
|
||||
:disabled @disabled-button}]
|
||||
{:label (tr "dashboard.save-settings")
|
||||
:disabled (empty? (:touched @form))}]
|
||||
|
||||
[:div.links
|
||||
[:div.link-item
|
||||
[:a {:on-click #(modal/show! :delete-account {})
|
||||
:data-test "remove-acount-btn"}
|
||||
(t locale "dashboard.remove-account")]]]]))
|
||||
(tr "dashboard.remove-account")]]]]))
|
||||
|
||||
;; --- Profile Photo Form
|
||||
|
||||
(mf/defc profile-photo-form
|
||||
[{:keys [locale] :as props}]
|
||||
(let [file-input (mf/use-ref nil)
|
||||
profile (mf/deref refs/profile)
|
||||
photo (cfg/resolve-profile-photo-url profile)
|
||||
(mf/defc profile-photo-form []
|
||||
(let [file-input (mf/use-ref nil)
|
||||
profile (mf/deref refs/profile)
|
||||
photo (cfg/resolve-profile-photo-url profile)
|
||||
on-image-click #(dom/click (mf/ref-val file-input))
|
||||
|
||||
on-file-selected
|
||||
|
|
@ -105,7 +103,7 @@
|
|||
|
||||
[:form.avatar-form
|
||||
[: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}]
|
||||
[:& file-uploader {:accept "image/jpeg,image/png"
|
||||
:multi false
|
||||
|
|
@ -115,14 +113,11 @@
|
|||
|
||||
;; --- Profile Page
|
||||
|
||||
(mf/defc profile-page
|
||||
[{:keys [locale]}]
|
||||
|
||||
(mf/use-effect
|
||||
#(dom/set-html-title (tr "title.settings.profile")))
|
||||
|
||||
(mf/defc profile-page []
|
||||
(mf/with-effect []
|
||||
(dom/set-html-title (tr "title.settings.profile")))
|
||||
[:div.dashboard-settings
|
||||
[:div.form-container.two-columns
|
||||
[:& profile-photo-form {:locale locale}]
|
||||
[:& profile-form {:locale locale}]]])
|
||||
[:& profile-photo-form]
|
||||
[:& profile-form]]])
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue