diff --git a/frontend/src/app/main/data/users.cljs b/frontend/src/app/main/data/users.cljs index 4bc1355d25..1eaa37d847 100644 --- a/frontend/src/app/main/data/users.cljs +++ b/frontend/src/app/main/data/users.cljs @@ -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 diff --git a/frontend/src/app/main/ui/settings/options.cljs b/frontend/src/app/main/ui/settings/options.cljs index 1793d5bfb2..a79e0000ec 100644 --- a/frontend/src/app/main/ui/settings/options.cljs +++ b/frontend/src/app/main/ui/settings/options.cljs @@ -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 {}]]]) diff --git a/frontend/src/app/main/ui/settings/profile.cljs b/frontend/src/app/main/ui/settings/profile.cljs index 2919180e36..01ee28c74e 100644 --- a/frontend/src/app/main/ui/settings/profile.cljs +++ b/frontend/src/app/main/ui/settings/profile.cljs @@ -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]]])