KKlochko/simple-cljs-blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a validation for the create form.

Browse Source
This commit is contained in:
KKlochko
2024-04-19 09:20:57 +03:00
parent 634f7e41e2
commit f493b47320
5 changed files with 86 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/blog/handlers.cljs
+48
View File
@@ -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]
src/main/blog/server.cljs
+14
View File
@@ -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))
views/admin_panel.hbs
+9 -4
View File
@@ -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"
views/create_content_validation.hbs
+8
View File
@@ -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>
views/create_title_validation.hbs
+7
View File
@@ -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>