From f493b47320894e0fcddc45dc5121ab4f45fd7bc8 Mon Sep 17 00:00:00 2001
From: KKlochko <KKlochko@protonmail.com>
Date: Fri, 19 Apr 2024 09:20:57 +0300
Subject: [PATCH] Add a validation for the create form.

---
 src/main/blog/handlers.cljs         | 48 +++++++++++++++++++++++++++++
 src/main/blog/server.cljs           | 14 +++++++++
 views/admin_panel.hbs               | 13 +++++---
 views/create_content_validation.hbs |  8 +++++
 views/create_title_validation.hbs   |  7 +++++
 5 files changed, 86 insertions(+), 4 deletions(-)
 create mode 100644 views/create_content_validation.hbs
 create mode 100644 views/create_title_validation.hbs

diff --git a/src/main/blog/handlers.cljs b/src/main/blog/handlers.cljs
index 10b7490..fbe0b4f 100644
--- a/src/main/blog/handlers.cljs
+++ b/src/main/blog/handlers.cljs
@@ -312,6 +312,54 @@
             (res/status 500)
             (res/send (ex-message err))))))))
 
+(defn htmx-create-title-validation-handler-factory
+  [client]
+  (fn [req res]
+    (let [channel (chan)
+          title   (.-title (.-body req))
+          content (.-content (.-body req))]
+      (go
+        (try
+          (let [error (cond
+                        (= (count title) 0)
+                        "Tittle must be nonempty!!!"
+
+                        :else
+                        nil)]
+            (res/status 200)
+            (.render res "create_title_validation"
+                     (-> {:error error
+                          :title title
+                          :layout false}
+                         (clj->js))))
+          (catch js/Error err
+            (res/status 500)
+            (res/send (ex-message err))))))))
+
+(defn htmx-create-content-validation-handler-factory
+  []
+  (fn [req res]
+    (let [channel (chan)
+          title   (.-title (.-body req))
+          content (.-content (.-body req))]
+      (go
+        (try
+          (let [error (cond
+                        (= (count content) 0)
+                        "Content must be nonempty!!!"
+
+                        :else
+                        nil)]
+            (res/status 200)
+            (.render res "create_content_validation"
+                     (-> {:error error
+                          :content content
+                          :layout false}
+                         (clj->js))))
+          (catch js/Error err
+            (res/status 500)
+            (res/send (ex-message err))))))))
+
 (defn htmx-create-article-handler-factory
   [client]
   (fn [req res]
diff --git a/src/main/blog/server.cljs b/src/main/blog/server.cljs
index f4a880e..30508ad 100644
--- a/src/main/blog/server.cljs
+++ b/src/main/blog/server.cljs
@@ -111,6 +111,20 @@
   (. app post "/htmx/search/articles/"
      (handlers/htmx-search-articles-handler-factory client))
 
+  (. app post "/htmx/validation/create-title/"
+     handlers/is-user-authorized
+     (handlers/htmx-create-title-validation-handler-factory client))
+
+  (. app use "/htmx/validation/create-title/"
+     (handlers/user-not-authorized-factory))
+
+  (. app post "/htmx/validation/create-content/"
+     handlers/is-user-authorized
+     (handlers/htmx-create-content-validation-handler-factory))
+
+  (. app use "/htmx/validation/create-content/"
+     (handlers/user-not-authorized-factory))
+
   (. app post "/htmx/articles/"
      handlers/is-user-authorized
      (handlers/htmx-create-article-handler-factory client))
diff --git a/views/admin_panel.hbs b/views/admin_panel.hbs
index 8e39d4b..0fc6f09 100644
--- a/views/admin_panel.hbs
+++ b/views/admin_panel.hbs
@@ -131,15 +131,20 @@
           </button>
         </div>
         <!-- Modal body -->
-        <form>
+        <form x-data="{ disabled: true }">
           <div class="grid gap-4 mb-4 sm:grid-cols-1">
-            <div>
+            <div hx-target="this" hx-swap="outerHTML">
               <label for="title" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Title</label>
-              <input type="text" name="title" id="title" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#2563eb] focus:border-[#2563eb] block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-[#3b82f6] dark:focus:border-[#3b82f6]" placeholder="Type article title" required="">
+              <input type="text" name="title" id="title" hx-post="/htmx/validation/create-title/" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#2563eb] focus:border-[#2563eb] block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-[#3b82f6] dark:focus:border-[#3b82f6]" placeholder="Type article title" required="" aria-invalid="true">
+            </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="content" name="content" hx-post="/htmx/validation/create-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 article here" aria-invalid="true"></textarea>
             </div>
-            <div><label for="content" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Content</label><textarea id="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 article here"></textarea></div>
           </div>
           <button type="submit"
+            x-on:htmx:load.window="if(htmx.find('#title').parentElement.innerHTML.toString().match(new RegExp('aria-invalid'))){disabled=true;}else{disabled=false;}"
+            x-bind:disabled="disabled"
             hx-post="/htmx/articles/"
 	    hx-target="#articles"
 	    hx-swap="afterbegin"
diff --git a/views/create_content_validation.hbs b/views/create_content_validation.hbs
new file mode 100644
index 0000000..9685d18
--- /dev/null
+++ b/views/create_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="content" name="content" hx-post="/htmx/validation/create-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 article here"
+  {{#if error}}aria-invalid="true"{{/if}}>{{ content }}</textarea>
+  {{#if error}}
+    <div class='text-sm font-bold leading-tight tracking-tight text-red-600 mt-2'>{{ error }}</div>
+  {{/if}}
+</div>
diff --git a/views/create_title_validation.hbs b/views/create_title_validation.hbs
new file mode 100644
index 0000000..967c8f3
--- /dev/null
+++ b/views/create_title_validation.hbs
@@ -0,0 +1,7 @@
+<div hx-target="this" hx-swap="outerHTML">
+  <label for="title" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Title</label>
+  <input type="text" name="title" id="title" hx-post="/htmx/validation/create-title/" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#2563eb] focus:border-[#2563eb] block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-[#3b82f6] dark:focus:border-[#3b82f6]" placeholder="Type article title" required="" {{#if error}}aria-invalid="true"{{/if}} value="{{ title }}">
+  {{#if error}}
+    <div class='text-sm font-bold leading-tight tracking-tight text-red-600 mt-2'>{{ error }}</div>
+  {{/if}}
+</div>