mirror of
https://github.com/penpot/penpot.git
synced 2025-01-08 07:50:43 -05:00
feat(frontend): minor refactor on settings/profile
This commit is contained in:
Andrey Antukh
parent
3f62d7cb65
commit
bb64655804
2 changed files with 60 additions and 83 deletions
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -6,21 +6,24 @@
|
|||
;; Copyright (c) 2016-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(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)]]])
|
||||
|
|
|
|||
Loading…
Reference in a new issue