mirror of
https://github.com/penpot/penpot.git
synced 2025-06-05 07:51:41 +02:00
🚧 Initial work on password form.
This commit is contained in:
Andrey Antukh
parent
08bd135d55
commit
ae2d8330ca
4 changed files with 129 additions and 105 deletions
|
|
@ -6,95 +6,102 @@
|
|||
;; Copyright (c) 2016-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.settings.password
|
||||
(:require [cljs.spec.alpha :as s :include-macros true]
|
||||
[lentes.core :as l]
|
||||
[cuerdas.core :as str]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.data.users :as udu]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.ui.messages :refer [messages-widget]]
|
||||
[uxbox.main.ui.settings.header :refer [header]]
|
||||
[uxbox.util.i18n :refer [tr]]
|
||||
[uxbox.util.forms :as fm]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.messages :as um]
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
(:require
|
||||
[cuerdas.core :as str]
|
||||
[lentes.core :as l]
|
||||
[rumext.alpha :as mf]
|
||||
[struct.core :as stt]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.data.users :as udu]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.forms :as fm]
|
||||
[uxbox.util.i18n :refer [tr]]
|
||||
[uxbox.util.messages :as um]))
|
||||
|
||||
(def form-data (fm/focus-data :profile-password st/state))
|
||||
(def form-errors (fm/focus-errors :profile-password st/state))
|
||||
(stt/defs password-form-spec
|
||||
{:password-1 [stt/required stt/string]
|
||||
:password-2 [stt/required stt/string]
|
||||
:password-old [stt/required stt/string]})
|
||||
|
||||
(def assoc-value (partial fm/assoc-value :profile-password))
|
||||
(def assoc-error (partial fm/assoc-error :profile-password))
|
||||
(def clear-form (partial fm/clear-form :profile-password))
|
||||
(defn- on-submit
|
||||
[event form]
|
||||
(dom/prevent-default event)
|
||||
(prn "on-submit" form)
|
||||
#_(let [data (:clean-data form)
|
||||
opts {:on-success #(prn "On Success" %)
|
||||
:on-error #(on-error % form)}]
|
||||
(st/emit! (udu/update-profile data opts))))
|
||||
|
||||
;; TODO: add better password validation
|
||||
|
||||
(s/def ::password-1 ::fm/non-empty-string)
|
||||
(s/def ::password-2 ::fm/non-empty-string)
|
||||
(s/def ::password-old ::fm/non-empty-string)
|
||||
|
||||
(s/def ::password-form
|
||||
(s/keys :req-un [::password-1
|
||||
::password-2
|
||||
::password-old]))
|
||||
|
||||
(mx/defc password-form
|
||||
{:mixins [mx/reactive mx/static]}
|
||||
[]
|
||||
(let [data (mx/react form-data)
|
||||
errors (mx/react form-errors)
|
||||
valid? (fm/valid? ::password-form data)]
|
||||
(letfn [(on-change [field event]
|
||||
(let [value (dom/event->value event)]
|
||||
(st/emit! (assoc-value field value))))
|
||||
(on-success []
|
||||
(st/emit! (um/info (tr "settings.password.password-saved"))))
|
||||
(on-error [{:keys [code] :as payload}]
|
||||
(case code
|
||||
:uxbox.services.users/old-password-not-match
|
||||
(st/emit! (assoc-error :password-old (tr "settings.password.wrong-old-password")))
|
||||
;; #_(let [data (mx/deref form-data)
|
||||
;; errors (mx/react form-errors)
|
||||
;; valid? (fm/valid? ::password-form data)]
|
||||
;; (letfn [(on-change [field event]
|
||||
;; (let [value (dom/event->value event)]
|
||||
;; (st/emit! (assoc-value field value))))
|
||||
;; (on-success []
|
||||
;; (st/emit! (um/info (tr "settings.password.password-saved"))))
|
||||
;; (on-error [{:keys [code] :as payload}]
|
||||
;; (case code
|
||||
;; :uxbox.services.users/old-password-not-match
|
||||
;; (st/emit! (assoc-error :password-old (tr "settings.password.wrong-old-password")))
|
||||
|
||||
:else
|
||||
(throw (ex-info "unexpected" {:error payload}))))
|
||||
(on-submit [event]
|
||||
(st/emit! (udu/update-password data
|
||||
:on-success on-success
|
||||
:on-error on-error)))]
|
||||
[:form.password-form
|
||||
[:span.user-settings-label (tr "settings.password.change-password")]
|
||||
[:input.input-text
|
||||
{:type "password"
|
||||
:class (fm/error-class errors :password-old)
|
||||
:value (:password-old data "")
|
||||
:on-change (partial on-change :password-old)
|
||||
:placeholder (tr "settings.password.old-password")}]
|
||||
(fm/input-error errors :password-old)
|
||||
[:input.input-text
|
||||
{:type "password"
|
||||
:class (fm/error-class errors :password-1)
|
||||
:value (:password-1 data "")
|
||||
:on-change (partial on-change :password-1)
|
||||
:placeholder (tr "settings.password.new-password")}]
|
||||
(fm/input-error errors :password-1)
|
||||
[:input.input-text
|
||||
{:type "password"
|
||||
:class (fm/error-class errors :password-2)
|
||||
:value (:password-2 data "")
|
||||
:on-change (partial on-change :password-2)
|
||||
:placeholder (tr "settings.password.confirm-password")}]
|
||||
(fm/input-error errors :password-2)
|
||||
[:input.btn-primary
|
||||
{:type "button"
|
||||
:class (when-not valid? "btn-disabled")
|
||||
:disabled (not valid?)
|
||||
:on-click on-submit
|
||||
:value (tr "settings.update-settings")}]])))
|
||||
;; :else
|
||||
;; (throw (ex-info "unexpected" {:error payload}))))
|
||||
;; (on-submit [event]
|
||||
;; (st/emit! (udu/update-password data
|
||||
;; :on-success on-success
|
||||
;; :on-error on-error)))]
|
||||
|
||||
|
||||
|
||||
(mf/defc password-form
|
||||
[props]
|
||||
(let [{:keys [data] :as form} (fm/use-form {:initial {} :spec password-form-spec})]
|
||||
(prn "password-form" form)
|
||||
[:form.password-form {:on-submit #(on-submit % form)}
|
||||
[:span.user-settings-label (tr "settings.password.change-password")]
|
||||
[:input.input-text
|
||||
{:type "password"
|
||||
:name "password-old"
|
||||
:class (fm/error-class form :password-old)
|
||||
:value (:password-old data "")
|
||||
:on-blur (fm/on-input-blur form)
|
||||
:on-change (fm/on-input-change form)
|
||||
:placeholder (tr "settings.password.old-password")}]
|
||||
[:& fm/error-input {:form form :field :password-old}]
|
||||
|
||||
[:input.input-text
|
||||
{:type "password"
|
||||
:name "password-1"
|
||||
:class (fm/error-class form :password-1)
|
||||
:value (:password-1 data "")
|
||||
:on-blur (fm/on-input-blur form)
|
||||
:on-change (fm/on-input-change form)
|
||||
:placeholder (tr "settings.password.new-password")}]
|
||||
[:& fm/error-input {:form form :field :password-1}]
|
||||
[:input.input-text
|
||||
{:type "password"
|
||||
:name "password-2"
|
||||
:class (fm/error-class form :password-2)
|
||||
:value (:password-2 data "")
|
||||
:on-blur (fm/on-input-blur form)
|
||||
:on-change (fm/on-input-change form)
|
||||
:placeholder (tr "settings.password.confirm-password")}]
|
||||
[:& fm/error-input {:form form :field :password-2}]
|
||||
[:input.btn-primary
|
||||
{:type "submit"
|
||||
:class (when-not (:valid form) "btn-disabled")
|
||||
:disabled (not (:valid form))
|
||||
:value (tr "settings.update-settings")}]]))
|
||||
|
||||
;; --- Password Page
|
||||
|
||||
(mx/defc password-page
|
||||
[]
|
||||
(mf/defc password-page
|
||||
[props]
|
||||
[:section.dashboard-content.user-settings
|
||||
[:section.user-settings-content
|
||||
(password-form)]])
|
||||
[:& password-form]]])
|
||||
|
|
|
|||
|
|
@ -41,10 +41,12 @@
|
|||
(prn "on-error" error form)
|
||||
(case (:code error)
|
||||
:uxbox.services.users/email-already-exists
|
||||
(swap! form assoc-in [:errors :email] "errors.api.form.email-already-exists")
|
||||
(swap! form assoc-in [:errors :email]
|
||||
{:message "errors.api.form.email-already-exists"})
|
||||
|
||||
:uxbox.services.users/username-already-exists
|
||||
(swap! form assoc-in [:errors :username] "errors.api.form.username-already-exists")))
|
||||
(swap! form assoc-in [:errors :username]
|
||||
{:message "errors.api.form.username-already-exists"})))
|
||||
|
||||
(defn- initial-data
|
||||
[]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue