Improved errors.

src/DEMOAPP/core.cljs

@@ -3,13 +3,28 @@
             [clojure.spec.alpha :as s]
             [reagent.core :as reagent :refer [atom]]
             [reagent.session :as session]
+            [ajax.core :refer [GET, POST]]
             [reitit.frontend :as reitit]))
 
 ;;(enable-console-print!)
+(defonce form-errors (atom nil))
+(defonce form-title "GASP Sensor setup")
 (defonce form-data (atom {:device-id "" :wifi-ssid "" :wifi-key ""}))
+(defonce form-layout [{:name "server" :title "Server" :placeholder "127.0.0.1"
+                       :data form-data :validator "device-id-type"
+                       :error "Invalid server address"}
+                      {:name "device-id" :title "Device Unique ID" :placeholder "AAAA"
+                       :data form-data :validator "device-id-type"
+                       :error "Invalid identifier" :focus "true"}
+                      {:name "wifi-ssid" :title "WIFI SSID"
+                       :data form-data :validator "wifi-ssid-type"
+                       :error "Invalid SSID"}
+                      {:name "wifi-key" :title "WIFI Password"
+                       :data form-data :validator "wifi-key-type"
+                       :error "Invalid wifi password" :type "password"}])
 
-(def device-id-regex #"[A-Za-z0-9]{4}")
+(defonce device-id-regex #"[A-Za-z0-9]{4}")
-(def ssid-regex #"^[!#;].|[+\[\]\"\t\s].*$")
+(defonce ssid-regex #"^[!#;].|[+\[\]\"\t\s].*$")
 (s/def ::wifi-ssid-type (s/and string? #(re-matches ssid-regex %)))
 (s/def ::device-id-type (s/and string? #(re-matches device-id-regex %)))
 (s/def ::wifi-key-type string?)
@@ -18,7 +33,7 @@
 (def router
   (reitit/router
    [["/" :index]
-    ["/404" :about]])) 
+    ["/404" :about]]))
 
 ; link builder
 (defn path-for [route & [params]]
@@ -26,53 +41,62 @@
     (:path (reitit/match-by-name router route params))
     (:path (reitit/match-by-name router route))))
 
-
 (defn form-input-map [{:keys [name title placeholder data validator error focus type]}]
-  [:div.mt3.dim
+  [:div.mt3.dim {:key name}
    [:label.db.fw4.lh-copy.f6 {:for name} title]
    [:input#wifi-ssid.pa2.input-reset.ba.bg-near-white.w-100.measure.b--silver
-    {:type (or type "text") :name name :placeholder placeholder :autoFocus (or focus nil)
+    {:type (or type "text") :name name
+     :placeholder placeholder :autoFocus (or focus nil)
      :on-change #(swap! data assoc (keyword name) (-> % .-target .-value))
-     :value ((keyword name) @form-data)}]
+     :value ((keyword name) @data)
+     }]
    [:p (if (and (not-empty ((keyword name) @data))
                 (s/explain-data
                  (keyword 'DEMOAPP.core validator)
                  (:device-id @data)))
          error)]])
 
+(defn handle-failure [{:keys [status status-text response]}]
+  (case status
+    500 (do (reset! form-errors "Something bad happened submitting your data."))
+    401 (do (reset! form-errors "Not authorized."))
+    404 (do (reset! form-errors "Could not find device to submit data."))
+    (reset! form-errors (str (:msg response) (:msg response)))))
+
+(defn form-submit [data]
+  (POST "/submit"
+    {:params @data
+     :error-handler handle-failure
+     ;:response-format :json
+     :format :raw
+     ;:keywords? true
+     :handler (fn [response]
+                (swap! form-errors "success"))}))
+
 
 ; simple input form
+
+
 (defn config-form []
+  {:on-submit
+   (fn [e] (.preventDefault e)
+     (api/save-snippet @title @text))}
   [:article.black-80.db.tc.black.ba.w-100.bg-light-green.br2
-   [:form.ma3 {:action "sign-up_submit" :method "get" :accept-charset "utf-8"}
+   [:form.ma3 {:method "get" :accept-charset "utf-8"
+               :on-submit    (fn [e] (.preventDefault e) (form-submit form-data))}
     [:fieldset#sign_up.ba.b--transparent.ph0.mh0
-     [:legend.ph0.mh0.fw6 "Device Setup"]
+     [:legend.ph0.pb3.mh0.fw6 "Device Setup"]
-     (form-input-map {:name "server" :title "Server" :placeholder "127.0.0.1"
+     (if @form-errors
-                      :data form-data :validator "device-id-type"
+       [:div.flex.items-center.justify-center.pa3.bg-lightest-blue.navy
-                      :error "Invalid server address"})
+        [:i.fas.fa-exclamation-circle]
-     (form-input-map {:name "device-id" :title "Device Unique ID" :placeholder "AAAA"
+        [:span.lh-title.ml3 @form-errors]])
-                      :data form-data :validator "device-id-type"
+     (map form-input-map form-layout)]
-                      :error "Invalid identifier" :focus "true"})
-     (form-input-map {:name "wifi-ssid" :title "WIFI SSID" 
-                      :data form-data :validator "wifi-ssid-type"
-                      :error "Invalid SSID"})
-     (form-input-map {:name "wifi-ssid2" :title "WIFI SSID" 
-                      :data form-data :validator "wifi-ssid-type"
-                      :error "Invalid SSID"})
-     (form-input-map {:name "wifi-key" :title "WIFI Password" 
-                      :data form-data :validator "wifi-key-type"
-                      :error "Invalid wifi password" :type "password"})]
     [:div.mt3
      [:input.b.ph3.pv2.input-reset.ba.b--black.bg-transparent.grow.pointer.f6.br2
       {:type "submit" :value "Save"}]]]])
 
 (defn home-page []
-  [:div.w-35
+  (config-form))
-   [:a.athelas.f3.link.white-70.hover-white.no-underline.flex.items-center.pa3
-    {:href "/"}
-    [:h2
-     [:i.fas.fa-surprise.mr3] "GASP Sensor setup"]]
-   (config-form)])
 
 (defn success-page []
   [:div
@@ -92,11 +116,18 @@
     :index #'home-page
     :about #'about-page))
 
+; default page wrapper
 ; default page wrapper
 (defn current-page []
   (fn []
     (let [page (:current-page (session/get :route))]
-      [:div.bg-green.flex.justify-center.items-center.h-100 [page]])))
+      [:div.bg-green.flex.justify-center.items-center.h-100
+       [:div.w-25
+        [:a.athelas.f3.link.white-70.hover-white.no-underline.flex.items-center.pa3
+         {:href "/"}
+         [:h2
+          [:i.fas.fa-surprise.mr3] "GASP Sensor setup"]]
+        [page]]])))
 
 (defn startup []
   (accountant/configure-navigation!