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

Compare commits

base: Chewing_Bever:37253c31dde435dbafa7da473356e210866ef751
Branches Tags
Chewing_Bever:main
Chewing_Bever:feat/creating-users
Chewing_Bever:signup-links
Chewing_Bever:episode-actions
Chewing_Bever:0.3.0
Chewing_Bever:0.2.1
Chewing_Bever:0.2.0
Chewing_Bever:0.1.0
...
compare: Chewing_Bever:8d59462f0e6fc16d4b4e64ccf494e16c19900f79
Branches Tags
Chewing_Bever:feat/creating-users
Chewing_Bever:main
Chewing_Bever:signup-links
Chewing_Bever:episode-actions
Chewing_Bever:0.3.0
Chewing_Bever:0.2.1
Chewing_Bever:0.2.0
Chewing_Bever:0.1.0

2 commits
37253c31dd ... 8d59462f0e

Author SHA1 Message Date
Jef Roosens
8d59462f0e
wip create user dialog 2026-07-01 21:42:38 +02:00
Jef Roosens
d1cccba421
feat(web): add dialog to handle HTTP request errors 2026-07-01 21:42:17 +02:00
2 changed files with 88 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>

54
otter/src/web/templates/views/administration/users.html
View file

@ -2,6 +2,10 @@
{% block inner %}
<h3>Users</h3>
<button
onclick="document.getElementById('create-user-form').reset(); document.getElementById('create-user-modal').showModal()"
id="create-user">Create new user</button>
<input
type="text" id="username" name="username"
hx-get="/administration/users"
@ -48,4 +52,54 @@
{% endif %}
</tbody>
</table>
<dialog id="create-user-modal">
<article>
<header>
<button
aria-label="Close"
rel="prev"
onclick="document.getElementById('create-user-modal').close()"
class="close-button"></button>
<h5>Create User</h5>
</header>
<div class="content">
<form id="create-user-form">
<fieldset>
<label>
Username
<input name="username"
placeholder="Username"
/>
</label>
<label>
Admin
<input name="admin"
type="checkbox"
/>
</label>
<label>
Password
<input type="password"
name="password"
placeholder="Password"
/>
</label>
<label>
Confirm password
<input type="password"
name="password-confirm"
placeholder="Password"
/>
</label>
</fieldset>
<input type="submit"
value="Create user"
/>
</form>
</div>
</article>
</dialog>
{% endblock %}