fix(waitlist): improve signup form ergonomics

Author: goshatch

src/main/parts/handlers/pages.clj

@@ -38,7 +38,7 @@
          [:p
           [:strong "Parts"]
           " is being actively developed, and we would love to have your feedback! Please enter your email below to join the private beta test."]
-         (partials/waitlist-signup-form ".signup")]]]]
+         (partials/waitlist-signup-form)]]]]
      [:section.aboutus.container
       [:div.content
        [:h3

src/main/parts/handlers/waitlist.clj

@@ -12,27 +12,21 @@
   [email]
   (re-matches #".+@.+\..+" email))
 
-(defn- form-with-message
-  "Re-render signup form with a message"
-  [message]
-  (html [:p "Please enter your email below to join the private beta test."]
-        (partials/waitlist-signup-form ".signup")
-        [:div.error
-         [:p message]]))
-
 (defn signup
   "Register email address in private beta waitlist"
   [request]
   (let [email (get-in request [:form-params "email"])]
     (cond
       (or (nil? email) (str/blank? email))
       (-> (response/response
-           (form-with-message "Please don't forget your email address!"))
+           (html
+            (partials/waitlist-signup-form "Please don't forget your email address!")))
           (response/status 200))
 
       (not (valid-email? email))
       (-> (response/response
-           (form-with-message "Sorry, that's not a valid email address."))
+           (html
+            (partials/waitlist-signup-form "Sorry, that's not a valid email address.")))
           (response/status 200))
 
       :else

src/main/parts/views/partials.clj

@@ -74,19 +74,24 @@
 
 (defn waitlist-signup-form
   "Form for signing up for the waiting list"
-  [target]
-  [:div#signup-form
-   [:form {:hx-post "/waitlist-signup"
-           :hx-target target
-           :hx-swap "innerHTML"
-           :hx-on:submit "plausible('Waitlist Signup'); return true;"}
-    [:input {:type "email"
-             :id "email"
-             :name "email"
-             :placeholder "[email protected]"
-             :hx-on:focus "plausible('Email Field Focus'); return true;"}]
-    [:input {:type "hidden"
-             :id "__anti-forgery-token"
-             :name "__anti-forgery-token"
-             :value *anti-forgery-token*}]
-    [:input {:type "submit" :value "Sign me up!"}]]])
+  ([]
+   (waitlist-signup-form nil))
+  ([message]
+   [:div#signup-form
+    [:form {:hx-post "/waitlist-signup"
+            :hx-target "#signup-form"
+            :hx-swap "outerHTML"
+            :hx-on:submit "plausible('Waitlist Signup'); return true;"}
+     [:input {:type "email"
+              :id "email"
+              :name "email"
+              :placeholder "[email protected]"
+              :hx-on:focus "plausible('Email Field Focus'); return true;"}]
+     [:input {:type "hidden"
+              :id "__anti-forgery-token"
+              :name "__anti-forgery-token"
+              :value *anti-forgery-token*}]
+     [:input {:type "submit" :value "Sign me up!"}]]
+    (when message
+      [:div.error
+       [:p message]])]))