🚧 More work on forms refactoring.

frontend/src/uxbox/main/ui/auth/login.cljs

@@ -8,6 +8,7 @@
 (ns uxbox.main.ui.auth.login
   (:require
    [rumext.alpha :as mf]
+   [struct.core :as s]
    [uxbox.builtins.icons :as i]
    [uxbox.config :as cfg]
    [uxbox.main.data.auth :as da]
@@ -18,9 +19,9 @@
    [uxbox.util.i18n :refer [tr]]
    [uxbox.util.router :as rt]))
 
-(def login-form-spec
-  {:username [fm/required fm/string fm/non-empty-string]
-   :password [fm/required fm/string fm/non-empty-string]})
+(s/defs login-form-spec
+  {:username [fm/required fm/string]
+   :password [fm/required fm/string]})
 
 (defn- on-submit
   [event form]
@@ -41,8 +42,7 @@
 
 (mf/defc login-form
   []
-  (let [{:keys [data] :as form} (fm/use-form {:initial {}
-                                              :spec login-form-spec})]
+  (let [{:keys [data] :as form} (fm/use-form {:initial {} :spec login-form-spec})]
     [:form {:on-submit #(on-submit % form)}
      [:div.login-content
       (when cfg/isdemo
@@ -52,25 +52,26 @@
        {:name "username"
         :tab-index "2"
         :value (:username data "")
-        :on-blur (fm/on-input-blur form)
-        :on-change (fm/on-input-change form)
+        :on-blur (fm/on-input-blur form :username)
+        :on-change (fm/on-input-change form :username)
         :placeholder (tr "auth.email-or-username")
         :type "text"}]
       [:input.input-text
        {:name "password"
         :tab-index "3"
         :value (:password data "")
-        :on-blur (fm/on-input-blur form)
-        :on-change (fm/on-input-change form)
+        :on-blur (fm/on-input-blur form :password)
+        :on-change (fm/on-input-change form :password)
         :placeholder (tr "auth.password")
         :type "password"}]
       [:input.btn-primary
        {:name "login"
         :tab-index "4"
-        :class (when (:errors form) "btn-disabled")
-        :disabled (boolean (:errors form))
+        :class (when-not (:valid form) "btn-disabled")
+        :disabled (not (:valid form))
         :value (tr "auth.signin")
         :type "submit"}]
+
       [:div.login-links
        [:a {:on-click #(st/emit! (rt/nav :auth/recovery-request))
             :tab-index "5"}

frontend/src/uxbox/main/ui/dashboard/projects_forms.cljs

@@ -18,7 +18,7 @@
    [uxbox.util.i18n :as t :refer [tr]]))
 
 (def project-form-spec
-  {:name [fm/required fm/string fm/non-empty-string]
+  {:name [fm/required fm/string]
    :width [fm/required fm/number-str]
    :height [fm/required fm/number-str]})
 
@@ -51,8 +51,8 @@
        :type "text"
        :name "name"
        :value (:name data)
-       :on-blur (fm/on-input-blur form)
-       :on-change (fm/on-input-change form)
+       :on-blur (fm/on-input-blur form :name)
+       :on-change (fm/on-input-change form :name)
        :auto-focus true}]
      [:div.project-size
       [:div.input-element.pixels
@@ -63,8 +63,8 @@
          :type "number"
          :min 0
          :max 5000
-         :on-blur (fm/on-input-blur form)
-         :on-change (fm/on-input-change form)
+         :on-blur (fm/on-input-blur form :width)
+         :on-change (fm/on-input-change form :width)
          :value (:width data)}]]
       [:a.toggle-layout {:on-click #(swap-size % form)} i/toggle]
       [:div.input-element.pixels
@@ -75,8 +75,8 @@
          :name "height"
          :min 0
          :max 5000
-         :on-blur (fm/on-input-blur form)
-         :on-change (fm/on-input-change form)
+         :on-blur (fm/on-input-blur form :height)
+         :on-change (fm/on-input-change form :height)
          :value (:height data)}]]]
 
      ;; Submit

frontend/src/uxbox/main/ui/settings/password.cljs

@@ -2,15 +2,13 @@
 ;; License, v. 2.0. If a copy of the MPL was not distributed with this
 ;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
 ;;
-;; Copyright (c) 2016-2017 Andrey Antukh <niwi@niwi.nz>
-;; Copyright (c) 2016-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+;; Copyright (c) 2016-2019 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2016-2019 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.settings.password
   (:require
-   [cuerdas.core :as str]
-   [lentes.core :as l]
    [rumext.alpha :as mf]
-   [struct.core :as stt]
+   [struct.core :as s]
    [uxbox.builtins.icons :as i]
    [uxbox.main.data.users :as udu]
    [uxbox.main.store :as st]
@@ -19,79 +17,65 @@
    [uxbox.util.i18n :refer [tr]]
    [uxbox.util.messages :as um]))
 
-(stt/defs password-form-spec
-  {:password-1 [stt/required stt/string]
-   :password-2 [stt/required stt/string]
-   :password-old [stt/required stt/string]})
-
 (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))))
+  (letfn [(on-error [error]
+            (case (:code error)
+              :uxbox.services.users/old-password-not-match
+              (swap! form assoc-in [:errors :password-old]
+                     {:type ::api :message "settings.password.wrong-old-password"})
 
+              :else (throw (ex-info "unexpected" {:error error}))))
 
+          (on-success [_]
+            (st/emit! (um/info (tr "settings.password.password-saved"))))]
 
+    (dom/prevent-default event)
+    (let [data (:clean-data form)
+          opts {:on-success on-success
+                :on-error on-error}]
+      (st/emit! (udu/update-password data opts)))))
 
-  ;; #_(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)))]
-
-
+(s/defs password-form-spec
+  {:password-1 [s/required s/string]
+   :password-2 [s/required s/string [s/identical-to :password-1]]
+   :password-old [s/required s/string]})
 
 (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)
+       :class (fm/error-class form :password-old)
+       :on-blur (fm/on-input-blur form :password-old)
+       :on-change (fm/on-input-change form :password-old)
        :placeholder (tr "settings.password.old-password")}]
-     [:& fm/error-input {:form  form :field :password-old}]
+     [:& fm/field-error {: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)
+       :class (fm/error-class form :password-1)
+       :on-blur (fm/on-input-blur form :password-1)
+       :on-change (fm/on-input-change form :password-1)
        :placeholder (tr "settings.password.new-password")}]
-     [:& fm/error-input {:form form :field :password-1}]
+     [:& fm/field-error {: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)
+       :class (fm/error-class form :password-2)
+       :on-blur (fm/on-input-blur form :password-2)
+       :on-change (fm/on-input-change form :password-2)
        :placeholder (tr "settings.password.confirm-password")}]
-     [:& fm/error-input {:form  form :field :password-2}]
+     [:& fm/field-error {:form form :field :password-2}]
+
      [:input.btn-primary
       {:type "submit"
        :class (when-not (:valid form) "btn-disabled")

frontend/src/uxbox/main/ui/settings/profile.cljs

@@ -7,15 +7,15 @@
 
 (ns uxbox.main.ui.settings.profile
   (:require
-   [cljs.spec.alpha :as s]
    [cuerdas.core :as str]
    [lentes.core :as l]
    [rumext.alpha :as mf]
+   [struct.core :as s]
    [uxbox.builtins.icons :as i]
    [uxbox.main.data.users :as udu]
    [uxbox.main.store :as st]
-   [uxbox.util.dom :as dom]
    [uxbox.util.data :refer [read-string]]
+   [uxbox.util.dom :as dom]
    [uxbox.util.forms :as fm]
    [uxbox.util.i18n :as i18n :refer [tr]]
    [uxbox.util.interop :refer [iterable->seq]]))
@@ -30,23 +30,25 @@
   (-> (l/key :profile)
       (l/derive st/state)))
 
-(def profile-form-spec
-  {:fullname [fm/required fm/string fm/non-empty-string]
-   :username [fm/required fm/string fm/non-empty-string]
+(s/defs profile-form-spec
+  {:fullname [fm/required fm/string]
+   :username [fm/required fm/string]
    :email    [fm/required fm/email]
    :language [fm/required fm/string]})
 
 (defn- on-error
-  [error {:keys [errors] :as form}]
+  [error form]
   (prn "on-error" error form)
   (case (:code error)
     :uxbox.services.users/email-already-exists
     (swap! form assoc-in [:errors :email]
-           {:message "errors.api.form.email-already-exists"})
+           {:type ::api
+            :message "errors.api.form.email-already-exists"})
 
     :uxbox.services.users/username-already-exists
     (swap! form assoc-in [:errors :username]
-           {:message "errors.api.form.username-already-exists"})))
+           {:type ::api
+            :message "errors.api.form.username-already-exists"})))
 
 (defn- initial-data
   []
@@ -66,39 +68,53 @@
   [props]
   (let [{:keys [data] :as form} (fm/use-form {:initial initial-data
                                               :spec profile-form-spec})]
+    (prn "profile-form" form)
     [:form.profile-form {:on-submit #(on-submit % form)}
      [:span.user-settings-label (tr "settings.profile.section-basic-data")]
      [:input.input-text
       {:type "text"
        :name "fullname"
-       :on-blur (fm/on-input-blur form)
-       :on-change (fm/on-input-change form)
+       :class (fm/error-class form :fullname)
+       :on-blur (fm/on-input-blur form :fullname)
+       :on-change (fm/on-input-change form :fullname)
        :value (:fullname data "")
        :placeholder (tr "settings.profile.your-name")}]
-     [:& fm/error-input {:form form :field :fullname}]
+
+     [:& fm/field-error {:form form
+                         :type #{::api}
+                         :field :fullname}]
      [:input.input-text
       {:type "text"
        :name "username"
-       :on-blur (fm/on-input-blur form)
-       :on-change (fm/on-input-change form)
+       :class (fm/error-class form :username)
+       :on-blur (fm/on-input-blur form :username)
+       :on-change (fm/on-input-change form :username)
        :value (:username data "")
        :placeholder (tr "settings.profile.your-username")}]
-     [:& fm/error-input {:form form :field :username}]
+
+     [:& fm/field-error {:form form
+                         :type #{::api}
+                         :field :username}]
 
      [:input.input-text
       {:type "email"
        :name "email"
-       :on-blur (fm/on-input-blur form)
-       :on-change (fm/on-input-change form)
+       :class (fm/error-class form :email)
+       :on-blur (fm/on-input-blur form :email)
+       :on-change (fm/on-input-change form :email)
        :value (:email data "")
        :placeholder (tr "settings.profile.your-email")}]
-     [:& fm/error-input {:form form :field :email}]
+
+     [:& fm/field-error {:form form
+                         :type #{::api}
+                         :field :email}]
 
      [:span.user-settings-label (tr "settings.profile.section-i18n-data")]
      [:select.input-select {:value (:language data)
                             :name "language"
-                            :on-blur (fm/on-input-blur form)
-                            :on-change (fm/on-input-change form)}
+                            :class (fm/error-class form :language)
+                            :on-blur (fm/on-input-blur form :language)
+                            :on-change (fm/on-input-change form :language)}
       [:option {:value "en"} "English"]
       [:option {:value "fr"} "Français"]]
 

frontend/src/uxbox/main/ui/workspace/sidebar/sitemap_forms.cljs

@@ -20,7 +20,7 @@
 (def page-form-spec
   {:id [fm/uuid]
    :project [fm/uuid]
-   :name [fm/required fm/string fm/non-empty-string]
+   :name [fm/required fm/string]
    :width [fm/required fm/number-str]
    :height [fm/required fm/number-str]})
 
@@ -59,8 +59,8 @@
       {:placeholder "Page name"
        :type "text"
        :name "name"
-       :on-blur (fm/on-input-blur form)
-       :on-change (fm/on-input-change form)
+       :on-blur (fm/on-input-blur form :name)
+       :on-change (fm/on-input-change form :name)
        :value (:name data)
        :auto-focus true}]
      [:div.project-size
@@ -72,8 +72,8 @@
          :type "number"
          :min 0
          :max 5000
-         :on-blur (fm/on-input-blur form)
-         :on-change (fm/on-input-change form)
+         :on-blur (fm/on-input-blur form :width)
+         :on-change (fm/on-input-change form :width)
          :value (:width data)}]]
       [:a.toggle-layout {:on-click #(swap-size % form)} i/toggle]
       [:div.input-element.pixels
@@ -84,8 +84,8 @@
          :type "number"
          :min 0
          :max 5000
-         :on-blur (fm/on-input-blur form)
-         :on-change (fm/on-input-change form)
+         :on-blur (fm/on-input-blur form :height)
+         :on-change (fm/on-input-change form :height)
          :value (:height data)}]]]
      [:input.btn-primary
       {:value "Go go go!"