diff --git a/frontend/src/uxbox/main/ui.cljs b/frontend/src/uxbox/main/ui.cljs index 8ac1ba9ed..c16acdb18 100644 --- a/frontend/src/uxbox/main/ui.cljs +++ b/frontend/src/uxbox/main/ui.cljs @@ -115,7 +115,7 @@ (let [token (get-in route [:params :path :token])] (auth/recovery-page token)) - :settings/profile (settings/profile-page) + :settings/profile (mf/element settings/profile-page) :settings/password (settings/password-page) :settings/notifications (settings/notifications-page) diff --git a/frontend/src/uxbox/main/ui/settings/profile.cljs b/frontend/src/uxbox/main/ui/settings/profile.cljs index c0ed1e34b..52e1dca3a 100644 --- a/frontend/src/uxbox/main/ui/settings/profile.cljs +++ b/frontend/src/uxbox/main/ui/settings/profile.cljs @@ -6,21 +6,24 @@ ;; Copyright (c) 2016-2017 Juan de la Cruz (ns uxbox.main.ui.settings.profile - (:require [cljs.spec.alpha :as s :include-macros true] - [cuerdas.core :as str] - [lentes.core :as l] - [potok.core :as ptk] - [uxbox.main.store :as st] - [uxbox.builtins.icons :as i] - [uxbox.main.ui.settings.header :refer [header]] - [uxbox.main.ui.messages :refer [messages-widget]] - [uxbox.main.data.users :as udu] - [uxbox.util.i18n :refer [tr]] - [uxbox.util.forms :as fm] - [uxbox.util.router :as r] - [rumext.core :as mx :include-macros true] - [uxbox.util.interop :refer [iterable->seq]] - [uxbox.util.dom :as dom])) + (:require + [cljs.spec.alpha :as s] + [cuerdas.core :as str] + [lentes.core :as l] + [potok.core :as ptk] + [rumext.core :as mx] + [rumext.func :as mf] + [uxbox.builtins.icons :as i] + [uxbox.main.data.users :as udu] + [uxbox.main.store :as st] + [uxbox.main.ui.messages :refer [messages-widget]] + [uxbox.main.ui.settings.header :refer [header]] + [uxbox.util.dom :as dom] + [uxbox.util.forms :as fm] + [uxbox.util.i18n :refer [tr]] + [uxbox.util.interop :refer [iterable->seq]] + [uxbox.util.router :as r] +)) (def form-data (fm/focus-data :profile st/state)) @@ -43,91 +46,66 @@ ::username ::email])) -;; --- Profile Form +(defn- on-error + [{:keys [code] :as payload}] + (case code + :uxbox.services.users/registration-disabled + (st/emit! (tr "errors.api.form.registration-disabled")) + :uxbox.services.users/email-already-exists + (st/emit! (assoc-error :email (tr "errors.api.form.email-already-exists"))) + :uxbox.services.users/username-already-exists + (st/emit! (assoc-error :username (tr "errors.api.form.username-already-exists"))))) -(mx/defc profile-form - {:mixins [mx/static mx/reactive - (fm/clear-mixin st/store :profile)]} - [] - (let [data (merge {:theme "light"} - (mx/react profile-ref) - (mx/react form-data)) - errors (mx/react form-errors) - valid? (fm/valid? ::profile-form data) - theme (:theme data)] - (letfn [(on-change [field event] - (let [value (dom/event->value event)] - (st/emit! (assoc-value field value)))) - (on-error [{:keys [code] :as payload}] - (case code - :uxbox.services.users/registration-disabled - (st/emit! (tr "errors.api.form.registration-disabled")) - :uxbox.services.users/email-already-exists - (st/emit! (assoc-error :email (tr "errors.api.form.email-already-exists"))) - :uxbox.services.users/username-already-exists - (st/emit! (assoc-error :username (tr "errors.api.form.username-already-exists"))))) - (on-success [_] - (st/emit! (clear-form))) - (on-submit [event] - (st/emit! (udu/update-profile data on-success on-error)))] +(defn- on-field-change + [event field] + (let [value (dom/event->value event)] + (st/emit! (assoc-value field value)))) + +;; --- Profile Form +(mx/def profile-form + :mixins [mx/static mx/reactive mx/sync-render (fm/clear-mixin st/store :profile)] + :render + (fn [own props] + (let [data (merge {:theme "light"} + (mx/react profile-ref) + (mx/react form-data)) + errors (mx/react form-errors) + valid? (fm/valid? ::profile-form data) + theme (:theme data) + on-success #(st/emit! (clear-form)) + on-submit #(st/emit! (udu/update-profile data on-success on-error))] [:form.profile-form [:span.user-settings-label (tr "settings.profile.profile.profile-saved")] [:input.input-text {:type "text" - :on-change (partial on-change :fullname) + :on-change #(on-field-change % :fullname) :value (:fullname data "") :placeholder (tr "settings.profile.your-name")}] [:input.input-text {:type "text" - :on-change (partial on-change :username) + :on-change #(on-field-change % :username) :value (:username data "") :placeholder (tr "settings.profile.your-username")}] (fm/input-error errors :username) [:input.input-text {:type "email" - :on-change (partial on-change :email) + :on-change #(on-field-change % :email) :value (:email data "") :placeholder (tr "settings.profile.your-email")}] (fm/input-error errors :email) - #_[:span.user-settings-label (tr "settings.choose-color-theme")] - #_[:div.input-radio.radio-primary - [:input {:type "radio" - :checked (when (= theme "light") "checked") - :on-change (partial on-change :theme) - :id "light-theme" - :name "theme" - :value "light"}] - [:label {:for "light-theme"} (tr "settings.profile.light-theme")] - - [:input {:type "radio" - :checked (when (= theme "dark") "checked") - :on-change (partial on-change :theme) - :id "dark-theme" - :name "theme" - :value "dark"}] - [:label {:for "dark-theme"} (tr "settings.profile.dark-theme")] - - [:input {:type "radio" - :checked (when (= theme "high-contrast") "checked") - :on-change (partial on-change :theme) - :id "high-contrast-theme" - :name "theme" - :value "high-contrast"}] - [:label {:for "high-contrast-theme"} (tr "settings.profile.high-contrast-theme")]] - - [:input.btn-primary - {:type "button" - :class (when-not valid? "btn-disabled") - :disabled (not valid?) - :on-click on-submit - :value (tr "settings.update-settings")}]]))) + [:input.btn-primary + {:type "button" + :class (when-not valid? "btn-disabled") + :disabled (not valid?) + :on-click on-submit + :value (tr "settings.update-settings")}]]))) ;; --- Profile Photo Form -(mx/defc profile-photo-form - {:mixins [mx/static mx/reactive]} +(mf/defc profile-photo-form + {:wrap [mf/reactive]} [] (letfn [(on-change [event] (let [target (dom/get-target event) @@ -136,7 +114,7 @@ (first))] (st/emit! (udu/update-photo file)) (dom/clean-value! target)))] - (let [{:keys [photo]} (mx/react profile-ref) + (let [{:keys [photo]} (mf/react profile-ref) photo (if (or (str/empty? photo) (nil? photo)) "images/avatar.jpg" photo)] @@ -148,8 +126,7 @@ ;; --- Profile Page -(mx/defc profile-page - {:mixins [mx/static]} +(mf/defc profile-page [] [:main.dashboard-main (messages-widget) @@ -157,5 +134,5 @@ [:section.dashboard-content.user-settings [:section.user-settings-content [:span.user-settings-label (tr "settings.profile.your-avatar")] - (profile-photo-form) + [:& profile-photo-form] (profile-form)]]])