Add a validation for the about form in the admin panel.

src/main/blog/handlers.cljs

@@ -258,6 +258,29 @@
             (res/status 500)
             (res/send (ex-message err))))))))
 
+(defn htmx-about-validation-handler-factory
+  []
+  (fn [req res]
+    (let [channel (chan)
+          about-content (.-content (.-body req))]
+      (go
+        (try
+          (let [error (cond
+                        (= (count about-content) 0)
+                        "Content must nonempty!!!"
+
+                        :else
+                        nil)]
+            (res/status 200)
+            (.render res "about_content_validation"
+                     (-> {:error error
+                          :about-content about-content
+                          :layout false}
+                         (clj->js))))
+          (catch js/Error err
+            (res/status 500)
+            (res/send (ex-message err))))))))
+
 (defn htmx-update-about-handler-factory
   [client]
   (fn [req res]

src/main/blog/server.cljs

@@ -94,6 +94,13 @@
   (. app use "/admin"
      (handlers/user-not-authorized-factory))
 
+  (. app post "/htmx/validation/about/"
+     handlers/is-user-authorized
+     (handlers/htmx-about-validation-handler-factory))
+
+  (. app use "/htmx/validation/about/"
+     (handlers/user-not-authorized-factory))
+
   (. app patch "/htmx/about/"
      handlers/is-user-authorized
      (handlers/htmx-update-about-handler-factory client))

views/about_content_validation.hbs

@@ -0,0 +1,8 @@
+<div hx-target="this" hx-swap="outerHTML">
+  <label for="content" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Content</label>
+  <textarea id="about-content" name="content" hx-post="/htmx/validation/about/" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-[#3b82f6] focus:border-[#3b82f6] dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-[#3b82f6] dark:focus:border-[#3b82f6]" placeholder="Write about you and your blog here"
+  {{#if error}}aria-invalid="true"{{/if}}>{{ about-content }}</textarea>
+  {{#if error}}
+    <div class='text-sm font-bold leading-tight tracking-tight text-red-600 mt-2'>{{ error }}</div>
+  {{/if}}
+</div>

views/admin_panel.hbs

@@ -16,9 +16,9 @@
         <!-- form -->
         <form class="p-4" x-show="show">
           <div class="grid gap-4 mb-4 sm:grid-cols-1">
-            <div>
+            <div hx-target="this" hx-swap="outerHTML">
               <label for="content" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Content</label>
-              <textarea id="about-content" name="content" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-[#3b82f6] focus:border-[#3b82f6] dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-[#3b82f6] dark:focus:border-[#3b82f6]" placeholder="Write about you and your blog here">{{ about-content }}</textarea>
+              <textarea id="about-content" name="content" hx-post="/htmx/validation/about/" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-[#3b82f6] focus:border-[#3b82f6] dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-[#3b82f6] dark:focus:border-[#3b82f6]" placeholder="Write about you and your blog here">{{ about-content }}</textarea>
             </div>
           </div>
           <button type="submit" hx-patch="/htmx/about/" hx-swap="none" class="text-white inline-flex items-center bg-[#1d4ed8] hover:bg-[#1e40af] focus:ring-4 focus:outline-none focus:ring-[#93c5fd] font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-[#2563eb] dark:hover:bg-[#1d4ed8] dark:focus:ring-[#1e40af]">