log101/log101-dot-dev
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add error messages to forms

Browse Source
This commit is contained in:
log101 2024-06-23 13:11:06 +03:00
parent 3b59273c12
commit 709c97acfb
2 changed files with 84 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/CommentForm.astro
View File

@ -26,7 +26,7 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
hx-post=`${backendHost}/api/blog/comments`
hx-target="#comments-container"
hx-swap="afterbegin"
hx-on::after-request="document.getElementById('no-comments-text')?.remove();this.reset()">
hx-on:htmx:after-request="document.getElementById('no-comments-text')?.remove();this.reset()">
<div class="p-1 flex flex-col flex-end items-end gap-3">
<textarea
class="textarea py-2 px-3 w-full box-border"
@ -46,8 +46,45 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
>Yorum Yap</button
>
</div>
<div id="comment-form-error-container" class="mt-4">
<p id="comment-form-error-text" class="text-red-600"></p>
</div>
</form>
<script>
function clearNoCommentText() {}
function showError(errorString: string) {
const errorTextElement = document.getElementById("comment-form-error-text");
if (errorTextElement) {
errorTextElement.innerText = errorString;
}
setTimeout(() => {
if (errorTextElement) {
errorTextElement.innerText = "";
}
}, 5000);
}
const formElement = document.getElementById("comment-form");
if (formElement) {
formElement.addEventListener(
"htmx:sendError" as keyof HTMLElementEventMap,
() => {
showError(
"Sunucuya ulaşılamadığı için yorumunuz kaydedilemedi, biraz bekledikten sonra tekrar deneyebilirsiniz.",
);
},
);
formElement.addEventListener(
"htmx:responseError" as keyof HTMLElementEventMap,
() => {
showError(
"Suncudan kaynaklı bir hatadan dolayı yorumunuz kaydedilemedi, biraz bekledikten sonra tekrar deneyebilirsiniz.",
);
},
);
}
</script>

45
src/components/EmojiReactionForm.astro
View File

@ -15,6 +15,7 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
</style>
<form
id="emoji-reaction-form"
hx-post=`${backendHost}/api/blog/forms/emoji`
hx-target="#reaction-buttons"
hx-trigger="submit delay:0.5s">
@ -45,4 +46,48 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
</button>
</div>
</div>
<div id="emoji-form-error-container" class="mt-4">
<p id="emoji-form-error-text" class="text-red-600"></p>
</div>
</form>
<script>
function showError(errorString: string) {
const errorTextElement = document.getElementById("emoji-form-error-text");
if (errorTextElement) {
errorTextElement.innerText = errorString;
}
setTimeout(() => {
if (errorTextElement) {
errorTextElement.innerText = "";
}
}, 5000);
}
const formElement = document.getElementById("emoji-reaction-form");
if (formElement) {
formElement.addEventListener(
"htmx:sendError" as keyof HTMLElementEventMap,
(event) => {
// @ts-ignore detail attribute is added by htmx
if (event.detail.elt.id != "reaction-buttons") {
showError(
"Sunucuya ulaşılamadığı için tepkiniz kaydedilemedi, biraz bekledikten sonra tekrar deneyebilirsiniz.",
);
}
},
);
formElement.addEventListener(
"htmx:responseError" as keyof HTMLElementEventMap,
() => {
showError(
"Sunucudan kaynaklanan bir hatadan dolayı tepkiniz kaydedilemedi, biraz bekledikten sonra tekrar deneyebilirsiniz.",
);
},
);
}
</script>