Chewing_Bever/otter
1
0
Fork 0
Code Issues 32 Projects Releases 4 Packages 2 Activity

feat(web): add dialog to handle HTTP request errors

Browse source
This commit is contained in:
Jef Roosens 2026-07-01 21:42:03 +02:00
parent 37253c31dd
commit d1cccba421
Signed by: Jef Roosens
GPG key ID: 21FD3D77D56BAF49
1 changed files with 34 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

35
otter/src/web/templates/base.html
View file

@ -12,7 +12,7 @@ a:hover {
}
</style>
</head>
<body>
<body hx-on::response-error="showErrorDialog(event)">
<main>
<nav>
<ul>
@ -37,5 +37,38 @@ a:hover {
{{ inner | safe }}
</article>
</main>
<dialog id="error-dialog">
<article>
<header>
<button aria-label="Close" rel="prev" onclick="this.closest('dialog').close()"></button>
<h5>Failed web request</h5>
</header>
<p id="error-message">Failed web request</p>
</article>
</dialog>
<script>
function showErrorDialog(evt) {
// TODO exclude certain error codes, e.g. 400 bad request
const xhr = evt.detail.xhr;
const errorMessage = document.getElementById('error-message');
let message = 'An unexpected error occurred.';
if (xhr.status === 401) {
message = 'You need to log in.';
} else if (xhr.status === 403) {
message = 'Access denied.';
} else if (xhr.status === 404) {
message = 'Resource not found.';
} else if (xhr.status === 500) {
message = 'Server error occurred.';
}
errorMessage.textContent = message;
document.getElementById('error-dialog').showModal();
}
</script>
</body>
</html>